--- title: "Learning to code with your voice" publication: "Frontend Focus" issue: 678 published_at: "2025-02-05" canonical_url: "https://frontendfoc.us/issues/678" --- Plus Kanye's weird blend of old and new Web design, reflecting on the mistakes of CSS, and how to handle favicons in 2025. | Together with [![Clerk\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_220,h_64/e_make_transparent/co_white,e_outline:5/j3vhv1hnwqeffgkzzlvu.png)](https://go.clerk.com/zJ5rV7O) πŸš€ **Frontend** Focus #​678 β€” February 5, 2025 | [Read on the web](https://frontendfoc.us/issues/678) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/smyauy2rm0icfddfgirc.jpg)](https://whitep4nth3r.com/blog/how-i-learned-to-code-with-my-voice/) [From Pain to Productivity: How I Learned to Code with My Voice](https://whitep4nth3r.com/blog/how-i-learned-to-code-with-my-voice/) β€” After developing severe hand pain, Salma sought an alternative way to code β€” she turned to voice control as a solution. Here she outlines the journey of trying different tools, the accessibility considerations, and her new workflow. She also [chatted with Kevin Powell about this change](https://bsky.app/profile/kevinpowell.co/post/3lhebeocmcs23). Salma Alam-Naylor [The Mistakes of CSS](https://css-tricks.com/the-mistakes-of-css/) β€” This post from Juan references an [interesting document from the CSS Working Group](https://wiki.csswg.org/ideas/mistakes) from a few years back that you may not have seen β€” it outlines some of the β€˜mistakes’ made in the design of CSS. β€œ_the value of getting things right the first time is a beast of burden_” Juan Diego RodrΓ­guez [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/b4a54cf0.png)](https://go.clerk.com/zJ5rV7O) [How to Customize Next.js Metadata](https://go.clerk.com/zJ5rV7O) β€” Learn all about web page metadata, its use, and different strategies for customizing it in your Next.js application. Clerk sponsor πŸ“Š [How Does Ever-Increasing Page Size Affect Your Users?](https://www.speedcurve.com/blog/page-bloat-2025/) β€” Web performance expert Tammy Everts tells us the median Web page is 8% bigger than a year ago and looks into what effect this has through statistics calculated from the latest data from the [HTTP Archive.](https://httparchive.org/) Tammy Everts ⚑️ IN BRIEF - 🦊 [Version 135 of Firefox landed yesterday](https://www.mozilla.org/en-US/firefox/135.0/releasenotes/) adding new translation support, credit card autofill, an AI chatbot, and more. The [developer changes are here](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/135). - πŸ‘οΈ Microsoft says it has [improved text contrast of rendered text](https://www.bleepingcomputer.com/news/microsoft/microsoft-improves-text-contrast-for-all-windows-chromium-browsers/) in all Chromium browsers on Windows. - 🟒 The Chrome Dev Rel team is starting a monthly digest of Baseline changes, the [first of which (for January 2025) is now live](https://web.dev/blog/baseline-digest-jan-2025?hl=en). - πŸŽ₯ You can now [register a _.channel_ domain](https://blog.google/feed/channel-top-level-domain/) via [Google Registry](https://registry.google/). - πŸš€ [Astro 5.2](https://astro.build/blog/astro-520/), the latest version of the popular content site framework, has landed with Tailwind CSS v4 support. πŸ“™ Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1738668629/y7xpcnqvazukz0tuoojt.png)](https://frontendmasters.com/blog/creating-an-angled-slider/) [Creating an Angled Slider](https://frontendmasters.com/blog/creating-an-angled-slider/) β€” The end result here is pleasing. Zach shows us how to create a angled slider complete with hover effects using just HTML and CSS (mainly `grid`, `clip-path`, `:has()`, and nesting). Zach Saucier 🟨 [How to Favicon in 2025: Three Files That Fit Most Needs](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) β€” Asks us to β€œ_stop the icon generator madness_” and take a smarter approach, adopting a minimal set of icons that fits most modern needs. Andrey Sitnik [The Magic of Small Engineering Teams](https://dub.link/focus-feb5) β€” How PostHog uses small teams to ship fast and scale at the same time. PostHog sponsor [Avoid Multiple Page Redirects: How Redirects Impact Page Speed](https://www.debugbear.com/blog/avoid-multiple-page-redirects) β€” Redirects add in steps that can delay page load, in-turn affecting user experience and Core Web Vitals results. As such, this post looks at how to optimize redirects to ensure faster browsing for visitors. Conor McCarthy [Pure CSS Mixin for Displaying Values of Custom Properties](https://kizu.dev/preview-mixin/) β€” An article (and [associated package](https://github.com/kizu/mixins)) that presents a native CSS mixing that outputs various values as pseudo-elements. Roman Komarov β–Ά[Scroll State Queries are on the Way](https://www.youtube.com/watch?v=mRMLN6RU1FU) β€” Kevin talks us through what CSS scroll-state brings to the table ([available in Chrome 133 beta](https://developer.chrome.com/blog/chrome-133-beta#css_scroll_state_container_queries)), along with other recent additions. Kevin Powell [Adding Mapping to Your Pages with Leaflet.js](https://frontendmasters.com/blog/mapping-with-leaflet/) β€” Quick, easy, and open source. Raymond Camden [Keeping the Page Interactive While a View Transition is Running](https://www.bram.us/2025/01/29/view-transitions-page-interactivity/) Bramus Van Damme [Building a Progress-Indicating Scroll-to-Top Button in HTML and CSS](https://matuzo.at/blog/2025/scroll-to-top-button) Manuel Matuzovic [How to Set WebGL Shader Colors with CSS and JavaScript](https://www.nmattia.com/posts/2025-01-29-shader-css-properties/) Nicolas Mattia πŸ“° Classifieds Seeking a designer who reads Frontend Focus and writes JavaScript? [Let's collaborate](https://gregwolanski.com/?utm_source=frontendfocus&utm_medium=email&utm_campaign=issue-678&utm_content=lets-collaborate). --- [Meet Harmony](https://bit.dev/blog/meet-harmony-a-practical-solution-for-composability?utm_source=FrontEnd%20Focus&utm_id=15&utm_medium=newsletter): An open source library for composing consistent and highly performant platforms from independent business features. 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1738323131/rp905zvbclrj8cqdazed.png)](https://waveform-renderer.vercel.app/) [Waveform Renderer](https://waveform-renderer.vercel.app/) β€” A browser-based tool for creating a waveform from an audio file. Just add an mp3 or wav file and a waveform will be rendered β€” you can also edit the look. Think of it as a more focused alternative to [Wavesurfer.js](https://wavesurfer.xyz/) which also deals with playback, regions, and plugins. [Repo here](https://github.com/maximux13/waveform-renderer). Andres Felipe Alarcon [Plotly 3.0: A JavaScript Graphing Library](https://plotly.com/javascript/) β€” A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. [v3](https://github.com/plotly/plotly.js/releases/tag/v3.0.0) is largely to remove deprecations, fix bugs, and a switch to [esbuild.](https://esbuild.github.io/) Plotly, Inc. [Developer Kit: Learn How to Troubleshoot Front-End Issues Faster](https://www.datadoghq.com/resources/frontend-developer-kit/?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=dg-rum-ww-frontend-dev-kit-ff) β€” Get the kit curated to help front-end developers better understand user activity and resolve issues more efficiently. Datadog sponsor 🎨 [tinygradient 2.0: A Gradient Generation Library](https://mistic100.github.io/tinygradient/) β€” Generate color gradients with an unlimited number of color stops and steps in JavaScript to use as you wish. Supports named colors, hex colors, RGV, HSVa, and RGB CSS strings. [GitHub repo.](https://github.com/mistic100/tinygradient) Damien Sorel [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1738738949/gjnpld7hvekxlyayftqc.png)](https://somonoco.com/) [Monoco: A Small JS Library for Smooth 'Squircle' Corners for HTML Elements](https://somonoco.com/) β€” The main page includes a neat little interactive demo that showcases all the different possibilities for these alternatives to run-of-the-mill rounded corners. Includes implementations for React and Svelte. monokai [Tabler 1.0: A Bootstrap 5-Based Open UI Kit for Webapps](https://tabler.io/blog/tabler-1.0) β€” The 1.0 release of this free, open-source UI kit adds dark theme support, new pages, a faster workflow powered by the Eleventy static site generator, and more. PaweΕ‚ Kuna [StyleConsoleLog: An Interactive Tool to Add CSS to Console Messages](https://styleconsolelog.com/) β€” Uses string substitution along with CSS defined in the second argument, as outlined on MDN [here](https://developer.mozilla.org/en-US/docs/Web/API/console#styling_console_output). StyleConsoleLog πŸ“¬ **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/678/*|UID|*?ipx=t)