|
|
|
▶ In and Out of Style — A ~50 minute talk on the fast-paced changes and innovation in CSS, and how the language has managed to stay largely accessible as it has scaled. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? This video explores just that. (There’s a playlist of videos from CSS Day 2022 - all of which are worth checking out.) Jeremy Keith |
|
Powerful Image Optimization Tools — Optimizing the size of images can have a bigger impact on performance than all other areas combined. This article looks at various different tools available for reducing the size of images — both browser based and CLI. Louis Lazaris |
Free eBook: Enterprise Angular Everyday — Peter B. Smith draws from his extensive experience in working with clients to give you advice you can use from day one to ensure that you are as successful as you can be in building an efficient Angular team and development strategy. Kendo UI for Angular sponsor |
|
💡 Minimal Social Markup — Most sites will require some metadata for displaying things nicely across social and messaging apps. Here’s a snippet with the absolute minimum you'll need. Jens Oliver Meiert useful |
|
Bootstrap 5.2.0 Released — This version of the popular framework is now stable. What to expect? Bug fixes, tons of new CSS variables, updated buttons and inputs, improved documentation, and more. Mark Otto |
|
The Many Faces of Themeable Design Systems — Design system authority Brad Frost explores how a design architecture can work across multiple brands, various campaigns, redesigns, dark mode, and more. Brad Frost |
|
📙 Tutorials, Articles & Opinion |
|
|
Using Grids in Interface Designs — Grids help create cohesive layouts, allowing end users to easily scan and use interfaces. Here’s a look at some common grid structures, how they are used (along with some real-world examples), and how to chose which is best for your project. Kelley Gordon |
|
▶ Five Useful CSS Properties That Get No Love — Kevin is perhaps our favorite CSS YouTuber right now. Lots of great stuff on his channel. Kevin Powell |
|
How To Build React Components for Any Front End — The initial setup is straightforward. You place two script tags in the body (the order of the tags is important). Courier.com sponsor |
|
▶ Be The Browser’s Mentor, Not Its Micromanager — A ~45 minute look at how we can hint the browser, rather than micromanage it by leaning into progressive enhancement, CSS layout, fluid type & space and modern CSS capabilities to build resilient frontends. Andy Bell |
|
A Guide to Frontend Migrations — Some strategies and best practices to consider when facing the complexity that often comes with the adoption of new tools and frameworks. Rem |
|
A 'Previous Sibling' Selector — Neat technique using the Jim Nielsen |
|
It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via |
|
Understanding the Performance Impact of Anti-Flicker Snippets
|
|
🔧 Code, Tools & Resources |
|
|
Humbleicons: 220+ Simple, Neutral, Carefully Crafted SVG Icons — Searchable via keyword on the website and available in SVG or Figma. Jiří Zralý |
|
Vite 3.0 Released — Vite is a frontend development and build tool of the same provenance as Vue.js and is almost unanimously held in high regard. It's certainly worth experimenting with to see if it fits your workflow. Evan You and Contributors |
|
Unlock Completely Free Access to Stream's Chat and Activity Feed APIs Stream sponsor |
|
css-browser-support: A JavaScript API to Query CSS Browser Support Data From caniuse.com and MDN — Pass in a string or array of strings for the feature(s) you want to query and it returns an object with all supported browsers. Stephanie Eckles |
|
Add to Calendar Button: A JavaScript Snippet to Let Users 'Add to Calendar' — The button is pre-styled and it drops down to show options for various calendars – Apple, GCal, iCal, Microsoft 365, Outlook, and Yahoo. Jens Kuerschner |
|
Rety: Live Coding Without the Stress — We recently mentioned Lea Verou’s ▶️ awesome CSS variables talk – a talk that had some ‘live coding’ sections, but which were orchestrated in advance using Rety, which Lea has now released to us all. Lea Verou |
|
Code Language Converter: An Online Tool to Convert Code to Other Languages using AI — Not a free tool but a pretty cool one to try out. You get 100 “credits” free which is only worth about two small code snippets. Code Language Converter: |
|