The Frontenders Kaleidoscope — Ed.1–2018
--
Oh great! What’s this now, another list of links? Well yeah, but hear me out for a minute. The ecosystem that us front-end engineers find ourselves in today is insane. Incredibly exciting and rewarding, don’t get me wrong, but nuts.
I doubt that there is another ecosystem that is exploding with as much creativity, innovation and a little bit of drama that the world of front-end engineers.
So, while there certainly are many resources out there, from RSS feeds to weekly newsletters, I feel there is a place for one more. One more that drop just in time for some good old weekend reading.
This weekly post will bring together all things front-end that I read, saw, or found interesting and just had to share. I will also list some notable releases of open source tools, libraries and frameworks. As an added bonus, I will hook you up with some neat plugins for your favourite editor, useful web based tools, upcoming conferences, browser news, news from the world of web standards, and maybe even a surprise here and there.
Without any further ado then, let’s get stuck into the first edition of The Frontenders Kaleidoscope.
Weekend Reading
Standardising lessons learned from AMP
I have to say I was really, really please when I saw this tweeted out by Addy Osmani. I was never a fan of AMP but, my hope was that it would kinda be like what jQuery was to JavaScript. A way to experiment with new ideas, learn from the experiments, and then roll it into the standards process to become part of the languages of the web.
From this post, that is exactly the case, and I am very excited to see and use the standards that comes from this. I really believe that this is going to be a win for user and the web. And who cannot get excited about that.
StackOverflow Developer Survey Results 2018
It is always interesting to look at the results of surveys such as these. When you survey over 100,000 developers, you are bound to see some interesting trends. You are also able to see how much has stayed the same or not improved all that greatly over the last year. This can be disheartening but, it also gives us a kick in the pants to stop talking, and start doing.
Of course there are many organisations that are doing amazing work in these areas. Organisations such as Code.org, GirlsWhoCode, PyLadies, and Outreachy to name but a few. They all need our help though, and as a community we can surely do more.
Quincy Larson from freeCodeCamp just published his insights from the StackOverflow survey, and it’s well worth the read.
While on the topic of surveys, there is still time to complete the 2018 Front-End tooling survey. Take a couple fo minutes and add your feedback.
Design and Math
As front-end engineers we naturally look at, think about, and build all things visual. While not all of us would call ourselves designers per se, I believe that as designers can benefit from better understanding code, we can all benefit from a better understanding of design.
With this is mind, I would like to share two articles I found this week that was really inspiring and enlightening to me. It explores the relationship between maths and design and how central maths is in the way we design logos, UI elements, and page layouts.
- How ancient mathematics can enrich your design skills
- The story of a designer conquering mathematics.
A DIY Web Accessibility Blueprint
Over on A List Apart, Beth Raduenzel wrote a wonderful, straight to the point article on accessibility on the web. This is something I feel strongly about. Even though there has been some evolution with regards to making websites and apps more accessible. Guidelines and tools such as ARIA, WCAG and Lighthouse audits, it definitely does not sit around the same table as UX, performance, aesthetics and product design.
Beth’s article is a must read in this regard. She gives clear direction and calls to action for getting leadership on the same page, and building out your skills and knowledge on this incredibly important subject.
Another great resource here is the Inclusive design toolkit by the City of Ontario.
Owning the Role of the Front-End Developer
Not to point fingers or feel sorry for myself but, let’s be honest. Even though pretty much everything in this world needs a UI, front-end engineers are not put in the same category as other developers out there.
And before you say anything, I do not want to be a special snowflake, I do not want to be handled with gloves or put on a throne. By no means, that is not the point.
With that said, I was truly inspired by Ronald Mendez’ post on A List Apart, and I wholeheartedly agree that we as front-end engineers need to stand up and make out voices heard. We play a major role in the success and development of a companies product, and we should have a seat at the table.
Preventing ‘layout thrashing’
This article is by no means new, but I found it while reading over some of the material mentioned by Steve Kinney in his performance workshop that was hosted on Frontend Masters yesterday.
What is layout thrashing? I reckon Wilson Page, the author of the article puts it best:
Layout Thrashing occurs when JavaScript violently writes, then reads, from the DOM, multiple times causing document reflows.
This is a great post covering how requestAnimationFrame can help with this problem, and also introduces his <~600k library FastDom, can help to dramatically improve DOM work by batching read/writes to the DOM.
CSS Triggers
Another topic that I highly recommend you researching is CSS triggers. The triggers referred to here are those things in CSS that causes either a reflow of the page, a repaint, or both. These operations are very expensive, can contribute to the dreaded yank, and is best avoided if at all possible.
Below are a couple of resources and editor plugins that will help you to be more mindful of the CSS you write.
- CSS Triggers — A list of CSS properties and what they trigger across browsers
- What forces layout / reflow by Paul Irish
- CSS Triggers plugin for Atom.io
- CSS Triggers plugin for VS Code
Notable Releases
- Clipboaord.js v2.0.0 — A tiny, but important, update to this widely used library
- Atom Stable v1.25.0
- Atom Beta v1.26.0
- MDN Browser Compat Data v0.0.28
- Styleline v9.1.3
- Node-Sass v4.8.1
- Prettier-Atom v0.52.0
Browser Updates
- What new for developers in Chrome 65 — Most notably, support for the CSS Paint API, Server Timing API and
display: contents; - What new for developers in Firefox 59 — Most notably, update to
display: contents;to meet the spec,calcis now supported in colour values,PointerEventsis now enabled by default in Firefox for desktop.
That’s it then for this weeks roundup of all things from around the web. I hope you enjoyed this post, and welcome your feedback and comments.
Until next week, keep building, and fighting for the open web o/\o
