Frontend Fuel - Issue 15

News

Firefox nightly has received a new tool, the Accessibility Inspector. Inspect your website’s exposure to assistive technologies. https://www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/

Mozilla, Microsoft and Google back a new W3C API called Web Authentication (WebAuthn). https://www.bleepingcomputer.com/news/security/google-microsoft-and-mozilla-put-their-backing-behind-new-webauthn-api/ WebAuthn specifications: https://www.w3.org/TR/2018/CR-webauthn-20180320/

General Reading

Security and Performance Benefit from the rel=”no opener”. https://pineco.de/security-and-performance-benefit-from-the-rel-noopener/

Short article on how to avoid some of the bad parts of CSS. https://www.joeforshaw.com/blog/css-the-bad-bits-and-how-to-avoid-them

TC39 proposal for a new static method for transforming a list of key-value pairs into an object. https://github.com/tc39/proposal-object-from-entries

Tips for using ESLint with a legacy codebase. http://www.sheshbabu.com/posts/tips-for-using-eslint-in-a-legacy-codebase/

The 2018 Frontend handbook has been released with everything you need to be a Frontend developer. https://frontendmasters.com/books/front-end-handbook/2018/

Tutorials

Interesting Inclusive Components on Data Tables. https://inclusive-components.design/data-tables/

Optimising the critical path and improving load times using DevTools. https://www.lucidchart.com/techblog/2018/03/13/the-critical-path-optimizing-load-times-with-the-chromedev-tools/

Presentations

My favourite talk from RenderConf 2018: FaCSSt—CSS and Performance - Harry Roberts [30mins] https://www.youtube.com/watch?v=IUtWdDpCkVw

Stunning data visualisations presentation from RenderConf: A year of exotic data visualizations - Nadieh Bremer [42 mins] https://www.youtube.com/watch?v=ZqoqBfwULbQ

Playlist of all the talks from RenderConf 2018: https://www.youtube.com/playlist?list=PLBzScQzZ83I9c8OjCkL2rBi_-23grnDTF

Tools

A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios. https://github.com/filamentgroup/imaging-heap

Demos

Interactive demo of how the float positioning algorithm works in browsers. https://float-layout.glitch.me/

Events

London Accessibility Meetup #13 / April 23rd / London. https://www.meetup.com/London-Accessibility-Meetup/

DeltaV Conference / May 10th - 11th / London. https://deltavconf.com/speakers

UX London / May 23rd - 25th / London. https://2018.uxlondon.com/

Pixel Pioneers / June 8th / Bristol https://pixelpioneers.co/

London Tech Week 2018 / June 11th - 17th / London. https://londontechweek.com/

UX Scotland 2018 / June 13th - 15th / Edinburgh. http://uxscotland.net/2018/

Scotland JS 2018 / July 19th - 20th / Edinburgh. http://scotlandjs.com/

Libraries & Plugins

TypeScript 2.8 has been released. https://blogs.msdn.microsoft.com/typescript/2018/03/27/announcing-typescript-2-8/

Off-topic

Take a virtual tour of the Moon in 4K resolution, thanks to data provided by NASA’s Lunar Reconnaissance Orbiter spacecraft. https://www.youtube.com/watch?v=nr5Pj6GQL2o