--- title: "The Internet is rotting (still) ☹️" publication: "Frontend Focus" issue: 498 published_at: "2021-07-07" canonical_url: "https://frontendfoc.us/issues/498" --- Plus a complete guide to Grid well worth bookmarking. | [Unsubscribe](https://frontendfoc.us/leave/*|UID|*) [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​498 — July 7, 2021 | [Read on the web](https://frontendfoc.us/issues/498) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1625657105/anege2vhrhk12viht67v.jpg)](https://css-tricks.com/when-a-click-is-not-just-a-click/) [When a Click is Not Just a Click](https://css-tricks.com/when-a-click-is-not-just-a-click/) — There are nuances to consider when listening for a click event (such as a ‘click’ sent from a keyboard versus one from a mouse). This post dives into how you can distinguish different types, and what opportunities arise from identifying them. Travis Almand [RenderingNG: Ready for The Next Generation of Web Content](https://developer.chrome.com/blog/renderingng/) — Chrome’s rendering lead outlines how work on the next-generation of rendering architecture for Chromium is nearing completion. They are hoping to “complete the process of designing, building and shipping this architecture” in 2021. Chris Harrelson [![\](https://copm.s3.amazonaws.com/f5914fcf.jpg)](https://frontendmasters.com/courses/intermediate-react-v3/?utm_source=frontendfocus&utm_medium=email&utm_campaign=reactv3) [Learn to Build Scalable React Apps](https://frontendmasters.com/courses/intermediate-react-v3/?utm_source=frontendfocus&utm_medium=email&utm_campaign=reactv3) — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course. Frontend Masters sponsor [The Internet Is Rotting](https://www.theatlantic.com/technology/archive/2021/06/the-internet-is-a-collective-hallucination/619320/) — Link rot and content drift is a massive growing issue for the web as a whole, and sadly too much has been lost already. Funnily enough, I remember reading [Jakob Nielsen complaining about this problem](https://www.nngroup.com/articles/fighting-linkrot/) 23 years ago too! Jonathan Zittrain [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) — This comprehensive guide to CSS Grid has recently been updated. It focuses on all the settings both for the grid parent container and the grid child elements. A valuable resource worth bookmarking. Chris House **⚡️ Quick bits:** - [Here are the release notes](https://webkit.org/blog/11736/release-notes-for-safari-technology-preview-127/) for Safari Technology Preview 127. - Talking of Safari, it [now has a CSS Grid inspector](https://twitter.com/bdc/status/1412049850116591619). - Chris Coyier [shares some of the WordPress plugins he finds compelling](https://twitter.com/chriscoyier/status/1412412012857118727) in this Twitter thread. - [Typetura](https://typetura.com) is a neat new typesetting tool for the web, [this brief video](https://twitter.com/typetura/status/1412481064166166530) does a great job of demoing it. - [This W3C document has over 100 counter-style code snippets](https://www.w3.org/TR/predefined-counter-styles/) for a range of languages and cultures that can be dropped into your style declarations. - If digging into these sorta things is your jam, [here's the CSS Fonts Module Level 5 public working draft](https://www.w3.org/TR/css-fonts-5/) from the W3C. - That [Tim Berners-Lee NFT sold](https://edition.cnn.com/style/article/tim-berners-lee-nft-auction/index.html) for just over $5 million. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1625652384/nd4pnksoswfj1wrldxxz.png)](https://www.youtube.com/watch?v=eEXhvtV4hkg) ▶[Building a Responsive Layout with CSS Grid and Container Queries](https://www.youtube.com/watch?v=eEXhvtV4hkg) — Watch along as Steph Eckles creates a layout that starts as a standard grid and gets additional styles (if the browser supports container queries). Alex Trost [Improving Cumulative Layout Shift at Telegraph Media Group](https://web.dev/telegraph/) — How The Telegraph, a leading UK news website, managed to reduce their CLS scores by 250%. Chris Boakes [Stop Using ‘Pop-up’](https://adrianroselli.com/2021/07/stop-using-pop-up.html) — When you say pop-up do you mean a new window, a browser dialog, a tool-tip, or maybe something else? Adrian pleads with us to choose a term that accurately describes the control you want. Adrian Roselli [Monitor Lighthouse Scores and Core Web Vitals](https://www.debugbear.com/?utm_campaign=feFocus1) — DebugBear continuously monitors site speed and provides front-end developers with the data they need to improve it. DebugBear sponsor [Experimenting with WebTransport](https://web.dev/webtransport/) — A new API offering low-latency, bidirectional, client-server messaging. Jeff Posnick [Improving CSS Variables in WebKit](https://engineering.widen.com/blog/Improving-CSS-Variables-in-WebKit/) Tyler Wilcock [Adding Shadows to SVG Icons With CSS and SVG Filters](https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/) Joel Olawanle [Creating A Scalable "Star Rating" Without JS (and No SVG/Image for the Star)](https://dev.to/afif/scalable-star-rating-without-js-and-no-svg-or-image-for-the-star-2mef) Temani Afif [Animate On Scroll using IntersectionObserver](https://dev.to/keefdrive/animate-on-scroll-using-intersectionobserver-5dg1) Keerthi Jobs [Senior Frontend Developer (Vue, Nuxt) - Remote](https://www.linkedin.com/jobs/view/2587545094/) — We’re seeking an engineer to join our team at Upwork. You’ll be building apps (using Vue & Nuxt) that are used by millions of our users daily. Upwork [Frontend Engineer (React, New York)](https://angel.co/company/dovetale/jobs/1475158-frontend-engineer) — Dovetale helps Shopify merchants like KontrolFreek and Italic grow their creator community. Built in NYC and backed by Uber founders. Dovetale [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 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/kedvfuv7icr3d5dohmb2.jpg)](https://medium.com/naver-fe-platform/introducing-flicking-v4-with-more-customization-and-ui-preserving-6b22073217a3) [Introducing Flicking V4 with More Customization and UI Preserving](https://medium.com/naver-fe-platform/introducing-flicking-v4-with-more-customization-and-ui-preserving-6b22073217a3) — Here’s a major new version of Naver’s popular open source carousel library. Wood Neck [![\](https://res.cloudinary.com/cpress/image/upload/v1625651485/ypsnpmqoxjksawfqwvse.gif)](https://gra.dient.art/) [GradientArt: An Advanced CSS Gradient Editor](https://gra.dient.art/) — This is a gorgeous visual gradient editor that lets you customize just about every aspect of a CSS gradient’s properties. You can even quickly scale, rotate, or reposition the gradient as needed before grabbing the CSS. Yoav Kadosh [Typographic Scale Calculator: Choose The Right Font Size From A Harmonious Type Scale (Inspired by The Way Music Works)](https://www.layoutgridcalculator.com/typographic-scale/) — Choose a base font size, ratio, and scale and the values are generated automatically. A similar tool is found [here](https://www.modularscale.com/). Jean-Lou Désiré [Milkdown: A Plugin-Driven WYSIWYG Markdown Editor](https://github.com/saul-mirone/milkdown/) — Built on top of CodeMirror, the plugin system lets you easily enable or disable features like tables, LaTex support, and slash commands. [Try it out here](https://saul-mirone.github.io/milkdown/#/online-demo). Saul Mirone [margin-margin-revolution.css: A Game to Help You Never Forget the Order of Margins in CSS](https://defaced.dev/web/margin-margin-revolution/) — Ha! It's a sort of plain text version of _Dance Dance Revolution._ Chris Johnson [Free Chat/Messaging UI Kits for Your Website or App](https://getstream.io/chat/ui-kit/?utm_source=frontend_focus&utm_medium=sponsorship&utm_content=developer&utm_campaign=07_07_2021) Stream sponsor [Content Placeholder for Tailwind CSS](https://github.com/javisperez/tailwindcontentplaceholder#demo) — This Tailwind plugin adds utility classes for showing placeholders during a ‘loading’ state for your UI elements. Javis V. Pérez [Instant Vitals: Tools to Track Core Web Vitals Metrics](https://vitals.dev/) Instant Domain Search **🕰 ICYMI** (_Older links still worth checking out_) [The Simplest Way to Download SVG/DOM Elements](https://fabiwo.io/blog/download-the-dom) — An easy, practical guide on how to download SVG or any DOM element as SVG, PNG or PDF. Fabian Wolff [The Future of Web Software Is HTML-Over-WebSockets](https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/) — HTML-over-Websockets continues having a moment - here's the history of how we got here, and why the new approach takes the best of that history to make the future. Matt E. Patterson [Measuring Frontend Latency: A Strategy to Simplify The Complex](https://medium.com/glossier/measuring-frontend-latency-our-strategy-to-simplify-the-complex-7e0ae0fe3c6e) — How retailer Glossier got serious about measuring web performance; enabling them to reduce latency by nearly a third. Aaron Suggs [Revealing Contents on Scroll Using JavaScript’s Intersection Observer API](https://daveyhert.hashnode.dev/revealing-contents-on-scroll-using-javascripts-intersection-observer-api) David Herbert [Intrinsic Typography is the Future of Styling Text on the Web](https://css-tricks.com/intrinsic-typography-is-the-future-of-styling-text-on-the-web/) Scott Kellum [Testing Fonts for Accessibility](https://uxdesign.cc/testing-fonts-for-accessibility-817f47011078) Colin Shanley 📬 **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|*)