Blog Post 8
- Describe one thing you learned this week.
2. Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
Putting <link>s in the head is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick "first meaningful paint" timing. This progressive rendering is a category optimization sites are measured in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which can shows a webpage with no styling applied.
Placing <script>s just before </body>
<script>s block HTML parsing while they are being downloaded and executed. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
An exception for positioning of <script>s at the bottom is when your script contains document.write(), but these days it's not a good practice to use document.write(). Also, placing <script>s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. This ensures your code that needs to manipulate DOM elements will not throw and error and halt the entire script. If you need to put <script> in the <head>, use the deferattribute, which will achieve the same effect of downloading and running the script only after the HTML is parsed.
3. Consider HTML5 as an open web platform. What are the building blocks of HTML5?
- Semantics — Allowing you to describe more precisely what your content is.
- Connectivity — Allowing you to communicate with the server in new and innovative ways.
- Offline and storage — Allowing webpages to store data on the client-side locally and operate offline more efficiently.
- Multimedia — Making video and audio first-class citizens in the Open Web.
- 2D/3D graphics and effects — Allowing a much more diverse range of presentation options.
- Performance and integration — Providing greater speed optimization and better usage of computer hardware.
- Device access — Allowing for the usage of various input and output devices.
- Styling — Letting authors write more sophisticated themes.
4. Explain some of the pros and cons for CSS animations versus JavaScript animations.
5. Can you describe the difference between progressive enhancement and graceful degradation?
Progressive enhancement refers to a feature of your web site that enhances the experience for browsers that support it, but has no impact if your browser does not. … On the flip side, graceful degradation takes that modern feature and acts as if it is the default, but will not completely break the older browser.
6. What’s the difference between the “nth-of-type()” and “nth-child()” selectors?
The nth-child() and nth-of-type() selectors are “structural” pseudo-classes, which are classes that allow us to select elements based on information within the document tree that cannot typically be represented by other simple selectors.
In the case of nth-child() and nth-of-type(), the extra information is the element’s position in the document tree in relation to its parent and siblings. Although these two pseudo-classes are very similar, they work in fundamentally different ways.
7. What is CSS selector specificity and how does it work?
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
8. What resources do you use to learn about the latest in front end development and design?
There are numerous resources for learning frontend development. Some of the online resources that I prefer are:
- Thinkful
- CodeAcademy
- Treehouse
- https://developer.mozilla.org/en... for a basic HTML reference
- http://diveintohtml5.info for learning HTML5
- http://meyerweb.com/eric/css for CSS
- http://css-tricks.com for CSS
- https://jquery.com for jQuery
- https://developer.mozilla.org/en... for JavaScript
- http://stackoverflow.com for all technologies
