#363 — October 24, 2018

Read on the Web

Frontend Focus

WebAssembly’s Post-MVP Future: A Cartoon Skill Tree — This is a fantastically accessible guide to understanding where WebAssembly fits into the big picture, what’s yet to come, and what impact WebAssembly could have on both the Web and related areas like IoT and Node.js.

Mozilla Hacks

30 Seconds of CSS: Useful CSS Snippets You Can Understand Quickly — Around 40 different CSS snippets for various situations. It’s a bit like 30 Seconds of Code but solely for CSS.

Angelos Chalaris, et al.

Performance at Scale (Oct 29) Join our Facebook Live Session (16:00, GMT +2) — In this Facebook Live session Dan Shappir will review how we implemented a process of continuous performance improvement for over 100M websites hosted on Wix. Dan will describe the methods and technologies we used, and the results we were able to achieve.

Wix Engineering sponsor

An Introduction to Chrome's Picture-in-Picture Web API — The Picture-in-Picture Web API is designed to let users continue to watch videos in a floating window when they move on to other tabs or even applications. Demo here (Chrome 70+ only).

Google Developers

Firefox Version 63.0 Released — Here’s a run through of all the new features (including blocking tracking cookies), updates and various fixes. The developer-focused changes can be found here.

Mozilla

Mozilla Experimenting with Offering Firefox Users a VPN Service — As part of its ongoing mission to keep users safe online, Mozilla is going to begin offering VPN services to a subset of users directly from the Firefox browser.

Chris More

💻 Jobs

Work on Uber's Open Source Design Language — We're developing Base UI, a new React component library for web applications at Uber and beyond. Join our team.

Uber

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

CSS Border-Radius Can Do That? — As well as rounded corners, border-radius can be used to create other neat ‘blobby’ shapes.

Nils Bender

Unbuttoning Buttonsbutton can be an interesting element to wrangle if ‘full styling control’ is the end goal..

Scott O'Hara

Create a Serverless Powered API in 10 Minutes — Use Cloudflare Workers to create and deploy a serverless API to 150+ data centers.

Cloudflare Workers sponsor

How to Create Custom HTML Markers on Google Maps

Dan Ward

Creating a 'Marching Ants' Effect with SVG

Chris Coyier

From Ordinary to Extraordinary with CSS Animations

Eli Shkurkin

Does Your Leadership Style Resemble Legacy Code?

Marcus Blankenship sponsor

Stop Building Websites with Infinite Scroll

Fatih Kadir Akin

An Introduction to the dialog Element

Chris Manning

   ✏️ A Focus on Accessibility | #A11y

The Accessibility Style Guide — Pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.

Carie Fisher

Designing for Cognitive Differences — Brandon Gregory considers how to design accessibly for cognitive differences like anxiety disorders, inattention, and depression.

A List Apart

Top 25 Accessibility Testing Tools for Websites — A list of accessibility testing tools for websites and online apps.

Garenne Bigby

Assistive Technology Tools You Can Test with At No Cost

Anika Henke

The Importance of Heading Levels for Assistive Technology

Eric Bailey

Colorblindly on the Chrome Web Store — Here’s a Chrome extension that can help you understand how colorblind users experience your sites.

oftheheadland

🔧 Code and Tools

A Fancy Border Radius Generator — Generate more organic looking shapes with CSS3’s border-radius.

9elements

Omi: A 'Next Generation' Web Framework in 4KB of JS — Built around JSX, Web Components, and Shadow DOM. Check out the ‘one minute’ example code to see if you like their approach.

Tencent

Let a MongoDB Master Explain Users and Roles

Studio 3T sponsor

animate.css: A Cross-Browser Library of CSS Animations

Daniel Eden

Countdown Clock: An HTML5 Canvas Countdown Clock React Component

Hugh Gallagher

WebPerl: Run Perl in the Browser with WebAssembly — If you really have a hankering to run Perl client-side, have a play with this port of Perl to WebAssembly.

Hauke Daempfling