Tags

Vale.Rocks appears to be almost entirely functional in Ladybird now. Few tiny little hiccups, but I’d say ~95% of it works. Performance still has a bit to go, but Ladybird has come a long way since my last test.

Servo still has a bit further to go but has made some significant progress recently.

So, the web has better responsive images now. That’s great.

But, when will the web be getting responsible images? I’m sick of all the delinquents roaming the web like they own the place.

I’m looking for a device I can use for WebKit/Safari testing. However, I can’t justify splashing too much cash on a Mac that I’ll scarcely use.

I’m looking at something with Apple Silicon so that it won’t be dropped by the next software update. Currently considering a 2020 M1 MacBook Air with a broken screen, which I can use headless. Maybe a Mac Mini, but they’re pretty scarce on the second-hand market. People seem to hang onto iMacs long-term, so they aren’t really around.

Thinking the Neo down the line, perhaps.

Any thoughts?

Sometimes you find yourself deep in the decaying bowels of the archived Safari HTML Reference and you’ve just got to look at yourself and ask ‘Where did I go wrong?’

I like to think I know a lot, but given how much there is to know I’m certain I actually know very little. I’m so privileged that the front-end community is such an open place willing to share and distribute knowledge freely.

I look forward to learning so much more.

Felt cute, might Application error: a client-side exception has occurred (see the browser console for more information) later.

I have this one Next.js project I haven’t touched in a few years, and every few weeks I get an email from GitHub with a new security advisory for it.

I’ve seen people killed for lesser crimes than writing the CSS I just wrote.

Solemnly staring at my computer screen in silence, trying to regain my composure after realising I’ve just been editing the SASS output, not the source files.

I don’t know why, but z-index always has to be the last declaration in a CSS rule. Anywhere else just feels wrong.

Carefully cutting down my JavaScript, optimising my CSS, minimising my HTML, configuring preloads, tweaking caching, and manually shrinking images to hit a good balance of size and compression, then opening a new tab to be hit by a megacorp’s 40MB hero video.

I love when websites with completely static content crash.

Congrats! Instead of making a static site, you made a static dynamic site. None of the benefits of a static site but all of the downsides of a dynamic site. What’s the point?

I really just can’t understand the mindset.

Someone commented on how snappy TechConf.Directory is. That’s due to the site just being HTML/CSS/JS/JSON generated at build time. No client-side third-party dependencies.

Even on the development side, the only dependency is Web Origami, which is just used for populating templates and manipulating data

Once again, the winning formula is to bet on the web platform and not needlessly overcomplicate things.

I’ve decided that, henceforth, I shall no longer go by the title of ‘front-end developer’, but instead by the traditional title, ‘webmaster’.

Please update all bylines and attributions appropriately.

So cool to see that SVG filters seem to be catching on. So many cool effects are possible on the web with them and it is high time people start embracing them.

Living in the world’s most isolated city, looking at front-end conference prices, plus the price for several connecting flights spanning multiple days of travel, plus accommodation and expenses…

Yikes.

I think the only way it’d be viable is if I can string a few together and attend a few at once.

I don’t suppose anyone has collated a list of good front-end or web conferences worth attending somewhere? Ideally with information such as dates and ticket prices.

One of the most horrific codebases I’ve ever seen is one in which all the styling was done using Tailwind’s @apply. No utility classes in markup, just CSS files full of selectors and @apply. They had inexplicably reinvented CSS in Tailwind, and it struck fear into my very heart.

Anyone had any luck getting past the final boss in CSS Backgrounds Module Level 4? I can never seem to dodge that final attack. I’ve been stuck on the level for months.

Haven’t got an Apple device but need to test your site in Safari? Go into the Apple Store and test on their demo computers.

They probably won’t kick you out. It usually takes them a while to catch on.

Are you a 500ms or 0.5s sort of person?

Can’t wait till one of those accessibility overlay providers decides to pivot to eugenics in their ever continuing effort to ‘fix’ accessibility without actually helping people with disabilities.

I don’t wish to count my chickens before they hatch, but it seems a long while since I’ve seen someone take direct issue with small caps on the web.

Dare I say web surfers have grown tolerant?

Every now and then someone says something to the effect of ‘We have this new modern CSS thing. We don’t need to set the z-index to 99999 anymore!’.

I wish to make myself clear. I set my z-indexes to 99999 as a matter of principle, not necessity. You can pry z-index: 99999 from my corpse.

Supporting Old Browsers

I see people say frequently that they don’t need to support older browsers because ‘everything auto-updates now’. This is a flawed assumption.

There are many reasons why someone might not have up-to-date browsers:

• Their device is too old. This is especially a problem with Apple devices, where the version of Safari is largely tied to the version of the OS.
• They never use their device long enough to trigger an update. I’ve previously had elderly tech-support clients who only used their computer sporadically for emails and banking and therefore didn’t receive updates because they weren’t using their computer long enough for new versions to install.
• They’re using a browser in an embedded context or on a ‘smart’ device, where there is no newer version available.
• Enterprise policies or restrictions don’t yet permit them to update their browser.
• They’re using a browser fork which lags behind in releases.
• They’re on slow/metered connections and have disabled background downloads to save money or bandwidth.
• Assistive technologies they require either lag behind in updates or aren’t supported in newer versions entirely.
• They’ve purposely disabled auto-updates for reasons of security.
• Interventions or censorship prevent them from reaching update servers.
• Their device doesn’t have the necessary storage capacity to perform an update.
• A device in a shared space like a library or school which doesn’t have the budget or capability to keep devices up-to-date.
• They’re running a portable browser from a USB or the like, which must be manually updated.
• They rely on a proxy-based browser which is outdated on the server-side.

You don’t need to support every browser version in perpetuity, but you should take a moment to consider that there are plenty of legitimate reasons folks won’t have the latest and greatest.

If you can, embrace progressive enhancement and graceful degradation.

Sometimes I feel useless, but then I recall the experience of trying to use npm’s search functionality and suddenly feel extraordinarily capable.

I’m proud to announce that after spending the better part of half an hour painstakingly tweaking and refining an animation, I’ve decided I don’t like it and that I’m deleting it.

Everyone says OKLCH like ‘Okay El Sea Haich’, yeah?

My vacuum cleaner broke, so I got a new Next.js branded one which I can be certain will continue to suck for years to come.

Something I observed while manually reviewing every single site on personalsit.es:

• Websites built with Next.js very rarely have RSS feeds.
• Websites built with React sometimes have RSS feeds.
• Completely static sites almost always have RSS feeds.

Oh, making an accessible website is too complex for you to bother? Sounds like you aren’t very good at your job then, eh?

Just updated my dev rig. Pretty sweet!

If anyone knows how to install Emmet and LSPs on this bad boy, let me know.

I’ve been jamming small wood chocks and rolled up bits of paper under this <div> for hours in an attempt to get it level, but I still can’t get it aligned quite right.

By developing good, performant apps close to the web platform you save yourself a lot of time you’d otherwise waste on implementing skeletons and loading screens.

Next time I write display: absolute, just kill me.

Fun fact: If you write proper semantic code and don’t abstract everything with bloated frameworks, you don’t have to spend as much time faffing around with ARIA.

Me quickly cycling through all the CSS display properties: ‘Surely one of these bails me out…’

Just marked a margin as !impotent. Sorry margin.

Local man forgets to put content: "" on his pseudo-element for fifth time this week, spurring community concern.

Landing page, LAMP stack: everything functional.
Gentlemen, we can rebuild it.
We have the technology.
We have the capability to make the world’s most convoluted web app.
This will be that site:
Heavier than it was before.
Heavier, slower, dependency-ridden.

The Six Million Framework Website.

Prompted by David Bushell testing how his website fared when run through automated translators, I did the same.

It isn’t perfect, but Vale.Rocks now adapts nicely for people reading in languages that read right-to-left. It feels a tad bizarre seeing the UI flipped, given how intricately familiar I am with it.

You can give it a whirl with a right-to-left language like Arabic in Kagi Translate.

https://translate.kagi.com/ar/vale.rocks/posts/lorem-ipsum

(Also, I’d quite appreciate a logical version of CSS’ translate.)

Heading down to the DOM to pick up some divs. Need anything?

(You won’t believe this. I went to grab a <kbd> for Tobias Fedder, and while I was doing so I found an old <blink> on the back shelf. The box was a bit damaged, and the register wouldn’t scan it, so they let me have it for free!)

Shout-out to the client who just sent me a mockup titled ‘temporary final’.

Perhaps the real buttons are the divs we made along the way.

Doing some work for a company which has me writing some legacy CSS. Proper 2009-era stylesheets with a bit of SASS thrown in and a clear brief to work off.

Having a blast!

(As an aside, I know that everyone is talking about this upcoming flexbox malarkey, but I think I’ll stick with floats, thank you very much.)

Sticking close to the web platform has never come back to bite me. Do you know what has come back to bite me with gnarled fangs? Frameworks.

‘It has taken a huge amount of effort, but we’ve fought against the existing web platform and our website is all the worse for it.’
— [Company Name Here], 2025

Much like how some known elements aren’t shown on the periodic table, some HTML elements aren’t recognised due to their synthetic, extremely unstable, or fleeting existence.

I put my hand in the machine and watched through the MutationObserver as three extra fingers sprouted out from my hypothenar eminence.

Had to dive into someone else’s old, abandoned project today to grab some screenshots.

Nothing like trying to lubricate the cogs of a Next.js 8, React 16 site from 6 years ago and all its dependencies to get it back into motion again.

The wonders of dependency rot.

I just tried to back out of a page with my browser, but the site I was on hijacked the browser navigation action and showed me a list of other articles to read. Yuck.

User Agent Styles are out because today we are introducing all-new AI-driven User Agentic Styles.

That is right; they arbitrarily change while you use the website, elevating the developer experience.

They will also try to forcefully align elements for you.

I, for one, would never jump the gun and start playing with shiny new features on my website before proper browser support is available.

Never. Nope. Not me…

Conspiracy theory: Part of Apple’s goal with Liquid Glass is to make PWAs look further out of place.

While you can somewhat recreate the glass effect on the web, it is difficult, likely less performant, and isn’t 1:1. This will enforce a stronger separation between native apps and web apps.

Icons also presumably won’t be dynamic and adaptive to Liquid Glass’ styling, like they aren’t with iOS 18’s light/dark/tinted variants. This’ll make them stick out and feel more different than they already do, as well as look bad on the home screen.

I went to a bank and put a really high negative margin on all the money inside. This offset was enough for it to appear outside the bank, allowing me to abscond with it.

Of course, banks can easily avoid this situation by applying overflow: hidden to their vaults, but they very rarely remember to. It tends to be an operational oversight.

Learn more neat tricks like this in my upcoming book: CSS for Crime.

Spent far too long looking blankly at the docs for the <dialog> element while wondering why my <details> element wasn’t working right.

Y’know, when I started getting into development proper, I read so many blog posts and publications from fantastic people.

If you’d told me as a youngster that as a 19-year-old I’d be writing for these publications and chatting with figures whose work I admired, I simply wouldn’t have believed you.

I know you should ‘never meet your heroes’, but I’m ecstatic to get to meet so many of my inspirations.

There are a lot of fields out there, and I’m so glad I found myself doing web/front-end development. I can scarcely think of communities so kind and open to sharing knowledge.

Thank you to all.

Sometimes I scroll through all the possible align-* and justify-* permutations to find the one I need.

Not for lack of knowledge, but instead because my brain has simply run out of compute.

I think it is important that you make sure everything you publish on the web is equally accessible to all.

Thus, my content is unusable no matter your abilities. In fact, you might be better off with a screen reader because then at least you don’t have to look at it. Shit’s fucked.

I’ll be interested to see if there is a statistically notable uptick in clients reporting prefers-reduced-transparency as a result of Liquid Glass once iOS 26 releases.

And with a single click, I find myself transported to an ancient place. I’m a digital archaeologist, and I’ve stumbled across a long-forgotten remnant of those who came before. UI untouched for a decade.

It is two rebrands old. The palette is warped. Distorted. There are gradients. Buttons forged from a low-resolution image. I brush away a drop-shadow-lg.png to inspect an input form. Picking it up, I bring it to my face to count the pixels, only to be hit by the harsh aroma of Bootstrap 2 in the back of my throat.

I drop it to the ground, and it shatters into CSS properties. ‘Oh well,’ I muse aloud. ‘It’ll be fixed on refresh. Assuming anyone ever discovers this place again.’

I do what I came to do and close the tab.

I left my flexbox out in the sun for too long, which caused it to dry up. Now it won’t wrap anymore.

Do I need to get a new one, or can I rehydrate it somehow?

‘Did you, or did you not, kill this man?’

‘Your honour, he recommended I rewrite my static site with React because, quote, “It’s better.”’

‘The killing was justified. Court dismissed.’

Run this simple Vim substitute command to instantly improve your website’s codebase:

:%s/button/div/g

Last night I crept into your house under the cover of darkness and made almost imperceivable modifications to your browser’s user-agent stylesheet.

Changes just impactful enough that you will be mildly inconvenienced. I chucked a few !importants in there as well.

My evil knows no bounds.

You use * + * because it is a useful CSS snippet. I use * + * because I think it looks funny, and I like saying ‘lobotomised owl’.

We are not the same.

CSS Carousel Debacle

Carousels are a web staple. Websites use them, and thus people do in turn. They’ve garnered a lot of hate over the years, primarily due to being largely inaccessible and poor ways of presenting information, yet still they persist. So, if you can’t beat ‘em, join ‘em.

The Chrome team put together Carousels with CSS which Sara Soueidan has examined in extreme depth. My main takeaway from the main article and Sara’s analysis is that while this is a vague step in the correct direction, it doesn’t address any of the core issues like accessibility and introduces new ones. I was disappointed to see the approach taken in regard to addressing those issues and think Eric Eggert hit the nail on the head.

It completely fails with regard to separation of concerns by using CSS for structure, rather than HTML. I don’t know how to address that other than asking why? I’ve noticed a lot of new CSS features, especially ones with the Chrome team’s influence, are getting a little too markup-y for my liking. David Bushell has covered this and the over reliance of pseudo-elements with touchings on the carousel kerfuffle.

HTML is for structure, CSS is for styling, JS is for anything that can’t be achieved with HTML/CSS, and accessibility isn’t omittable. We should be striving to build a web that is both functional and inclusive. Respect the web; respect users.

HTML. CSS. JavaScript.

Long ago, the three nations lived together in harmony. Then, everything changed when The Frameworks attacked.

I found a website on the ground and completely inaccessible. Next to it? A bottle of ARIA. It must have taken too much and overdosed.

Kids, always use ARIA in moderation, and never ARIA on an empty semantic.

Nice to see Figma are building tools for web divelopment now. They’re really spanning that gap.

Well now look what you’ve gone and done! You’ve spilt JavaScript all over my lovely semantic HTML. Dammit! It leaked onto my CSS as well.

Go grab a cloth and clean up this mess.

‘The web is my canvas,’ I confess as the people watching over my shoulder observe me open a text editor and tile a browser window. ‘CSS is my brush; MDN, my muse.’

CSS has taken me places I wouldn’t go with a gun.

Sometimes I find myself wanting (or needing) to write about accessibility, but I shy away from it.

The negative impact of giving incorrect advice scares me away from giving any advice at all. I fear doing more harm than good.

Evidently I have a reputation…

There is very little in this world more satisfying than getting CSS shorthand correct first time.

I’ve been making improvements to Vale.Rocks using Polypane’s suggestions, which pick up things standard browser dev tools miss.

Also, Portal is awesome for testing across devices.

Polypane also has a celebration button that appears when I fix all accessibility issues, which is an absolute joy.

I have a few minor niggles, but on the whole I’m really liking Polypane.

Regarding those niggles, Kilian Valkhof is absolutely fantastic and extremely receptive to feedback, which is wonderful.

CORS blimey!

Reject modernity (Next.js); embrace tradition (PHP).

Put the groundwork for a testing instance of a website live five minutes ago, and I’m already seeing multiple login attempts hammering /wp-admin.

Not only is it a Ghost site, but it isn’t even properly live yet!

Why is my pseudo-element not working? It should work. It has size, position, display, etc. Hmm…

Oh, I didn’t specify content: "".

Anywho, I’m gonna go into a fetal position and cry now…

This post by Richard Rutter has to be one of my most referenced blog posts.

It is just an all-around fantastic breakdown of how to achieve good typographic styling on the web with explanations of each and every bit.

https://clagnut.com/blog/2433

Where do you, personally, dock your browser dev tools?

If you ever feel useless, just be glad you aren’t the HTML title attribute as handled in accessibility contexts.

My favourite CSS addition in recent years is a toss-up between light-dark and nesting.

Both have been such game changers and vital to how I build for the web.

I’m currently on an 8mbps connection and it is times like these I am glad I spend hours optimising and refining my websites.

Who is working on porting all the PowerPoint transitions to the browser for use with the View Transition API?

Let’s put this masonry debate to rest. I propose we replace grid with masonry altogether. Think about how much trendier everything will be.

If you make a CSS centring joke in the modern era, you deserve to be put in a metal flexbox and centred to the middle of the ocean.

Speakers of English (traditional) rejoice, for I have fixed CSS. You can sleep easy knowing that there exists an easy way to permit writing ‘colour’ as ‘colour’.

BritCSS is a simple bit of client-side JS that permits using English spellings.

Always fun to put together small things like this because I inevitably learn something I didn’t know.

https://github.com/DeclanChidlow/BritCSS

I had a vision.

The CSS Masonry angel came down from the heavens and addressed me. I made to speak, but it reached out a single slender finger and touched it to my lips to hush me. ‘Soon,’ it said with the voice of a choir. ‘Soon.’

I build on the web but, more importantly, I build for the web.

position: sticky is one of those CSS things I can never get first time. Try as I might, I always end up flubbing around with it.

CSS crimes are the best crimes.

Put together a fresh website and new branding for my Revolt moderation bot AutoMod.

Dipped my toes a little into experimenting with Material 3 styling.

https://automod.vale.rocks

Nothing makes me want to commit genocide quite like an editor auto-closing my HTML tags.

I kinda miss the days when sites would get complete redesigns pretty much annually. It kept the web feeling fresh and cutting edge.

I suppose it was simpler to do everything over when all it took was a bit of hacking away with HTML and CSS.

Usually it’s infuriating, but sometimes it can be fun to write CSS within the constraints of existing, untouchable HTML.

Does Flexbox still feel really new to anyone else?

It is like my concept of ‘new CSS things’ just broke at some point.

Reminder that you can chuck document.designMode = "on"; in your browser console, and it’ll let you directly edit the text of the current page.

Just spent 5 minutes on CodePen wondering why my CSS wasn’t working.

postion: absolute

Hurrr

Were you all just gonna let me keep on living without telling me about the rch unit?

This is so insanely useful for one specific thing I ended up fixing with JS the other day.

I know it’s time to take a break when I start pulling this stunt:

body {
    color = white;
}

Received my physical diploma in the mail! I truly am a fully licensed front-end developer!

ARIA sure you need those roles and attributes?

This has had me thinking about website layouts, and how typically we’ve had navigation situated at the top. Perhaps we need to rethink our designs based on the embrace of sidebars as they become the ‘new normal’?

https://vale.rocks/micros/20241030-0844

A wise man once said ‘Ogres are like onions. Onions have layers. Ogres have layers.’

Make your CSS like ogres and onions.

I really hate the term ‘WebFinger’. Stop fingering around for some JSON. Frankly, keep your fingers to yourself.

Perhaps the real enhancement is the progression we made along the way.

How does one represent a dinkus in HTML? A <hr> with some styling? Not sure on the semantics here…

People seem to come unstuck at the ‘cascading’ bit of ‘cascading style sheet’.

Embrace the cascade!

Blimey, I’m lovin’ <dialog> and the Popover API. JavaScript free* menus without the need for any hacks.

I used to use some trickery involving CSS’s :target to implement menus…

This is only gonna get cooler when anchor positioning gets more comprehensive support. Top layer elements and anchor positioning go together like butter and toast.

‘Brittle web technology’ is one of the most perfect phrases I’ve ever encountered. It just perfectly sums up the shattering characteristic of so many dev tools.

It’s the web! It should be the wild west! Chaotic, unstoppable madness! Bodge everything and take no hostages!

I barely find myself needing CSS ‘hacks’ anymore. Most stuff I need to do is kinda just a thing now.

Thanks to all the many people who’ve made this a reality!

I found it interesting that WebKit maintains a collection of ‘quirks’ – hardcoded, website-specific fixes and tweaks.

https://github.com/WebKit/WebKit/blob/main/Source/WebCore/page/Quirks.cpp

Are people implementing lightboxes with <dialog>, custom implementations, or something different? Would love to hear!

Does it bother anyone else that it is top not inset-top, like margin-top?

Messed around with some fun HTML colour values. ‘sonic’ outputs blue.

https://codepen.io/OuterVale/pen/wvLbjpZ

Genuine exchange I just had:

Person: It’s broken on mobile.

Me: Do you have a Samsung by chance?

Person: Yes, I have

Me: Do you use Samsung Internet?

Person: I’m not sure what that is. I use the default browser.

Me: I shall refrain from using the selection of words I’d like to.

Seriously, how is Samsung Internet still this much of a clusterfuck?

I pretty much exclusively browse CodePen on Chrome, despite Firefox being my primary browser.

Mozilla, you need to catch up.

One great use of LLMs I’ve found is as dynamic WordPress documentation generators.

WordPress is really poorly documented. Especially block themes, which are a mess in more ways than just documentation.

The JavaScript Registry looks really interesting, but every time my brain sees JSR, it thinks JET SET RADIOOOOOO!

The phrase ‘WebKit magic’ is something I could live without.

Please let this happen. I’ve waited so long.

https://groups.google.com/a/chromium.org/g/blink-dev/c/UxztgOj6A_M/m/wrRocFZoBAAJ

I discovered <kbd> today. I simply do not know how I wasn’t aware of it until this point. This is awesome!

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd

Hey, err, web devs on Windows. How do you guys test for WebKit?

As far as I can see, not a single native Windows WebKit browser exists…

Just found out about WordPress’s excellent funky_javascript_fix.

https://developer.wordpress.org/reference/functions/funky_javascript_fix/

I’ve just discovered the super handy hue-rotate CSS filter.

I’m using it as such: filter: invert(1) hue-rotate(180deg);

It lets me invert an item, but keeps the colours as they should be by flipping the hue back. I’m finding use implementing it on iframe embeds to force darkmode.

Oh my, I love this new CSS lh unit. It’s equal to the computed line-height. This is gonna make inline SVGs and icons so much easier! I’m in ecstasy.

I just came across this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Device-Memory

This could be wicked for optimizing sites based on the devices accessing them. I can only hope it isn’t just horrifically exploited for fingerprinting (let’s face it, it will be).

I think I can actually feel parts of my brain flaking away as I write JavaScript.

Do people use share buttons on websites, such as those on blog posts or articles?

(37 people voted)