Piccalilli - Everything

https://piccalil.li/

We are Piccalilli. A publication dedicated to providing high quality educational content to level up your front-end skills.

フィード

記事のアイキャッチ画像
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_
6日前
記事のアイキャッチ画像
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
9日前
記事のアイキャッチ画像
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!
15日前
記事のアイキャッチ画像
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
23日前
記事のアイキャッチ画像
The Importance of Investing in Soft Skills in the Age of AI
Piccalilli - Everything
It’s very rare I write for other publications than this one, but I wanted to give CSS-Tricks (especially Geoff) a nod because they’re working their way back to what they did best. This article sort of fits Piccalilli, but I think it fits CSS-Tricks better. I certainly wanted it to have mass-reach too because I’m obsessed with soft skills and how they make us better at — well — everything.In short, skill up on soft skills, which I call core skills.Check it out!
1ヶ月前