Here’s a fun one. There’s a bug in Chrome and Safari where SVGs that use Display P3 colors get changed to sRGB when set as repeating background images. First, a few details: Seeing this in Chrome 150 and Safari 26 Firefox (as of 152) needs silly config changes so I didn’t test there. Assuming it has the same issue This post is about Display P3, but the same applies to other wide gamut colors like…
Note: This is a proposal for a browser feature. All the demos are mock ups and the feature-specific code is made up. As far as I know, nothing like this is in progress by any browser. Update: Even though I thought I’d done an extensive search for existing posts on this, my searching didn’t turn up any posts on the topic. But knew there had to be already. And of course, there already is. I swear I…
There’s a frequent lament of missing the “old” Internet. It’s different for every person that thinks it, but it’s usually a feeling of loss for things like personal websites, blogs, RSS feeds, quirky sites for special interests and hobbies, forums, etc. A feeling that they don’t exist. That they’ve disappeared from the Internet. While I understand the feeling, it’s misplaced. Those things we’re…
Last month, I wrote about starting a business . In that post, I mentioned the first product I was building was an iOS app for collage. That app is called Pezzos . It’s a fun way to make, share, and explore digital collages. It’ll be available sooner than later. When Can I Use It? I’m racing to get the app ready for first users as soon as possible. As long as nothing goes too sideways and I can…
These are a few things I enjoyed recently. Maybe you’ll enjoy them too. Personal Business A wonderfully well-written reminder that not everything needs to scale. Not everything needs to be automated to the nth degree. Doing things slowly, by hand, for niche groups of people is always an option. “Personal Business” by Charles Broskoski on Are.na . …how is a tiny software company supposed to compete…
As the title suggests, I tried to switch a project from the OpenAI API to a local LLM running in Ollama, but wasn’t able to make it work due to slowness. It was a fun exercise though. This is what I tried and what I learned. Discogs is where I track my record collection. Wax is a nice UI for it that I’ve been noodling on for years. I built a small ETL for it. It uses the OpenAI API to extract…
In my previous post I talked about starting a new company, Latchbolt . This is a quick post about the various services and tools I used to get set up. And the costs involved. First, a list of the services I set up. Details follow. Stripe Atlas : Incorporating and registered agent Mercury : Business checking account and credit card Google Workspace: Email, Drive (leave all the Gemini bullshit off)…
Three weeks is a short amount of time. It’s a tiny amount of time when it’s the total time you spend employed at a job. And it happens to be the exact amount of time I spent at my most recent job. April 2025. A post about a new app landed on my Bluesky via repost from a friend. The app was for something that I’m very into. I used it for a few days. While it was in early stages, it was fun and…
No doubt this has been written about before, but I used this approach yesterday and it’s cool so I’m writing about it too. Like any good website, I have a pile of links in the footer of this one. Most of the links are to internal pages. A handful of them are to external sites. It’s never bothered me before that the external links aren’t marked as such. But, in a usual fit of procrastination while…
For 2025 I set a goal to ride 1,000 miles on my bike. I’ve been biking with some regularity for a little over a decade now. In that time, I’ve never set a yearly mileage goal. Only small monthly goals. Which, before this year, I only hit once. I decided it would be fun to work towards a goal way beyond what I’d ever done. Just to see if I could do it. And, of course, if I’m doing something like…
These are a few things I enjoyed recently. Maybe you’ll enjoy them too. Why Fish Don’t Exist Rachel and I visited the best bookshop in Wiscasset, Maine, at the end of September. As usual in a place like that, we wanted to take every book home with us. I was restraining myself. Rachel insisted I get at least one book to go along with her haul. I chose this one at random because of the title and…
Jim tagged me . These have been a lot of fun to read. Happy to keep it going. Why did you start blogging in the first place? I wanted to be a part of it. When I was new to building websites (started around ’04, launched this site in ’06, added the blog in ’09 ), the people I looked up to in web dev all had blogs—most still do. Those blogs had a massive impact on how I thought about and approached…
Last year I wrote about MPA view transitions . Since then, the spec has been expanded and browser support has improved slightly. The @view-transition at-rule @view-transitions is a new transitions-related at-rule. For multi-page transitions it’s required. This is a breaking change to existing multi-page transitions. Any site, include this one, that had existing multi-page transitions no longer…
If you’re using SvelteKit with Storybook and the Svelte Story Format addon and need a way to mock built in $app/stores in stories, this post is for you. This was written using the following versions: Svelte 4 SvelteKit 2 Storybook 7 addon-svelte-csf 4 If you’re using newer versions, there’s a chance the examples here won’t work the same or at all. The Component Say we have a small component that…
Update October 6, 2024: Some of this is outdated. See “ CSS View Transition At-Rule ”. Note: At the time of this post, view transitions are still an emerging standard. Examples may not work for you. To use in Chrome or Arc, enable two feature flags: chrome://flags#view-transition and chrome://flags#view-transition-on-navigation In my previous post on the topic, I wrote about what I was learning…
CloudFormation is not fun to write. The documentation is obtuse. There’s 20 different ways to do everything. Time spent on it feels like yak shaving at best and a total waste at worst. Having said that, the infra provisioning setups you can make with it are helpful and, for most things beyond small personal projects, necessary. So, I’ve been doing what every lazy programmer does. I’m getting a…
TL;DR: There’s a native test runner in node . It’s great. You should use it on your next project. Things like this just feel good. Any time you can switch from using an external dependency to something built-in feels like taking off heavy winter boots. If you haven’t used it yet, node’s native test runner in node is excellent. It’s available in node verions 16.17+ , 18+ , and 20+ . I’ve been using…
TL;DR: I’m contributing to a CSS Typed OM polyfill for browsers (and maybe jsdom). It started off like it usually does; I had an idea. Dangerous, I know. I’d been learning about, tinkering with CSS Trig functions . They’re very cool. Seems like there’s a lot of potential uses for them. My problem, though, is I can’t visualize them. I can put them in CSS and see the effect they have, but I have…
CSS scroll-driven animations are a new feature that's in early days of rolling out to browsers. In short, they’re everything we love about CSS animations, but with a timeline based on scroll position instead of automatic timeline. This is my first time tinkering with them and so far they’re super fun. Being able to accomplish these effects with zero JavaScript is huge. This type of text write-on…
Update October 6, 2024: Some of this is outdated. See “ CSS View Transition At-Rule ”. Like a lot of other people right now, I'm excited about the in-development View Transitions API . I'm extra excited about using it without JavaScript for multi-page apps (sites, whatever). Dave's excellent post got me set up with the basics. I've spent the last day or so experimenting, playing, and learning as…
Last summer , I built a tool to help visualize the CSS color-mix function. colormix.style lets you mix two colors in a given color space and generates the CSS snippet needed to do that with color-mix . For the MVP, I was focused on building the bare minimum to get the idea across. Since then, browser support for color-mix as improved. More people are experimenting with and writing about color-mix…
In late 2022, Apple announced support for AVIF images on iOS 16+. That was welcome news, but did lead to issues. I don't know how wide spread this issue is, but for this site, most AVIF images I had in place stopped working. If you're searching for some version of; "iOS 16 AVIF images broken" , this might help you out. TL;DR : Re-encode any AVIF images that aren't working. There have been AVIF…
TL;DR: colormix.style and github.com/tylergaw/colormix.site Way back in 2017, I built ColorMe for working with a proposed CSS color function. That proposal didn't end up sticking, so that color function is no longer valid. ColorMe is still a useful color picker though. Now, in 2022, there's a proposal for a new CSS color function. This version is named color-mix . It's part of the CSS Color Module…
A year ago today I wrote Realign 2020 . A typical designery blog post where I declared my intent to redesign and rebuild my site and write about it along the way. Through 2020 I did that. I did the work. It's live now. I’m super happy with the results. I didn't write all the posts I wanted to, but that's OK. Here's the posts I did write. Realign 2020: Typography Realign 2020: Logo Realign 2020:…
When I have a question about how to do something with CSS, I often find the answer on CSS-Tricks . I’m guessing that’s true for a lot of you too. It’s been the go-to for CSS knowledge for as long as I can remember. If one day you find yourself searching for help working with CSS custom properties in JavaScript, you might find yourself on an article on CSS-Tricks written by me. Because, last…
This is part of my “ Realign 2020 ” series. In it, I document my process during a content and design realign of this site. I’ll update the site piece-by-piece as I post. The design and content will evolve through the series and beyond. Going into this, I didn’t know exactly what colors I wanted, but I knew I wanted a lot. I wanted my color usage to come across as deliberate. Planned. But at the…
This is a technique I used recently to create a flexible, repeating pattern using SVG with CSS mask . There are live examples in this post and they’re available as a CodePen . The need came from something I designed at work . I gave the bottom of the header on each page a little squiggle to make it a bit more interesting than a straight line. Along with that, I designed a color system for each…
This is part of my “ Realign 2020 ” series. In it, I document my process during a content and design realign of this site. I’ll update the site piece-by-piece as I post. The design and content will evolve through the series and beyond. Eight letters form my first and last name. My title, 16. An ampersand for flair. That’s 25 characters that made up my logo. That’s how it felt. When I looked at my…
This is part of my “ Realign 2020 ” series. In it, I document my process during a content and design realign of this site. I’ll update the site piece-by-piece as I post. The design and content will evolve through the series and beyond. The fonts I’ve chosen for this site have run the gamut over the years. Handwritten, illustrated, web-safe only, monospaced, serif, questionable, and so on. The last…
Like other designers, I enjoy updating my personal site every so often. In my case I do a major iteration every couple years with minor tweaks between. This current incarnation is almost two years old and I’m ready to make major changes. When I launched this design in 2018 I remember thinking this would be my last site. I wasn’t under any illusion that I wouldn’t update this site again in the…
At work , we’re in the middle of a site realign and rebuild. As part of that effort, we’re moving to NetlifyCMS . Implementing NetlifyCMS was eerily easy for me. But, I did hit one snag when it came to OAuthing with GitHub. In this post I explain the problem and what I did to get things working. First, the problem. I didn’t do anything fancy with the NetlifyCMS installation. I used the standard…
Folks in design and technology have a tendency towards negativity. Any day of the week you can read Twitter, blog posts, and have conversations with co-workers and hear people declare, with self-appointed authority, that anything they don’t find value in is bad. Here’s a non-exhaustive, unordered list of things about my work—maybe yours too—that are good. HTML is good The WHATWG is good CSS is…
Update, early 2021: I changed the name and URL to Bookshelf . Just seemed like a better fit. I don’t read enough books. And when I do, I don’t read a wide enough variety of them. I’m working to fix this by doing three things: I’m reading more books Always having a book I want to read (that I’m actually interested in, if I don’t like it, I put it down and walk away) For step number two, I either…
This website has had Google Analytics tracking visitors for at a least a decade. I’m not sure of the exact date I added it, but I’d guess 2007-2008. As I published this, I removed the JavaScript for it and deleted the property in the GA dashboard. For this site, the numbers serve no purpose. They’re a vanity metric I either never look at or anxiously check when I have a burst of traffic for…
Another day, another side project. My latest is Anthologies . It lets you package links to share stories. Or–more accurate–that’s what it will do when I launch it. I bought the domain name two months ago and now I’m getting to work. I plan to share as much of my design and development process as possible. This post is a look at early design concepts and a peek into my thoughts on how I approach a…
In December 2017, Dribbble announced version two of their API. In the same post, they set March 26, 2018 as the deprecation date of version one. I’ve maintained Jribbble for almost 8 years now . It’s a JavaScript library to help fetch data from the Dribbble API. In that time it’s gone through plenty of iteration to keep up with Dribbble API changes. Jribbble 3.0 continues that trend. To date,…
This post is specific to a need I had on recent React / Redux project. It’s a common need and one I’d run into before, but this was the first time I needed to come up with a solution for it. This was difficult for me. I had to slow down and take time to internalize what I was trying to do and all the pieces involved. My hope is that this post will help someone else also working to figure this out.…
I’ve been looking for time and a sandbox to sit down and learn how to build offline-capable/first web sites or “Progressive Web Apps” (PWA) for a while. I learn best with a hands-on approach. ColorMe is a site I maintain and a perfect candidate for offline experimentation. This post details the steps I took, the issues I ran into, and things I learned building my first PWA. Quick note. This isn’t…
On December 15, 2016 I became unemployed. This was the first time in my career the unemployment was not my choice. The entirety of the company I worked for was RIF’d. If you’re unfamiliar, RIF stands for “reduction-in-force”. We were out of money to pay salaries and RIF was the best case scenario for us at the time. We were lucky. The founder and team all wanted to keep doing the work we all felt…
A short Twitter exchange with Mike made me pause and think about the positive impact Flash has had on me. I felt the need to scribble a few loose thoughts and anecdotes about a technology near its end. I’m thinking about the time between late 2004 to sometime in 2008. That's the start of my time working with the Web and computers in any real capacity. Flash was still Macromedia Flash. It was…
Since releasing it two weeks ago, ColorMe has had time to simmer and I’ve gotten a bunch of great feedback. In that time I’ve made improvements and feature additions. New features include; support for hsl(a) and rrggbbaa colors. Red, green, and blue color adjusters. And the option to choose the format of the output color. The first updates I made I snuck in the day after release. Those were…
ColorMe is a site I built to make working with the CSS Color Function easier. It provides a UI for applying adjusters to a base color and gives a visual of the adjustments. The excellent SassMe was my inspiration. The Color Function is a CSS feature in editor's draft stage of specification. This means it will be a while before it lands in any browser. That doesn't mean you can't use the proposed…
Sass has been my go-to for years. But for a while now, I've wanted to try a new styling setup with PostCSS and the cssnext plugin. I love the idea of writing future CSS syntax today and using tooling more aligned with other tools I'm used to. This personal site is a perfect test bed to try this new setup. The first step I took was an inventory of my Sass usage. I needed to know what features I was…
At 2 ½ my placeholder image plugin was showing signs of age and side-project neglect. I decided to make it a priority to get Day Player back in working order. In doing so, I would also need to educate myself on the latest in Sketch Plugin development. I didn't know it when I started, but I would also put together a fun build and release setup for Sketch plugins. Day Player has a limited scope. It…
Using Web technolgies as a medium for motion graphics was maybe not on the mind of Tim Berners-Lee when he came up with the WWW. For the past few months I’ve been working on a project that does just that. Web folks–especially those of us working on the front-end of things–tend to be a bit consumed by tools and process. I sometimes get fatigued by the near constant chatter of new frameworks, build…
OS X Yosemite introduced JavaScript for Automation. This makes it possible to access native OS X frameworks with JavaScript. I’ve been digging in to this new world and putting together examples along the way. In this post I’ll explain the basics and step through building a small example app . WWDC 2014 included a session on JavaScript for Automation . The session explained that you would be able…
I recently had a need to be able to control the time of audio elements via a URL query string. I whipped up a bit of JavaScript to handle it. There’s a demo here and the source is on GitHub . I had fun figuring it out and thought maybe you’d enjoy reading about it. The following are details about why I needed it and the code I wrote. As with most projects, this one started with a problem that…
I host my personal sites–this one, my lab , my quips , nonsense , and others–on a Rackspace VPS . NGINX is my web server of choice. Each site has its own configuration file. I’m definitely not Mr. Sys Admin, but I have an easy way of organizing those config files to help me make quick updates and additions. I’m assuming some knowledge with this post. Folks who have middle ground knowledge of NGINX…
<p class="entry-intro"> As part of my site <a href="https://tylergaw.com/articles/how-i-start">redesign</a> I wanted new branding. It’s not really a logo I guess, but it’s what I’ll be using on this site and any other promotional crud that I make like business cards. This was a fun process that let me dive deeper into hand-lettering than I have before. Here’s a look into the design of the new logo…
<p class="entry-intro"> I'm beginning a design iteration of this site. I've started freelancing full time and I want the site to display more of my work and explain it in finer detail to give potential clients and collaborators a better idea of what I do and how I go about it. I love this early part of the process where everything is on the table, and up in the air, and I can get arty-farty and a…