How 'display: contents' Works — display: contents makes an element’s children appear as direct children of the element’s parent, ignoring the element itself. This explains how it works and why you might want to use it. For now, it’s only in the current releases of Firefox & Chrome but support is growing.

Ire Aderinokun

12 Chrome DevTools Tips and Tricks — The DevTools gain new features all the time, so it’s always worth keeping an eye on ways to use it. Here’s a collection of quick tips that may prove handy.

Flavio Copes

Angular, React or Vue? — How do you choose one JavaScript framework over another for your next web application? Our new whitepaper gives insight into the current state of Angular, React and Vue and how they compare against a comprehensive set of criteria. Download now.

Progress Kendo UI sponsor

Working with the New CSS Typed Object Model — The CSS Typed Object Model brings types, methods, and a flexible object model to working with CSS values in JavaScript. (Part of the Houdini effort and initially shipped in Chrome 66.)

Eric Bidelman

Bringing Interactive Examples to MDN — Mozilla has been working on a project to bring interactive examples to pages on the wildly popular MDN Web Docs site. Some examples: rotate3d, clip-path, and ‘audio’ element.

Mozilla Hacks

How to Create a Snake Highlight Animation with 'anime-js' — A look behind the scenes at a simple but effective SVG line animation that moves as focus shifts on a Web form.

Mikael Ainalem

Sparks: A Font to Display Sparklines without Code — Uses OpenType features to replace numbers with basic bar, dot, or dot-line charts. GitHub repo.

After the Flood

Introducing the Microsoft Edge DevTools Protocol — Designed to align closely with the Chrome DevTools Protocol.

Microsoft Edge Development

Using Ethics in Web Design — Considers the role of ethics, norms, and expectations and how they relate to the digital works you create.

Morten Rand-Hendriksen

JavaScript Engineer (Berlin) — Provide state of the art A/B testing, tracking data collection and analysis services on our Product Analytics team.

ZALANDO

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

Front-End Expert? Sign Up for Vettery — Create your profile and we’ll connect you with top companies looking for talented front-end developers.

Vettery

Accessible HTML: A Crash Course in ARIA Landmark Regions

Genevieve Nelson

How to Access MongoDB Directly from Your Web or Mobile App

MONGODB sponsor

Get Started Building .NET Webapps That Run in the Browser with Blazor — An experimental .NET framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Microsoft

Adding Favicons in a Multi-Browser Multi-Platform World — A refresher on what needs to be done to have a favicon show up everywhere you’d expect it to.

Ruadhán O'Donoghue

Sticky as a Local Fixed? — A CSS transform on a fixed element can create a local context for a nested position: fixed element, as in this example.

Chris Coyier

Axe 3.0 Released: The Automated Accessibility Testing Library

Marcy Sutton

CSS Gradient Generator — A nice, simple to use CSS gradient generator, with options for both linear and radial outputs.

Moe Amaya

Get the Best, Most Complete Collection of Angular UI Controls: Wijmo — Wijmo’s dependency-free UI controls include rich declarative markup, full IntelliSense, & the best data grid.

GrapeCity Wijmo sponsor

Micron.js: A Micro Interaction Library — Add visual interactions to DOM elements Powered by CSS animations.

Webkul

Tabler: An HTML Dashboard Theme Built on Bootstrap 4

Paweł Kuna

DrawerJS: A Customizable HTML Canvas Drawing Tool — Live demo here.

Carsten Schäfer

Build Better Apps Faster with a Single, Enterprise-Ready Framework: Ext JS

Sencha, Inc. sponsor

A Gradient Shadow in Pure CSS

Fabien Tungu