reading-notes

Code Fellows 201

Day 04 Notes

Home

Reading

Learn HTML

Creating Hyperlinks

To create a basic link, we wrap text or other content inside what element?

• A basic link is created by wrapping the text or other content, see Block level links, inside an <a> element and using the href attribute, also known as a Hypertext Reference, or target, that contains the web address.

The href attribute contains what information?

• also known as a Hypertext Reference, or target, that contains the web address.

What are some ways we can ensure links on our pages are accessible to all readers?

• Use clear link wording
• Don’t repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.
• Don’t say “link” or “links to” in the link text — it’s just noise. Screen readers tell people there’s a link. Visual users will also know there’s a link, because links are generally styled in a different color and underlined (this convention generally shouldn’t be broken, as users are used to it).
• Keep your link text as short as possible — this is helpful because screen readers need to interpret the entire link text.
• Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screen reader users, if there’s a list of links out of context that are labeled “click here”, “click here”, “click here”.

CSS Layout

CSS Layout: Normal Flow CSS Layout: Positioning

What is meant by “normal flow”?

• the way that webpage elements lay themselves out if you haven’t changed their layout.

What are a few differences between block-level and inline elements?

• By default, a block level element’s content fills the available inline space of the parent element containing it and grows along the block dimension to accommodate its content. The size of Inline elements is just the size of their content. You can’t set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element (e.g., with display: block; or display: inline-block;, which mixes characteristics from both).

• That explains how elements are structured individually, but how about the way they’re structured when they interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser’s viewport. By default, block-level elements are laid out in the block flow direction, which is based on the parent’s writing mode (initial: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that’s been specified. In English, for example, (or any other horizontal, top to bottom writing mode) block-level elements are laid out vertically.

• Inline elements behave differently. They don’t appear on new lines; instead, they all sit on the same line along with any adjacent (or wrapped) text content as long as there is space for them to do so inside the width of the parent block level element. If there isn’t space, then the overflowing content will move down to a new line.

• If two vertically adjacent elements both have a margin set on them and their margins touch, the larger of the two margins remains and the smaller one disappears. This is known as margin collapsing. Collapsing margins is only relevant in the vertical direction.

STATIC positioning is the default for every html element.

Name a few advantages to using absolute positioning on an element.

• An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else. This is very useful: it means that we can create isolated UI features that don’t interfere with the layout of other elements on the page. For example, popup information boxes, control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on.

What is a key difference between fixed positioning and absolute positioning?

• whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor (the initial containing block if there isn’t one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport. (An exception to this occurs if one of the element’s ancestors is a fixed containing block because its transform property has a value other than none.) This means that you can create useful UI items that are fixed in place, like persistent navigation menus that are always visible no matter how much the page scrolls.

Learn JS

Functions – Reusable Blocks of Code

Describe the difference between a function declaration and a function invocation.

• declaration is the definition or creation of the function
• invocation is actually running the function as defined

What is the difference between a parameter and an argument?

• parameter means the variable or data included when invoking a function
• argument means the variable required for the function to runa as defined in the function declaration

Miscellaneous

6 Reasons for Pair Programming

Pick 2 benefits to pair programming and reflect on how these benefits could help you on your coding journey.

• Greater efficiency It is a common misconception that pair programming takes a lot longer and is less efficient. In reality, when two people focus on the same code base, it is easier to catch mistakes in the making. Research indicates that pair programing takes slightly longer, but produces higher-quality code that doesn’t require later effort in troubleshooting and debugging (let alone exposing users to a broken product). So, in the long-run, it’s often actually more efficient than two people working on separate features. When coming up with ideas and discussing solutions out loud, two programmers may come to a solution faster than one programmer on their own. Also, when the pair is stuck, both programmers can research the problem and reach a solution faster. Researches also identified pairing enhances technical skills, team communication, and even enjoyability of coding in the workplace.
• Learning from fellow students Everyone has a different approach to problem solving; working with a teammate can expose developers to techniques they otherwise would not have thought of. If one developer has a unique approach to a specific problem, pair programming exposes the other developer to a new solution. Often times, the developers in a pairing have different skill sets. If one programmer is more experienced in a certain skill, they can teach a student who is less familiar with that area. The less experienced developer benefits from the experienced developer’s knowledge and guidance, and the latter benefits from explaining the topic in their own words, further solidifying their own understanding.