--- title: "#294: The Browser Hacker's Guide To Instantly Loading Everything" publication: "Frontend Focus" issue: 294 published_at: "2017-06-14" canonical_url: "https://frontendfoc.us/issues/294" --- #294: The Browser Hacker's Guide To Instantly Loading Everything This week's HTML, CSS and browser tech news — [Read this e-mail on the Web](http://frontendfoc.us/issues/294) Frontend FocusIssue 294 — June 14, 2017 If you're in the UK or Europe, we've teamed up with White October to bring **[a two day ES6 workshop](http://www.whiteoctoberevents.co.uk/training/deep-foundations-of-js?utm_source=cooperpress=email=js%20weekly) with _[You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)_ author Kyle Simpson to London.** Tickets are available [now](http://www.whiteoctoberevents.co.uk/training/deep-foundations-of-js?utm_source=cooperpress=email=js%20weekly) :-)[Leveraging the Paint Timing API to Improve User Experiences](https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics#first_paint_and_fist_contentful_paint?utm_source=frontendfocus&utm_medium=email)Last week we linked [the video](https://www.youtube.com/watch?v=6Ljq-Jn-EgU), now here’s a full write-up focusing on the Paint Timing API. Google Developers [Breaking Out with CSS Grid Explained](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/?utm_source=frontendfocus&utm_medium=email)A recent [demo from Tyler Sticka demonstrated](https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/) how to break content out of a CSS Grid layout and go full width, here Rachel explains how/why the technique works. Rachel Andrew [70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization](https://meiert.com/en/blog/20170531/70-percent-css-repetition/?utm_source=frontendfocus&utm_medium=email)Focusing on how many declarations we use in our style sheets, how many of those declarations are unique, and what that means. Jens Oliver Meiert [![Bugsnag\](https://copm.s3.amazonaws.com/b7582747.jpg)](https://www.bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=trial-signup-primary&utm_campaign=javascript&utm_term=frontend-focus-20170614)[Automatically capture and quickly fix JavaScript errors affecting your users 🚀](https://www.bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=trial-signup-primary&utm_campaign=javascript&utm_term=frontend-focus-20170614)Get real-time crash alerts and collect detailed diagnostics so you can fix errors for your users. See deminified stacktraces with support for sourcemaps. Cut through front-end noise so you can efficiently assess the impact of errors. [Learn more](https://www.bugsnag.com/platforms/javascript/?utm_source=cooperpress&utm_medium=cpc&utm_content=trial-signup-primary&utm_campaign=javascript&utm_term=frontend-focus-20170614). BugsnagSponsor [Chrome 60 Beta Released with Paint Timing API and font-display](https://blog.chromium.org/2017/06/chrome-60-beta-paint-timing-api-css.html?utm_source=frontendfocus&utm_medium=email)font-display controls how and when Chrome displays text content while downloading fonts. Other features include support for the Payment Request API, the Web Budget API and the availability of the CSS `:focus-within` pseudo class. Google [The Browser Hacker's Guide To Instantly Loading Everything](https://www.youtube.com/watch?v=7vUs5yOuv-o)A snappy 25 minute talk on modern techniques to improving page loading performance from the front-end perspective, particularly from a mobile POV. Addy Osmani [The State of Chrome, Edge, Firefox and Brave [videos\]](https://www.youtube.com/watch?v=bz4tfJqYvuA&list=PL-G5r6j4GptGqZlvKCGJaxZL3JYQipORF&index=1)Representatives for four different browsers present 10-15 min updates on where those browsers are at. The videos cover [Chrome](https://www.youtube.com/watch?v=bz4tfJqYvuA&list=PL-G5r6j4GptGqZlvKCGJaxZL3JYQipORF&index=1), [Edge](https://www.youtube.com/watch?v=_sUMIqKtf-c&list=PL-G5r6j4GptGqZlvKCGJaxZL3JYQipORF&index=2), [Firefox](https://www.youtube.com/watch?v=mdTWClD1aVk&index=3&list=PL-G5r6j4GptGqZlvKCGJaxZL3JYQipORF), and Brendan Eich’s [Brave.](https://www.youtube.com/watch?v=h_jtopVp8dk&index=4&list=PL-G5r6j4GptGqZlvKCGJaxZL3JYQipORF) YouTube [Results of the 'Ultimate CSS Survey' 2017](https://www.sitepoint.com/results-ultimate-css-survey-2017/?utm_source=frontendfocus&utm_medium=email)Louis Lazaris breaks down the results of SitePoint’s recent survey, shedding light on developer practices in CSS tooling, technologies, and knowledge. SitePoint Jobs [![Supported by Hired.com\](https://s3.amazonaws.com/s3.cooperpress.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter) - [Frontend Developer at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=newsletter&utm_medium=email&utm_campaign=frontend-news-june-17)We seek a developer with extensive Frontend knowledge. We're 100% remote and provide the funding needed to help you achieve your goals and grow. X-Team - [Front End Engineer at EDITED (London)](https://edited.com/jobs/engineering/?utm_source=frontendfocus&utm_medium=email)Join us to impact how the world's biggest retailers operate by making a web app with great UX and DX using React, Redux and Glamor EDITED Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend) In Brief [Firefox 54: E10S-Multi, WebExtension APIs, CSS clip-path](https://hacks.mozilla.org/2017/06/firefox-54-e10s-webextension-apis-css-clip-path/?utm_source=frontendfocus&utm_medium=email) news Completes the transformation of Firefox into a fully multi-process browser. Mozilla Hacks [Latest Updates to the Credential Management API](https://developers.google.com/web/updates/2017/06/credential-management-updates?utm_source=frontendfocus&utm_medium=email) news Google Developers [Introducing FilterBubbler: A WebExtension Built using React/Redux](https://hacks.mozilla.org/2017/06/introducing-filterbubbler-a-webextension-built-using-reactredux/?utm_source=frontendfocus&utm_medium=email) news A text analysis toolkit using the new WebExtensions API. Mozilla Hacks [Cross-Browser Extensions, Available Now in Firefox](https://hacks.mozilla.org/2017/06/cross-browser-extensions-available-now-in-firefox/?utm_source=frontendfocus&utm_medium=email) news WebExtensions APIs are inspired by Chrome’s extension APIs, supported by Opera, Firefox, and Edge. Mozilla Hacks [ForwardJS Tickets on sale today](https://forwardjs.com?utm_source=frontendfocus&utm_medium=email) Attend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July. ForwardJSSponsor [A Complete Guide To Switching From HTTP To HTTPS](https://www.smashingmagazine.com/2017/06/guide-switching-http-https/?utm_source=frontendfocus&utm_medium=email) tutorial Covers the individual components and steps required to get setup with HTTPS. Vladislav Denishev [CSS Shapes, Clipping and Masking, and How to Use Them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/?utm_source=frontendfocus&utm_medium=email) tutorial Firefox 54 introduces new CSS `clip-path` features. Mozilla Hacks [Build A Minimalist HTML Card in Just 53 Lines of Code (with Flexbox)](https://hackernoon.com/build-a-minimalist-html-card-in-just-53-lines-of-code-with-flexbox-b40801927eb5?utm_source=frontendfocus&utm_medium=email) tutorial Brandon Morelli [Cropping Images in CSS With 'object-fit'](https://alligator.io/css/cropping-images-object-fit/?utm_source=frontendfocus&utm_medium=email) tutorial Alligator.io [When Large Isn't Large Enough: Designing With Hero Images](https://www.smashingmagazine.com/2017/06/designing-hero-images/?utm_source=frontendfocus&utm_medium=email) tutorial Nick Babich [How Pure CSS Images Helped Me Understand React Components](https://hackernoon.com/how-pure-css-images-helped-me-understand-react-components-3ad7b05051b0?utm_source=frontendfocus&utm_medium=email) story Michael Mangialardi [WebAssembly and How It Works in WebKit](https://webkit.org/blog/7691/webassembly/?utm_source=frontendfocus&utm_medium=email) story WebKit [Bojler: HTML Email Boilerplate and Guidelines](http://slicejack.github.io/bojler/?utm_source=frontendfocus&utm_medium=email) tools Focused on rendering well on the most popular email clients. Slicejack [Now UI Kit: A Bootstrap 4 UI Kit](http://demos.creative-tim.com/now-ui-kit/index.html#?utm_source=frontendfocus&utm_medium=email) tools Creative Tim [country-flags: SVG and PNG Renders of All Countries' Flags](https://github.com/hjnilsson/country-flags?utm_source=frontendfocus&utm_medium=email) tools Hampus Joakim Nilsson [$20 Free Credit on a new account](http://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-sponsored) Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit. linodeSponsor [billboard.js: A Chart Library, based on D3 v4+](https://naver.github.io/billboard.js/?utm_source=frontendfocus&utm_medium=email) code [80+ examples here.](https://cdn.rawgit.com/naver/billboard.js/8413325d/demo/) Naver Corp [ZangoDB: A MongoDB-Like Interface for HTML5 IndexedDB](https://github.com/erikolson186/zangodb?utm_source=frontendfocus&utm_medium=email) code Erik Olson [Amplitude.js: A Modern HTML5 Audio Player](https://github.com/521dimensions/amplitudejs?utm_source=frontendfocus&utm_medium=email) code No dependencies required. [Demo here](https://521dimensions.com/open-source/amplitudejs). 521 Dimensions Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/294) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK