#335 — April 11, 2018

Read on the Web

Frontend Focus

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

Jeremy Wagner

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.

Russell Brandom

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.

Progress Telerik sponsor

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.

Una Kravets

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

Jędrzej Chałubek

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.

Heydon Pickering

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

Sean White

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

Per Harald Borgen

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.

François Beaufort

💻 Jobs

Web Backend Developer (Fairfax, VA) — City State Entertainment is looking for an ASP.NET dev to help create Camelot Unchained, an RvR fantasy MMO for its studio in VA.

City State Entertainment

Head of Software Development - Milan, Italy — MotorK is looking for an ambitious & proactive Software Development Leader to help drive ambitious technology plans in the team.

MotorK

Front-End Expert? Sign Up for Vettery — Developers with four-years experience average five or more interviews during their first week on Vettery.

Vettery

💬 News & Opinion

Bootstrap 4.1 Released

Bootstrap

CSS Fonts Module Level 4 Working Draft

W3C

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

Dave Rupert

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

Chris Coyier

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

Ajay NS

📘 Tutorials

How to Build Chrome Extensions with React and Parcel

Atakan Goktepe

Art Directing for the Web with CSS Grid Template Areas

Andrew Clarke

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

Per Harald Borgen

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

Big Nerd Ranch - React Training sponsor

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

Dave Rupert

How to Hand Code Scalable Vector Graphics (SVG)

Kezz Bracey

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

Chris Coyier

A Few Tips to Make Your PWA Feel Native on iOS

Maciej Caputa

🔧 Code and Tools

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

Web Maker sponsor

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

Stas Kulesh

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

codecalm

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

Benji Hall

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

Epicmax

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

Linode Cloud Hosting sponsor