The Frontenders Kaleidoscope ~ Ed.12 ~ 2018
Welcome to the 12th edition of the Frontenders Kaleidoscope. I have not gotten a grasp on adding back also those new releases but, those should be back starting in the next issue. There is a lot to keep you busy though, so dig in ;)
Oh, and The Frontenders Kaleidoscope is now also available in podcast format if that is more in your wheelhouse. Looking forward to your feedback.
Reader View
Writing Accessible Web Content
Over on Sparkbox, Caralyn Green wrote a detailed article on what to think about when writing content for the web. The way we display copy, as well as the copy itself is probably one of the most overlooked aspects that contribute to a great, accessible user experience. From the post:
Trying to make sense of that site through sound only, I realized that the way our team had written and structured some of the content, including headings, links, and alt text, was not in fact accessible. So we did a full audit and reworked the content to make sure it was usable by as many people as possible.
Web Push Notification Tutorial
Over at the Microsoft Edge Demos playground they released a great tutorial walking you through all of the pieces that allows push notifications to work on the web. It is definitely well worth it. Although, I would definitely say that you should have the repo handy. From the tutorial:
Inspired by the parallels between basic astrological ideas and push notification architecture, come join us on this journey to better understand how to set up your site — both the front-end and the back-end — to send push messages to a user without needing the browser or app to be opened. You can fork this tutorial itself on GitHub and even set it up locally so that you can play with it.
Creating The Feature Queries Manager DevTools Extension
On Smashing Magazine Ire Aderinokun writes about the invaluable DevTools extension she wrote. The extension is called the Feature Query Manager, and allows you to easily simulate non-support of CSS features. Besides introducing us to the extension, she then walk you through the process of creating a DevTools extension. From the post:
The modern solution to developing for both modern and legacy browsers is feature queries. They allow us to write CSS that is conditional on browser support for a particular feature. Although working with feature queries is almost magical, testing them can be a pain. Unlike media queries, we can’t easily simulate the different states by just resizing the browser. That’s where the Feature Queries Manager comes in, an extension to DevTools to help you easily toggle your feature query conditions.
Extensions in Firefox 61
Talking about extensions. Over on the add-ons blog Mike Conca gives a thorough writeup on what’s new with regards to web extensions in Firefox 61.
Building a responsive image
On the 9 Elements Medium blog, Nils Binder writes a detailed write up on creating a responsive image. Now, this is not about using srcset, but how to do this with SVG, using what boils down to essentially container queries. From the post:
When you use media queries inside SVG files and then insert the image via img-tag or as a CSS background-image, the media queries are bound to the width of the image. Pretty much the same behavior as if you used Container Queries.
How to React
React is pretty much everywhere, and this alone is good reason to at least have an understanding of the framework. There is a lot to React, which means it can quickly become overwhelming when you are first trying to get your head around it all. If you need some guidance, Kent C. Dodds put together a great path you can follow to learn React in a more piecemeal, learn what you really need way.
Designing Web Content for watchOS
If you watched, or read the news from WWDC, you will know that webkit is coming to watchOS. This is a whole new form factor, with it’s own challenges and nuances. Over on Apple’s developer blog there is a really informative video explaining how to design for watchOS 5. From the post:
watchOS 5 brings web content to Apple Watch by rendering rich HTML in Messages and Mail. Gain insights into how watchOS maintains compatibility with existing web content, and find out what you can do to optimize your web content for Apple Watch.
Tool chest
Browser Extensions I Actually Use
Over on the Media Temple blog Chris Coyier posted a neat list of browser extensions he actually uses. I have to many, and seriously need to clean up to the one’s I actually use, but there are some really neat one’s in his list.
Site Palette
A browser extension to generate comprehensive palettes. A must-have tool for designers and frontend developers. Free colour scheme extraction.
Signale
Take logging from Node.js to a new, pretty, useful, hackable to the core level. From the repo:
Hackable and configurable to the core, signale can be used for logging purposes, status reporting, as well as for handling the output rendering process of other node modules and applications.
Cooking with Code
Service Worker Cookbook
Mozilla has a project underway that provides a bunch of ready made recipes to experiment, learn and use Service Workers in your own sites and apps.
In Vision
In Pursuit of Open Source
Henry Zhu’s talk from Zeit is now on the Youtubes. As always, I very inspiring an honest talk about the world of open source. Specifically around the health of the ecosystem and the maintainers.
User-Agent
Chrome 67 Stable
- Desktop progressive web apps comes to Chrome OS
- Generic sensors API
- [Devtools] Search across all network headers and responses
- [Devtools] CSS variable value previews in the Styles pane
- [Devtools] User Timing in the Performance tabs
Listen Up
ShopTalk Show ~ Flexible Type Setting with Tim Brown
I’m a sucker for good typography, and I know I am not alone. In this episode of the ShopTalk Show, the hosts are joined by typography extraordinaire Tim Brown. They talk about all thing type on the web, some tooling as well as Tim’s upcoming book, Flexible Typesetting from A Book Apart.
Spotlight ~ Our reactions to Microsoft buying GitHub
Hear insights and reactions from Adam Stacoviak and Jerod Santo as they break down the news of Microsoft’s acquisition of GitHub — from speculation to confirmation — including commentary from members of the developer community by way of Twitter and Slack.
React Podcast ~ Inside React
A great talk with host Michael Jackson and React core contributor, and React engineering manager Sophie Alpert about the past, present and future of React. From the show notes:
Sophie Alpert is a core contributor to React and is currently the engineering manager for the React team at Facebook. She has been contributing to React for over 3 years now, making her first contributions while she was working as an engineer at Khan Academy.
That is a whole bunch of bits to keep you busy until next time. Stay curious.
