Frontend Focus
Issue 324 — January 24, 2018
After a lengthy beta, the final release of the fourth version of popular frontend toolkit Bootstrap is here. No breaking changes.
Mark Otto, Jacob Thornton, and Bootstrap contributors

As a kid, did you ever cut out pictures from magazines and create collages? Do the same on the Web with this neat technique.
Mikael Ainalem

A beautiful dive into the most modern way to lazy-load resources and defer any functionality based upon an element’s visibility to users: using the Intersection Observer API.
Smashing Magazine

JavaScript telemetry provides a timeline of browser events leading to an error, including UI interactions, clicks, inputs, console logs and more. Debug better with telemetry and know why your web app crashed.
ROLLBAR   Sponsor

The first post-Quantum release continues to boost performance with ‘Off-Main-Thread Painting’ and streaming WebAssembly compilation, plus support for font-display. Enjoy the point-by-point summary for developers.
Mozilla Hacks

A free course focused on getting you up to speed on Flexbox as quickly as possible using novel, interactive code-driven screencasts.

The CSS Paint API lets us programmatically generate images whenever CSS properties expect them.
Google Developers

Firefox 58 includes a 2-tiered compiler, boasting a huge speedup for WebAssembly users.
Lin Clark

A cute way to see if CSS selectors are being used in unanticipated places (such as forgotten pages on legacy sites).
Harry Roberts


In Brief

Wes Bos Launches New CSS Grid Course news
Already very popular and it’s free.
Wes Bos

jQuery 3.3.0 Released news
Timmy Willison

CSS Scroll Snap: What Is It, and Do We Need It? tutorial
A pretty thorough introduction.
Dennis Gaebel

Make Your Site Faster with Preconnect Hints tutorial
With preconnect hints, reduce request latency and make your site faster.
Jeremy Frank

You Didn't Become a Front-End Developer to Fuss with a Database 
MONGODB  Sponsor

Lessons Learned Making Our App with Web Components story
Ada Rose Cannon

Should You Use CSS or JavaScript for Web Animations? opinion
How you can use both to produce smooth animations for your site.
Zell Liew

Frontend in 2018: More Consensus, Less Complexity opinion
Kaelan Cooter

Designing for 4-Sided Viewports with CSS Grid video
Jen Simmons

The New Generation of Project Management Tools Is Here and It’s Visual tools  Sponsor

CSS Gridish: A Tool to Help Your Team Adapt CSS Grid Today tools
James Y Rauhut (IBM Design)

Adele: A Repository Of Design Systems and Pattern Libraries tools
Marcin Treder

$20 Free On A New Linode Account tools
Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.
Linode Cloud Hosting  Sponsor

lit: The World's Smallest Responsive CSS Framework? code
Packs a fair bit into 400 bytes.
Arham Jain

26 CSS Arrow Examples from CodePen code
Freebie Supply