<script is:inline data-astro-rerun> (() => { const nav = document.querySelector(".Header"); if (!nav) return; let lastScrollY = window.scrollY; let ticking = false; function onScroll() { const currentScrollY = window.scrollY; if (currentScrollY > lastScrollY) { nav.classList.add("hide"); } else { nav.classList.remove("hide"); } lastScrollY = currentScrollY; ticking = false; } const scrollHandler = () => { if (!ticking) { window.requestAnimationFrame(onScroll); ticking = true; } }; window.addEventListener("scroll", scrollHandler); // 💡 Clean up on navigation document.addEventListener("astro:before-swap", () => { window.removeEventListener("scroll", scrollHandler); }); })();</script>
CSS
nav { transition: transform 0.3s ease;}nav.hide { transform: translateY(-100%);}
Basic page view transitions
@view-transition { navigation: auto;}
Datastar
Datastar is a unique framework that enables developers to build reactive web applications while leveraging the simplicity of server-side rendering. It combines the benefits of a full-stack Single Page Application (SPA) with the ease of building server-rendered HTML, giving developers more flexibility and performance.
Key Features:
Reactive Web Apps: Datastar allows you to build highly dynamic, reactive applications while keeping the benefits of server-side rendering.
Hypermedia Support: Datastar embraces the hypermedia-driven architecture, allowing you to easily integrate dynamic interactions with minimal JavaScript.
Server-Side Rendering (SSR): Datastar ensures a fast and SEO-friendly approach to web development by rendering pages on the server first, before progressively enhancing the client side with interactive behavior.
SPA-like Experience: Despite leveraging SSR, Datastar enables you to build apps with the interactivity commonly associated with full-fledged SPAs, making it a powerful tool for building dynamic content-driven websites.
My computing history
It must have been sometime in the 80’s when I first saw a computer. Of course I’d seen calculators and even a game console before, but a computer was something else.
back to the future
My earliest memory of seeing and actually touching a computer is one that takes me back to the street I lived and grew up in, in Limbricht, a little village in the south of The Netherlands.
It was the boy who lived two houses next to ours, who owned the obscure device, and that fact alone practically made him my best friend of the moment.
Heck. He was the whole neighbourhood’s best friend of the moment.
ZX Spectrum Microcomputer, Sinclair, 1982
Image courtesy of Computer History Museum.
After this I had a few other new best friends of the moment who had a
Commodore 64 and an Atari.
Sony Hit Bit MSX
Image courtesy of Computer History Museum.
This was the first computer I actually owned. It had a cartridge for games and also a separate tape recorder to load and save programs. (This was before the term Applications was hip to use, leave alone Apps)
I remember playing the first Metal Gear on this with a friend. Lots of sleepless nights. Also, I remember writing simple BASIC on this, creating question games and even venturing into having an image (sprites anyone?) move across the screen controlled by a joystick.
BBC Microcomputer System
Image courtesy of Computer History Museum.
When I went to high school around 1985/1986 we had a designated computer room full of these British computers by Acorn. A little later I would actually own an Acorn Archimedes and an Acorn RISC PC.
These were awesome machines. The RISC OS was unlike anything at the time. Trouble was, there were not many developers creating software for it. It died a slow death.
fast-forward. the 90’s.
During the nineties – I was still studying Film Studies – I had a Dell PC with Windows XP. I blame Microsoft for the fact it took me 8 years to earn my Master’s degree. Slow…
back to the future part II
Now, back in the present time, well as of 2008, I switched to an iMac and never looked back.
Until I wrote up this little micro history that is…
Note to self: Apple blocks the use of ‘autoplay’ for HTML5 audio on iPhone.
I agree that autoplay on websites is rather an annoying thing but maybe browser
makers should just offer this as a browser setting. Default to off.
Mac OS X default font smoothing
So. It is more than 5 years after I wrote about this, and we’re still here having the same issue. Worse, there’s a lot of misconception about this. There are plenty of blogs out there saying it is a browser issue and some even say it’s a webfonts issue.
Most of the time the solution they provide is to add a rule to your CSS:
-webkit-font-smoothing: antialiased;
Thing is this only works for webkit browsers. Firefox actually removed support for font smoothing.
On top of that this so-called solution is not solving the actual problem. The problem is an OS issue. A Mac OS X issue, and it has been for years.
Back in 2008 when I first wrote about this, the only article I found discussing this issue was by Jason Patterson. The forum discusses Mac OS X’s sub-pixel AA and Patterson takes the opportunity to claim there’s a bug in Mac OS X’s sub-pixel AA rendering for white/light text on black/dark backgrounds. He also did a thorough test which you can see on his site.
As shown in the article this is a setting in Mac OS X, and it affects the whole OS GUI, not just browsers. You can test it with TextEdit for instance.
Before Mac OS X Lion there were multiple options for the font smoothing setting but since Lion the default setting is again to have ‘lcd Font smoothing when available’ checked. (System Preferences -> General) and now it is only a checkbox, on or off.
Note that you need to restart the application in which you want to see the difference so if you uncheck the box and want to test in TextEdit, you need to restart TextEdit.
Now what?
So the default setting in Mac OS X is wrong but where does that leave us – web developers?
Well, you can change the default to something you prefer (off is the only other option since Lion unless you use Terminal) but that way you’re not seeing what most people on Macs will see.
So yes, I guess it is all right to use the CSS hack for font-smoothing, but we need to know what we are fixing here and that it is something we shouldn’t have to fix.
Here are three more articles on this by Dmitry Fadeyev:
And here is a quote from one of these articles that summarizes everything about this issue:
There is only one main reason to disable subpixel rendering, and that is to display light text on dark backgrounds on OS X. Mac font rendering tends to butcher light fonts on dark backgrounds, making them spill out to the point of being illegible.
