#370 — December 12, 2018

Read on the Web

Frontend Focus

Microsoft Edge Adopting Chromium for Its Edge Browser — Last week we mentioned the rumors and it turns out they’re true: Microsoft is looking to adopt the same underlying browser engine as Chrome and Opera. Mozilla, amongst many, has shown concern about the move in a piece called Goodbye, EdgeHTML.

Joe Belfiore (Microsoft)

A Guide to the CSS Object Model (CSSOM) — If you’ve written JavaScript in a front-end context, you’ve undoubtedly dealt with the DOM (Document Object Model) but there’s also the CSS Object Model, a set of APIs allowing the manipulation of CSS from JavaScript. A lot of detail/examples here.

Louis Lazaris

New Course: Introduction to Node.js by Scott Moss ✨👀 — Node.js can be used for build tools, desktop apps, mobile apps, databases, and more. Learn the foundations of Node.js so you can go forward and create fantastic JavaScript apps outside the browser.

Frontend Masters sponsor

Managing Flow and Rhythm with CSS Custom Properties — Using CSS custom properties to establish vertical spacing inherited through the cascade to achieve consistent vertical rhythm across components on a page.

Andy Bell

Creating a CSS Venn Diagram using CSS Shapes — This is really clever and well explained too, although it won’t work in Edge (for now).

Adrian Roselli

Protecting Your Site with Feature Policy — Feature Policy, currently only partially supported by Chrome and Safari, can help protect your site from third parties using APIs that have security and privacy implications.

Rachel Andrew

Introducing Background Fetch — A Web standard that’s currently implemented behind Chrome’s Experimental Web Platform features flag, Background Fetch lets you handle large downloads in a browser programatically and then get notifications of their completion, even if the browser closes.

Google Developers

💻 Jobs

Principal Software Engineer - Front End (Vancouver, BC) — Want to join a dynamic, expanding tech startup? Beanworks Solutions Inc. is seeking a Principal Software Engineer

Beanworks

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.

Hired

📘 Tutorials

Making Things Better: Redefining the Technical Possibilities of CSS — Slides from a talk covering things coming into browsers that could change the way we see web design. While we can’t wait to see the real talk, the slides stand well on their own.

Rachel Andrew

A More Secure Domain Registrar — Securely register and manage your domain with no-markup pricing that eliminates surprise renewal fees and hidden add-on charges.

Cloudflare Registrar sponsor

Building an Animated Sticky Header with Custom Offset

Silvestar Bistrović

The (Switch)-Case for State Machines in User Interfaces

David Khourshid

Creating Accessible SVG Icons with Inline Sprites

Marco Hengstenberg

Chrome Dev Tools: More Advanced Tips for Better Debugging

Dirk Strauss

Create An Accessible Dropdown Navigation — How to create a keyboard accessible navigation using a little bit of vanilla JavaScript.

Lindsey Kopacz

Yes, The New Microsoft Edge Will Support Chrome Extensions — One big question surrounding Microsoft’s shift Chromium answered.

Paul Thurrott

Why Don't We Load Stylesheets with style src=''script src is fine, so why not style src? It turns out the latter was never even considered.

Chris Coyier

Live Q&A Panel: Preparing for Angular Ivy. Register for Free

NRWL.IO sponsor

What Do You Name Color Variables? — Lea Verou ran a Twitter poll on color-related class naming and explicitly naming the colors took the lead rather than a semantic approach.

Chris Coyier

🔧 Code and Tools

Firefox 64 Released — The year’s last release of Firefox includes multi-tab selection and management, new CSS features (e.g. CSS Scrollbars), and JavaScript and devtools improvements.

Dan Callahan, Chris Mills (Mozilla)

Data Color Picker: Create a Palette of Hues — Quickly create visually-equidistant color palettes for things like data visualizations (rather than use different shades of the same color).

Kennedy Design, Inc

JSON Schema Document Validation? In MongoDB - No Problem

Studio 3T sponsor

Shapy: A Web-Based CSS Gradient Editor — Focused more on the shape and structure than colors.

Vic Bergquist

Puppeteer for Firefox: Control Firefox from Node.js — An experimental project for controlling Firefox using Puppeteer’s API.

Google Chrome Developers

chrome-aws-lambda: A Chromium Binary for AWS Lambda — A project to make it easy to use a headless Chrome instance from your AWS Lambda serverless functions.

Alix Axel