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

The Index: Issue #156
Piccalilli - Everything
I've been playing around with a browser extension that hits the personalsit.es /random URL each time you click it. It's a bit like StumbleUpon.2026 is also the year of the personal website, so I thought I'd surface 5 personal sites I like, from my browsing of the collection, to hopefully inspire you, this Friday.Justin WongI like how this one resembles plain text. It's simple, but really readable.Cyd StumpelIf you don't know Cyd, you should know Cyd. This site is nothing short of a masterpiece too. So many lovely details.Jesse YuenAnother simple one with beautifully balanced type and layout with a very nice colour scheme.Susan LinIt would be rude of me to not include a pixel site, so here we are. This one is really nicely done.Jasper LaiI'm obsessed with this one. The serifs are beautiful and I really like how they've integrated webrings, which solidifies these thoughts I had last year.P.S. this is a good demo.Sponsor messageState of the Browser is a community run conference, taking pl
3日前

Accessible faux-nested interactive controls
Piccalilli - Everything
In web accessibility, a thing you absolutely cannot do is nest one interactive control inside another:<!-- ❌ Never do this! --><button type="button"> <a href="/path/to/resource/"> Save as favorite </a></button>There are a few reasons not to do this, but the most important reasons is it can prevent people from using your service just by virtue of the way they use to interact with the web.In spite of this fact, nested interactive controls are a pattern I see with regularity. I chalk this fact up to:A general lack of awareness or education about web accessibility,A tendency to skip accessibility reviews and save fixes for some undetermined future state, and alsoNewer web experiences becoming more “app-like.”By app-like, I mean things like seamless transitions between pages, less overall page content, and larger, touch-friendly interactive areas.And app-like experiences on the web isn’t a bad thing! It’s more that when we borrow the affordances of mobile apps we must also do so in a way th
4日前

The Index: Issue #155
Piccalilli - Everything
How I, a non-developer, read the tutorial you, a developer, wrote for me, a beginnerAlways remember to not presume prior knowledge when writing tutorials. You don't need to explain everything, but at least use links to send people to good explainers.The principles I outline here sum it up for you.5 accessibility checks to run on every componentVery pragmatic, practical and straightforward to implement checks here.Getting off US tech: a guideThe urgency seems to increase on a daily basis. This isn't a hating on the US thing either, it's a sensible way to protect you and your organisation from the US tech industry.ZeroPointIt is the year of the personal website! A corporate-free website starter project — using Eleventy — seems like a solid way to get you started as we see it.Case Study: lynnandtonic.com 2025 refreshSpeaking of personal websites, read this case study to inspire you.I redesigned my website (again)When you're done with that case study, enjoy Salma's writeup of her stunning
5日前

The Index: Issue #154
Piccalilli - Everything
Friction by designFriction, when designed deliberately, serves a different purpose. It introduces a pause. A moment of awareness. A small resistance that asks the user to pay attention to what they’re doing, rather than simply passing through an interface on autopilot.Fix your robots.txt or your site disappears from googleThis is rather worrying!Not all browser APIs are web APIsA fascinating look at how some common APIs really work. The speech synthesis one was a real eye-opener.Death to scroll fade!I like how this article demonstrates how frustrating this stuff is with the painfully slow reveal of each line.Date is out, Temporal is inTemporal is the Date system we always wanted in JavaScript. It's extremely close to being available so our own Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.P.S. this is a good demo.Sponsor messageWe’re boosting one of our favourite newsletters this week: Web Weekly.The Web Weekly newsl
10日前

Date is out, Temporal is in
Piccalilli - Everything
Time makes fools of us all, and JavaScript is no slouch in that department either. Honestly, I’ve never minded the latter much — in fact, if you've taken JavaScript for Everyone or tuned into the newsletter, you already know that I largely enjoy JavaScript's little quirks, believe it or not.I like when you can see the seams; I like how, for as formal and iron-clad as the ES-262 specification might seem, you can still see all the good and bad decisions made by the hundreds of people who've been building the language in mid-flight, if you know where to look. JavaScript has character. Sure, it doesn't necessarily do everything exactly the way one might expect, but y'know, if you ask me, JavaScript has a real charm once you get to know it!There’s one part of the language where that immediately falls apart for me, though.// Numeric months are zero-indexed, but years and days are not:console.log( new Date(2026, 1, 1) );// Result: Date Sun Feb 01 2026 00:00:00 GMT-0500 (Eastern Standard Time)
12日前