November 20, 2023 By James O'Halloran TL;DR TinaCMS is now fully open-source and easier to self-host. We also built a Next.js + TinaCMS demo site that can be hosted entirely on Vercel. Earlier this ye

I scheduled this post, isn't that cute? I find I have very little energy to write blog posts during the week, but occasionally I sit down on the weekend to write something and have a few ideas that turn into multiple posts. I'd like to be able to publish posts more often, but realistically I won't…

Day 22 of National Blog Posting Month #NaBloPoMo Earlier this month, Jeremy Keith posed the question: “How green is my server?”. As Jeremy notes, it’s surprisingly hard to get that information! So how do you ensure that you’re hosting your website on a green server? What do we mean by “green”? When…

Yesterday, I wrote about classless vs. class-based CSS design systems . In the article, I noted… There’s a middle ground between classless and class-based design systems. My favorite CSS boilerplates/

Today, I wanted to talk about classless vs. class-based CSS design systems, boilerplates, and frameworks: how they differ, which approach I prefer, and so on. Let’s dig in! What is a classless design

Day 15 of National Blog Posting Month #NaBloPoMo I’m a big fan of lists. I like to think of myself as a fairly organised person. I make lists for a lot of stuff, at work and home, and get a little kic

Blog Slides Newsletter❗ Portfolio My projects Testimonials My links My setup My favorites About me My services Contact me Blog css view transitions 2023-06-26 Transition between pages smoothly with a

I’ve been around digital design software since Macromedia Fireworks was a thing — yes really that long! I can hear Gen Z hurriedly googling now what (and even who) that is. These were also times when we compromised the user’s experience on the web, by designing for digital software like Photoshop,…

You might be used to adding and removing .open and .closed classes on div s and containers to control their state styles. What if we could just write CSS that reflected the state of the DOM, without h

Published: November 29, 2022 Last edit: June 3, 2024 Reading time: 10 min. Eleventy comes with basic defaults already set up for you. That means you don’t have to do anything to start working: the output folder defaults to _site, and Eleventy looks for your source files in the root directory. This…

What's Going On Here: What Is This Your MooseDog Studios created website will be measurably above the crowd. Sales, attention, branding, misson, this is how it's supposed to be done. Who Am I I am an independent web designer, creator and front-end developer, easy to contact and easy to talk with. I…

17 September 2023 A lot of designers love to save space at the cost of clarity and prioritise aesthetics over content. But once you nail the foundational interaction design patterns, content is often the most important part of design. Button text is a perfect example of this. Once you design your…

In case you missed it, container queries landed in all stable browsers this week! It’s a pretty exciting time to be working with CSS, seeing this long-awaited feature finally become useable. Una’s post on web.dev includes a rundown of how to use container queries, as well as some nifty demos. By…

2023-03-31 #css I was building wireframes for a website with HTML & CSS. Since it’s a prototype, not all actions are functional. When a visitor reviewing the prototype tries to click something that is

The Eleventy v2 release improved incremental builds in several ways. However, a standing issue had been that when you display content from a collection and run an incremental build, that content wouldn't be updated in-sync. You would have to stop an restart your build, or opt back out of incremental…

Specifically the [space] [slash] combo before the closing bracket: / . I've had history with these particular two characters, but until recently that history of going back and forth was entirely based

To change a color based on whether Light Mode or Dark Mode used, you’d typically use a prefers-color-scheme Media Query. To make things easier, CSS now comes with a utility function named light-dark()

You might notice on some websites you visit that external links display a little icon next to them. This is super helpful for users, as it lets them know that the link is going to take them somewhere

Did you know your about us page plays a key role in whether a web visitor converts to a paying customer? It’s true—people who visit your about us page spend 22% more time on your site overall (on average) and are 5X more likely to make a purchase. In other words: If you’re not giving your about us…

It’s been absolutely wild to witness the rise of the new crop of AI tools. This moment feels equally exciting and terrifying, but given humans’ track record of driving promising technologies off the rails, I’m erring on the side of terrified until (hopefully) proven wrong. Setting aside a lot of the…

I worked for Wufoo when it was acquired by SurveyMonkey in April 2011. Twelve years ago. I think it’s fair to say it was largely abandoned. The Wufoo of today isn’t really any different than it was tw

I was reading Dan Mall’s blog post on Income Transparency a while back and my attention was caught by a particular section on burnout. In his post, he quotes Psychologist Herbert Freudenberger, who co

It was interesting to read Chris Coyier’s recent post about Andy Bell’s recent post . It made me think of my personal projects and remembering that I didn’t use a reset for any of them. Well, sort of.

Earlier in the year I started fiddling around with creating an archive of my tweets using Tweetback , an open source project by Eleventy creator Zach Leatherman. I’m not 100% convinced that I’ll make

September 28, 2023 11ty automation web design 100DaysToOffload 3 min reading time Having a static site is great, but there could be times when you need to build your site on a schedule. In a recent post, I wrote about building a blogroll with 11ty, and the next part of that is to automatically…

posted on July 19., 2023 If you have used a visually-hidden class in the past, you might have noticed that the width and height is set to 1px and not 0. I’ve always wondered why. Even in James Edwards

Daily Tips A few weeks ago, I wrote about what you can do with data attributes in JavaScript. The focus was on different strategies for using data attributes, rather than how to get and set them, but I had a lot of folks write to me asking why I didn’t talk about the HTMLElement.dataset property.…

March 7, 2023 · ⋆ JavaScript I was browsing through my Twitter feed and I saw something pretty subtle yet mind-blowing. One of the guys from the Astro team was showing off some of the new things they

Home Movies Blog Photos Activities Links Music Books Prints Energy Loves About Trevor Morris Home Movies Blog Photos Activities Links Music Books Prints Energy Loves About Published on 29th September 2023 For a small Eleventy-based project, I wanted to output an example.json file – stored in the…

Before I even get into the impetus for this blog post, if you came from a search engine and you just want the code, here’s a demo . Pleasure doing business with you. Introduction In a client’s project

Check out this layout I wanted to pull off on the current design of this site: See how just the first two boxes in the “sidebar” of the homepage are set side-by-side on narrow (mobile) layouts. One wa