--- title: "Making your page faster before it even loads" publication: "Frontend Focus" issue: 657 published_at: "2024-08-28" canonical_url: "https://frontendfoc.us/issues/657" --- Plus share your thoughts on CSS in 2024. | 👋 **Hey!** Hope you're doing well. I'm back after a week away in Germany, and as such, usual service resumes. _Let's get to it_. __ _Chris Brandrick, your editor_ Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/frontend-system-design/?utm_source=email&utm_medium=frontendfocus&utm_content=fsd) 🚀 **Frontend** Focus #​657 — August 28, 2024 | [Read on the web](https://frontendfoc.us/issues/657) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1724793727/yobcjeteozjmlae2cpcu.png)](https://survey.devographics.com/en-US/survey/state-of-css/2024) [The _State of CSS 2024_ Survey](https://survey.devographics.com/en-US/survey/state-of-css/2024) — The increased pace of evolution in the CSS space seems to show no signs of slowing, as such we can now do so much more than we could just a few short years ago (be that advanced math, scroll-triggered animations, etc). As such, this [recently launched survey](https://dev.to/sachagreif/the-2024-state-of-css-survey-is-now-open-4o5h) — which covers things like layout, color, typography, accessibility, and more — plays an important role in letting browser vendors know what we all think about the path CSS is taking. _Be sure to fill it out, and tell em we sent ya_. 😉 Devographics [How to Make Your Web Page Faster Before It Even Loads](https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/) — Can we measure the events that happen _before_ the first byte of a web page is received by the browser, and in turn optimize them to make our web pages and apps load even faster? Salma Alam-Naylor [![\](https://copm.s3.amazonaws.com/ff6257be.png)](https://frontendmasters.com/courses/frontend-system-design/?utm_source=email&utm_medium=frontendfocus&utm_content=fsd) [Front-End System Design](https://frontendmasters.com/courses/frontend-system-design/?utm_source=email&utm_medium=frontendfocus&utm_content=fsd) — Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more. Frontend Masters sponsor [Can You Convert a Video to Pure CSS?](https://dgerrells.com/blog/can-you-convert-a-video-to-pure-css) — Can or _should..?_ A highly detailed exploration of using scroll-based animations as a way to play video as just CSS. David has also made a [neat browser-based tool for converting any video into a pure CSS keyframe animation](https://dgerrells.com/video-to-css) ready to be dropped into your site. David Gerrells [`blocking=render`: Why Would You Do That?!](https://csswizardry.com/2024/08/blocking-render-why-whould-you-do-that/) — Harry stresses that unless you know you need [this behavior](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#blocking-attributes), _you don’t need it_. Harry Roberts ⚡️ Quick Links - 😉 jQuery, everyone's favorite JavaScript library, [turned 18](https://x.com/HenriHelvetica/status/1828125763679514964) earlier this week. - 📱 The UK gov is [carrying out an investigation](https://www.gov.uk/cma-cases/mobile-browsers-and-cloud-gaming) around mobile browsers and browser engines, however Alistair highlights [how Apple could "_follow the proposals whilst violating their intention_"](https://alistairshepherd.uk/writing/cma-mobile-browsers-remedies/). - 🖼️ [Public Work](https://public.work) is a neat site that allows you to search over 100,000 copyright-free images from The MET, New York Public Library, and more. - ✏️ Instead of leaving a comment under a blog post, why not [draw your response](https://danq.me/2024/08/15/draw-me-a-comment/)? 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1724825209/a5ueibebfpvtysykjhab.png)](https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/) [Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations](https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/) — It’s still a _touch_ early to truly adopt these two features (only Chrome and Edge have full support today), but it can’t hurt to explore both [Anchor positioning](https://caniuse.com/css-anchor-positioning) and [scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations) to get an overview of just what could be done in the near future – it's a nifty effect! Temani Afif [🙈 Spoiler Alert: It Needs to Be Accessible](https://www.scottohara.me/blog/2024/08/22/spoiler.html) — Here’s what Scott would expect from a would-be spoiler component, “_if someone were to build one, or if one were to ever be standardized_”. Scott O'Hara [Increase Library Adoption with Interactive Coding Tutorials](https://tutorialkit.dev/?utm_source=fe_focus&utm_medium=secondary) — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure. StackBlitz sponsor [Basic Keyboard Shortcut Support for Focused Links](https://ericwbailey.website/published/basic-keyboard-shortcut-support-for-focused-links/) — Turns out there’s a _lot_ of different actions you can perform via the keyboard when an anchor element is focused. Eric Bailey [Double Your Specificity with This One Weird Trick](https://cirrus.twiddles.com/blog/2024/08/21/double-your-specificity-with-this-one-weird-trick/) — A bit of a hack, sure, but by doubling up the relevant selector(s) you can boost your specificity without resorting to overrides or using `!important`. James Nash [Five WASM Use Cases for Frontend Development](https://frontenddogma.com/posts/2024/5-wasm-use-cases-for-frontend-development/) — [WebAssembly](https://webassembly.org/) is gaining ground in frontend development, so how should you consider applying it? Eleanor Hecks [Elastic Overflow Scrolling](https://css-tricks.com/elastic-overflow-scrolling/) — Creating a CSS-only “rubber band” scrolling effect. Dave Seidman [Common Misconceptions About How to Optimize LCP](https://web.dev/blog/common-misconceptions-lcp?hl=en) Brendan Kenny [What Skills Should You Focus on as a Junior Web Developer in 2024?](https://frontendmasters.com/blog/what-skills-should-you-focus-on-as-junior-web-developer-in-2024/) Frontend Masters 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/cb0mihimzajabydodrb4.jpg)](https://github.com/jcubic/tagger) [Tagger: Zero Dependency, Vanilla JavaScript Tagging Library](https://github.com/jcubic/tagger) — You can play with [a live demo here](https://codepen.io/jcubic/pen/YbYpqO). Jakub T. Jankiewicz [Web Vitals: Chrome Extension for Instant Feedback on Loading, Interactivity and Layout Shift Metrics](https://chromewebstore.google.com/detail/ahfhijdlegdabablpippeagghigmibma) — Includes support for all of the Core Web Vitals. Addy Osmani [Extensible JavaScript Builder for Surveys and Forms](https://surveyjs.io/?utm_source=frontend_focus&utm_medium=email) — Streamline form management in your JS app with SurveyJS—fast, secure, and code-free. SurveyJS sponsor [Replace Twitter (X) Embeds with Semantic HTML](https://shkspr.mobi/blog/2024/08/replace-twitter-embeds-with-semantic-html/) — A Python script for converting a public Tweet into embedded, semantic HTML. Terence Eden [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1724829573/p0m3s2mwl8rmsuiax9ka.png)](https://owickstrom.github.io/the-monospace-web/) [The Monospace Web](https://owickstrom.github.io/the-monospace-web/) — A well formed, minimalist CSS design exploration, featuring lists, tables, charts, ASCII drawings, etc. Oskar Wickström [Fuite 5.0: A Tool for Finding Memory Leaks in Web Apps](https://github.com/nolanlawson/fuite) — A CLI tool that you can point at a URL to analyze for memory leaks. [Here’s how it works.](https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/) There’s also [a video tutorial](https://www.youtube.com/watch?v=H0BHL2lo89M). Nolan Lawson [Milkdown: Plugin-Driven WYSIWYG Markdown Editor Framework](https://milkdown.dev/) — A lightweight WYSIWYG Markdown editor based around a plugin system that enables a significant level of customization. It’s neat to see [the docs](https://milkdown.dev/docs/guide/getting-started) are rendered by the editor itself. [GitHub repo.](https://github.com/Milkdown/milkdown) Mirone [heic-to: Convert HEIC/HEIF Images to JPEG or PNG In-Browser](https://github.com/hoppergee/heic-to) — [HEIF](https://en.wikipedia.org/wiki/High_Efficiency_Image_File_Format) is a modern container format for storing images but is frequently unsupported by many tools, so converting supplied HEIF images to more popular formats could be useful. Hopper Gee [RoundtableJS: A JavaScript Library for Building Complex Surveys, Forms, and Data Annotation Tasks](https://github.com/roundtableAI/roundtable-js) roundtableAI [Time Picker: A Date/Time Picker Component Built with React and shadcn/ui](https://time.openstatus.dev/) OpenStatus 📰 Classifieds [Blacksmith](https://blacksmith.sh/?utm_source=cooperpress&utm_medium=classified&utm_campaign=aug-28&utm_term=frontend) runs GitHub Actions up to 2x faster at half the cost with a one-line change. Trusted by 100+ companies like GitBook and Slope. --- Boost your PostgreSQL skills with [Redgate’s 101 webinar series](https://www.red-gate.com/hub/events/series/postgresql-101) of easy-to-follow, expert hosted sessions. It’s PostgreSQL, simplified. 📬 **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://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/657/*|UID|*?ipx=t)