#367 — November 21, 2018

Read on the Web

Frontend Focus

The Power of Web Components — ‘Web Components’ is a set of standards to enable user-defined HTML elements. This is a very accessible tutorial that looks at the state of play and how to create your own components with HTML and JavaScript.

Potch (Mozilla Hacks)

▶  Choose Your (Web) Animation Adventure — A look at the lay of the land in the world of Web animation. The Web Animation API, SVG, CSS, React Motion.. so many choices, but how do they compare?

Val Head

Nrwl Connect Live: Q&A Panel on Angular Ivy with the Angular Team — Angular Ivy is a major rewrite to the rendering engine of Angular focused on improving application performance and reducing bundle size. Join Nrwl Angular contributors + special guests from Google, online, to hear adoption considerations.

NRWL.IO sponsor

From Braces to Pixels — If the first ‘C’ in CSS (i.e. Cascading) confuses you, this article goes into incredible depth about how it works and how browsers use CSS to style content.

Greg Whitworth

Goodbye Electron, Hello Desktop PWAs? — There’s still a long way for progressive webapps to go, but in many use cases the technology is advanced enough to displace typical ‘hybrid’ desktop apps especially when desktop PWA support lands on macOS in Chrome 72.

David Novicki

Five Years of PostCSS: State of The Union — The past, present and future of PostCSS, a popular CSS transformation tool, in a ‘state of the union’-style address on its 5th anniversary.

Andrey Sitnik

💻 Jobs

Sr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Software Engineer, Front-End (Browser Extensions) - San Francisco — We're looking for an Engineer to join our Browser Extension team to help achieve our mission of improving lives by improving communication.


Join Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.


📘 Articles & Tutorials

Using Feature Detection, Conditionals, and Groups with Selectors — How to take advantage of newer technology like conditionals and groups with selectors using feature detection.

Jirka Vebr

Why Browsers Download Stylesheets With Non-Matching Media Queries — The downloads do occur at the lowest possible priority, though.

Thomas Steiner

Create SQL Joins in MongoDB? Now you can, with Studio 3T — Read how you can fine-tune automatically-generated MongoDB queries for optimised performance.

Studio 3T sponsor

Exclusions Will Hopefully Be Like More Powerful Grid-Friendly 'Float's — Exclusions (currently in a “working draft” spec) allow inline content to wrap around elements.

Chris Coyier

▶  The All Powerful Front End Developer — As the Web has become increasingly relevant to modern life and as back-ends and infrastructure become increasingly commoditized, the role of the front end developer has only continued to grow.

Chris Coyier

Highlights from Chrome Dev Summit 2018 — Thoughts on a few of the “most interesting” projects and topics from last week’s Chrome Dev Summit in San Francisco.

Ire Aderinokun

Stratus Update – Curated Delivery of Cloud Native News, Weekly

Manifold sponsor

Why Can’t We Use Functional CSS and Regular CSS at the Same Time?“I truly believe that a combination of these two methods is much more useful than trying to solve all problems with a single bag of tricks.”

Robin Rendle

🔧 Code and Tools

SVG Filters Playground — An interesting online tool for experimenting with what different SVG filters do.


bRuCk: A Prototyping System Built with Web Components and the Houdini Paint API — An interesting “lo-fi prototyping system made with web components”.

Heydon Pickering

The Fast Way to Build Internal Tools. Connects to Any Database or API

Retool sponsor

SentinelJS: Detect New DOM Nodes using CSS Selectors

Andres Morey

Pure CSS Icons for Popular File Extensions


Generate Self-Signed SSL Certificates for Local Development on a Mac — A bash script for generating trusted self-signed SSL certs for local development.

Russell Heimlich