I just had an amazing interaction with the Gemini CLI where after saying “I’m done.”, it continued going with 11 “final checks” and 4 “one last checks”, along with another 14 calls to “Wait.” as it double⁴ checked its work. Gemini was so “confident” during this exchange that it said so no less than 4 times and confirmed its response was “correct” 10 times. In the end, it devolved into outputting…
I have been using AI coding agents heavily to amplify the output of our two-person product team at Outlyne . My co-founder, Jeremy Willer, is a brilliant product designer and highly capable traditional web developer (HTML and CSS), while I’m a full-stack software engineer. Over the last decade, React and JSX (now TSX) have enabled Jeremy to become a productive contributor to our Typescript…
I have been building highly interactive React UIs since 2017: visual editors, design tools, the kind of applications where users are dragging elements, adjusting properties in real-time, and expecting every interaction to feel as responsive as Figma or Photoshop. An unnecessary re-render can break the illusion of direct manipulation, making the experience laggy and unpleasant. For eight years, I…
Crash reports started trickling in. Users would be working as normal in the app until, without warning, the browser locked up. Behind the scenes, an infinite React component tree was quietly growing in memory, and React 19’s <Activity> was keeping it alive long enough to hide the problem. The culprit? An AI coding agent and a deleted comment. I’ve been building Outlyne , an AI-powered website…
Since I published a post about how to get the eslint-plugin-import working with Yarn PnP, I discovered a new plugin called Perfectionist that works great out of the box and requires no extra work to be compatible with different package managers. It completely replaces the need for the import/order rule that I struggled to get working. But the biggest transformative thing about it is that all of…
Lorem Picsum , the “Lorem Ipsum for photos”, is a very simple, very nice, free image placeholder service. As they put it, they provide “easy to use, stylish placeholders.” It’s indispensable whenever I’m putting together a quick demo or test or minimal reproduction or POC. Many similar services generate simple solid gray images with dimensions for wireframe-style usage, but I pretty much never…
I hate noise in my git history and useless git blame identifiers with the heat of a thousand suns. I’ve felt somewhat embarassed and self-conscious about this fact, because it is yet another symptom of my overbearing perfectionist inclinations. However, I then came across a blog post called “Why large companies and fast-moving startups are banning merge commits” by Greg Foster, and saw that this…
When collaborating on larger JavaScript or TypeScript projects, the import preambles can become quite long and unmaintainable if conventions are not adopted and enforced. Random import ordering makes code harder to read and update and leads to duplicate imports, as well as opening the door for a lot more git diff noise from differing opinions about import ordering from members of your team. The…
AWS Amplify makes writing your front-end application in TypeScript easy. As long as you have a build npm run script that takes care of transpiling your TypeScript source code and handling any other build tasks, your application will be deployable via Amplify hosting. However, in order to use TypeScript with Amplify’s lambda functions, you need to do a little more work to compile your source files…
Mobile Safari’s method of hiding and showing the address bar is a lovely piece of UX. When you’re reading or interacting with the contents of a webpage, you don’t need it and don’t want it taking up valuable screen real estate, especially on a phone, so it gets out of your way. But when you do need it, you can scroll the page upwards, as if reaching up towards that address bar, and it comes back.…
Update May 4, 2015: This technique no longer works. A recent Backblaze update has added strict validation controls that prevents their forbidden directories from being enabled. Even if you edit the bzinfo.xml file and explicitly Lock it from the Finder’s Get Info pane, Backblaze will not accept the changes into its own config. I will leave the original post here for the record, but the technique…
To my fellow builders of websites: when you want to include an external resource on a webpage, do not use a publicly-accessible version control system to serve the resource. I see this problem most frequently on sites with the inclusion of the HTML5 shiv (shim) script, used to enable HTML5 elements in IE 8 and older. The script was originally hosted on Google Code, and the project description…
Marcin Wichary wrote an excellent post about creating the ideal text underline in CSS for Medium. In that post, Wichary offers a list of goals to achieve: So, the ideal technological solution would allow us to: change the width of the line (with additional half-pixel/retina support), change the distance from the text, change the color (even if just to simulate thinner width by using lighter grays…
While browsing the Issues page for VideoJS on GitHub today, I was having trouble reading the text of the inline labels that appear next to the titles of some issues. These labels have white text on colourful backgrounds, and in Chrome and Safari, that white text looked blurred with poorly defined edges that bled into each other, because they are being rendered with subpixel antialiasing. A very…
I recently discovered the BadBadNotGood album BBNG2 . It inspired me to take a look at the dynamic range compression being used on the album, which prompted me to write an explanation for my friend who introduced me to it. To illustrate the effects of dynamic range compression on a piece of music, I put together a comparison of the dynamic range of four different songs, two by BadBadNotGood and…
While reading the recent 24 ways article about “Crafting the front-end” , I thought about how I view my own work and what kind of work I consider it to be. In the first part of the article, Ben Bodien, the author, identifies five essential traits that distinguish a craftsperson: An appreciation of good work, in both the work of others and their own. And not just good as in ‘hey, that’s pretty…
Hi! My name is Andrew Patton, and this is my blog. I hope to use it as a rostrum from which I will voice my thoughts about web development, or more generally, about building and crafting excellent user experiences. This being the first post, let me briefly introduce myself by shamelessly borrowing from the text of my about.me profile : I am a website programmer and developer. I build pretty great…