A bunch of little things and sketches
Over a week ago, I had a thought: "I'm gonna make my website cool." I really love visual exploration. But there's a problem: given no constraints, it's so easy to get wrapped up into a one idea and go too far down that path. Here's what happened: I found a cool trick to "warp" real DOM elements. I took this approach to the extreme and tried to build my whole site around it. Here was one early…
p { margin-top: 1.5em !important; margin-bottom: 1.5em !important; } ^ef0fc3 I’m James Long, and I love building products. You might know me as the creator of Prettier , absurd-sql , Actual , or maybe something else. I left Stripe in October and am currently looking for my next role (email me at longster@gmail.com ). Please get in touch if I can help you! About me "Design engineer" is probably the…
h2:first-of-type { margin-top: 0; } h2 { margin-top: 70px; margin-bottom: 30px; } details { font-size: 14px; margin-top: -0.5em; margin-bottom: 2.5em; } details h3 { font-size: 14px; } .entry { display: flex; justify-content: space-between; } .dates { color: var(--color-subdued); } p { margin-top: 1.5em !important; margin-bottom: 1.5em !important; } ^865093 Resume Stripe , Staff Engineer 2020-2025…
I've been working on a design and found a cool effect that would make a great bookmarklet. A bookmarklet is a JS snippet that you can drag to your bookmarks bar and run on any page. Bezier Transformer: Click any element to transform it Press ESC to cancel `;const closeBtn=document.createElement('button');closeBtn.textContent='✕ Close';closeBtn.style.cssText=`padding: 6px 12px;background:…
Yesterday I did a livestream where I built a usable REPL with AI integration. Mostly from scratch, all in 3 hours. It uses a custom WASM build of QuickJS for evaluation. If the evaluation fails, it sends the text to Anthropic to speak to Sonnet 4.5. The idea was to meld a live evaluation environment together with AI. By using QuickJS as an evaluator, we get more than just a sandbox: we are able to…
I'm terrible at managing emails/DMs/etc. A lot of times it feels like trying to keep up is a full-time job in and of itself. Now that I don't have a job I finally have time to figure out a better workflow to manage life. I have a good workflow for writing notes and managing tasks in Bear , but my biggest weakness is staying on top of communication. What happens frequently is I'll have a backlog so…
body { background-color: white; } .player { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .player > video, .player > .video-box-fade { position: absolute; inset: 0; width: 100%; height: 100%; } .player > video { object-fit: contain; } .player .video-box-fade { display: flex; justify-content: center; align-items: center; overflow: hidden; position: absolute; inset: 0; } .player…
This is a post (note: skipping interactive content block) ^0686c4 (note: skipping interactive content block) ^d6f59f
body { background-image: url(https://static.jlongster.com/20251008/purple-grain.svg); background-size: 500px 500px; background-color: #2E264E; } ^67fd6e <div class="demo-full-screen"> <div class="relative" style="width: 100%; height: 100%; max-width: 800px; max-height: 700px;"> <canvas style="width: 100%; height: 100%; object-fit: contain"></canvas> <div class="demo-touch-area absolute"…
body { background-color: black; } #demo-mount { margin-top: 50px; } .sizer { position: absolute; bottom: 60px; width: 500px; left: calc(50% - 250px); text-align: center; color: white; background-color: #303040; padding: 20px; border-radius: 6px; } .sizer input { width: 100%; margin-bottom: 20px; } .sizer .output { font-size: 3em; line-height: 1em; } .info { position: fixed; bottom: 0; right: 0;…
Weak references are neat. The best language features unlock different kinds of abstractions, and weak references do exactly that. Let me show you why. In JavaScript we have two APIs to work with weak references: WeakMap and WeakRef . (Before I wrote this article I thought WeakRef was only a proposal, but it turns out most browsers have already implemented it) One of the more common use cases uses…
I've been studying synths and recently this guy's tutorial really make things click for me. The way he shows the sound in the frequency spectrum really shows what makes the sound, and explaining harmonics was really interesting. Tonight I thought I'd give Cursor a chance to create a quick synth from scratch to play with harmonics. I also wanted to visualize the frequencies. Here's the Cursor came…
(note: skipping interactive content block) ^f3bf01 ^aeae51 A collection of notes as I work through The Little Learner . (note: skipping interactive content block) ^0c0c15 Chapter 1 1.5: graph a line with $w$ and $b$ parameters const f = ( w, b ) => x => w * x + b; render ( graph ( f ( 100 , 10 ))); render ( graph ( f ( 10 , 0 ))); ^2b4784 1.14: reverse the order to make $x$ an argument and $w$ and…
I just pushed a new backend for this site. I love having a quick direct connection to my site: being able to write content and publish it with a quick press of a key. Previously, I was using logseq for this but while writing my latest post I got frustrated with how slow it is. I use this site not just for writing content, but also quick sketches of interactive code. I can easily make a code block…
(note: skipping interactive content block) ^30b920 I've always wanted to understand color theory, so I started reading about the XYZ color space which looked like it was the mother of all color spaces. I had no idea what that meant, but it was created in 1931 so studying 93-year old research seemed like a good place to start. When reading about the XYZ color space, this cursed image keeps popping…