Oh aperture, where art thou?
<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>nav {
transition: transform 0.3s ease;
}
nav.hide {
transform: translateY(-100%);
}@view-transition {
navigation: auto;
}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.
I revisited the experiment and rebuilt it as an Astro component. The earlier versions relied on React and JavaScript to calculate the font size on resize. This version uses CSS container units instead, so the wordmark scales with its container without a resize handler.
The component still supports the different variants from the original Utrecht-inspired treatment, while bsFontSize can be used as an override when the automatic sizing needs a little adjustment.
nirusu
nirusu
nirusu
nilshendriks
nilshendriks
nilshendriks
It’s been another five years since I last revisited this Proof of Concept (POC), and I’m excited to report that support for CSS mix-blend-mode has made significant strides.
Initially, it appeared that Safari was still lagging behind in terms of compatibility, but during my investigation, I stumbled upon an intriguing anomaly – one that might be perceived as either a bug or a subtle feature (insert sarcasm here).
The sections I’ve affectionately dubbed “BlendedSector,” each characterized by its unique color palette (cabaret, opera, and more), initially appeared in grayscale, giving the impression that the blending effect was malfunctioning. However, after some meticulous tinkering, a surprising discovery came to light: the issue seemed to revolve around the color choice for the second layer.
As it turns out, when the second layer employed full black (#000) as its primary color, Safari encountered difficulties in rendering the blending effect correctly. However, by making a simple adjustment and setting the color to #111, voilà – the blending worked seamlessly, and the vibrant colors of the sectors resurfaced.
When viewing this in Chrome or Firefox it will show in colour and blended.
In Safari - Version 16.0 (16614.1.25.9.10, 16614) it is in greyscale and not blended when using #000 for the 2nd layer.
safari
safari
safari
Here’s a screenshot of how it looks in Safari.
When using #111 for the 2nd layer, the colours and blend work in Safari as well.
About four years ago I created a proof of concept to see how far I could go in recreating Edenspiekermann’s Utrecht City Theatre logo’s blending effects. Browser support back then was limited to some early builds of Chrome and depending on which blend mode used, also safari.
These days support is a bit better. Both latest versions of Chrome and Firefox support the needed blend-modes used in this proof-of-concept. Safari seems not to support these yet, it only supports a few. The versions with a white background use blend-modes color-burn and multiply. The one with a black background uses screen and saturation.
cabaret
cabaret
opera
opera
opera
dans
dans
dans
jeugd
jeugd
jeugd
muziek
muziek
muziek
toneel
toneel
toneel
This experiment shows a way to create an app-like interface with the use of CSS Grid & CSS Flex-box.
See it on this page: App UI
Glassworks Amsterdam was an agency that offered high-end digital animation and visual effects expertise for the production of creative content, from commercials, film and promos to digital material and print media.
I came across this old note in my archive and checked what happened to the company.
Glassworks eventually closed after what it described as exceptionally challenging market conditions in the visual effects industry. The London office, which was initially expected to continue operating, also closed later.
The old Amsterdam domain now redirects to a page about Glassworks on Hotel Amsterdam’s website, although the Glassworks name and logo are still there. An odd little remnant of an agency that no longer exists.
It’s also a nice reminder of how much the web — and the design and VFX industry around it — has changed since 2015. The original site apparently even required the Flash plugin.
From 9 to 12 december I attended Ready to Inspire conference in Leiden, The Netherlands. The theme of all the talks was craftsmanship and how we in web design and development can relate to this. I enjoyed all the talks by every speaker and met some great people.
For me personally the highlights were the talks by Vasilis, Simon Colly Collison, Brad Bullshit Frost, Jessica Hische and Jeffrey Zeldman.
