SVG can do THAT?! by sdrasner
119 slides from Sarah on a wide range of SVG magic (with code).
Tags: frontend
720
Shadow DOM: fast and encapsulated styles – Monica Dinculescu
Monica explains how Shadow DOM could be the perfect answer for scoping CSS:
We didn’t have style encapsulation, so we started naming things “the right way” with BEM, so that we didn’t accidentally stomp over each other’s styles. We wanted to be able to author CSS from inside a JavaScript component, so we started using CSS-in-JS. We needed all these tools, because “the platform” (read: the browsers that be) wasn’t there, and building these tools showed that there was a need to move forward. For style encapsulation, Shadow DOM is the platform moving forward.
Although, in a way, Shadow DOM is also another flavour of CSS-in-JS:
Before you complain that using a Shadow DOM and Web Components means that it absolutely requires JavaScript: this is true.
I made a style guide for my personal web site and you should too.—zachleat.com
Here’s Zach’s style guide. But the real reason I’m linking to this is his lovely description of having a personal website that grows over time:
As my own little corner of the web unceremoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.
Patterns Day 2017: Paul Lloyd on Vimeo
Paul pulls no punches in this rousing talk from Patterns Day.
The transcript is on his site.
Progressive Progressive Web Apps - Tales of a Developer Advocate by Paul Kinlan
Paul goes into detail describing how he built a progressive web app that’s actually progressive (in the sense of “enhancement”). Most of the stuff about sharing code between server and client goes over my head, but I understood enough to get these points:
- the “app shell” model is not the only—or even the best—way of building a progressive web app, and
- always, always, always render from the server first.
CSS: Current, Soon, Someday (Web Directions Code 2017) // Speaker Deck
Oh, how I wish I could’ve been at Web Directions Code in Melbourne to see this amazing presentation by Charlotte. I can’t quite get over how many amazing knowledge bombs she managed to drop in just 20 minutes!
Jeremy Keith: Keynote - Evaluating technology - YouTube
Here’s the video of the closing keynote I gave at the Frontend United conference in Athens.
There’s fifteen minutes of Q&A at the end where I waffle on in response to some thought-provoking ideas from the audience.
Presenting the new d3.loom chart form plugin - Visual Cinnamon
Nadieh has packaged up the code for her lovely loom diagrams as a plug-in for d3.
The Critical Request | CSS-Tricks
Ben takes us on a journey inside the mind of a browser (Chrome in this case). It’s all about priorities when it comes to the critical path.
Patterns Day 2017: Alice Bartlett on Vimeo
At Patterns Day, Alice shared what she has learned from shepherding the Origami project within the Financial Times.
Shoelace.css: a back to the basics CSS starter kit
A starter kit of CSS that gives you some basic styles that you can tweak with custom properties.
For when you don’t need the whole boot.
Also:
Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.
I approve this message!
advanced-js-resources.md
Following on from that intro-level book on JavaScript, here’s a handy list of resources for learning more advanced JavaScript.
bpesquet/thejsway: The JavaScript Way book
This looks like a good introductory book to JavaScript, DOM scripting, and Ajax.
You can read it for free here or buy a DRM-free ebook.
Tooltips & Toggletips
Another great deep dive by Heydon into a single interface pattern. This time it’s the tooltip, and its cousin, the toggletip.
There’s some great accessibility advice in here.
rachelandrew/gridbugs: A curated list of Grid interop issues
Rachel is maintaining this (short) list of browser bugs with CSS Grid, inspired by the excellent Flexbugs.
Grid shipped into browsers](https://gridbyexample.com/browsers) in a highly interoperable state, however there are a few issues - let’s document any we find here.
Testing the accessibility of pattern libraries
Riffing on Rachel’s talk at Patterns Day:
At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.
Hidde specifically singles out these patterns:
- Collapsible (“Show/hide”)
- Form field
- Video player
Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid – Smashing Magazine
A great example of progressive enhancement in action.
You can perfectly use CSS grid layout today if you don’t expect exactly the same appearance in every single browser, which isn’t possible to achieve nowadays anyway. I’m well aware that this decision isn’t always up to us developers, but I believe that our clients are willing to accept those differences if they understand the benefits (future-proof design, better accessibility and better performance). On top of that, I believe that our clients and users have — thanks to responsive design — already learned that websites don’t look the same in every device and browser.
Against the grain | susan jean robertson
I’m looking for work. I’d prefer to work remotely with a product team and to work in the areas I love: accessibility, CSS, and HTML. But it turns out those three things are considered “easy” in the industry right now. Which is fascinating because if you talk to anyone who uses assistive technology to surf the web or who doesn’t use a mouse, or who is accessing content in a different manner, you’ll find out it isn’t so easy.
Somebody hire Susan already!
Patterns Day 2017: Rachel Andrew on Vimeo
Rachel’s fantastic talk from Patterns Day. There’s a lot of love for Fractal specifically, but there are also some great points about keeping a pattern library in sync with a live site, and treating individual components as reduced test-cases.
0825 — ericportis.com
Well, well, well …following on from my post about container queries, it turns out that Eric has also been thinking about wrangling custom properties. He’s even written some code.