#355 — August 29, 2018

Read on the Web

Frontend Focus

The Front-End Performance Checklist — An extensive list of things you should check or at least be aware of as a front-end developer trying to make your sites work as fast as possible.

David Dias

Using Feature Detection to Write CSS with Cross-Browser Support — If you’ve been subscribed for a while, you’ll have seen all manner of CSS modules - both established and experimental - mentioned here. Here’s how to use the modules you want in a progressively enhanced way across browsers by using feature detection.

Schalk Venter

monday.com - Collaborate, Plan, Track & Manage All in One Tool — What’s it all about? Well, monday.com is about managing your workload professionally, planning ahead visually and communicating with the team. Once these points are set, have your champagne to celebrate the success of your team brand.

monday.com sponsor

Best Practices for Mobile Form Design — A key goal as a Web developer is to make the process of filling out a form as easy as possible. This article shares a lot of practical techniques for designing effective mobile forms.

Smashing Magazine

▶  Solving Container Queries Today — Media queries let you define CSS to take effect upon certain viewport conditions, but container queries that work at the level of containing elements would also be useful. Official support isn’t there yet but there are workarounds offering similar functionality.

Greg Whitworth

Babel 7 Released: The JavaScript Transpiler — We’re going to focus on this more in this week’s JavaScript Weekly on Friday.

Henry Zhu

Super-Powered Grid Components with CSS Custom Properties — A walkthrough of building a text and image component that uses CSS Grid along with CSS variables for placement.

Michelle Barker

💻 Jobs

Senior Front End Engineer at External Data Systems, Netflix — Help build a world class user interface for the platform that collects data to drive business insights for our teams.


Find A FrontEnd Job Through Vettery — Create a profile to connect with inspiring companies seeking FrontEnd devs.


📘 Tutorials

Using CSS Clip Path to Create Interactive Effects, Part II — A follow up to a January article on creating collage-style Web effects with CSS which leans on SVG to make things work in current browsers.

Mikael Ainalem

Create a Serverless Powered API in 10 Minutes — Use Cloudflare Workers to create and deploy a serverless API to 150+ data centers.

Cloudflare sponsor

Getting Started with Service Workers — A basic introduction to using Service Workers in the context of a Progressive Web App.

Flavio Copes

Inspect and Style an Element in DevTools that Normally Disappears when Inactive

Elijah Manor

A Native Lazy Load for the Web Platform — A new Chrome feature, ‘Blink LazyLoad’, was designed to dramatically improve performance by deferring the load of below-the-fold images and third-party IFRAMEs.

Ben Schwarz

Service Worker Caching Strategies Based on Request Types

Thomas Steiner

::before vs :before — Pseudo elements vs pseudo selectors.

Chris Coyier

Extending the Browser with WebAssembly — WebAssembly opens up more options to extend the browser with new features. This article shows how to port the AV1 video decoder and play AV1 video in any modern browser.

Alex Danilo (Google Developers)

Don't Miss SIGNAL: Twilio Customer & Developer Conference - Oct 17 & 18

twilio sponsor

🔧 Code and Tools

SVG Icon Transition Generator Tool — Upload two SVG icons of the same size and get a new SVG which transitions between them on click or hover.


Puppeteer Recorder: A Chrome Extension That Turns Browser Interactions into Puppeteer Scripts


F2: A Flexible Charting Library Aimed at Mobile Devices — An HTML5 canvas-based charting library aimed specifically at mobile use cases.


size-plugin: Track Compressed Webpack Asset Sizes Over Time

Google Chrome Labs

Ghost 2.0: The JavaScript Blogging Platform — A popular Node.js and JavaScript-based blogging platform - a good alternative to WordPress.

John O'Nolan

goodshare.js: A Vue.js Component for Social Sharing ButtonsFull example here.

Vic Shóstak

LazyestLoad.js: Load Images Only When In (and Remain In) the Viewport

Paul Browne

Developer Tools for Every Customer Session – New in FullStory

Fullstory sponsor

The 'Carlton Dance' in Pure CSS — If you remember The Fresh Prince of Bel Air you won’t have forgotten this.