#356 — September 5, 2018

Read on the Web

Frontend Focus

Chrome Turns 10 Years Old as Chrome 69 Released — There’s a higher level celebration of the ten anniversary here, but what’s new for Web developers? CSS Scroll Snap, display cutouts, and the Web Locks API for starters.


Take a New Look at 'CSS Shapes' — Firefox 62 (out today) joins Chrome and Safari in supporting CSS Shapes, a way to define shapes within CSS for content to flow around. See how they work here, along with the new tools in Firefox to make editing such shapes easier.

Rachel Andrew

New Course: 👩‍💻 Intro to Data Structures for Interviews — Bianca teaches you how to pass technical interviews by learning the data structures you need to store and retrieve data more efficiently.

Frontend Masters sponsor

The Web Design Museum: The First Decade of Web Design — Web Design Museum exhibits over 900 unique designs from the years 1995 to 2005. Discover forgotten trends in web design.

Web Design Museum

The Complete CSS Demo for OpenType Features — A lengthy single page demo of many font-feature-settings settings upon a variety of fonts. If you’re using the right fonts to support these settings you can get a lot more control over how your text looks.

Tunghsiao Liu

What's New in Chrome 70's DevTools — The latest dev channel release of Chrome has several DevTools improvements including being able to create ‘live expressions’ (real-time monitoring, essentially) and the highlighting of DOM elements while still typing an expression.

Google Developers

Conversational Semantics with HTML and ARIA — With voice and other ‘headless’ interfaces becoming more commonplace, semantic markup is more important than ever. Learn how to leverage HTML and ARIA to improve experiences.

Aaron Gustafson

Firefox 62 Ships Today; Here's What's New for Developers


💻 Jobs

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.


React & Redux Frontend Engineer (New York, Paris, Remote) — We transform complex datasets into beautiful visualizations and implement innovative browser-app UIs. Apply to join us here.


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


📘 Tutorials & Opinion

How Do You Mark Up An Accordion? — Here are your options for possible markup approaches plus some useful resources.

Sara Soueidan

A Tour of Defining Colors in CSS — Whether though predefined values, currentColor, hex values, and more.

Adam Laki

▶  CSS Grid in 45 MinutesAssociated slidedeck here.

Wes Bos

How to Do Functional Programming with JavaScript? — A handy cheat sheet used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

How to Use Media Queries from JavaScript — The matchMedia method is the key.

Craig Buckler

How to Use Gulp.js to Automate Your CSS Tasks — Such as optimizing images, compiling Sass files, and handling and inlining assets.

Craig Buckler

13 Speakers on Design, UX and Code. Two Amazing Days. Get 100 USD Off


Making Calls from a Browser with Vue.js & Nexmo In-App Voice

Phil Leggetter

How Many Sites Are Still Using AppCache? — Too many, given it’s been deprecated, removed from the web standards, and support is rapidly disappearing.

HTTP Archive

What Makes a Good Front-End Developer?

Zell Liew

🔧 Code and Tools

MailMason: A Complete Toolset for Building Email Templates — Uses other common frontend tooling to streamline the generation of both HTML and plain text emails.


Making a Progressive Web App with Webpack Just Got Easierwebpack-web-app-manifest-plugins generates a PWA manifest and integrates with the assets JSON.


Create a Serverless Powered API in 10 Minutes

Cloudflare sponsor

Svgurt: An Image to SVG Transformation Tool — A tracing tool, of sorts, that has a style of its own. Play with the live demo.

Rhys Howell

Is 'Houdini' Ready Yet? — A regularly updated rundown of browser support for various Houdini APIs. (Houdini is a collection of proposed and under-development CSS engine manipulation specs.)


Siema: Simple, Lightweight Carousel with No Dependencies

Pawel Grzybek