#332: Improving Page Performance with Chrome DevTools

This Week's HTML5, CSS, Browser, and Frontend News

#332 — March 21, 2018 Read on the Web Frontend Focus TUI Chart: Attractive Charts for the Web — Cross-browser (including IE 8) with bar, line, area, bubble, pie, heatmap, bullet, and boxplot charts out of the box as well as combined graphs. NHN Entertainment ▶  Improving Page Performance with Chrome DevTools — 11 minutes of useful lessons including capturing screenshots as a page loads, using local overrides, and tweaking source on the fly then saving it locally. Umar Hansa How BBC Interactive Content Works Across AMP, Apps, and the Web — Publishing content to numerous media can cause a lot of extra development overhead. Here, Chris Ashton explains how one area of the BBC have approached the problem. Smashing Magazine Why Your Site is Slow — Issues like slow queries and redundant JS files are often blamed when a site is slow, although there are numerous factors that can affect performance. This presentation dives into the many answers to this question and looks for the root causes. Pantheon sponsor Unblocking Clipboard Access in Chrome 66+ — The Async Clipboard API supersedes the document.execCommand approach to clipboard interactions from JavaScript and makes the process asynchronous. Jason Miller Sensor APIs Are Now W3C Candidate Recommendations W3C Bringing Expressive Typography to Microsoft Edge with Variable Fonts — Leaning on recent innovations of OpenType Variable Fonts. Microsoft Edge Dev Blog Pell 1.0: A Tiny, Simple WYSIWYG Web Text Editor — No dependencies, ES6, and only 1.38KB minned and gzipped. Play with a demo here. Jared Reich eBook: The Modern App Stack (MERN and more) — This free book includes code tutorials you can explore from your eReader or phone. MONGODB sponsor How We Adopted CSS Grid at Scale — From team buy-in to fallbacks, how one team approached the implementation of CSS Grid. Julian Gaviria Sensor APIs are now W3C Candidate Recommendations W3C 💻 Jobs Software Engineer at Fat Lama (London) — Technology and engineering is at the heart of what we do at Fat Lama - help us build the rental marketplace for everything. Fat Lama Senior Frontend Engineer (Berlin) — Love working at scale, solving challenging engineering problems, and think like our customer? This is the place for you. ZALANDO Front-End Expert? Sign Up for Vettery — Create your profile and we'll connect you with top companies looking for talented front-end developers. Vettery 📙 Tutorials The Security and Performance Benefits of rel='noopener' — When a link opens another page in a new tab or window, the new page can still access the previous one with JavaScript. You can prevent this with a single rel attribute. Adam Laki CSS Grid Application Layout in Production — Application layout using CSS Grid while maintaining IE11 support. Philipp Sporrer Rendering Engines and Tips to Optimize Their Performance Alexander Zlatkov Theming with Variables: Globals and Locals — How to use CSS variables to theme a design system without falling into common traps. Andrés Galante Creating a Vue File Reader Component Using the FileReader API Alex Jover Morales Getting Started with the Web MIDI API — Covers the basics of MIDI and the Web MIDI API showing how simple it is to create frontend apps that respond to musical inputs. It's quite niche but also neat the Web platform can handle this. Peter Anglea Easing Gradients: Why and How — Makes linear CSS gradients look a lot nicer but requires workarounds for now. Andreas Larsen CSS: The Bad Bits (And How to Avoid Them) — The 'bad bits' being global scope, overly specific rules, implicit percentage rules, and z-index. Joe Forshaw 🔧 Code, Tools & Demos Trianglify.io: Web-Based Low-Poly Triangle Pattern Generator — Ideal for backgrounds. Can output PNG or SVG. Quinn Rohlf Fix JavaScript Bugs Like a Boss 🛠 ROLLBAR sponsor 27 Examples of Styling HTML Tables from CodePen — A wide variety of examples here complete with code to learn from. Freebie Supply Driver.js: A 'Tour'-Style Mechanism to Drive a User's Focus Across Web Page Elements Kamran Ahmed OffscreenCanvas Nearly Here; A Demo — Currently behind flags in Chrome and Firefox, OffscreenCanvas provides a canvas that can be rendered off-screen (such as in Web Workers). Eric Bidelman on Twitter Try Ext JS: A JavaScript Framework to Build Responsive Apps Quickly Sencha, Inc. sponsor Super Mario World Made Only with CSS Gradients — Just an animation but pretty cute techniques used here. Alcides Queiroz

A Cooperpress publication. Change your email address or Stop getting this newsletter © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom