Navigation underline animation
I recently had a design with three tabs and an underline that indicated which was active. I've seen an animation where the line moves between the tabs, but hadn't used it before. So I decided to try i
This week I learnt...
I like problem solving and making things pretty. I also like red.
Latest articles
Trying AI autocomplete
I've used autocomplete before in coding - after all, why type more than you need to? But recently I downloaded Cursor and tried out the AI autocomplete, which can add many lines at a time. And did I f
Moving elements with JavaScript
Recently I had a situation where there were two elements, A and B, each of which contained a whole load of things. On mobile A was at the top and B was below it. But on desktop B was on the left and A
Transitioning display: none
I recently had cause to transition display: none. It’s not yet working in all browsers, but when I tried it I found the effect was so subtle that no one would notice the difference. In this example I had to change the transition time to 1 second in o...
Styling sibling hover and none hover
I recently had some complicated CSS to get my head around. I have a list of links which I want to style when they’re being hovered/focus on. But, if none of them are being hovered or focused, then I want to style the first one in the list. The HTML <...
The scripting media query
I know there are a lot more media queries out there than the ones I usually use, but this week I used one I’d never come across before. The scripting media query checks whether JavaScript is enabled. It has three keywords, although only two of them a...
Using ChatGPT
This week I had a couple of things I got stuck on and googling/Stack Overflow weren’t helping me much. I know that people have said that AI can help you with programming and I thought I’d see how much help it was getting me unstuck. Problem 1 I went ...
Select keyboard controls
I was recently given a design that included a customised select. Since that’s currently only available in the most recent version of Chrome, I went looking for libraries and instructions on how to create your own select. And I came across a problem: ...
Accessible toggle
I recently got given a design that included a toggle. But I know they are not the most accessible of components, so I had to do some research on the best ways to create them. I started at https://www.w3.org/WAI/ARIA/apg/patterns/switch/. This site is...