Frontend Focus 335, Lazy Loading Images and Video,

Lazy Loading Images and Video — Looking to improve initial page load time and lower per-page payload? This guide on has plenty of pointers on lazy-loading techniques, libraries and gotchas to watch out for.

Browsers To Support 'Web Authentication': A New Standard for Logins 

The Web Authentication spec (a.k.a. Webauthn) has been working its way toward W3C approval for nearly two years, but this marks the first major announcement of browser support.

Webinar: Designing a Conversational Chatbot Experience — Join our upcoming webinar, Designing a Conversational Chatbot Experience: Tales from the Trenches, to get an insider’s view into creating efficient human-computer interaction. Coming April 25, 11:00 am EST. Register today.

Colorizing SVG Backgrounds with CSS Filters — A problem with using SVGs as backgrounds is it can be harder to control their fill color, in which case CSS filters can come in very handy.

Glide: A Dependency-Free ES6 Slider and Carousel — A lightweight, flexible and fast straightforward slider. Demo here.

Creating Data Tables for the Web — Maybe you’ve heard “don’t use tables for layout” before, and while they’re not ideal for pure layouts, they have a lot of great uses. This tutorial dives deep on how to create accessible, responsive, and ergonomic data tables for the Web.

Mozilla Brings Firefox to Augmented and Virtual Reality 

Mozilla is anticipating the need for a browser that caters to the needs of mixed reality content. It’s dubbed ‘Firefox Reality’.

A 10-Part Course to Learn Bootstrap 4 — A free interactive screencast-led course running through the features and concepts of Bootstrap 4.

Presenting Web Pages to Secondary Attached Displays — Chrome 66 lets pages use a secondary attached display via the Presentation API and control its contents through the Presentation Receiver API.

NEWS AND OPTION

Bootstrap 4.1 Released

CSS Fonts Module Level 4 Working Draft

The Pitfalls of Card UIs — “An optimistic design choice that ends up compounding complexity.”

Why Would You Do 'That' in CSS? — Reflecting on why to bother experimenting with CSS; it’s fun and you’ll usually learn something.

Progressive Web Apps: Bridging The Gap Between Web and Mobile Apps

TUTORIALS

How to Build Chrome Extensions with React and Parcel

Art Directing for the Web with CSS Grid Template Areas

Building Your First Bootstrap 4.0 Site — A quick tutorial to get you up to speed with the latest version of Bootstrap.

How Does Your Developer Team ‘React’ to Training? — Team training on Python and Full Stack Essentials with React. See details.

Animated SVG Radial Progress Bars — Using a single path SVG, a ‘smidge’ of CSS, and several lines of JavaScript.

How to Hand Code Scalable Vector Graphics (SVG)

Keep Pixelated Images Pixelated as They Scale — The image-rendering property can be used to tweak how images are scaled.

A Few Tips to Make Your PWA Feel Native on iOS

CODE AND TOOLS

Web Maker - First Ever Offline and Blazing Fast Front-End Playground

Site Palette: A Chrome Browser Extension to Generate Comprehensive Color Palettes

Tabler: An Open Source Bootstrap Admin Panel Theme — A responsive, cross-browser admin panel built up from HTML5 and CSS3 components.

virtual-audio-graph: Declaratively Manipulate the Web Audio API— The documentation and examples here may help you understand this.

Epic Spinners — A collection of easy to use CSS-only animated spinners.

Linux Cloud Hosting Starting at 1GB of RAM for $5/mo