Niki has one of the coolest yet simple personal sites that I have seen in a long time. We need more of this on the internet! hover over his face, try dark mode, submit personal data, there are so many really cool Easter eggs to discover!
Posts tagged: webdev
All posts with the tag "webdev"
188 posts
latest post 2026-03-31
Publishing rhythm
A great alternative to tailwind colors that has everything defined in one colors file for only 0.3kb. it feels well worth the weight if you are trying to skip a build step or avoid npm/node. It has even more colors than tailwind. I appreciate that there is a grey palette that is fully desaturated.
Selectolax you have my attention! I will be giving this a try for markata which often suffers from slow beautifulsoup. It appears to have everything I need for my simple use cases.
Fantastic resource of background textures, I will be using this for some projects.
I’m digging these web2app’s from DHH’s omarchy for setting up an opinionated archlinux hyprland. This gives a way to quickly open a web app as an app either with a hotkey or run launcher in its own dedicated window that you can put on it’s own workspace. I really like a workflow of keeping one window per workspace on one monitor and I can quickly navigate between apps with a single hotkey. This gives you the power to switch through things like chat, terminal, browser, steam game with blazing speed from the keybaord, no clicking no searching, just going directly to it.
I need to give this a try for markata glossary
Great breakdown of nextjs. I was highly unaware of its performance optimizations before reading this. The smell of vendor lock in from next/vercel has been there from the start, this is the first real claim I’ve seen.
I’m out on modern js front ends, complex builds that change every 6 months, design patterns are out of date just as fast. Its hard to keep up, especially when you don’t have the use case for highly interactive apps. Libraries like htmx or plain ol js gets the job done on the majority of sites and everything I tend to work on.
Vendor lock in disguised as performance. Nextjs aparantly now streams all of your metadata on the fly with js. This would obviously kill all seo right, well not if you’re on vercel they automatically detect search crawlers and serve the metadata. Why the f do they need to do this and not just serve everyone the metadata. The Web is this beautiful place where anyone can create and build amazing things with a relatively low skill. Js is meant to be enhancement, not degrade the experience of its users.
I love this idea of tiny useful apps for yourself. In fact I’m working on a project to built out tinyapps for myself to replace my common needs. I absolutely love that all of the state is stored in the url bar, nothing is stored server side. As much as I love to hate js, I really appreciate that things like this can be built to just live on the web, be accessible from anywhere, and live practically forever as they require such little hosting demand.
The web is everywhere, its the one true write once and run anywhere platform. Millions sunk into browser performance and things like the v8 engine allow us to run our shitty websites anywhere and it still runs good…. most of the time
How to make an entire clickable without presenting the entire content of the card as the link title. These videos are great, I’ve ran into these types of problems so many times, and definitely did not know about things like isolate to keep the z-index scoped to one element.
Damn he makes this easy. I did not know about hx-select. yes there is waste in requesting the entire thing every 5s, but damn that was easy to get life reload. I’ve only done very specific backend endpoints, built pages up from partials, made endpoints for partials. keeping this one in my back pocket.
I’m just kind of amazed that he could do this all in html without touching the backend or js, typically things like this require one or the other. Yes js is running, but no other js library I’m aware of lets you do this.
Watching Wes fiddle through this with what a sane person would write in a normal day application and not applying the tricks for this kind of battle is how I feel when trying to do leetcode.
This is a super cool reference for htmx snippets. I really like how he has a couple of errors on the page as examples with examples that fix these common errors.
fragmention
This post is still WIP. …..
https://indieweb.org/fragmention##Challenges
I’ve been digging through David Bushell’s blog over the past day, he has some really good ideas about blogging and webdev. One really interesting post I came accross is url-fragment-text-directives. I’ve long had id’s linked on my headings, though sometimes broken, or now showing the link, I’ve done my best to include them. Fragmentions extend this to allow any text to be linkable like this.
...
I’m building in a [[ fragmentions ]] implementation into my blog, I wanted to add some text before the fragment to indidate that it was the highlighted fragment that someone may have intended to share with you.
To get a newline in a :before I need to use \A and white-space: pre-line.
body :target::before, body [fragmention]::before { content: "Highlighted Fragment:\A"; white-space: pre-line; @apply font-bold text-yellow-600; }
Here is what it looks like on my not yet live implementation of fragmentions.
Tailwind has the best color system, very well done. Even if you don’t use it, it serves as a great color picker.
CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨
Jhey has the coolest webdev demos!
...
I’ve been back to putting some images on my blog lately and thinking about making them a bit thinner through the use of aspect ratio for simplicity. I’m leaning pretty heavy on tailwindcss these days due to some weird quirks of markdown-it-attrs I cannot have slashes in classes from markdown so I made a .cinematic class to achieve this.
.cinematic { @apply aspect-[2.39/1]; }
Example
Attrs does not like ‘/’ characters in its classes, so to use some tailwind classes with custom values we must make new classes in our tailwind input css.
.cinematic { @apply aspect-[2.39/1]; }
Given the following markdown with attrs added to the image and to the paragraph block.
{.aspect-[2.39/1]} {.cinematic} {.cinematic} 
We get the following output with only the middle one working correctly.
{.aspect-[2.39/1]}
...