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

Decorative text within HTML
Piccalilli - Everything
This is a really interesting article!One of the most controversial things I've ever done in this industry is introduce groupings in class attributes.<div class="[ my-element ] [ cluster ] [ bg-primary color-secondary ]"> …</div>It's a real love it or hate it thing, but historically in my CSS consulting days, it was extremely useful — especially in large teams which were light on CSS specialists.That's the trick you see: it's all about making sure your system doesn't end up becoming append-only. Grouping classes in attributes really helps with that because not only are related classes grouped — therefore being easier to scan — but they follow a specific order too:Blocks (or main element class for non-CUBE CSS contexts)Compositions (or layouts for non-CUBE CSS contexts)UtilitiesI like how Terence has explored this further by adding further documentation in class attributes:<article class=" 'Cards_updated_with_2025_setting' card //section_box_to_be_deprecated_next_year section box #Colour
14時間前

You can style alt text like any other text
Piccalilli - Everything
I like that CSS gives us plenty of opportunities to add finer details when we want them. One of those finer details is making the experience of an image not loading a little better.See the Pen Styled alt text - base by Andy Bell (@piccalilli) on CodePen.The alt text is surfaced on the page when an image fails to load. It's yet another reason to write good alt text and really hone your skills in creating a user-focused experience by being descriptive.The demo doesn’t look great though, does it? I suppose the fact we're rolling default user agent styles isn't helping, so let's introduce the styles from Some simple ways to make content look good.See the Pen Styled alt text - core styles by Andy Bell (@piccalilli) on CodePen.Ok, looking better. Let's directly target our alt text though — well, our <img> elements. By styling the <img> element, our alt text will have those styles applied because it is an attribute of the <img>.img { display: block; max-width: 100%; font-style: italic; font-
12日前

We need your support to do free projects for good causes and publish free high quality education
Piccalilli - Everything
We're trying a rather radical new approach at Piccalilli. We're going to do real world projects — for real clients — in the open, sharing as much of the process as we possibly can. This gives us a context to provide genuine high quality, real world education for free at the point of entry. This is a complete business model shift — one that is focused on giving back more than we take.You may or may not know that Piccalilli is a part of Set Studio. The studio works primarily with for-profit clients and has a fantastic track record of making those clients more money by delivering high quality design and development.By focusing on the user, progressive enhancement and web standards, we produce websites that work for everyone. That, along with our deep understanding of content strategy, conversion optimisation, user experience and information architecture is what brings companies success as a result of hiring us.The problem is, we’re fed up of doing that — well, we're fed up of utilising ou
21日前

JavaScript, what is this?
Piccalilli - Everything
Now, I'm not saying that “determining the object bound to this” makes for the lightest possible reading, but there is some small comfort to be found here: now that we understand when that determination is made, we’re well equipped to understand the what—and that fortunately, that breaks down to only a handful of distinct use cases, all of which share one big caveat in the form of arrow functions.Global Binding (formerly "default binding")Any code outside of a defined function lives in the global execution context. Within the scope of the global execution context, this references globalThis—a property that itself references a JavaScript environment's global object. In a document in your browser, the global object is the window object:this;// result: Window {...}this === window;// result: trueglobalThis;// result: Window {...}this === globalThis;// result: trueSimple enough, if not especially useful outside the context of a function. Inside the context of a function declaration, you'll s
1ヶ月前

The future of web development is AI. Get on or get left behind.
Piccalilli - Everything
I know Alex, so I knew this wasn't going to be a slop supporting article. I don't want to spoil the article for you either, but the multiple redacted titles do a fantastic job of demonstrating historical hype cycles in the industry.Now what I'm not saying is AI is nailed-on to be yet another hype cycle that fizzles out. There's an inevitability that it will stick around. What I am saying though is you do not have to accept AI. I certainly don't.The point Alex makes well with a cheeky wink is you're not going to be "left behind" by not embracing AI, just like you weren't left behind by not embracing React for example. Sure React is very bedded in to the industry, but it's not required knowledge, quite like how web standards are.My advice is the same for each hype cycle this industry goes through: if you really need a job, you might have to hold your nose and get on the train, as it were. It's something that frustrates me endlessly with the tech industry. You definitely don't have to ful
1ヶ月前