Frontend Fuel - Issue 16

News

The LinkedIn Engineering team have been busy and have released CSS Blocks. An ergonomic, component-oriented CSS authoring system that produces high-performance stylesheets. https://engineering.linkedin.com/blog/2018/04/css-at-scale–linkedins-new-open-source-projects-take-on-stylesh

Node 10 has just been released with a long list of notable changes. https://nodejs.org/en/blog/release/v10.0.0/

Chrome 66 hits the stable channel which includes a Site Isolation mode which is being trailed by a small percentage of users. https://chromereleases.googleblog.com/2018/04/stable-channel-update-for-desktop.html

Github to remove support for all versions of IE in 3 months time. https://twitter.com/michlbrmly/status/981855020948877312

General Reading

Excellent ALA article by Jeremy Keith all about the Service Worker and going offline. https://alistapart.com/article/going-offline

Optimising your CSS for a CDN. Getting your above-the-fold CSS into the first 14kb of a page request. https://www.filamentgroup.com/lab/critical-cdn.html

Chrome 66 now allows you to use the Presentation API which allows you to present a web page on your secondary attached display. https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays

13 Noteworthy Points from Google’s JavaScript Style Guide. https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b

Going Colorblind: An Experiment in Empathy and Accessibility. https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca

How the Twitter engineering team built Twitter Lite. A Twitter PWA. https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite.html

Tutorials

How to make more accessible markup with display: contents. https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents

Easy to understand definition of “asynchronous event” using pizza. https://stackoverflow.com/questions/4559032/easy-to-understand-definition-of-asynchronous-event/4560233#4560233

Tools

All the best things about Visual Studio Code that nobody ever bothered to tell you. https://vscodecandothat.com/

PWA.tools takes data from your site and uses that to generate cross-platform Progressive Web Apps. https://www.pwabuilder.com/

Events

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

London Accessibility Meetup #14 / May 17 / London. https://www.meetup.com/London-Accessibility-Meetup/

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

The version 5.0.0 of a11y-dialog aims at leveraging the native <dialog> element from HTML 5.2 when available. https://github.com/edenspiekermann/a11y-dialog/releases/tag/5.0.0

Fast 2KB immutable date library alternative to Moment.js with the same modern API. https://github.com/xx45/dayjs

Off-topic

It is incredible what you can generate with just 2 lines of code. Fractals are amazing. https://twitter.com/anvaka/status/957387392784089088

25 years ago a browser came along and changed the web forever. Mosaic was release in April 1993 and it was the first web browser with the ability to display text and images inline, meaning you could put pictures and text on the same page together, in the same window. https://www.wired.com/2010/04/0422mosaic-web-browser/