May 21, 2018

5 min read

The Frontenders Kaleidoscope ~ Ed.10 ~ 2018

Welcome to the 10th edition of The Frontenders Kaleidoscope. This edition contains a lot of links to interesting reads covering topics from React to lesser known CSS properties. There are also some new releases and a great new episode from the folks over at The Changelog.

Reader View

CSS Architecture

I have read about the various options out there for modular, scalable methodologies for writing and maintaining CSS. Recently I decided to dive into this world again, and the following resources has been useful to me.

Methods to Organize CSS by Inessa Brown
Quick and practical tips for writing better modular CSS by Adam French
OOCSS — The Future of Writing CSS by Cody Arsenault
BEM

my struggle to learn react

Over on his blog Brad Frost shares his struggles getting his head around the React ecosystem and his hopes for its future. From the post:

Why did I just share all of this? I’m not totally sure. I know I have a lot of work to do to get better at React, and JavaScript in general. That said, I don’t think I’m alone in how I tend to think about & approach frontend development. I’d like to think I’m a good frontend designer, and I think I simply have a different perspective than someone with a JS/programmatic perspective. I have a hunch there are lots of people who are dedicated to writing great UI code but may feel intimidated swimming in JS-only waters.

The Front-End Tooling Survey 2018 — Results

Launched in March, to date 5,097 front-end developers have taken the time to complete the survey. So, while the results aren’t gospel, as stated by Ashley Nolan, it is a decently sized group. The results are not overly surprising but, there are clear trends that can be seen, and also some methodologies and frameworks that are clearly taking the lead. Well worth your time to read through.

Introducing the Microsoft Edge DevTools Protocol

From the post:

With the Windows 10 April 2018 Update, we’re taking the first major step on our journey by introducing the Microsoft Edge DevTools Protocol, a set of REST and JSON-RPC/WebSocket APIs, which enable clients to diagnose and debug Microsoft Edge tabs. In addition, we’ve worked with our teammates from Visual Studio, Visual Studio Code, and the Microsoft Edge DevTools to integrate with, and validate the interoperability of, these new capabilities within those apps.

Atomic design: how to design systems of components

The web, and the way we build and design for it is changing. Atomic design and web components makes a lot of sense in this new age. It allows designers and developers to work more closely, and build up user interfaces with predefined, branded, predictable components. Audrey Hacq wrote a great piece around this idea. From the post:

So why the hell are we still designing our products by “page” or by screen?!
Instead, we should be creating beautiful and easy access to content, regardless of device, screen size or context.

Designing for open source software

Over on the UX Collective Varun Pai wrote an excellent piece on the redesign of Relay(Mattermost), and the importance of good design in open source software. From the post:

Open source software needs good design because good design respects you, the user.

How to try the JavaScript Pipeline Operator Today

Over on ITNext James Hall-Treworgy writes about a stage 1 proposal for adding the pipe operator to JavaScript, and how you can experiment with it today. From the post:

The pipeline operator being proposed is similar to what can be found in languages such as F#, Elixir and Elm. The syntax which looks as follows |>falls in line with the languages listed above.

7 Hacks for ES6 Developers

Tal Bereznitskey shares some neat “tricks” using the new syntax available to us with ES6. A lot of these utilise the power of `Array Desctructuring`. From the post:

Following the original JavaScript hacks, here’s some new goodies. Coding JavaScript in 2018 is actually fun again!

Decorating lines of text with box-decoration-break

Over on CSS-Tricks Preethi wrote an in depth article on styling paragraphs using the little known, to me anyhow, box-decoration-break property. From the post:

An institution’s motto, an artist’s intro, a company’s tagline, a community’s principle, a service’s greeting… all of them have one thing in common: they’re one brief paragraph displayed on a website’s home page — or at least the about page!
It’s rare that just one word or one line of text welcomes you to a website. So, let’s look at some interesting ways we could style the lines of a paragraph.

Notable Releases

Listen Up

The Changelog ~ Burnout, open source, and Datasette

Recorded on location at ZEIT Day, this episode covers a lot of seriously interesting topics. Whether you are, or may be, struggling with burnout, open source maintenance, the general state of open source or, you are into open data. This episode ha something for you. From the show:

Adam is on location at ZEIT Day talking with Jessica Rose about burnout, Henry Zhu about his passions and pursuit of open source, and Simon Willison about data and his passion for interesting datasets in the world.

Listen Now

That is it for this edition. Hope you enjoyed it, and as always, stay curious!