#337 — April 25, 2018

Read on the Web

Frontend Focus

Replace Animated GIFs with Video — Animated GIFs can be huge but in this guide we see how to curb that bloat by replacing them with MPEG-4 and WebM video sources that work in most browsers.

Google Developers

Writing More Accessible Markup with 'display: contents' — ‘display: contents’ makes it possible to add semantically useful markup while not affecting the box model or other visual factors at all.

Hidde de Vries

Cheat Sheet: Functional Programming with JavaScript — JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

Native-Like Animations for Page Transitions on the Web — A practical introduction to creating silky smooth, super slick transitions of entire pages from one layout to another, built around Vue.js. Live demo here.

Sarah Drasner

Grid to Flex: Flexbox Fallbacks for 4 CSS Grid Approaches — You know we love CSS Grid – if only because we link to CSS Grid like all the time – but if you want to support IE11 or Edge 15 and under, it can’t be the only solution.. in which case, this page will help with four common scenarios.

Una Kravets

Introducing sonarwhal v1: The Linting Tool for the Web — The first major release of an open-source linting tool for modern Web developer workflows first announced by Microsoft a year ago.

Anton Molleda (Microsoft)

LinkedIn Open Sources Projects for Working on CSS at ScaleCSS Blocks is a component-oriented CSS authoring system for producing high-performance stylesheets, while OptiCSS is a template-aware stylesheet optimizer (used by CSS Blocks).

LinkedIn Engineering

Under The Hood of CSS Animations and How to Optimize Their Performance — The latest in a superb series digging into the technicalities of how browsers and JavaScript work. This time, technicalities on how CSS animations work and how JavaScript can get involved.

Alexander Zlatkov

Can I Use... The 'theme-color' Meta Tag? — Popular browser compatibility tracking site Can I Use is now tracking support for the ‘theme-color’ meta tag which lets you suggest a color with which clients can customize the user interface. Limited to Chrome on Android and Samsung’s browsers so far.

Can I Use

2 Day Training Workshops at the O'Reilly Fluent Conference

O'Reilly Media, Inc. sponsor

▶  How to Use CSS Grid Today in The Real World

Brenda Storer

Choosing a Responsive Email Framework: MJML vs. Foundation

Paolo Mioni

April 22, 1993: Mosaic Browser Lights Up Web With Color, Creativity — NCSA Mosaic was released 25 years ago bringing text and inline images to the Web for the first time.



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

Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.


Front-End Expert? Let Your Dream Job Find You — Top developers can get 5+ interview requests during their first week on Vettery.


📘 Tutorials

Using Pseudo-Elements with CSS Grid — We’re talking things created with ::before and ::after

Michelle Barker

Animating the 'progress' Element — Requires more work than you’d expect to get right.

Jonathan Snook

Creating Smooth Sequential Animations with Sass — A particularly easy to follow and understand tutorial on CSS animations.

Glenn McComb

Build Better Websites. Learn Free for 10 Days

Pluralsight sponsor

Extending Native DOM Elements with Web Components

Leon Revill

WebGL2 Fundamentals: Learn WebGL 2.0 from the Ground Up — Lots of depth, inline examples, etc.


A Look at CSS Viewport Units — Covering vw, vh, vmin and vmax


5 Tips for Super-Fast CSS — Hasten page rendering by cutting the excess from your site’s CSS.

Jeremy Wagner

🔧 Code and Tools

Tone.js: Create Interactive Music in the Browser — Advanced scheduling, synths and effects, and intuitive musical abstractions.

Yotam Mann

a11y-dialog: A Lightweight, Flexible Accessible Modal Dialog — Version 5.0 now supports the native <dialog> element where available.

Hugo Giraudel

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

Linode Cloud Hosting sponsor

Nespero: A Fluent Design-Inspired UI Kit for Bootstrap 4


This SVG Always Shows Today's Date — A neat experiment - creating an SVG calendar icon that dynamically shows the correct date.

Terence Eden