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

A revisit of the Every Layout sidebar with :has() and selector performance
Piccalilli - Everything
Every Layout’s Sidebar exemplifies a quantum CSS layout, perhaps better than any other layout we offer.It is neither a two column layout, comprising elements with fixed and fluid widths, nor a single column layout comprising two vertically stacked elements. It’s both, and neither. It adapts, automatically, to context — with no @media or @container queries required.The Sidebar is versatile too. It can set out the vertical navigation and main content of your page, and it can form intrinsically responsive media blocks, wherein the sidebar is an image.But, even as I’m writing about it now, the name Sidebar bugs me. The layout, as specified, is not actually a sidebar. A sidebar is just a (relatively) narrow element. The Sidebar is a layout that includes a sidebar. Necessarily, there are three elements in total: a container, a designated sidebar element, and an accompanying element to take up the remaining space.Consequently, the code uses the term with-sidebar to define the container. Gramm
3日前

Some interesting results from the 2025 Piccalilli survey
Piccalilli - Everything
We recently put out a short survey to get a temperature check on some future ideas and the stuff we're already doing. We got a modest response — 180 respondents — and learned quite a lot from those.Thanks so much to everyone who responded!Let's break down some key questions:“If we explored short, focused, cheaper courses, would you be interested?”A very surprising 76% of respondents backed this idea. It's surprising because we don't tend to see many short courses around, aside from on platforms that charge a monthly fee.We're not interested in charging a monthly fee, but what we are interested in is publishing more courses. A full course takes an unbelievable amount of time and effort to produce and it's a hell of a risk for both author and publisher.Our thinking is by doing shorter courses, we can better expand the diversity of course authors on the platform and vastly increase the volume of our offering. Our pricing is very competitive already, but £249 is a lot of money. By offering
11日前

Lightning CSS
Piccalilli - Everything
It's not often I'm in the market for CSS processing tools. I was very into Sass but stopped using it when CSS became more capable and PostCSS became more useful to me.PostCSS is very useful for me and the wider team. Here's what our postcss.config.mjs file looks like for this website:import postcssGlobalData from '@csstools/postcss-global-data';import postcssImportExtGlob from 'postcss-import-ext-glob';import postcssCustomMedia from 'postcss-custom-media';import cssnano from 'cssnano';const isProduction = process.env.NODE_ENV === 'production';export default { plugins: [ postcssGlobalData({ files: [ './src/global/variables.css' ] }), postcssImportExtGlob(), postcssCustomMedia(), isProduction && cssnano() ]};This setup allows a couple of useful features for us such as defining non-standard custom property-like variables for media queries, for when we actually need them.The main thing PostCSS does for us though is importing globs, such as this:@import-glob 'compositions/*.css';@import-glo
13日前

CSS Color Functions
Piccalilli - Everything
I'll be honest, I find the newer CSS colour stuff really hard to understand.That's fine: we shouldn't fret too much about having weaker aspects of our skillset and knowledge. It's better to embrace what you're really good at and keep a reasonable level of the other stuff in your brain, in my opinion.I find the colour spaces the hardest to understand because I'm not a very technical person! I do appreciate what they bring though: better colours and a better way to interface with colour in general. That's only a good thing.What I really needed was a CSS-Tricks Guide™ as a quick reference when I need it — just like their legendary flexbox one — and would you know it? They've only gone and made one!I appreciate how detailed the guide is on colour spaces, colour functions, the relative colour syntax and loads of links out to good content on the site about colours.Nice work, gang 👏Check it out!
20日前

We’d love to know your thoughts with the Piccalilli 2025 survey
Piccalilli - Everything
We always want to do better here at Piccalilli and we have ideas. It'll be really helpful if you could give us your opinion on those and also our bread and butter: educational content for the real world.Our focus here is always the reader above everything else. We want to make sure we're maintaining that and delivering everything we possibly can for you.We've created a survey and we'd love you to spend a moment filling it out for us. I know surveys are a bit annoying, but I can assure you, your opinions will definitely make an impact. We're a small team at the end of the day!FYIIt should take between 2 and 10 minutes, based on how much detail you want to give us.Get started (opens in a new tab)I'll close out by saying a huge thank you to everyone who reads Piccalilli. We brought this place back to life last year and it's evolved so much since then. We want to push that even further, fuelled by your consistent support.You're the best 💛
1ヶ月前