The Frontenders Kaleidoscope ~ Ed.8 ~ 2018

4 min readMay 7, 2018

Reader View

Cool Chrome DevTools tips and tricks you wish you knew already

Flavio Copes put together a great list of things you can do in Chrome devtools. Some of these can definitely improve productivity, and even if you think you know everything. Give this one a read, I bet you there is at least one thing you did not know ;)

Tips for Creating Accessible SVG

On MDN Web Docs we are in the process of changing to a SVG icon system, and away from using icon fonts. There are a ton of benefits but, one also need to be careful not to impact accessibility. This is a great post on making your SVG elements more accessible.

As I implement these and other accessibility improvements, I am definitely going to further explore the new accessibility inspector in Firefox devtools.

A DIY Web Accessibility Blueprint

As I mentioned above, tooling for determining the accessibility of your online presence are getting better, and more ubiquitous. The next step is to move beyond simple awareness, and implement a policy and actionable items.

In this detailed post(with links to tons of resources) Beth Raduenzel lays out a thorough plan for making accessibility part of your entire work flow process. From the post:

My intention is that you may use this article as a blueprint to guide you as you undertake a DIY accessibility remediation project. Before you begin, you’ll need to increase your accessibility know-how, familiarize yourself with the principles of universal design, and learn about the benefits of an accessible website. Then you may begin to evangelize the benefits of web accessibility to those you work with.

I also wish to highlight the following quote from the post:

In December of 2017, Winn-Dixie appealed the case with blind patron Juan Carlo Gil. Their argument is that a website does not constitute a place of accommodation, and therefore, their case should have been dismissed. This case, and others, illustrate that the legality of web accessibility is still very much in flux. However, as web developers and designers, our motivation to build accessible websites should have nothing to do with the law and everything to do with the user experience.

Notable Releases

At The Library

Day.js

Day.js is a minimalist, small(2kb) JavaScript library for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

Toolchest

tota11y

A tool built by the folks from Khan Academy that assists in visualising how your website performance against a set of accessibility rules. From the site:

tota11y helps visualize how your site performs with assistive technologies. Check out the announcement blog post.
The process of testing for accessibility (a11y) is often tedious and confusing. In many cases, developers must have some prior accessibility knowledge in order to make sense of the results.
Instead, tota11y aims to reduce this barrier of entry by helping visualize accessibility violations (and successes), while educating on best practices.

Introducing Node Clinic — A Performance Toolkit For Node.js Developers

From the release post:

One of the problems Node.js developers have to deal with is figuring out why their app is “slow”. There aren’t many tools available to help dig into performance issues so we decided to create some. We’re really happy to announce the open source Node Clinic toolkit and Clinic Doctor tool.

Listen Up

The Changelog ~ JavaScript sprinkles in Basecamp turned Stimulus

From the show notes:

DHH joined the show to share the story of how JavaScript sprinkles in Basecamp evolved into a full-fledged framework called Stimulus. We talked about ins and outs of Basecamp as it is today, Ruby, JavaScript and David’s somewhat new found love for that language. How they open source because they can. And David’s new YouTube series called “On Writing Software Well”.

CodeNewbie ~ How does the internet work? with Julia Evans

A great introduction or, re-introduction to how all those bits find their way into and onto your device of choice. From the show notes:

You type in a url and you get a website. But how did you get that website? What are all the little steps that happen when you request a page and (hopefully) see that page in your browser? Julia Evans breaks down how the internet works and gives us an amazing introduction to computer networking.

In The News

Node.js 10.0 and npm 6 Released with Emphasis on Security

That is it for this edition. Until next time. Stay curious o/\o