---
title: "HTML hacks that shaped the Web"
publication: "Frontend Focus"
issue: 620
published_at: "2023-11-29"
canonical_url: "https://frontendfoc.us/issues/620"
---
Plus is CSS easier to write in 2023? |
Together with [](https://blog.sentry.io/how-to-id-fix-render-blocking-resources/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q4-jtbd&utm_content=newsletter-jtbd-learn-more)
🚀 Frontend **Focus**
#620 — November 29, 2023 | [Read on the web](https://frontendfoc.us/issues/620)
[](https://tedium.co/2023/11/24/weird-html-hacks-history/)
[Ten Weird HTML Hacks That Shaped the Web](https://tedium.co/2023/11/24/weird-html-hacks-history/) — A curious history lesson looking back at old table hacks, CSS kludges, and various quirky coding strategies that helped web developers get things looking good before we had the modern tools at our disposal today.
Ernie Smith
[Psychology of Speed: A Guide to Perceived Performance](https://calibreapp.com/blog/perceived-performance) — What’s the gap between measured and perceived performance, and which should we use as our goal? This post digs into how people sense and comprehend time, giving us knowledge to make those long waits feel less frustrating.
Karlina Szczur [](https://blog.sentry.io/how-to-id-fix-render-blocking-resources/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q4-jtbd&utm_content=newsletter-jtbd-learn-more)
[Identifying and Fixing Render-Blocking Resources](https://blog.sentry.io/how-to-id-fix-render-blocking-resources/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q4-jtbd&utm_content=newsletter-jtbd-learn-more) — Fixing render-blocking JavaScript and CSS helps improve page load times so sneakerheads don’t bounce to your competitor’s site while waiting for the images of the latest drop to load. [Check some of the best practices](https://blog.sentry.io/how-to-id-fix-render-blocking-resources/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q4-jtbd&utm_content=newsletter-jtbd-learn-more).
Sentry sponsor
[A Few Ways CSS is Easier to Write in 2023](https://www.smashingmagazine.com/2023/11/few-ways-css-easier-write-2023/) — Geoff notes that we’re living through something of a CSS renaissance, with new features, techniques, and ideas coming fast. He shares how this breakneck speed of advancement may seem overwhelming, but these modern changes have, in practice, made CSS ‘easier’ to write.
Geoff Graham (Smashing Magazine)
⚡️ Quick Links
- 🍔 Una shows us how to make a no-JS [hamburger menu with the popover API](https://twitter.com/Una/status/1729236000294174733).
- 📱 Quiche is a new modular [indie-browser for iOS](https://www.macstories.net/reviews/quiche-browser-is-a-beautiful-and-modular-web-browser-for-ios/).
- 🖼️ [A handy list](https://growth.design/psychology) of over 100 'cognitive biases and design principles'.
- 🪐 The [beta of Astro 4.0](https://astro.build/blog/astro-4-beta/) is available, bringing it up to date with Vite 5.
- 🎨 In Chrome Canary it's now possible to [animate/transition the colors of a COLR font](https://twitter.com/hypeddev/status/1729441637535817996) with CSS.
- 🎙️ [_Off The Main Thread_](https://offthemainthread.tech) is a new podcast featuring Jake Archibald and Surma (both formerly of Google / _HTTP 203_).
- 🗓️ 2024's Future Frontend conference [has been scheduled](https://futurefrontend.com/) – it's on June 13-14 in Helsinki, Finland.
📙 **Tutorials, Articles & Opinion**
[](https://www.amitmerchant.com/hollow-text-hover-effect-with-only-three-lines-of-css/)
[A Hollow Text Hover Effect in Three Lines of CSS](https://www.amitmerchant.com/hollow-text-hover-effect-with-only-three-lines-of-css/) — Made possible thanks to a combination of `-webkit-text-fill-color`, `-webkit-text-stroke-width`, and `-webkit-text-stroke-color` CSS properties.
Amit Merchant [](https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/)
[The `hanging-punctuation` Property](https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/) — Browser support is [quite limited](https://caniuse.com/css-hanging-punctuation), but Chris shares this “no-brainer” CSS treatment that looks great. Hacker News had a surprising(?) amount [to say about this](https://news.ycombinator.com/item?id=38441747), with lots of added context worth perusing.
Chris Coyier
[Web Components Eliminate JavaScript Framework Lock-in](https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/) — Jakes notes how web components can “dramatically loosen the coupling” of JavaScript frameworks — and in an effort to prove it they build an app where every single component is written with a different framework.
Jake Lazaroff
[Build and Style Your Site Exactly How You Want](https://sponsr.is/webflow_frontendfocus) — Drag in unstyled HTML elements, control CSS properties, and cascade changes across your site.
Webflow sponsor
[Preventing Scroll “Bounce” with CSS](https://css-irl.info/preventing-overscroll-bounce-with-css/) — When you scroll rapidly to the top or bottom of a page you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before then bouncing you to the correct position. Here’s how to fix that.
Michelle Barker
▶[Resource Loading at the Cutting Edge](https://www.youtube.com/watch?v=MV034VqHv5Q) — An hour-long chat, with real-world examples, that will give you a deeper understanding of the gotchas and quirks present in today’s browsers and resource loading features (prioritization, loading heuristics, etc). _Also, Robin has quite the prop here.._⚔️
Robin Marx
[Demystifying Web Push Notifications](https://pqvst.com/2023/11/21/web-push-notifications/)
Philip Bergqvist
🔧 **Code, Tools & Resources**
[](https://cssanimotion.pages.dev/)
[Animotion: A Visual CSS Animation Builder](https://cssanimotion.pages.dev/) — Allows you to create animations by dragging, sizing, rotating, etc., which you can edit using a raw CSS keyframes editor. Also includes a number of built-in animations and easings.
Zack
[ai2html: Turn Adobe Illustrator Files into HTML](http://ai2html.org/) — We noticed this tool being used to share graphs on a major news site and the output is pretty good. It’s frequently updated and there are [lots of examples](https://github.com/newsdev/ai2html/blob/master/examples/nyt.md) of its use. [GitHub repo.](https://github.com/newsdev/ai2html)
The New York Times Company
[🎹 Fast, Reliable 1D/2D Barcode Scanning for Web Apps with Strich](https://strich.io/?ref=frontend-focus) — You don’t need a native app to scan barcodes! Try the free demo app or sign up for the free, full-featured 30-day trial.
Pixelverse sponsor
[](https://github.com/rvanwijnen/spectral.js)
[Spectral.js: A Painterly Color Mixing Library](https://github.com/rvanwijnen/spectral.js) — If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses [Kubelka–Munk theory](https://en.wikipedia.org/wiki/Kubelka%E2%80%93Munk_theory) which more closely matches how paints work for a more visually satisfying result.
Ronald van Wijnen
[Vectorizer.ai: Convert your JPEG and PNG Images to SVGs with AI](https://vectorizer.ai/) — The web app is free while in beta and works rather well on both phots and graphics – though we assume the resulting raw SVG code would need some optimization.
Cedar Lake Ventures
[request-animation-frames: Use `requestAnimationFrame` Anywhere](https://github.com/sindresorhus/request-animation-frames) — The latest library from the one-man module powerhouse, Sindre Sorhus. The idea this time is to allow you to use `requestAnimationFrame` in _any_ JavaScript environment.
Sindre Sorhus
[Syntax.js 0.7: JavaScript Library for Easy Code Syntax Highlighting](https://github.com/williamtroup/Syntax.js) — No dependencies and supports all modern browsers.
William Troup
[11st-Starter-Kit: An Eleventy Starter Project powered by Vite, Tailwind, and Alpine.js](https://github.com/stefanfrede/11st-starter-kit) — [Eleventy (aka 11ty)](https://www.11ty.dev/) is a Node.js-powered static site generator.
Stefan Frede
📬
**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/620/*|UID|*?ipx=t)