Annual State of the Web Report by HTTP Archive

Explore this comprehensive report on the State of the Web at https://almanac.httparchive.org/en/2019/, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content (HTML, CSS, JavaScript), user experience, publishing, and distribution.

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. 

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.  

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 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. 

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

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....

Graphic courtesy of Skillcrush.com

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! As an Amazon Associate I earn from qualifying purchases.

 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