--- title: "How Google wants to move towards a faster Web" publication: "Frontend Focus" issue: 417 published_at: "2019-11-13" canonical_url: "https://frontendfoc.us/issues/417" --- This week's HTML, CSS, browser, and frontend news #417 — November 13, 2019 [Read on the Web](https://frontendfoc.us/issues/417) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1573642250/nzbpemozk2zuof1ajk6e.jpg)](https://www.fastcompany.com/90428050/firefox-at-15-its-rise-fall-and-privacy-first-renaissance) [Firefox at 15: Its Rise, Fall, and Privacy-First Renaissance](https://www.fastcompany.com/90428050/firefox-at-15-its-rise-fall-and-privacy-first-renaissance) — Mozilla’s browser debuted in 2004, and became a hit before losing ground to Chrome. Now it’s doubling down on user privacy and autonomy. Sean Captain [How Google Wants to Move Towards a Faster Web](https://blog.chromium.org/2019/11/moving-towards-faster-web.html) — Chrome has announced plans to highlight whether a site is known for loading fast or slow. Quick sites will be ‘rewarded’ with a green loading bar, whereas slow sites will be flagged with [an on-screen ‘badge of shame’](https://www.theverge.com/2019/11/11/20959865/google-chrome-slow-sites-badge-system-chrome-dev-summit-2019). Google [![\](https://copm.s3.amazonaws.com/b491294d.png)](https://www.heroku.com/podcasts/codeish/38-building-with-web-components) ▶[Listen to the Podcast: Building with Web Components](https://www.heroku.com/podcasts/codeish/38-building-with-web-components) — Award-winning designer Ben Farrell from Adobe talks about web components, the new standard for building feature-rich web applications. Heroku sponsor [Results of the 2019 Front-End Tooling Survey](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results) — Over 3,000 developers took part in Ashley’s survey this year. Here’s the compiled results, offering an insight into the current usage trends and knowledge levels across front-end tools. Ashley Nolan ▶[Chrome Dev Summit 2019 Keynote](https://www.youtube.com/watch?v=F1UP7wRCPH8) — The keynote from this year’s Chrome Dev Summit, celebrating the diversity of the web. Here’s [a playlist with all the videos from the event](https://www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr) — plenty worth digging into. Google Chrome Developers [Uncommon Use Cases For Pseudo Elements](https://ishadeed.com/article/unusual-use-cases-pseudo-elements/) — A neat round up of some creative uses for pseudo elements (i.e. `:before` and `:after` elements defined in CSS). I can see myself using some of these.. Ahmad Shadeed 💻 **Jobs** [Senior Software Engineer at Getty (Los Angeles, CA)](https://jobs-getty.icims.com/jobs/search?searchKeyword=%22Software+Engineer%22) — Build fantastic tools and interfaces at one of the world's most prestigious cultural heritage orgs using Linked-Open-Data, Python, Structured-CMS, Vue.js. J. Paul Getty Trust [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers. Vettery 📙 **News, Tutorials & Opinion** ▶[HTML Isn’t Done!](https://www.youtube.com/watch?v=ZFvPLrKZywA) — Folks from both Microsoft and Google take to the stage at Chrome Dev Summit to talk about their collaborative work on Chromium over the past few months, plus a look at what’s on the horizon. Nicole Sullivan and Greg Whitworth [Some Things You Oughta Know When Working with Viewport Units](https://css-tricks.com/some-things-you-oughta-know-when-working-with-viewport-units/) — There are a number of “gotchas” when trying to set height and width based on the full height/width of the viewport. Chris Coyier [Tried & True Tips from 24 React Experts to Make You More Productive](https://www.telerik.com/kendo-react-ui/react-best-practices-and-productivity-tips/?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-productivity-tips-pp&utm_content=sponsored-link) — Get invaluable, practical productivity tips from React and JavaScript experts on how to excel in React. Read on. Progress KendoReact sponsor [Semantic Sidenotes for The Web](https://www.kooslooijesteijn.net/blog/semantic-sidenotes) — Sidenotes have been around for ages in print, but the author argues that they’re surprisingly hard to do well in HTML. Here’s a web friendly [proposal](https://webwewant.fyi/wants/52/) for adding such details, anecdotes and silliness to the side of your articles. Koos Looijesteijn [Preloading Fonts: When Does It Make Sense?](https://betterwebtype.com/articles/2019/11/02/preloading-fonts-when-does-it-make-sense/) — Can preloading a custom font help avoid a flash of unsettled text (FOUT)? This article runs through your options for font loading behaviour. Matej Latin ▶[Refactoring (The Way We Talk About) CSS](https://www.youtube.com/watch?v=eaLbSSmhVr0) — In this talk Rachel explains how, in the last few years, CSS has been refactored to an extent that to really explain how CSS works we need to change the way we teach and talk about the language. Rachel Andrew [JavaScript Isn’t Always Available and It’s Not The User’s Fault](https://adamsilver.io/articles/javascript-isnt-always-available-and-its-not-the-users-fault/) — Adam runs through some of the reasons as to why JavaScript fails to work for some users, and what you can do about it. Adam Silver [How to Use `ffmpeg` to Combine Multiple Videos to One](https://ma.ttias.be/use-ffmpeg-combine-multiple-videos/) — A quick tip on how to combine multiple separate videos into a single one, using`ffmpeg`. Mattias Geniar [Free Download: Results from Our Video Developer Survey 2019](https://go.bitmovin.com/video-developer-report-2019?utm_source=cooper-frontendfocus-brief-link&utm_medium=paid-newsletter&utm_campaign=dev-report-2019) Bitmovin sponsor [A Super Weird CSS Bug That Affects Text Selection](https://css-tricks.com/a-super-weird-css-bug-that-affects-text-selection/) — An interesting quirk where merely using a selector without any style properties can cause no styling to be applied at all. Chris Coyier [When to Use SVG vs. When to Use Canvas](https://css-tricks.com/when-to-use-svg-vs-when-to-use-canvas/) Chris Coyier 🔧 **Code, Tools & Resources** [instant.page 3.0: Make Your Pages (Even More) Instant](https://instant.page/v3) — [instant.page](https://instant.page/) provides a brief JavaScript snippet which adds _just-in-time preloading_ to the links on your pages, providing a noticeably briefer latency when navigating to a new page. Version 3 takes some ideas from Google’s [quicklink](https://github.com/GoogleChromeLabs/quicklink) to seem even faster on mobile. Alexandre Dieulot [CodyHouse Autocompletion Package for Atom](https://codyhouse.co/ds/docs/extensions#atom) — If you use the text editor Atom then this extension may prove handy. It autocomplete CSS utility classes, SCSS custom properties and JS utility functions. CodyHouse [linkinator: Scurry Around Your Site and Find All Those Broken Links](https://github.com/JustinBeckwith/linkinator) — A site crawler for validating links. Recently updated. Justin Beckwith 🗓 **Upcoming Events** [Performance Now, November 21-22 — Amsterdam, Netherlands](https://perfnow.nl) — A single track conference with fourteen speakers, covering the most important web perf insights. [HalfStack Conf, November 22 — London, UK](https://halfstackconf.com/london/) — A single day event focused on UI-centric JavaScript and web development. [Frontend Con, November 26-27 — Warsaw, Poland](https://frontend-con.io) — Brings together 30+ experts with over 500 experienced frontend pros from all over the world. [dotCSS, December 4 — Paris, France](https://www.dotcss.io) — The largest CSS conference in Europe. 🕰 **ICYMI** _(Some older stuff that's worth checking out...)_ - Sarah Higley [reviews the history and current state of tooltip accessibility](https://sarahmhigley.com/writing/tooltips-in-wcag-21/). - How devs at the BBC [made the switch from iframes](https://medium.com/bbc-design-engineering/goodbye-iframes-6c84a651e137) to using Shadow Dom. - A [performance case study from Harry Roberts](https://csswizardry.com/2019/08/making-cloud-typography-faster/) exploring a CSS problem with a popular webfont provider. - [This web museum is a gallery looking back](https://www.kapwing.com/museum-of-websites) at how famous internet companies have changed over time. - Here's a [proof of concept for making Sass faster](https://css-tricks.com/a-proof-of-concept-for-making-sass-faster/). - Charlie Gerard explains how she [protoyped a gesture recognition system](https://dev.to/devdevcharlie/play-street-fighter-with-body-movements-using-arduino-and-tensorflow-js-4kbi) to play Street Fighter with body movements. A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [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