The Frontenders Kaleidoscope ~ Ed.15 ~ 2018

“A lake with snowy wooded shores in fog” by Dominik Dombrowski on Unsplash

Welcome to the 15th edition of the Frontenders Kaleidoscope, and episode 4 of the podcast. This week JavaScript, CSS, news from Browserland, notable releases in the open source world, and tons of additional listening pleasure. Let us dive right in.

Reader View

“A snow covered lantern outside of a home in Sodankylä” by Mira Kemppainen on Unsplash

Reduce JavaScript Payloads with Tree Shaking

Over on Google’s Web Fundamentals area Jeremy Wagner wrote an excellent article on, not only what tree shaking is, but explores a practical example of how to use it. In this case via Webpack but, the same can be done with Parcel, since its latest release.

Because in the end, compression is great for saving bandwidth, and getting fewer bytes over the wire. Once the browser has decompressed those bytes though, the original 900 bytes, remains 900 bytes that needs to be parsed, compiled and executed. Best we make sure we absolutely need all those bytes.

Drawing Images with CSS Gradients

Ever wonder how people draw all those great images with just CSS? I know I have wanted to dabble in that, but have so far no gotten around to it. Well, wonder no more. Over on CSS-Tricks, Jon Kantner wrote the ultimate guide in getting your feet properly soaked. Highly recommended.

Pixels vs. Ems: Users DO Change Font Size

Fixed or relative units for font sizes? Because of accessibility concerns I have always preferred the latter but, I know it is a pretty common practice to use pixels instead. The argument against relative units usually boil down to, you can use browser zoom and, users do not change their default base font size anyway.

Turns out, they do. A great piece by Evan Minto, developer and designer at the Internet Archive. She explains how they went about determining the percentage of users that browse the their site with a base font size other than the default 16px, and why they ultimately decided to switch to relative font sizes.

Optimizing CSS: ID Selectors And Other Myths

Ivan Čurić posted a great post over on Sitepoint, asking whether optimising our CSS selectors still makes a big enough impact to warrant the effort. In short, Nope. You are much better of spending your time sending fewer bytes down the wire, and avoiding operation that invalidate computed style. Reflow is expensive.

That does not mean you should go nuts though. Be sensible, look to the future, and aim to keep your selectors specific. A great read.

Here are three upcoming changes to JavaScript that you’ll love

Oh boy, this is an exciting one. Optional chaining? Say goodbye to writing code like this:

const streetName = data && data.user && data.user.address && data.user.address.streetName;

Do head the warning though, and do not go crazy ;) Nullish coalescing, or the what-what(??) operator, partial application, and last but not least, the pipeline operator. A fantastic writeup by Justin Fuller on the Free Code Camp blog.

Using JavaScript modules on the web

JavaScript has evolved a lot in the past, it almost feels like I should say year, but let’s say couple of years. Writing modular JavaScript has been a topic discussed often, and is definitely recognised as a best practice. With all the changes to the language though, how do we go about writing modern, modular JavaScript?

Addy Osmani and Mathias Bynens comes to the rescue with this incredibly detailed post on writing, and using modules on the web. Wonder no more.

Notable Releases

“A woman wearing earmuffs, a winter coat, and red lipstick blowing snow out of her hands in Olsztyn” by freestocks.org on Unsplash

• video.js v7.0.3 ~ Read the release announcement
• html-minifier v3.5.18 ~ fix DOCTYPE parsing
• Atom v1.29.0-beta1
• semantic-release v15.6.3
• Babeljs v7.0.0-beta.52

Just The Links Please

• Meet the GitLab Web IDE
• Have Open Source project, Need logo, Solved
• A great talk by Addy Osmani on the real cost of JavaScript in modern web applications
• Brave Introduces Beta of Private Tabs with Tor for Enhanced Privacy while Browsing

Tool Chest

“Mountains covered in snow while the peak is still Illuminated by the sun” by Ales Krivec on Unsplash

Color Spark

Stuck for a base colour, need some colour inspiration? Colorspark is a free web app that automatically generates colours or colour gradients. Once you found the one you like, copy the CSS, and you are ready to go.

Try it

Browserland

Photo by Jonatan Pie on Unsplash

Safari Technology Preview Release 60

• Changed CSS Animations to take precedence over CSS Transitions
• Fixed CSS background-color style to no longer affect natively rendered text fields
• Changed CSP to apply checks before content blocker checks for network loads to match cache load behaviour

Chrome 68 ~ Coming July 28

• overflow shorthand now accepts two values, making it possible to set overflow-x and overflow-y to different values. Also available in Firefox and Opera but, no signals so far from Edge or Safari.
• Support x as a resolution unit. Essentially a synonym for the existing dppx unit used for high-resolution displays. Also available in Firefox and Opera. Same story with regards to Edge and Safari.
• Unprefix CSS “grab” and “grabbing” Values for Cursor Property.
• Improved Cache Management for Service Worker Scripts. Will also be shipped in Opera. Already shipped in Firefox, in development on Edge, with no signals from Safari

Listen Up

Photo by Filip Bunkens on Unsplash

JSParty ~ WASM is AWSM

A great discussion, with tons more information and real world questions answered by Jay Phelps. From the show notes:

Kevin Ball and Suz Hinton talk with Jay Phelps about WASM; what it is, how to use it, and how some are using it already.

Listen Now

HanselMinutes ~ C++ and Browser Monoculture with Vivaldi’s Patricia Aas

A great talk with Patricia Aas, developer on the Vivaldi browser, about a lot more than just C++. There is of course some great info around the evolution of the language, but Patricia also shares interesting bits around the history of browsers, and how some features turned out the way they are.

Listen Now

The Changelog ~ Computer Science without a computer

In this episode the hosts are joined by the founder of CS Unplugged, Tim Bell. I have a particular passion for how open source can empower people, and how the concepts of open source can have far reaching effects. One of these areas is education. We have come a long way since the days when getting an education was only for the privileged, but we can do better.

Using tools such as these, not only makes teaching computer science more accessible, but it makes it more engaging, and more fun. That is a trifecta that is sure to bear fruits. A great episode, and an inspiring project.

Listen Now

The Webplatform podcast ~ JS Unit Testing Tools & Best Practices

Join the hosts as the talk all things unit testing. As with accessibility, this is one of those pieces of writing code that is often neglected. There are various reasons for this of course. Some relates to the complexity of setting up a working stack, although that has come a long way. And then there is the time factor. When feature X needs to land, more often than not, time to write tests was not baked into the timeline. Listen as Danny, Leon and Amal share there tips for making tests a first class citizen.

Listen Now

And that is it for this edition. I sincerely hope you enjoyed it, and found something useful. Until the next edition, stay curious.