Wednesday, August 14, 2019

Lazy Loading Images and Iframes with the Google Chrome Browser

Lazy loading is a term that describes delaying the loading of  below-the-fold images until the web page visitor scrolls down the page to them. The major benefits are quicker load times, less bandwidth, and reduced memory usage. Until this announcement by Chrome, developers needed Javascript event handlers create this effect.

The latest version of Chrome browser (Chrome 76) will support native lazy loading, by implementing the new HTML loading attribute for img and iframe elements. 
Values for the loading attribute are:
  • auto (default browser loading)
  • lazy (defer loading the resource until it reaches a calculated distance from the viewport)
  • eager  (load the resource immediately)
Here’s an HTML example of adding lazing loading to the img element:
HTML img ellement with loading="lazy" attribute
HTML img element with the loading attribute
Although not yet part of an official W3C HTML5 Recommendation, the loading attribute is in the process of being added to the HTML5 standard and is documented at https://whatpr.org/html/3752/urls-and-fetching.html#lazy-loading-attributes. Keep in mind that at this time only the Chrome browser supports native lazy loading and other browsers will ignore the loading attribute. 

Monday, April 22, 2019

An Event Apart Presentation by Jen Simmons

Check out this excellent presentation by Jen Simmons at An Event Apart: "Everything You Know About Web Design Just Changed"
You will see an  an overview of how layout has changed in stages since the beginning of the Web, as folks got new ideas, implemented them, found issues, and then tried new ideas.... a process we are still going through today... Simmons calls today's era of Grid and Flexbox layout "Intrinsic Web Design" #webdesign #layout #intrinsicwebdesign

Thursday, January 31, 2019

10 Skills You Need to Land a Job as a Front-End Developer

The Web Development & Design Foundations with HTML5 and Basics of Web Design: HTML5 & CSS textbooks get you started on the skills you need to become a front-end web developer....

10 Skills Every Front End Developer Needs





Graphic courtesy of Skillcrush.com

Saturday, January 05, 2019

New 5th Edition! Basics of Web Design: HTML5 & CSS

My new book, the 5th edition of Basics of Web Design: HTML 5 & CSS, is available for pre-order at Amazon!

 The 5th Edition features a major change from previous edition. Although classic page layout methods using CSS float are still introduced, there is a new emphasis on Responsive Page Layout utilizing the new CSS Flexible Box Layout (Flexbox) and CSS Grid Layout techniques. The 5th Edition features new content, updated topics, hands-on practice exercises, and case studies.

More info at https://webdevbasics.net