Three great examples of HTML web components:
What I hope is that you now have the same sort of epiphany that I had when reading Jeremy Keith’s post: HTML Web Components are an HTML-first feature.
This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!
A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.
This is a fascinating way to present a code tutorial! It reminds of Tim’s Tutorial Markdown that I linked to a while back (which in turn reminds me of Bret Victor’s work).
- Obey the Law of Locality
- ABD: Anything But Dropdowns
- Pass the Squint Test
- Teach by example
A starter list of Fractal examples and links. You can expand it.
Part one of a deep dive by Nathan into structuring design system documentation, published on Ev’s blog.
Collections of design principles that you can contribute to.
The aim of the site is to help us analyse what good Design Principles are. How Design Principles are created and measured. How they develop.
This is a really great screencast on getting started with React. I think it works well for a few reasons:
There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.
If you ever need to pull up some case studies to demonstrate the business benefits of performance, Tammy and Tim have you covered.
A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.
Lyza put together some example code for her Smashing Conference talk on service workers. If you haven’t written a service worker before, these are really nice examples of how to grok it bit by bit.
If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.
This is a very handy resource—a collection of minimum viable implementations of HTML5 features and JavaScript APIs.
Marcy’s Tumblr blog of examples of accessibility in action on the web.
More flexbox!
This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.
We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.
A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/
Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.
A nice way to play around with Google's APIs. Example code is provided which you can edit and immediately see the results.