---
title: "Frontend and HTML features to be aware of in 2025"
publication: "Frontend Focus"
issue: 674
published_at: "2025-01-08"
canonical_url: "https://frontendfoc.us/issues/674"
---
Plus how best to balance text in CSS. |
Together with [](https://go.clerk.com/ByP5kS0)
🚀 **Frontend** Focus
#674 — January 8, 2025 | [Read on the web](https://frontendfoc.us/issues/674)
[](https://ishadeed.com/article/balancing-text-css/)
[Balancing Text in CSS](https://ishadeed.com/article/balancing-text-css/) — Ahmad kicks off the new year with this great interactive article explaining how we can make text more visually balanced using CSS. It’s a solid run through of what `text-wrap` and its different values can do.
Ahmad Shadeed
[New Frontend Features for Designers in 2025](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/) — Cosima notes that when searching for frontend workflows and toolkits, it’s easy to forget how powerful some of the fundamentals on the web have become. As such, this post is a journey through new features and what they are capable of.
Cosima Mielke [](https://go.clerk.com/ByP5kS0)
[Building a React Login Page Template](https://go.clerk.com/ByP5kS0) — Discover how to create a seamless React login page template with session-based authentication. Enhance your app's security and user experience using react-router-dom for efficient route protection.
Clerk sponsor
[(Relatively) New Things You Should Know about HTML Heading Into 2025](https://frontendmasters.com/blog/bone-up-html-2025/) — Chris Coyier takes a look at some of the more modern features of HTML worth knowing about. Luckily they’re not all cutting edge, but things you can actually use right now.
Chris Coyier
[The Future of Htmx](https://htmx.org/essays/future/) — htmx is the new jQuery? Well, it’s an ideal that the htmx team are actually striving for, looking to emulate the “_technical characteristics of jQuery that make it such a low-cost, high-value addition to the toolkits of web developers_”.
Gross & Petros
💡 In relation to the above, comes the [Triptych Proposals](https://alexanderpetros.com/triptych/) — a set of three initiatives aimed at enhancing HTML's capability to handle network requests, along with reintroducing the "hyper" aspect of hypertext too.
⚡️ IN BRIEF
- ✨ Here's [what's new in DevTools as of Chrome 131](https://developer.chrome.com/blog/new-in-devtools-131), including a new AI assitance panel where you can chat with Gemini to debug your CSS.
- 🎆 ...and here's [what's new in WebGPU as of Chrome 132](https://developer.chrome.com/blog/new-in-webgpu-132) — such as texture view usage, 32-bit float texture blending, and more.
- 🗳️ This may have passed you by as it dropped just before the festive break, but the [results from the State of JS 2024 survey](https://2024.stateofjs.com/en-US) are now live.
- ⭐️ Missed our last issue? It brought together [the top links we shared throughout 2024](https://frontendfoc.us/issues/673). Plenty of good stuff worth revisiting, and the list is [also on Bluesky](https://bsky.app/profile/frontendfocus.bsky.social/post/3ldq72r4mtk2i) if you want to share.
📙 Articles & Tutorials
[Principles of Web Accessibility: How to Approach Accessible Web Interface Design](https://github.com/Heydon/principles-of-web-accessibility) — A dozen, snappy high-level guiding principles for approaching web accessibility.
Heydon Pickering
['HTML Is Actually a Programming Language. Fight Me'](https://www.wired.com/story/html-is-actually-a-programming-language-fight-me/) — “_HTML’s promise is that we can build, make, code, and do anything we want_.”
Tim Carmody
[CSS Wants to Be a 'System'](https://daverupert.com/2024/12/css-wants-to-be-a-system/) — “_At the core of CSS is a series of cascading rules and classes marrying and mingling in an elegant symphony of style application_.”
Dave Rupert
[Product Management Is Broken. Engineers Can Fix It](https://dub.link/focus-jan8) — How redefining how PMs and engineers work together helped PostHog optimize everything they do for speed and autonomy.
PostHog sponsor
🗓️ [CSS Selectors Knowledge](https://css-selectors.dev/advent-calendar/2024) — We shared a bunch of dev focused ‘advent calendars’ last month, but here’s one that we missed — _of course the benefit of sharing now means all the doors are open_ 😉. This resource shares various CSS selectors along with a quick video explainer and quiz to help build out your knowledge.
Frontendly [](https://www.youtube.com/watch?v=0XwWVjQOmyg)
▶[Reckoning: Frontend's Lost Decade](https://www.youtube.com/watch?v=0XwWVjQOmyg) — In this roughly hour long talk Alex discusses platforms, apps, and the mobile web and why it’s important for us to get frontend culture “_[refocused on users, rather than ‘DX’ snake oil](https://bsky.app/profile/infrequently.org/post/3lf4fjumr422r)_”.
Alex Russell
[Publishing a Simple Client-Side JS Package to npm with GitHub Actions](https://til.simonwillison.net/npm/npm-publish-github-actions) — As part of the process of building [Prompts.js](https://simonwillison.net/2024/Dec/7/prompts-js/), a new library for creating simple `await`-able alternatives to `alert()`, `confirm()` and `prompt()`, Simon wanted to make it easy to publish as an npm package too.
Simon Willison
[Knowing CSS is Mastery to Frontend Development](https://helloanselm.com/writings/knowing-css-is-mastery-to-frontend-development) — Frameworks come and go, so Anselm reminds us that understanding the underlying mechanisms of a language is the key to really mastering it.
Anselm Hannemann
[Using HTML's `translate` Attribute to Turn Off Element Language Translation](https://www.stefanjudis.com/today-i-learned/non-translatable-html-elements/)
Stefan Judis
[How to Create Multi-Step Forms with Vanilla JS and CSS](https://css-tricks.com/how-to-create-multi-step-forms-with-vanilla-javascript-and-css/)
Fatuma Abdullaho
🧰 Tools & Resources
[](https://www.cssvariables.com/)
[CSS Variables Editor: A Chrome Extension for Managing Colors in CSS Variables](https://www.cssvariables.com/) — Works with any site that uses CSS variables, but is designed to work well with shadcn/ui or daisyUI. You can also use it to check color contrast accessibility scores and generate palettes via AI.
James Chetwood
[Flexoki — An Open-Source Color Scheme for Prose & Code](https://stephango.com/flexoki) — If you’re looking for a nice color palette to reach for beyond the Tailwind CSS usuals, this here is a solid option. Lots of nice inky colours, inspired by ink/paint pigments on paper. There’s a good explainer here too on the decisions made. [Repo here](https://github.com/kepano/flexoki).
Steph Ango
[Bolt 🤝Supabase Integration Is Live!](https://bolt.new/?utm_source=fe_focus&utm_medium=secondary) — Bolt launched a one-click Supabase integration that lets you instantly spin up a full-stack app with a database.
StackBlitz sponsor
[Type Scale Generator: Interactive Type Scale Editor & Code Generator](https://landin.gs/tools/type-scale-generator/) — Provides a live preview of the settings you choose and you can export the code as CSS, SCSS, Tailwind, or even JSON for use in WordPress.
Landin.gs
[Tipex: An Advanced Rich Text Editor for Svelte](https://github.com/friendofsvelte/tipex) — Based on the popular Tiptap editor framework, it’s customizable, has theming support, and is Svelte 5-ready. [Here’s a live example](https://tipex.pages.dev/).
Friend of Svelte
[](https://www.easing.dev/)
[Easing Graphs: A Gallery of Easing Graphs for CSS and Framer Motion](https://www.easing.dev/) — You can select any of the graphs to interactively customize the easing code as needed, and you can filter by the style of easing (in, out, in-out). Code can be copied as cubic-bezier-based CSS or Framer Motion component.
Alex Vanderzon & Lochie Axon
[jsontr.ee: A Library to Visualize JSON Structures as Dynamic SVG Tree Diagrams](https://github.com/xzitlou/jsontr.ee) — You can try it out on [this playground](https://jsontr.ee/), which provides the option to download the diagram as PNG, or use it in an app with customizable styles.
Lou Alcalá
[HTML to Markdown: An Online Tool to Convert HTML to Markdown](https://www.htmltomarkdown.io/)
Html To Markdown
[tailwindcss-scoped-preflight: A Taiwlind Plugin to Avoid Style Conflicts with Other UI Libraries](https://github.com/Roman86/tailwindcss-scoped-preflight)
Roman Kozodoi
🍷 ...and finally
[](https://bobatealee.itch.io/doom-the-gallery-experience)
[DOOM: The Gallery Experience](https://bobatealee.itch.io/doom-the-gallery-experience) — A game developer has created this amusing version of DOOM, parodying art gallery openings, complete with curated pieces, wine, fancy music, and even hors d’oeuvres. If you fancy starting the new year with some culture then this is playable directly in the browser (_which gives me an excuse to share it here..._).
boba
👹 Talking of DOOM, why not [protect your site with a DOOM flavored CAPTCHA](https://hackaday.com/2025/01/01/protect-your-site-with-a-doom-captcha/). You'll need to slay some monsters to pass. Can your AI do_that?_
📬
**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/674/*|UID|*?ipx=t)