The future of WebAssembly, and an accessibility roundup

#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 Buttons — button 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

by via Frontend Focus