Friday, October 11, 2019

Firefox DevTools!

There are some new developer tools in Firefox. New tools include a Flexbox Inspector, Grid Inspector, Shape Path Editor, Fonts, Editor, Changes Panel, Inactive CSS, and Accessibility Panel. Smashing Magazine has a great overview of the new tools. heckout https://developer.mozilla.org/en-US/docs/Tools for Mozilla's documentation. 

Thursday, October 03, 2019

10th Edition of Web Development & Design Foundations with HTML5!

New 10th Edition!
The 10th edition of Web Development & Design Foundations is currently in press and should be available Spring 2020.
Building on this textbook’s successful ninth edition, new features for the tenth edition include the following:
• Chapter 7 has been renamed Responsive Page Layout, takes a mobile first approach, and has an expanded focus on new layout systems including CSS Flexible Layout Module (Flexbox) and CSS Grid Layout
• Form layout with the CSS Flexbox and Grid Layout Systems
• Updated coverage of HTML5 elements and attributes
• Updated code samples, case studies, and web resources
• Expanded treatment of page layout design and responsive web design techniques
• Updated reference sections for HTML5 and CSS
• Additional Hands-On Practice exercises
Visit http://webdevfoundations.net for more information about the new book.  

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.