When we redesigned Piccalilli last year, our ultimate focus was on the web experience — specifically articles and links. The Index of course got some love, but we put a pin in giving it a full re-work until we had the capacity to give it our full focus. Y'know, iteration.We've recently had that availability of full focus and given The Index that much needed design refresh from root to branch — and from web, to RSS, to [shudders] email template.Some historyDid you know, Piccalilli started its life as a newsletter?I'm a big fan of curating links, so I set Piccalilli up originally as a newsletter, then evolved it into a blog and newsletter.Unfortunately, I had to stop curating the old newsletter because I just didn't have the time for it anymore. The Index gives a massive nod to that old newsletter though, which I'm really happy with.What were the problems we solved?The biggest problem was so many people didn't realise we had a newsletter and if they did, they had little to no idea what t

Something I really struggle with, is the computer science aspect of our work as front-end developers. I'm a designer who learned HTML and CSS out of spite because I was fed up of my pixel perfect Photoshop files not being represented correctly. How that attitude has changed over the years though… It gives you an idea of where my brain is based a lot of the time though.Because of this struggle to understand the more technical concepts, the newer CSS colour stuff has been like wading though treacle for my poor brain. I just couldn't get it. That is, until Ahmad stepped up with this fantastic, highly interactive guide recently. The interactions and the human-oriented prose has finally made it click into place in my brain.Ahmad is so good at explaining hard to understand concepts and I'm really thankful they took on relative colours. I strongly recommend you check the guide out.Check it out!

In my first developer job, I worked on the software I had used in a different role at the same company. On my first day, I explained the business need for an extra thousand lines of code to the developer who wrote them.Learning to maintain and fix a legacy codebase taught me how important it is to instead, practice reading other developer's code. Knowing the real-world context for the codebase also showed me that career switchers can still benefit from their former career experience. Both of those things showed me how to tell what kind of codebases a developer has worked on just by reading their code.Developers without much experience fixing and maintaining existing codebases often make short-sighted choices. In this article, I'm going to give you tips to hopefully make your code easier to extend and maintain by questioning every opinion you build into it.OpinionsWe call code "opinionated" if you have to use it a certain way, like in a game when you are forced to take a certain path. T

I won't give away many spoilers here, just in case you want to play this earnestly, but aria-hidden="true" being focusable while also not being available in the accessibility tree should be a warning in itself to be careful with <button> elements. Using aria-hidden="true" on a <button> creates a trap for keyboard-using screen reader users.Buttons are so frequently abused on the web. My mind immediately goes to applying a disabled attribute with no added contextual information as to why it's disabled. At least articles like this can help you understand the plethora of foot guns that can be caused both by attribute misuse and CSS misuse.Check it out!

It’s fairly accepted that keeping navigation visible is best practice for menu design, right? At least when it comes to designing for desktop viewports. Nielsen Norman Group goes as far as saying that off-screen menus are “not appropriate for desktop websites and apps”.Like a lot of black and white thinking, I’m not so sure the truth is so cut and dry, so I’m going to make a case for the off-screen menu being a better experience in the right context.Moving beyond task-oriented thinkingA lot of User Experience (UX) research looks at interface design through a task-oriented lens. Testers may be asked to “find the newsletter subscribe form and sign up” or “look for information relating to this company’s returns policy”. UX insights like these work really well in a task-oriented context. When your users are in task mode it’s easy to see why it makes sense to keep navigation front and centre — the easier you can make it to find your way around, the faster and smoother the path to task compl