Frontend Fuel - Issue 6

News

Firefox 57 (Quantum) has been released and it is really fast. https://blog.mozilla.org/blog/2017/11/14/introducing-firefox-quantum/ Release notes: https://developer.mozilla.org/en-US/Firefox/Releases/57

Let’s Encrypt have now issues SSL certs for 36% of sites listed in NetTrack. https://nettrack.info/ssl_certificate_issuers.html

WebAssembly support is now shipping in all major browsers. https://blog.mozilla.org/blog/2017/11/13/webassembly-in-browsers/

The OWASP top 10 security risks for 2017 has been released. https://www.owasp.org/images/7/72/OWASP_Top_10-2017_(en).pdf.pdf

General Reading

How the BBC switched on HTTP/2 and what are the benefits? https://medium.com/bbc-design-engineering/http-2-is-easy-just-turn-it-on-34baad2d1fb1

Interesting article on text sizing and accessibility https://alastairc.ac/2017/11/is-text-sizing-dead/

Addy Osmani on the cost of JS: tl;dr: less code = less parse/compile + less transfer + less to decompress https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

How do we use new tech like CSS Grid when older browsers don’t support it? Great article from Rachel Andrew with some answers. https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

Tutorials

Async / Await make working with asynchronous code in JavaScript much easier. But how do you use them? https://codeburst.io/javascript-es-2017-learn-async-await-by-example-48acc58bad65

Clone Minesweeper in 15 minutes with TypeScript, React, and Redux https://hackernoon.com/clone-minesweeper-in-15-minutes-with-typescript-react-and-redux-64be1a7a0264

Native HTML5 Form Validation. The way you want it. In 6 lines of code. https://daverupert.com/2017/11/happier-html5-forms/

How to use SVG as a Placeholder, and Other Image Loading Techniques https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c

Presentations

How to use the Chrome DevTools Layers panel [1min 23sec] https://www.youtube.com/watch?v=6je49J67TQk

Chrome Dev Summit 2017: Modern Loading Best Practices [34min] https://www.youtube.com/watch?v=_srJ7eHS3IM

Demos

Simple frosted glass effect using CSS3 Filters https://codepen.io/TrevorEyre/pen/bRrrEx

Tools

What does your current browser UA string look like? http://www.whatsmyua.info/

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome. https://nemethgergely.com/puppeteer-browser-automation/

Demonstration of what information your browser is giving away about you (can be used for fingerprinting) http://webkay.robinlinus.com/

Highlight potential HTML issues using this handy bookmarklet (or include the css file) https://ffoodd.github.io/a11y.css/

A web browser built by developers, for developers https://blisk.io

Training

Rems Sharp’s video training course all about the terminal (not free). https://terminal.training/

Events

Manchester Node Workshop / Manchester / 28 November 2017 https://www.meetup.com/manchester-node-workshop

Machine Learning for Muggles / London / 11 December 2017 https://www.meetup.com/London-JavaScript-Community/events/244731462/

FrontEndNorth / Sheffield / 19 Jan 2018 https://frontendnorth.com/

UpFront Conf 2018 / Manchester / 16 March 2018 http://lanyrd.com/2018/upfrontconf/

Front-end North-East / Newcastle / 5 April 2018 https://2018.frontendne.co.uk/

Off-topic

The Evolution of Bacteria on a “Mega-Plate” Petri Dish. A mixture of impressive and scary at the same time. https://www.youtube.com/watch?v=plVk4NVIUh8

The first interstellar asteroid was detected recently passing through our solar system. Incredible news but it didn’t seem to get much media attention (that I noticed). https://www.youtube.com/watch?v=fbL1ZoAQgUU