DEV Community: Nic

Trying AI autocomplete

Nic — Sun, 12 Apr 2026 16:11:21 +0000

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 find it useful? Well, yes and no.

I've only tried it on a personal project. I do those because I have a fun idea and/or want to try a new language/framework and/or want to remind myself how to use an old one. The first thing it did was to guess correctly what I wanted to do with some data. Which was exciting, but also it wasn't something I do often in that language, so I sort of wanted to remember for myself how to do it. But if it was something I did a lot then I can see how it would be really good to save myself a lot of typing.

The next thing it did was also helpful, except that it had an error on it. It was exactly the sort of error I'd also make, but I'd expected it to know better. Which I know is silly because it's just getting data from people who are also making the same mistake.

After that its guesses about what I was trying to do were completely wrong and it was just annoying. But I've just been working on JavaScript at the moment. It'll be interesting to see how it does when I come to the CSS.

In summary, I can see how it would be really useful at work, when it has all the context for what you're working on and the languages used. And it's all things you do every day and have a deadline on. But on personal projects the one line autocomplete is probably all I need - after all, I don't have a deadline on personal projects, I'm just enjoying working on them.

Moving elements with JavaScript

Nic — Mon, 02 Mar 2026 17:40:25 +0000

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 was on the right.

Theoretically that's easy to fix - flexbox will sort that right out. However, that then meant that the focus order was wrong.

But that's still an easy fix - you just duplicate one of the elements in the HTML and hide one on mobile and the other on desktop. Except that this is in a CMS and the HTML was being built by it and didn't exist as HTML to change. And there were a load of scripts doing things inside these elements, some of which could well depend on a unique ID or a class only being used once. It was an important page on the site, so if I broke it, things would go very wrong, so I didn't want to touch it.

There will one day be some CSS to tackle this: reading-flow. But at the moment it's only available in Chromium browsers and is also marked as experimental, therefore subject to change and shouldn't be used in production code.

Fortunately, there's a really simple JavaScript solution. What I did at desktop size was to move element B to be before element A. When you look at the resulting HTML it looks like it's always been that way round. And the focus goes through the element on the left, followed by the element on the right.

The solution is before. Or after. Since I only have two elements they effectively do the same thing.

To move element B before element A you use:

a.before(b)

or you can use

b.after(a)

Which is a bit confusing because if you read that from left to right it sounds like you're saying a is before b, or b is after a. But when you try it it's easy to tell you've done it wrong.

Transitioning display: none

Nic — Sat, 22 Nov 2025 14:25:17 +0000

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 order to see it.

The HTML

<div>
  <p>Some text here</p>
  <span></span>
</div>

<button>Toggle active state</button

Some JS to add the transition

const button = document.querySelector('button');
const div = document.querySelector('div');

button.addEventListener('click', function() {
  div.classList.toggle('is-active');
})

The CSS

body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

div p {
  margin-bottom: 4px;
}

div span {
  width: 100%;
  height: 4px;
  background: red;
  display: none;
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete;
}

div.is-active span {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

button {
  padding: 0.5rem 1rem;
}

The transition

A lot of that CSS is the set up, the transition bits we’re interested in are these bits:

div span {
  display: none;
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete;
}

div.is-active span {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

Most of this is pretty standard. The span starts off with an opacity of 0 and display: none. The transition transitions opacity in 1s. And also display - which works because of the allow-discrete keyword.

And then when the is-active class is applied to the parent div we change it to be an opacity of 1 and display: block.

The thing that actually makes this all work is this bit:

@starting-style {
  opacity: 0;
}

This tells it that it's starting from an opacity of 0. You’d think it would know that because I told it it had an opacity of 0 when the is-active class is applied. But it needs to know within the is-active class too, so it knows how to transition the opacity in. If you remove this it will transition out, but not in. It's as if now the is-active class is applied it can no longer see the styles set on the div and you have to let it know what they are.

Codepen decided not to run JS when I set this up, so here's a JSFiddle instead.

Styling sibling hover and none hover

Nic — Sun, 14 Sep 2025 11:26:47 +0000

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

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
  <li><a href="#">Six</a></li>
</ul>

Styling the hover/focus

This is the simplest part - I am making the background of the links pink when they are hovered or focused.

li a:hover,
li a:focus {
  background-color: pink;
}

Styling the first element

Also, simple.

li:first-of-type a {
  background-color: pink;
}

Styling the siblings

If we just make the hover/focus pink and the first element pink when we aren’t hovering/focusing then the first element is pink which is what we want. But then it keeps being pink even when we’re hovering/focusing on something else. What we need to do is to unstyle the siblings when one is being hovered/focused.

li:has(~ li a:hover) a,
li:has(~ li a:focus) a {
  background-color: unset;
}

This is saying that if an li has a sibling with an a that is being hovered/focused, then style this a.

Downside

There is a downside to this. If you hover over an element, come off it so you’re not hovering on anything, then hover on another element shortly after, then the background jumps to the first one in between, which looks a bit odd.

Final code

Here is the whole code:

The scripting media query

Nic — Sun, 31 Aug 2025 17:02:41 +0000

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 are useful.

@media (scripting: none) {
    // Javascript is disabled
}

@media (scripting: initial-only) {
    // Javascript is only enabled on page load
}

@media (scripting: enabled) {
    // Javascript is enabled
}

(I know CSS doesn’t use // for comments, but actual comments are grey, which I find a very hard colour to read on a black background).

Interestingly, Tailwind (which was what the project was using) only has the disabled version (with noscript:classHere), which was unhelpful for me. In my case I had a sticky header which shrinks down on scroll. The shrinking can only be done with JavaScript and without shrinking the header is massive. So if JavaScript is disabled we don’t want a sticky header. Which is easier to do in CSS than Tailwind:

@media (scripting: enabled) {
    header {
        position: sticky;
        top: 0;
    }
}

In Tailwind I’d have needed to do:

<header class="sticky top-0 noscript:static">
    Content here
</header>

Using ChatGPT

Nic — Fri, 23 May 2025 18:49:31 +0000

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 a few rounds with it coming up with suggestion that sounded reasonable, but none of them helped. Although I found that telling it exactly what wasn’t working helped me to establish what the problem actually was.

Sadly, though, it then started giving me code where I couldn’t see what it had changed. When I asked, it told me it had added a function. But that function was already there… At that point it become clear that it wasn’t going to be of any more help and I gave up.

Problem 2

This started similarly, with it coming up with reasonable-sounding explanations and suggestions, none of which solved the problem. And then it started giving me links to CodePens it had created. All of which were empty. When I asked it apologised and gave me a new link. Which was also empty. It did also give me all the code that would be in the CodePen, so it didn’t matter too much.

But since we weren’t solving the problem I asked it where it had got its answers from. It initially refused to give me any links until I persisted. And then it gave me StackOverflow links to completely different problems in completely different languages…

When I called it on that it told me what to search for on StackOverflow (and how to search StackOverflow). They were reasonable search strings, even if they didn’t lead to to anything I hadn’t already come across.

Conclusion

If I was merely judging it on those two interactions then I’d say it was completely useless. Plus every time it gives an answer it started by telling me I was right which got grating after a while. But I already knew it did that sort of thing and can’t be turned off. I also hate that it shows you its answer one line at a time, but I’d already asked it about that and it also can’t be turned off.

So it’s annoying, but I’m not totally giving up on it. I have heard from people that it can be good for giving you starter code that you can improve on. And there may be less complex problems that it will be better at finding answers for.

I also only tried ChatGPT - it may be that some of the others are less annoying and/or more useful.

Select keyboard controls

Nic — Fri, 18 Apr 2025 16:03:38 +0000

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: none of them talked about the keyboard controls in a way that matched with how select works for me with the keyboard. Until I considered that I was using Firefox and most people use Chrome. Turns out they don’t work identically. So I went through the main browsers and documented what did what.

Same for all browsers

Most keyboard controls are the same in all browsers.

When select is closed:

Enter: does nothing

Space: opens select

Tab: goes to next tabbable element

Shift + tab: goes to previous tabbable element

Down arrow: opens select

Up arrow: opens select

Any letter key: selects first/next option that starts with that letter

When select is open:

Enter: selects focused option and closes select

Escape: closes select

Down arrow: focuses next option

Up arrow: focuses previous option

Home: focuses option at top of list

End: focuses option at bottom of list

Any letter key: selects first/next option that starts with that letter

Different in different browsers

I tested in Firefox, Chrome, Safari and Opera, all on a Mac. Although a Mac has different keyboard shortcuts to Windows and Linux, navigating a website doesn’t seem to be any different on a Mac.

When select is closed

Escape

Firefox: goes to next tabbable element

The rest: does nothing

Page down

Firefox: selects option one page down

The rest: does nothing

Page up

Firefox: selects option one page up

The rest: does nothing

Home

Firefox: selects option at top of list

The rest: does nothing

End

Firefox: selects option at bottom of list

The rest: does nothing

When select is open

Space

Firefox: does nothing

The rest: selects focused option and closes select

Tab

Firefox: selects focused option and closes select

The rest: selects random option

Shift + tab

Firefox: selects focused option and closes select

The rest: selects random option

Page down

Firefox: focuses option one page down

The rest: focuses option at bottom of list

Page up

Firefox: focuses option one page up

The rest: focuses option at top of list

Accessible toggle

Nic — Wed, 12 Feb 2025 19:33:23 +0000

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 really useful for telling you how custom components should behave and what things you need to make sure to include. And it has examples.

I went with the checkbox example, since the one I had to create had an on and an off state. In my case, the design had labels on either side of the toggle and the on one would show when the toggle was on and the off one when the toggle was off.

HTML

My HTML ended up like this:

<label>
  <span class="sr-only">What this toggle is for</span>
  <span aria-hidden="true" class="off">Off</span>
  <input type="checkbox" role="switch" checked class="checkbox">
  <span class="toggle">
    <span class="toggle-button"></span>
  </span>
  <span aria-hidden="true" class="on">On</span>
</label>

All of the content is inside the label, so the whole thing is clickable. As with any input we need a label. The design doesn’t include one, so we need to include a span with the label and hide it from sighted users.

The checkbox is doing the actual work and the .toggle and .toggle-button make up the actual toggle. In the design I had the checkbox should be on by default, hence why the HTML includes the checked attribute.

Then there’s the on/off texts, which are hidden from screen readers. This is because the screen reader will announce whether the checkbox is on or off. The toggle is really only an interesting way to show a checkbox to sighted users.

CSS

For the layout, I used a grid to put the elements all next to each other and add some code to change the opacity of the on/off texts based on the checkbox’s state.

label {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: .5rem;
}

.off {
  opacity: 1;
  transition: opacity 250ms ease;
}

.on {
  opacity: 0;
  transition: opacity 250ms ease;
}

.checkbox:checked ~ .on {
  opacity: 1;
}

.off:has( ~ .checkbox:checked) {
  opacity: 0;
}

:has is useful here as a previous sibling selector. Although if it didn’t exist, we could just put the off text after the checkbox in the HTML and re-order the elements. Usually that would be a terrible idea, but in this case, they’re only there for sighted users and aren’t selectable, so it’s not going to make much difference.

And then there’s the toggle itself. I remembered last year hearing a talk from Sara Soueidan about hiding the default checkbox when you’re styling your own. Handily she also has a blog post about it at https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/.

The important part of this post is that on Android you can explore a page by touch and feel interactive elements. Which means we can’t hide the checkbox by making it tiny or moving it off the page.

What we are doing instead is making the checkbox and toggle the same size and putting the toggle on top of the checkbox (and also adding some styling to make it look pretty).

:root {
  --toggle-width: 52px;
  --toggle-height: 30px;
  --toggle-button-width: 26px;
}

.checkbox {
  position: absolute;
  width: var(--toggle-width);
  height: var(--toggle-height);
  opacity: 0;
  grid-column-start: 2;
}

.toggle {
  display: block;
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  border-radius: 30px;
  padding: 0.125rem;
  background-color: lightgrey;
  cursor: pointer;  
}

.toggle-button {
  display: block;
  position: relative;
  top: 2px;
  left: 2px;
  width: var(--toggle-button-width);
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
  transition: left 250ms ease;
}

.checkbox:focus-visible + .toggle {
  outline: 2px solid black;
  outline-offset: 2px;
}

Using custom properties makes sure that the checkbox and toggle are the same size. And because this is in a grid we can make sure that the absolutely positioned checkbox is in the same grid column as the checkbox.

Although the checkbox is turned on by default, the CSS defaults to the checkbox being turned off. All we have left is to move the toggle button over the right and change the toggle’s colour when the checkbox is checked:

.checkbox:checked + .toggle {
  background-color: red;
}

.checkbox:checked + .toggle > .toggle-button {
  left: calc(var(--toggle-button-width) - 2px);
}

Final result

And it ends up looking like a standard toggle:

Review of 2024

Nic — Tue, 31 Dec 2024 16:59:19 +0000

2024 had a lot going on. Just not so much in anything I blogged about or side projects I created.

I spent January looking for jobs. There was a surge in the number posted in comparison to December, and I had to do take-home tests, which took up time.

In March I started a new job and in June I got made redundant from it. Its a familiar tale, but its reading other peoples stories about getting made redundant that make me realise just how lucky I got to be starting a new job a month later.

It was one of the few jobs I heard back from, and the only one who offered me an interview. Fortunately they offered me the job and it was one that I wanted.

What its meant that any public activity has felt like its all about getting a job and not about me getting to have fun. Which is annoying because there's a side project Id really like to do that would actually be useful to me. Im hoping to do it in 2025!

In a years time Id also like to still be employed with the same company, but I don't have 100% control over that (and if someone offered me a 6 figure salary to play with bunnies/kittens/read books all day I wouldn't say no).

Button type button

Nic — Sun, 24 Nov 2024 08:57:02 +0000

Ive seen <button type=button> before but thought that you never need it. Turns out you do

If you have a button on the page then by default its type is button.

But if that button is inside a form then by default its type is submit.

It makes sense. A button outside of a form with a type of submit wouldn't make sense: what would it submit? Same with reset. So it makes sense that the only thing the button can do is to be a button. But if you have a form the most likely thing that button will do is to submit the form (the second most likely is to reset the form).

So if your form contains a button that doesn't submit or reset the form (as I had recently), it needs to be of type button.

CSS is important (or should that be !important?)

Nic — Sun, 10 Nov 2024 17:52:27 +0000

It can be depressing sometimes on the internet reading full stack and backend developers thinking that CSS is easy. Anyone can just bung something in and it'll be fine. As a front end developer it makes me wonder what the point of me is.

The thing is, CSS isn't easy. You cant just bung something in and hope for the best. Ive seen that this year in CMS plugins that you pay for that have terrible CSS.

There are a lot of floats going on, which feels outdated. Who uses floats for layouts these days? There also doesn't feel like a lot of testing going on. It might look ok, but then fail when you resize the browser. They've written it assuming that the size of the browser on load is the size it will always be. But on a mobile or tablet you might turn it round. On a computer you might maximise your browser window - or make it smaller.

That's the thing with working on the front end: users could do anything. Its our job to anticipate that and test for it. Front end developers are useful after all!

A formative experience

Nic — Mon, 23 Sep 2024 17:31:24 +0000

I was talking to a friend recently about going to university and discovering the internet properly for the first time. We both used it do something we now do a lot.

The Windows computers had the first four versions of Netscape Navigator on them (the big browser at the time). I used them to see what websites worked in each of them. From what I remember, most things worked in the last three and hardly anything worked in the first one. Frames certainly didn't and that was the big trend of the time.

At the time I had no idea it was the sort of thing you could get a job in. And now I get paid to do that sort of thing.