Piccalilli - Everything

https://piccalil.li/

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

フィード

記事のアイキャッチ画像
Perfecting Baseline
Piccalilli - Everything
FYII’m the co-chair of the W3C WebDX Community Group, which maintains the data and the definition that powers Baseline. Today, I want to take a step back and talk about what Baseline is starting to mean to web developers, what it is, and what it isn’t.Baseline has become hard to miss these days. There are banners at the top of most MDN reference pages and on caniuse.com. It also shows up in various coding editors and developer tools as tooltips, and people have started to mention it in blogs, social media, or conferences. It's definitely out there!After a couple of years of existence, it's fair to say that awareness of Baseline has grown pretty significantly among web developers. People seem to know about the term and have a (sometimes vague) idea about what it means.Baseline fills a gap but is also imperfectFor most people, Baseline is filling a gap. To them, the term acts as a simple way to say: this feature is supported across browsers. Even if they don't always know which browsers
2時間前
記事のアイキャッチ画像
The Index: Issue #141
Piccalilli - Everything
Reimagine the date pickerPikaday is back baby!Why do browsers throttle JavaScript timers?You might not initially think it, but this is a really fascinating read.Your URL is your stateThe URL is so overpowered and so often under-utilised. This article does a great job of explaining how much power you really have.It makes me think of Cassidy's PocketCal.Leveraging a web component for comparing iOS and macOS iconsYet another great example of web components being incredibly handy.Programming principles for self taught front-end developersThe majority of us are a bunch of self taught people with rather spotty knowledge and that's fine! Kilian (also self taught) is here to share some of the computer science fundamentals you probably are missing with the aim to improve your code in the long term.P.S. this is a good demo.Sponsor messageAll Day Hey! is a curated conference for curious developers, designers, and technology leaders.📍 Everyman Cinema, Leeds, UKCelebrating ten years of All Day Hey...
1日前
記事のアイキャッチ画像
Programming principles for self taught front-end developers
Piccalilli - Everything
Like many front-end developers, I don’t have a formal computer science background. I rolled into this discipline as a designer wanting more control over the end product and though I did get a bachelors of ICT degree, the actual studies were, ahem, quite light in terms of “fundamental computer science”. This means all I know about capital-s Software Development, I learned as I went from various sources. If that’s you too, this article hopefully saves you a few years.After 20+ years, the things that have the most effect on my day-to-day aren’t that I learned how to model my OOP systems using UML or know what a Monad is. Instead, it’s a bunch of (sometimes pithy) statements that fall under the umbrella of “programming principles”.Now, there are many, many programming principles out there. Some are more like “laws” that describe how systems and people behave (like Hofstadter’s law: It always takes longer than you expect, even when you take into account Hofstadter’s law.) and while those ar
2日前
記事のアイキャッチ画像
The Index: Issue #140
Piccalilli - Everything
Transition to the other side with container query unitsSomething we're always looking for is usages of container queries and their units that you might not have thought of. Ryan has exactly that for you here.Trusting the browserA really interesting read about long lasting accessibility damage thanks to previous browser defaults and of course, AI generated code.Fluid responsive typography: easy when you know howFrom James of Utopia fame:You don’t need to be a hot-shot developer to get this working. Anybody who has access to their website’s CSS can do it.Some practical examples of view transitions to elevate your UIAnother one from us on view transitions! This time, it's Declan Chidlow with some fantastic, practical examples.The scope creepLet's wrap up with a visually stunning and really good game on scope creep.P.S. this is a cool.Sponsor messageDid you know, we've made the whole “Principles” module free to everyone?It's eight free lessons, introducing what we think are the most import
6日前
記事のアイキャッチ画像
Some practical examples of view transitions to elevate your UI
Piccalilli - Everything
The aptly named View Transition API is a powerful way to create animated transitions between two states. I use the word 'powerful', because the View Transition API is powerful — more powerful than anyone would expect. You can navigate between pages, or modify the DOM, or meddle with your webpage in a number of other ways, and have an animation between the two states.It is incredibly powerful, and one could write quite the book (or several) explaining all the features and intricacies. There is plenty of surface-level view transition content on the web, but today we'll be getting hands-on with some examples. Thus, for the sake of brevity and in the Piccalilli way, I won't be covering every nuance but instead covering some cases and applicable patterns that you can use to apply view transitions in the real world.FYIAt the time of writing, the View Transition API has only just reached availability in the latest releases of Firefox, Chrome, and Safari, and even then, not all implementations
7日前