The Frontenders Kaleidoscope ~ Ed.9 ~ 2018

5 min readMay 11, 2018

With all the happenings and talks this week at Google IO your weekend is probably already sorted. Just in case you need a little extra reading, and some neat updates from the open source and browser worlds, here is the 9th edition of The Frontenders Kaleidoscope. Enjoy!

Reader View

“A woman with a blue painted nails holding and reading on an ipad tablet beside a walkway” by Anna Demianenko on Unsplash

CSS line-clamp

Kinda like text-overflow but for paragraphs. Beware, it is early days, and here be dragons. From the post:

The line-clamp property truncates text at a specific number of lines.

Codepen

Seriously, Don’t Use Icon Fonts

You probably don’t need more convincing as to the benefits of using a SVG icon system over icon fonts. If you are still on the fence, this article should help you clear it. From the post by Tyler Sticka:

But now we need to stop. It’s time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-Proof Rounded Corners and Scalable Inman Flash Replacements. Here’s why…

Security Audits Now Bundled with NPM

Running audits from inside the devtools in Chrome has made things like performance, best practice and accessibility testing a lot more well, accessible. And with today’s announcement from NPM, audits are coming to this ecosystem. The first of these is npm audit. From the post:

A security audit is an assessment of package dependencies for security vulnerabilities. Security audits help you protect your package’s users by enabling you to find and fix known vulnerabilities in dependencies that could cause data loss, service outages, unauthorized access to sensitive information, or other issues.

An Open Source Etiquette Guidebook

Open source is probably one of the most successful communities and movements there has ever been. The health and longevity of this though rests on ensuring that this community remains healthy. How we communicate and interact with each other is paramount. In this post Kent C. Dodds and Sarah Drasner provides guidelines for both maintainers and users. From the post:

This post was written to guide people as best as possible on how to keep these communications running smoothly. Here’s a bullet point list of etiquette in open source to help you have a more enjoyable time in the community and contribute to making it a better place.

How to use variable fonts in the real world

Variable fonts is a new font format being defined as part of the CSS Fonts module level 4. Even though some of its syntax is still in flux, it enjoys decent support from modern browsers already. In this post Richard Rutter takes us through an experiment using variable fonts on a production website. From the post:

A variable font is a single font file which behaves like multiple styles. (I wrote more about them here in an extract from my Web Typography book). There are plenty of sites out there demoing the possibilities of variable fonts and the font variation technology within, but for the new Ampersand conference website I wanted to show variable fonts being using in a real, production context. It might well be the first commercial site ever to do so.

Notable Releases

“Young people and children on a fairground swing ride” by Scott Webb on Unsplash

Browser Releases

“Colorful software or web code on a computer monitor” by Markus Spiske on Unsplash

Microsoft Edge with EdgeHTML 17

Service worker support (This means service workers are no everywhere)
Variable font support
Foundation for progressive web apps
Improved accessibility via ARIA

Firefox 60

ECMAScript 2015 modules have been enabled by default
The Web Authentication API has been enabled
The WebVR API has been enabled by default on macOS
The dom.workers.enabled pref has been removed, meaning workers can no longer be disabled (bug 1434934).
The PerformanceObserver.takeRecords() method has been implemented

Listen Up

“A close-up of headphones on a flat surface with bokeh effect in the background” by Alphacolor 13 on Unsplash

Hanselminutes ~ Developing ON (not for) a Nokia Feature Phone with Elvis Chidera

The next time you want to flip your table or complain about your toolchain, or slow device, listen to this episode from Hanselminutes :) Truly an inspirational story. From the episode:

In 2012, Elvis Chidera wrote his first app on a Nokia feature (J2ME) phone. He wrote the Java App ON the phone (literally writing the Java code with T9 text on a numeric keypad.) Today, he’s an Android developer at dotlearn.io who has worked on over 50 apps and currently works for an MIT startup. He chats with Scott about the Nigerian mobile market, how feature phones work, and where Android is headed.

Listen Now

ShopTalk Show ~ SVG and Sketch with Peter Nowell

SVG is incredibly powerful and versatile. The control we get over SVG manipulation with CSS and JavaScript makes it an ideal candidate for things such as icon systems and animation. Having a great workflow for SVG brings ties it all up nicely. In this episode of The Shop Talk show, the hosts are joined by Peter Nowell from Sketch Master fame to talk about all thing Sketch and SVG. From the episode:

It’s our SVG Sketch-a-thon. We’ve got Peter Nowell on who’s the Sketchmaster to talk about SVG workflows, animation workflow, plugins for Sketch, and how working in software like Sketch is great but you should still know the code.