The Frontenders Kaleidoscope ~ Ed.13 ~ 2018
Welcome to the 13 edition of the Frontenders Kaleidoscope, and the second episode of the podcast o/\o. This week, lots and lots of reading material, some bits of news, shiny new tools, Ryan Dahl’s Node.js regrets, Deno and other suggested listening.
Reader View
Math and front-end
Over on his blog Chen Hui Jing writes a wonderful article exploring the role of maths in design and front-end coding. Some of the really neat “hacks” regarding pure CSS triangles, responsive typography, and responsive layout itself, needs a combination of geometry and arithmetic.
Have a read, then head over to Khan Academy and brush on your math skills. Then explore the creative possibilities it unlocks. I know I am definitely going to explore this area.
HTTPS + service worker + web app manifest = progressive web app
Over on his blog Jeremy Keith(adactio) wrote a really insightful post. In it he clears up all the mixed messages one runs into on the web with regards to progressive web apps. For the most part, it seems that if you are not using the latest hotness, and therefore in the single page app methodology, you are out of luck.
That is not the case at all though. All you *really* need is
- HTTPS
- A manifest file
- A service worker
As a bonus Jeremy also posted the first chapter of his book, Going Offline.
Relay vs Apollo
A great roundup from the folks at Graphcool that explains the pros and cons of both of these GraphQL clients. If you are starting a project, and want to add GraphQL to an existing one, and you are not sure which route to follow. This article will surely easy the process greatly. In some cases, the decision is super clear. For example, Relay(Classic) is tied to Reactjs whereas Apollo is framework agnostic. Great read.
And there is Relay Modern to now also consider. If you are going to experiment with Relay Modern, then this post by Konstantin Tarkus will be indispensable.
Adding A CSS Processor to a React App (create-react-app)
During one of my current side projects I wanted to add Sass to the project. I created the project using the insanely useful create-react-app. It did not seem like a preprocessor is supported by default, and the docs indeed states that:
Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a
.ButtonCSS class in<AcceptButton>and<RejectButton>components, we recommend creating a<Button>component with its own.Buttonstyles, that both<AcceptButton>and<RejectButton>can render (but not inherit).
There are however still some benefit for me, even if it just because of muscle memory. The best resource I found in the end was the docs for create-react-app linked above. And as a side note, they also explain why they chose to use node-sass-chokidar as a apposed to node-sass.
Prioritizing the Long-Tail of Performance
Currently on MDN Web Docs, which is the project I work on at Mozilla, we have contracted Tim Kadlec to help us figure out where we can improve the performance of the site. Together we have found some early wins, ways to improve the way we gather performance stats, and interpreting the results.
I found this new post from Tim especially enlightening in not forgetting the long tail, the outliers, and how addressing these, can have an overall benefit to all.
Specificity in :not(), :has(), and :matches()
Over on his blog Eric A. Meyer writes on specificity of selectors that use the :not, :has, and :matches pseudo classes(or are they;)). Because we can currently only use a single simple selector, working out the specificity is simple. This is said to change though, as we will be soon be able to use more complex selectors for example: From the post:
div:not(.one, .two, #navbar) p;
What does that calculate to then? Well, head over to Eric’s post as he explains how this will all work.
Noteworthy Releases
Notable additions to WCAG 2.1
- provides updated guidance including support for user interactions using touch, handling more complex gestures, and for avoiding unintended activation of an interface
- WCAG 2.1 extends contrast requirements to graphics, and introduces new requirements for text and layout customisation to support better visual perception of web content and controls
- For users with cognitive, language, and learning disabilities, there is now a requirement to provide information about the specific purpose of input controls, as well as additional requirements to support timeouts due to inactivity.
The Bits
- Node.js 8.10 runtime now available in AWS Lambda
- The Node.js Project Introduces Latest Release Line: Node.js 10.x
- Chrome 68 will ship fresher service workers, by default
Tool chest
Tool chest
keyframes.app
CSS animation run so silky smooth on the web that is a the obvious choice thee days for UI interaction animations, or even much more complex animations. Writing the latter can be quite the challenge, involving a lot of back and forth between your editor and the browser.
keyframes.app solves this by providing you a free web app in which you can create your animations and, once satisfied, export the code. Because everything is not wrapped up in a black box, if you understand the CSS animations, you can always optimise the resulting code post export. A big time saver.
TheFuck
There are a lot of tools/plugins one can add to make using terminal a lot more productive but, sometimes the problems is between user and keyboard. For those situations, TheFuck comes to the rescue to lessen the frustration with typos. From the repo:
Magnificent app which corrects your previous console command.
Critters
Critters is a WebPack plugin from Google to inline your apps critical CSS and then lazy load the rest. Now this concept is not new by any stretch of the imagination but, what does make Critters different is that it does name make use of a headless browser so, rules are document based, and not based on above the fold concepts. And it has a super cute mascot ;p. From the repo:
It’s a little different from other options, because it doesn’t use a headless browser to render content. This tradeoff allows Critters to be very fast and lightweight. It also means Critters inlines all CSS rules used by your document, rather than only those needed for above-the-fold content.
In Vision
10 Things I Regret About Node.js — Ryan Dahl — JSConf EU 2018
A great talk from the inventor of Node.js on the things in it that he regrets and would have done differently. To that point, he introduced a new prototype project called Deno. Could this be the next iteration of what we know as Node.js today?
Listen Up
The Web Platform Podcast ~ WebAssembly
If you’ve never heard of it, know of it but want to know more. Not sure where it fits into the web ecosystem, and whether it is, or is not, supposed to replace JavaScript. This episode is for you. From the show:
What exactly is WebAssembly? Is it a replacement for JavaScript? Do I need to learn C++ if I want to use it? Sooooo many questions about this very cool technology. Come listen to Thomas Nattestad and Ben Smith give answers to all of these questions and many more!
The Changelog ~ Node’s survey, Ry’s regrets, Microsoft’s GitHub
A pretty packed episode this week from JSParty. There is a nice deep dive into the 2018 Node.js survey results(so don’t have to ;)). A quick segue to Ryan Dahl’s talk I linked above, and closing out with the elephant in the room. Reactions to the MicroHub(aka Microsoft buying Github) news.
The ShopTalk Show ~ CSS Blocks with Chris Eppstein
Most of you have probably heard of CSS Blocks. I mentioned it a while ago here on The Frontenders Kaleidoscope. CSS Blocks is a new tool from the folks over at Linkedin that provides a modular approach to CSS, and through combined OptiCSS, can provide massive performance improvements.
I have glanced at it, and found it really interesting but, had some questions. I was therefore super excited about the latest ShopTalk Show episode, where the hosts speaks to Chris Eppstein, the creator of CSS Blocks.
And that is all for this edition. Stay curious!
