Oh man, this is some serious SVG shizzle!! Jonathan T. Neal has created Write SVG, which is “a PostCSS plugin to write SVGs directly in CSS”… À la:
/* before */
.arrow {
@svg {
polygon {
fill: green;
points: 50,100 0,0 0,100;
}
}
}
/* after */
.arrow {
background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22green%22%20points%3D%2250%2C100%200%2C0%200%2C100%22%2F%3E%3C%2Fsvg%3E)
}
Now that is some seriously cool shit… Nice job, Jonathan!!
And speaking of Jonathan, her also had a great post on his blog about wireless Mac keyboard and trackpad set-ups. The mini keyboard can be frustrating, because it lacks the numeric keypad section (I use the full-size keyboard for exactly that reason). But Jonathan offers a pretty slick alternative that lets you use your trackpad as a keypad!
JS coding styles… Tabs or spaces? Single-quotes or double-quotes? Ending semi-colon or starting semi-colon? None of it matters now, because just fixes it all for you…
Some great UI animation / transition ideas to improve UX. As the article states, subtle user interaction clues can make a really big difference…
Sticking with UX for a second, here are a few UI patterns Making Selected Button States Clear for Color Blind Users (or even just people with limited sight capabilities).
And as long as we’re talking about accessibility…
- Handy bookmarklet to highlight ARIA elements, providing warnings, and suggestions for accessibility on sites.
- When I first played with Angular I was quite impressed that they included ARIA roles and interactions out-of-the-box; I’m not sure if React does the same, but you can now get console warnings about bad accessibility practices.
- It’s easy to want to provide ARIA roles and attributes to everything, everywhere, because, well, we want to be awesome, right? Turns out, too much ARIA is not really a good thing, so don’t overdo it by adding redundant WAI-ARIA.
- Like adding
role="search"to aform, which then breaks the native semantic value of aformelement… - For a little more on this point, here is the W3 spec that talks more deeply on the subject.
[R]esearchers at Kogakuin University in Japan have… developed a thin, translucent lithium-ion battery that recharges itself when exposed to direct sunlight. Instead of plugging into a separate solar panel, the translucent battery functions both as a rechargeable battery and as a photovoltaic cell.
– Translucent battery recharges itself with the sun
Far-reaching implications, though the conundrum: Go into the sunlight to recharge your device’s battery, but now you can’t seen your device’s screen… ;-)
This certainly made the rounds in the past couple weeks, but just in case you somehow missed it, Rachel Andrew gives us the low-down on CSS Grid and The Box Alignment Module.
Update on the status to bring the RICG Responsive Image plugin into the WP Core… Wow, what a huge win this will be for WP site owners, and visitors!
Jeremy Keith‘s progressive enhancement presentation from the 2015 Beyond Tellerrand conference in Düsseldorf. As always, a great one.
Got preconnect? Well, your Firefox and Chrome users do now, so your code should too! Nice to see that you can either explicitly create link elements in your HTML, or dynamically add them via JS!
The makers of the (in)famous AdBlock Plus browser add-on/extension (which only works in desktop browsers) now offer a full-fledged, ad-blocking browser for both iOS to go along with the version they already have for Android.
And finally, great interview with Mr. Performance himself, Steve Souders. His history (not just from his time at Yahoo!, but all the way back to his childhood!), views on he current state of web performance, and opinion on the future of front-end development.
Happy reading,
Atg