#333 — March 28, 2018

Read on the Web

Frontend Focus

✏️ A Focus on SVG

This week we've brought together a collection of tools, tips and tutorials on all things SVG. The vector graphics format is now heavily supported across all major browsers and is being used in increasingly creative ways.

A section of the newsletter dedicated to a particluar technology or tool is something new that we're experiementing with — so, as ever your feedback and thoughts are appreciated. Just hit reply and we'll see your email. 🙂
— Chris Brandrick, Editor

How 'display: contents' Worksdisplay: 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

▶  The Future of Web Layout — Rachel Andrew, Jason Pamental, and Jeremy Osborn discuss advances in web layout techniques that will impact web developers.

Jeremy Osborn

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

💻 Jobs

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


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.


📙 Tutorials

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.


▶  A Primer on CSS Blend Modes and Why To Use Them

Una Kravets

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

   ✏️ A Focus on Scalable Vector Graphics (SVG)

A Practical Guide to SVGs on the Web — A superb, single page guide packed with practical advice and tips on how best to use SVGs on your sites.

Jake Giltsoff

▶  SVG Can Do That? — A dive into the creative wilds of this graphic format built with math.

Sarah Drasner

▶  The Wonderful World of SVG — How to style SVGs with CSS, animate them with JS, and more.

Chris Coyier

Making Multi-Colored Icons with SVG Symbols & CSS Variables

Sarah Dayan

Bounty: An SVG-Based Odometer Effect Library — Both a neat visual effect and a good example of explaining a library, and how it works, in a slide-deck. The library itself is here on GitHub.

Michał Skowronek

Coördinator: Turns an SVG Into Many X, Y Coordinates — Quite a specific tool but very well put together. The Why.

Aliza Aufrichtig

▶  Why Inline SVG is Best SVG

Front End Center

Customizable SVG Patterns and Background Designs

Matthew Lipman

A Comprehensive Guide to Clipping and Masking in SVG

Dennis Gaebel

🔧 Code and Tools

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.


Tabler: An HTML Dashboard Theme Built on Bootstrap 4

Paweł Kuna

DrawerJS: A Customizable HTML Canvas Drawing ToolLive 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