Front-end education for the real world. Since 2018.





  1. Real-world uses of TypeScript’s utility types

    Sam Rose walks us through some real-world usage of TypeScript’s utility types in their day job’s open source codebase to help those new to the language get to grips with this key capability.

    TypeScript

  2. We gave The Index a much needed design refresh and introduced advertising, site-wide

    Our newsletter, The Index has had a full design refresh — root to branch. It’s clearer, easier to subscribe to and a much better reading experience. We’ve also introduced simple, non-intrusive ads to keep Piccalilli sustainable long-term.

    Announcements

  3. Tips on extensible and maintainable components

    Abbey Perini talks about how yes, there is a code angle to maintainable and extensible components, but it's also useful to appreciate the wider context, historical problems and the long term impact of opinions in your code.

    Advice

  4. In praise of off-screen menus

    Jason Bradberry challenges the ideals of displaying your entire navigation as a cluster of links and presents a case for exploring off-screen menus where the context is right for it.

    Design

  5. Using the step and pattern attributes to make number inputs more useful

    Number input elements can be rather problematic but if you utilise the step and pattern attributes, they suddenly become a lot more useful.

    HTML

  6. What I learned from migrating a Vue project from Vuex to Pinia

    Big refactors and migrations for key infrastructure like global state are not to be taken lightly. Michelle Barker is here to show us how she did exactly that — migrating from Vuex to Pinia for global state in a huge, single page app — using a pragmatic, considered approach.

    JavaScript

  7. CSS nesting: use with caution

    Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native CSS brings with it.

    CSS

  8. Technologies and frameworks we use in our design studio

    I get asked a lot about what technologies and frameworks we use at the studio, so I thought I’d note them down.

    Opinion

  9. A simple masonry-like composable layout

    It’s going to be a long time until CSS masonry is ready for us to use in our projects so I’ve got a nice stop-gap here for you that uses composable layouts.

    CSS

  10. Why I’m excited about text-box-trim as a designer

    Jason Bradberry shows us what’s possible in the real world with the new CSS text-box-trim capabilities from a designer’s perspective, and gives us a deep dive into the text spacing and alignment problems it solves.

    Design