Piccalilli - Everything
https://piccalil.li/
We are Piccalilli. A publication dedicated to providing high quality educational content to level up your front-end skills.
フィード

What I learned from migrating a Vue project from Vuex to Pinia
Piccalilli - Everything
Recently I had the experience of migrating a Vue web app to a new state management library, Pinia, which was interesting from both a technical and non-technical point of view. In this article I’ll share my thoughts and findings on when, why and how you might consider carrying out such a major technical migration, applicable to any large web project, and some tips and advice on migrating from Vuex to Pinia specifically.For the purpose of this article I’ll assume you understand something of reactive web applications and state management. It won’t be a step-by-step “how to” tutorial — the official Pinia docs are the best source for that. But some of the things I’ll document here might help you if you’re considering a similar migration.About the projectI work on a large, B2B web application for wind farm operators to visualise energy production, monitor the health of their fleet of turbines, and plan maintenance. The app is a client-side SPA (single-page application) built with Vue, using
2日前

CSS nesting: use with caution
Piccalilli - Everything
I’ve been doing this CSS thing for over 15 years and I’ve seen a lot of change in that time. A lot of the time, I see a new CSS feature and immediately get excited about how helpful it’s going to be for me and the team in the long term. A good example of that is text-box-trim.There are features that fill me with dread though and right at the top of that list is native CSS nesting. I know that opinion will be rather unpopular, but the whole deal of the site is front-end education for the real world, so I’m here to provide that for you today.It stems from pre-processorsI was a big Sass fan — especially when my primary role was writing lots of complex, difficult CSS. One of the reasons I really loved Sass was the ability to nest my CSS because it paired beautifully with BEM like so:.my-block { padding: 2rem; &__element { background: red; &--modifier { background: blue; } }}Sass converts that into the following CSS:.my-block { padding: 2rem;}.my-block__element { background: red;}.my-block_
9日前

The Index
Piccalilli - Everything
Did you know we send out a newsletter twice a week?I know, I know, there’s a lot of newsletters out there, but let me tell you what The Index does:It goes out on a Wednesday and FridayThe focus is around 5 links per issue and that’s itWe try to get a nice blend of front-end, design and interesting stuff from around the web like nice websites, interesting tech articles and cultureThe aim is that you can get through an issue in a couple of minutes, topsI’ve heard recently from a few people that they had no idea The Index even existed so we’re gonna work on that. What would help in the meantime is if you are a subscriber, to forward it on to a friend or share it on Bluesky, LinkedIn or whatever other social stuff you like to post on.We’re also experimenting with a very simple sponsored link at the end of each issue to help sustain Piccalilli. Our subscriber-base isn’t huge (about 1,500) but we’re growing and have a decent open rate (about 60%), so if your org is looking for places to adve
12日前

My website has been gaslighting you
Piccalilli - Everything
This is really cool. It’s also a really important demonstration of your website is your home so you can do whatever the heck you want with it, and you should.Dave has opted to roll out a subtle daily colour change based on a hue rotation and what day of the year we’re on. Sure, it’s not perfect, as Dave rightly mentions, but it’s theirs. With all of the changes to Big Social™ recently, your content is even less safe in these walled-gardens than it already was.One thing Big Social™ can’t touch is your website. Heck, you might even get to learn some cool stuff, just like Dave did, in the process. I also need to heed this advise myself, so this little post is a message to myself too.Check it out!
18日前

Technologies and frameworks we use in our design studio
Piccalilli - Everything
Before we get started, I can’t stress the following enough: the choices we make at Set Studio don’t challenge your choices. You might also not agree with our choices and that’s fine, but we don’t need alternatives evangelising to us. To paraphrase Rachel Andrew:If it works, it’s rightI do, however, get asked a lot about what technologies and frameworks we use at the studio, so I thought I’d note them down. This information is accurate as of January 2025.HTML, CSS and JavaScriptSounds obvious, but even though we’re a design studio, our output — more often than not — is web-based, so we deliver HTML, CSS and JavaScript that is progressively enhanced, performant, and as user-optimised as possible, limited by the challenges of a project.Regardless of what tools, frameworks and technologies we choose to use — or have to use — we always prioritise the end-user getting semantic HTML, flexible CSS and progressively enhanced JavaScript.JSX-orientated libraries and frameworks“JSX?!” I hear you s
1ヶ月前