--- title: "The highlights from Chrome Dev Summit" publication: "Frontend Focus" issue: 516 published_at: "2021-11-10" canonical_url: "https://frontendfoc.us/issues/516" --- Plus Jay Hoffmann digs into the 'browser wars' of the late 90s. | 👋 Hey folks. The Chrome Dev Summit took place last week, as such a fair few of the items this week link to news / articles off the back of that. Thanks for reading! __ _[Chris Brandrick](https://twitter.com/chrisbrandrick), your editor_ [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​516 — November 10, 2021 | [Read on the web](https://frontendfoc.us/issues/516) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1636475722/bzpotu8to5szem37l5lr.webp)](https://web.dev/cds2021-updates/) [Everything Announced at Chrome Dev Summit 2021](https://web.dev/cds2021-updates/) — A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more. [Una Kravets has a succint five-minute recap video here](https://youtu.be/n57U2_-3NLQ) if you'd prefer that. - There's a new Lighthouse API to [measure performance and best practices throughout a user flow](https://web.dev/lighthouse-user-flows/). - An [updated version of PageSpeed Insights is on the way](https://web.dev/whats-new-pagespeed-insights/), this post looks at what's new. - The Chrome Speed Metrics Team are [seeking feedback on plans](https://web.dev/responsiveness/) to measure responsiveness on the web. - [This post highlights](https://web.dev/smoothness/) recent progress made towards an animation smoothness metric. - Richard MacManus of The New Stack [shares his thoughts](https://thenewstack.io/chrome-dev-summit-2021-its-a-web-evolution-not-revolution/) on Google’s Chrome Dev Summit, calling it a 'web evolution, not revolution'. Rachel Andrew [The Browser Wars](https://css-tricks.com/chapter-10-browser-wars/) — Jay’s excellent long-running [Web History series](https://css-tricks.com/category/history/) returns, this time with a focus on the fierce browser wars of the late 90s amongst the likes of Microsoft, Netscape, and Mozilla. Jay Hoffmann [![\](https://copm.s3.amazonaws.com/003d1b6c.png)](https://www.telerik.com/blogs/batch-editing-with-kendo-ui-grid-for-angular?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-prod-masters-of-the-grid&utm_content=blog-batch-editing-with-kendo-ui-grid-for-angular) [Implementing Batch Editing in an Angular Data Grid the Easy Way](https://www.telerik.com/blogs/batch-editing-with-kendo-ui-grid-for-angular?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-prod-masters-of-the-grid&utm_content=blog-batch-editing-with-kendo-ui-grid-for-angular) — Use this tutorial to learn how to use Kendo UI for Angular to create a Data Grid that allows updates and saves in bulk. Progress Kendo UI for Angular sponsor [Chrome's New Feature to Record and Replay User Flows](https://developer.chrome.com/docs/devtools/recorder/) — It’s only a preview feature in Canary builds right now, but Chrome is adding a new _Recorder_ panel to its DevTools which lets you record and replay a string of actions on a page (including under simulated slow network conditions). You can also measure the flow and get a performance trace for analysis. [Minko Gechev shared a video of it in action over on Twiter](https://twitter.com/mgechev/status/1457943598213832707). Jecelyn Yeen (Google) **⚡️ Quick bits:** - The W3C's Annual Conference also took place last month over five days, and now the [full archive of all the breakout sessions is online](https://www.w3.org/2021/10/TPAC/breakouts.html), complete with slides and video. You're bound to find something worth watching here —_I just got done with Uchi Uchibeke's talk on the Web Monetization API_. - Dev browser Polypane [just hit version 7](https://polypane.app/blog/polypane-7/) bringing with it a slew of new features — including a system-wide color picker, `prefers-contrast` emulation support and live editing of pseudo elements across all viewports. - The [second alpha of Tailwind CSS version 3 is out](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.2) if you fancy battle-testing it a bit before the final release. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1636480393/yayzlexgvmijn8qayanz.png)](https://iconmap.io/blog) ['We Analyzed 425,909 Favicons'](https://iconmap.io/blog) — An interesting bit of work here digging into the current favicon ecosystem by fetching and analysing the favicons of the top 100,000 websites. You can see a map of [all the favicons fetched here](https://iconmap.io). Adam, Nathan & Patrick [Eye-Tracking in Mobile UX Research](https://www.smashingmagazine.com/2021/10/eye-tracking-mobile-ux-research/) — Explores the latest trends in eye-tracking and how the methodology can be included in the UX researcher’s toolbox. Mariana Macedo [Put the “Flow” in Your Workflows with Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=kanban) — Looking for an intuitive white-board style project management tool? Collaboration has never been easier with Shortcut. Shortcut (formerly Clubhouse.io) sponsor [![\](https://res.cloudinary.com/cpress/image/upload/v1636480026/ymsocvyi7uvxpnryyipo.jpg)](https://tympanus.net/codrops/2021/10/06/how-to-implement-and-style-the-dialog-element/) [How to Implement and Style the Element](https://tympanus.net/codrops/2021/10/06/how-to-implement-and-style-the-dialog-element/) — An in-depth look at the native HTML dialog element, showing you how to implement a user-friendly, accessible version on your site. Christian Kozalla [First Steps with GPT-3 for Frontend Developers](https://blog.maximeheckel.com/posts/first-steps-with-gpt-3-and-beyond/) — Consider this a beginners guide to OpenAI’s API, easing frontend devs into the world of GPT-3 and giving you a heads-up on all the tools needed to start building AI-powered apps. Maxime Heckel [A Beginner's Guide to Responsive Images](https://www.codeinwp.com/blog/responsive-images/) — Includes live demos and code snippets introducing syntax for the `srcset` and `sizes` attributes and the `` element, for developers getting started with responsive images. Louis Lazaris beginner [Creating the Effect of Transparent Glass and Plastic with Three.js](https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/) — The effects you can pull off in the browser nowadays continue to impress me as someone who grew up on 8-bit graphics(!). Kelly Milligan [Learn Responsive Design](https://web.dev/learn/design/) — This course is an excellent primer exploring all contemporary aspects of responsive design. Jeremy Keith beginner [Favicons: How to Make Sure Browsers Only Download the SVG Version](https://css-tricks.com/favicons-how-to-make-sure-browsers-only-download-the-svg-version/) Chris Coyier (via Šime Vidas) [If HTML and ARIA Don’t Allow It, It’s Probably A Bad Idea](https://www.tempertemper.net/blog/if-html-and-aria-dont-allow-it-its-probably-a-bad-idea) Martin Underhill [Optimizing Resource Loading with Priority Hints](https://web.dev/priority-hints/) Sohoni, Osmani, Meenan [Native CSS Nesting: What You Need to Know](https://blog.logrocket.com/native-css-nesting/) Sarah Chima Atuonwu [An Introduction to PostCSS](https://www.sitepoint.com/an-introduction-to-postcss/) Craig Buckler Jobs [Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/DCC51EA91D/senior-web-developer-node-reactjs) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. Komoot [[EU\] JavaScript Developer, Preferably with React Knowledge](https://jobs.smartrecruiters.com/lmgroup/743999721557406-javascript-developer) — New hires get a "buddy" who will guide you through the company, code and the process. Newest technologies, development possibilities and satisfaction :) LastMinute.com [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1636496191/ffn4gncxhz2u6tjpljvs.png)](https://fffuel.co/ssshape/) [ssshape: An SVG Blob/Organic Shape Generator with Extra Controls](https://fffuel.co/ssshape/) — Choose a few random points, then this tool will generate a blob that you can adjust with numerous settings, then copy/export in SVG format. Quite a decent variety of options/outputs here. Sébastien Noël [Iconsax: 6000 Free Icons in Six Different Styles](https://iconsax.io/) — This huge collection of icons is available in multiple styles and design-friendly formats. There’s also [a React version](https://iconsax-react.pages.dev/) and an accompanying [component framework for Vue](https://vuesax.com/). Lusaxweb [Automate Domains, DNS, and SSL Certificates with This Special Offer 👀](https://dnsimple.link/frontend-focus-weekly/2021) DNSimple sponsor [Compressio: An Open Source Image Compression Tool](https://compressio.app/) — Another option for batch image optimization (JPG, PNG, GIF & SVG). Allows 10 images/50MB at a time and includes a quality slider and settings to toggle lossless compression and metadata retention. Choudhary Abdullah [MiniMasonry.js: Minimalist Dependancy Free Masonry Layout Library](https://github.com/Spope/MiniMasonry.js) Spope 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)