Personal blog about web development, WebGPU, creative coding, and design tools.
In this post I am introducing wgslender, the WGSL toolchain that I have been using locally and that has been growing along side some demoscene work. I have been on this for about 8 months now. It has grown out of the pains of doing the "tangatos" 8K demo for Revision , as well as the more recent "impulsos" full demo . I will try to angle this on the idea and motivation side, wgslender comes from…
This past weekend I went to a wedding and something (extra)ordinary happened that I cannot stop thinking about, up to the point of having to write it down in this post. The bride is an old school friend of our group, so we decided to make a video of her, the traditional wedding video with photos of her. The person of our group that championed it used AI for the script/narrative, the audio and the…
Complicated things Some people really like complicated things, either because it makes them feel smart(er) or because it can be used as a flex for skill (or a masqueraded impression of skill), or because whatever l33tz0r reason. Oklch is one such thing, it is complicated (at least for me), and screw it i'm fine with good old #hexcodes and coder colors everywhere. But the design community in social…
S-expressions are attracted towards Lisp S-expressions give us that natural syntax for expressing nested hierarchical trees, and once our program is written as trees, it becomes tempting to let those trees rewrite themselves, a path that leads naturally to macros making syntax expand into more syntax. Such is the Lisp deal. What if we went the other way around? Forget macros, lets keep the…
Symbolic everywhere One of my favourite demos is Masagin from Farbrausch & Neuro, an 8 minute real-time animation done with code with a strong 2D vibe. The demogroup Farbrausch have their tools code available in a public repo and paniq holds the repo for the masagin source code . The demo uses a DSL tailored for its engine. It goes like this: # 01_flutepart bpm 130 song "01_flutepart.ogg" bgcolor…
TL;DR Planning to shift and change this site and personal projects a bit now that AI has completely overhauled our craft. The boost is gone My brother who is not a developer was telling me the other day that he was completely unaware of the amazing sensation that is being able to do stuff with code. He had done a few simple programs when he was in university, but nothing even remotely similar to…
A small, opinionated stack. Mostly built from open-source pieces I trust and have read. Generator Zola — single static binary, Rust. Compiles every post to plain HTML so the server's only job is to serve files. Markdown source, syntax highlighting via the "boron" theme. Client-side search powered by an elasticlunr index built at compile time. Hosting OpenBSD on a small VPS. httpd(8) serves the…
You can encrypt messages to me, or verify things I have signed, with this key. Fingerprint E49D 556A D099 3482 CA78 B6E8 C181 88F9 E2A4 C0AD Identities (both verified): mail@hugodaniel.com hello@hugodaniel.com Get the key Pick whichever you trust most. Direct download — pgp.asc — also reachable over Tor at the onion mirror . Web Key Directory — resolves straight from this domain: gpg -…
TL;DR I talk about the changes made to bring LLM Experience design to boreDOM , my testbed zero-build JS runtime that collapses HTML, CSS, JS and state into a single HTML file so models can locate the source of an effect in place. What does a codebase look like if its primary author is a machine? If a codebase is mostly written by a machine, do our usual frontend instincts still hold? What do we…
TL;DR LLMs tend to mislocalize when there are multiple sources of truth, so they can fail even while generating "correct" code. This post explores what frontend architecture looks like when the primary collaborator is an LLM. I call this LLM Experience (LX): optimizing for discoverability, traceability, and machine-readable runtime feedback over human-centric modularity. "Make the button more…
API Error: 400 { "error": { "type": "invalid_request_error", "message":"This organization has been disabled." }, ... } One minute I'm a €220/month "Max 20x" AI "power user" (is this even a thing?). The next, I am a disabled non-person "organization". Like a lot of my peers I was using claude code CLI regularly and trying to understand how far I could go with it on my personal projects. Going wild,…
I've been working on a minimal shader portability engine since mid-2024. It was used by me and my friend icid to create a demo for the Inércia demoparty 2025 that happened in Almada in early December. The demo failed spectacularly. We couldn't show it during the competition because it crashed the browser tab on the machine running the demos. Shortly after, we found it also didn't work on most…
miniray has been deprecated, I have since then moved my attention to wgslender , its successor, a full wgsl toolchain. Read the blog post that introduces it here . I've been spending a lot of time playing with WebGPU shaders just for fun. Coming from JS/TS world and bouncing back and forth between compute.toys and pngine (a portable shader runtime I am working on) has led me to miss some of the…
Welcome, in the previous two posts I went looking for the WGSL limits (both in the spec , and also out of it ). In this post I want to introduce a simple WebGPU app where you can create WGSL shaders by dragging some sliders to increase their complexity. The idea is that compilation time and complexity can be known for the compute and rendering pipelines as well as in their different stages (vertex…
Welcome back, in my last post I did an evaluation of the WebGPU shader limits that we are told about in the WGSL spec . Having tested only the known shader limits in the spec in that previous post, this time I want to go a bit away from it. For this post I want to take a look at the limits we have when writing a WGSL shader that cannot be found in the spec. Some of these experiments I tried purely…
Limits can be a fun thing to look out for when exploring unconventional ways to use something in a safe, consensual, way. A while ago I got in my mind that it would be cool to try to dump data directly in the shader code string. Engrave the data in the code instead of going with the common approach of providing it through some external mechanism (textures, buffers, etc). This manipulation of the…
Being bored can drive you crazy. In my case it took me on a trip to create another JS framework. As if the world even needed more of that. In this post I present the thought process behind "boreDOM" a novel JS framework for everyone. The main motivator was to have a simple framework to manipulate the DOM which could naturally fit the scenario where the HTML is defined in .html files, CSS in .css…
I'll explore a simple way to bring the Entity Component System (ECS) pattern into the world of WGSL shaders. This is still in idea stage, an idea that i'll explore in this post without providing a real implementation, just the API for it. While I have no particular goal in mind with this I enjoy exploring new technology (WGSL) and discover what it can do for me. I'm writing this post to share my…
I made my first color picker almost ten years ago, in 2015. Since then, my passion about color pickers grew a little more than expected and this month I finished my 6th one. I only have the code for the last 3, the others are now likely in the Elysium of color pickers (or some old laptop hard drive in my basement). What's so special about color pickers? They have graphic and visual usage patterns…
This post is the first in a series of posts about some challenges to think about when developing a motion design app. It is meant to think a bit about pixel representations in drawing/animation apps, or just bring some insights if you are not into that. Although not related, this post also coincides with the release of LottieLab, the motion app I have been working on, please support us on…
Recently I gained a boost of motivation that made me want to look into colors and drawing tools again. I hate choosing colors, and it is tough for me to find good mixes of related colors that look well together and have multiple use cases. For this reason, I have long been cultivating an attraction towards color pickers, the idea that software can help me choose colors and give me good working…
Around 2017, I took up more seriously the "Grid Generator" project. A Web App to explore the possibilities of an infinite grid of squares. Driven primarily out of curiosity, I wondered if even I could create something cool with an endless grid of customizable squares? I spent almost two years on it. Two years of trial and error iterations in code, UI, product orientation, business, and failing…
When people think about the WebGL API, they focus on one of the famous libraries that use it. Typically "three.js" or "Babylon" . There's barely any motivation to use the WebGL API directly. But the WebGL API is still just as important to know as it provides creative ways to place colors in browser pages. The WebGL spec even starts by saying: Given the many use cases of 3D graphics, WebGL chooses…
1 - Initialization This post is the first in the series. It talks about avoiding the Web Components constructor, events and life-cycle methods while rolling your approach. 2 - As a variable bucket In this post I was trying to automatically declare new tags as they get written in the DOM. Here I introduce container elements, which allow their child tags to have any name by assuming that they will…
In this post, I present what is by far the 2nd best way to test Web Components. I say this because there must be at least one way better than the one I am presenting. Also, I don't know of any other way to test them since I have just started playing with Web Components. So yeah, 2nd best, by (infinitely) far. Where to test a Web Component? First, a starting note: The techniques I am going to show…
What if custom tags could be used for the application state? For instance, consider a simple todo app that gets rendered like this: < html > < body > < todo-app > < ol > < li > Sleep better, don't be tired. </ li > < li > Replace a tire </ li > < li > Write a tiresome article </ li > < li > ????? </ li > < li > Profit </ li > < li > Nah, forget profit, just write something </ li > </ ol > </…
The other day I was thinking about what do HTML tags give us out of the box and made this list: Hierarchy < luke-im-your-father > < nooo-thats-impossible > </ nooo-thats-impossible > </ luke-im-your-father > Sequence < p > I’d use one for parts </ p > < p > If I ever have twins </ p > Meaning < q cite = " https://en.wikipedia.org/wiki/Meaning_(philosophy) " > A relationship between two sorts of…
JavaScript(JS) allows object classes to be anonymous. No need to name them and bind your class to an identifier. Instead of class MyClass { ... } write class { ... }, and it will be created without a name. Likewise prefix a regular JS object { ... } with class and have an anonymous class defined. Nothing special here, classes are in fact normal JS objects. The big extra is that anonymous classes,…
:) Go Home
I've been playing around with Web Components lately. They are quite an exciting thing with a vast range of use cases and possibilities. Web Components provide a very flexible API to explore non-standard approaches and Frankenstein contraptions. I know I will :) MDN has an excellent intro to Web Components . It explains the three main parts of Web Components in some detail (custom tags, shadow…
Deno is gaining traction. A TypeScript runtime based on the Rust language and the V8 engine commonly associated with Node.js, or seen as the "new Node.js". After trying it out, I feel that Deno is much more than that. Deno is a new thing. A new thing that gets it right and manages to improve even the few parts that were already top-notch in Node.js/JS. How cool is Deno? Technicalities apart, the…
Creating Cliddy has been a significant driver of my motivations and ideas. This simple character that will serve as the base for my next drawing app has been a source of fun in recent days. It is a throwback to the days where virtual assistants were displayed with an avatar without "skills" or "actions" or whatever Siri now has. An agent to be used as a narrative controller of a story that I am…
Using an index.html as the single management file for the app. "It might work for small things, but I wouldn't use it for something big." Said someone about something. These are some of the things that an index.html typically does: Sets the title for the current page Defines the content and assets Defines content to be used as a template Loads styles Runs scripts and resolves modules dependencies…
Moving from Grid Generator into the first version of Shape The Pixel is going to involve the effort of cleaning and pruning the parts that are slightly outside of its intended focus of drawing shapes. This implies product changes that will propagate into technical decisions. What is going away? Things that were done in Grid Generator and that are going to be removed in Shape The Pixel :…
More than two years ago I was releasing my bootstrapped drawing application into the world, the "Grid Generator" web app. It was the labor of love and the search for a creative project where I could eventually dedicate a big part of my future life. However, a trip to the Web Summit in 2017 and countless books of lean/market-first approaches were not enough to save it from its fate. It was not a…
TL;DR Here is a template for your new web app project: Svelte + TypeScript + Parcel + Rust The web is a big open platform that keeps evolving with the URL at its core. We have a lot of tech and frameworks at our disposal to chose when starting a new web app in 2020. There certainly is a lot of mud to crawl into, from an all-in vanilla JS approach up until an all-out React with a 100+ dependencies…
The purpose of this post is to introduce my personal project: Grid Generator. This is the first post about it since it went online on the 1st of July 2018. What problem does it solve? I have always struggled with design tools. In particular those that came to see the light of the day during the 90's (Adobe I am looking at you). These design tools are clearly targeted at "pros" and "specialists"…
The last 6 months? Rents rising, IRS, grants and the version 0 of my personal project A Lisbon Story (part I - eviction) Renting cycles have always happened. In certain cities you can even map whole migrations as they trend and landlords surf the wave of higher rent prices for at least the same level of preocupations. Roughly 18 years ago I moved to Lisbon to study. For me it represented moving…
WebSummit first day came with a mix of up and downs sprinkled with the duality of having the desire to scream with euphoria versus admiting that the event is nothing special to avoid stressing about it. This week I was contacted by their team to go up on the main stage with some of the startups that were present in last week event with the President Marcelo Rebelo de Sousa. That gave me cold…
About a month ago I was planning my WebSummit approach when I realized that I had never been to such an event. Much less have a stand of my project there. That was when I started searching for opportunities to be at events. To train and prepare for the WebSummit. Back then I got an invitation to participate in the first aniversary of StartUp Portugal, the portuguese state entity that acts upon the…
A few days ago I got an e-mail from the presidency inviting me to go to an event with the president of Portugal, Marcelo Rebelo de Sousa. This came within the WebSummit context, he wanted to be personally with some of the portuguese startups that are going to attend the WebSummit next week. This event would take place in the old National Coach Museum in the near future: today. I guess that I got…
I don't know where hackers (as in infosec wizards) eat in Lisbon. We do have a strong background of using things beyond their intended purpose (we call it "desenrascanço" and it is a basic trait of being born in the culture that has sprung here for centuries). As is this post is intended for tourists looking for a typical experience. If you are visiting Lisbon chances are that you will spend your…
In April 2016 I quit from the startup I was working to finally do a personal project. Back then the questions everyone asked me were mostly about money "How are you going to live ?" . Even though rent prices in Lisbon have been skyrocketing due to tourism increase and the coming of WebSummit I always had a frugal economical lifestyle. I don't have loans, I don't have "luxuries" and I can keep my…
In most languages Set's have a clear strong use case: fast union, intersection and difference operations; unfortunately in JavaScript these operations are not readily defined so as an exercise I am going to raise some questions and try to answer them in this post. All code is run on Firefox Developer Edition 57.0b11 (64-bit) in macOS. Initialization Most of this post will be used to compare Set()…
Recently I was somewhat "forced" to think about the story behind the idea I am working on. If you go to these startup and entrepreneurship events you will see that most projects have some kind of a story behind them. Either they start up in a garage (Apple), or they decided to improve their hobbyist girl discrimination app (facebook), or they just somehow were blessed by some mystical event that…
Personally I find it impossible to answer this question. I feel that it was not me who actually took the decision to go to the WebSummit. Even though I did. It all hapened through a sequence of chained events that led me to have to decide to buy a discounted alpha ticket to go there. At first the WebSummit has two big "no"'s: the price and if you can actually get something useful from it. I can…
Any JavaScript spaghetti worth its salt won't keep track of its objects references or their updates. These are things that happen between the mind of a chef and the ether of a planned portion with lots of defensive copying. Immutable.js aims to reduce these portion sizes to match the ones in fancy restaurants while avoiding ingredients like: JSON.parse(JSON.stringify(obj)) To try out this new…
When dinossaurs ruled the earth there was a young kid that had just installed Red Hat Linux 5 on his computer. Fascinated with the "OS for the elite" he was about to experience a devouring frustration. The kind that gives rise to dark divinities that come to haunt you in your sleep for years to come: Trying to exit vim. After a few unsuccessful atempts the computer power switch was the only option…
Using console.log() to debug JavaScript, a dynamic weakly-typed interpreted language, feels like drinking beers on a lazy summer sunday afternoon. It is easy and you do it without thinking too much on how you could probably be more productive doing something else. Truth is that in all the other days of the week you don't avoid spraying your code with the debugger keyword and let the developer…
It has passed a year and a couple of months since I started bootstrapping "a painting web app". A lot has happened since that time, here is a quick TL;DR: I am still living off my savings (with a bit of help explained bellow) Increase in frequency and amplitude of the emotional roller-coaster highs and lows I started learning how to dance kuduro , kizomba and semba to cope with 2 Had some…