---
title: "The future of WebAssembly, and an accessibility roundup"
publication: "Frontend Focus"
issue: 363
published_at: "2018-10-24"
canonical_url: "https://frontendfoc.us/issues/363"
---

This Week's HTML5, CSS, Browser, and Frontend News       

#363 — October 24, 2018 

[Read on the Web](https://frontendfoc.us/issues/363)   

Frontend Focus 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/keldri7mfo6yljoluttd.jpg)](https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/)  

[WebAssembly’s Post-MVP Future: A Cartoon Skill Tree](https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/) — 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](https://30-seconds.github.io/30-seconds-of-css/) — Around 40 different CSS snippets for various situations. It’s a bit like [30 Seconds of Code](https://github.com/30-seconds/30-seconds-of-code) but solely for CSS. 

Angelos Chalaris, et al.   [![\](https://copm.s3.amazonaws.com/f8fe9372.png)](https://www.facebook.com/events/894355487619388/) 

[Performance at Scale (Oct 29) Join our Facebook Live Session (16:00, GMT +2)](https://www.facebook.com/events/894355487619388/) — 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](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture) — 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](https://googlechrome.github.io/samples/picture-in-picture/) (Chrome 70+ only). 

Google Developers   

[Firefox Version 63.0 Released](https://www.mozilla.org/en-US/firefox/63.0/releasenotes/) — 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](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/63). 

Mozilla   

[Mozilla Experimenting with Offering Firefox Users a VPN Service](https://blog.mozilla.org/futurereleases/2018/10/22/testing-new-ways-to-keep-you-safe-online/) — 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](https://www.uber.com/careers/list/40899/) — 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](https://www.hired.com/frontend) — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details. 

Hired  

📘 Tutorials  

[CSS Border-Radius Can Do That?](https://9elements.com/io/css-border-radius/) — As well as rounded corners, `border-radius` can be used to create other neat ‘blobby’ shapes. 

Nils Bender   

[Unbuttoning Buttons](https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html) — `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](https://www.cloudflare.com/lp/workers/serverless-powered-api/?utm_source=Workers&utm_medium=Display&utm_campaign=Cooperpress_Serverless_API_LP) — 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](https://levelup.gitconnected.com/how-to-create-custom-html-markers-on-google-maps-9ff21be90e4b) 

Dan Ward   

[Creating a 'Marching Ants' Effect with SVG](https://css-tricks.com/svg-marching-ants/) 

Chris Coyier   

[From Ordinary to Extraordinary with CSS Animations](https://medium.marqeta.com/from-ordinary-to-extraordinary-with-css-animations-2aafd1bd9a6d) 

Eli Shkurkin   

[Does Your Leadership Style Resemble Legacy Code?](https://marcusblankenship.com/software-leader-seminar/) 

Marcus Blankenship sponsor   

[Stop Building Websites with Infinite Scroll](https://logrocket.com/blog/infinite-scroll) 

Fatih Kadir Akin   

[An Introduction to the `dialog` Element](https://www.viget.com/articles/the-dialog-element/) 

Chris Manning   

✏️ A **Focus** on Accessibility | #A11y  

[The Accessibility Style Guide](http://a11y-style-guide.com/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](https://alistapart.com/article/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](https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-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](https://accessibility.blog.gov.uk/2018/09/27/assistive-technology-tools-you-can-use-at-no-cost/) 

Anika Henke   

[The Importance of Heading Levels for Assistive Technology](https://webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology--cms-31753) 

Eric Bailey   

[Colorblindly on the Chrome Web Store](https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg) — 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](https://9elements.github.io/fancy-border-radius/#30.30.30.70--.) — Generate more organic looking shapes with CSS3’s `border-radius`. 

9elements   

[Omi: A 'Next Generation' Web Framework in 4KB of JS](https://github.com/Tencent/omi) — Built around JSX, Web Components, and Shadow DOM. Check out the [‘one minute’ example code](https://github.com/Tencent/omi#add-omi-in-one-minute) to see if you like their approach. 

Tencent   

[Let a MongoDB Master Explain Users and Roles](https://studio3t.com/knowledge-base/articles/mongodb-users-roles-explained-part-1/?utm_source=newsletter&utm_medium=cooper&utm_campaign=Oct18) 

Studio 3T sponsor   

[animate.css: A Cross-Browser Library of CSS Animations](https://github.com/daneden/animate.css) 

Daniel Eden   

[Countdown Clock: An HTML5 Canvas Countdown Clock React Component](https://github.com/pughpugh/react-countdown-clock) 

Hugh Gallagher   

[WebPerl: Run Perl in the Browser with WebAssembly](https://webperl.zero-g.net/) — If you _really_ have a hankering to run Perl client-side, have a play with this port of Perl to WebAssembly. 

Hauke Daempfling         

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom