This weeks roundup arrived a bit late than you're used to, sorry! Life gets in the way at times, so I haven't yet worked on the newsletter or the site yet. I'll keep you posted on that front. In any case, let's have a look at the work of people who actually did push some amazing stuff.
News
- Chrome 65 beta is out and includes the CSS Paint API and the ServerTiming API. I'm not totally sure what the CSS Paint API is good for yet, but the ServerTiming API can be used to deliver performance timing information to the browser via HTTP Headers.
- Googles Web fundamentals keep on improving and now include a chapter on code-splitting and optimizing with Webpack, written by Addy Osmani.
- JS developers rejoice, for there's a pipeline operator in the... pipeline. As someone with no background in any other programming language I never heard of the concept. It seems to improve the readability of chaining multiple functions a whole lot though, and I'm sure there's other goodness.
- PWA's are coming to Windows 10. About time!
- Vue.js now has an official news platform on which you can find all the latest and greatest about the framework. I think it's a great idea and if they update it consistently means that it'll work like a 'single source of truth' as well.
CSS / SVG / Fonts
- Digital Designer Rafaela Ferro wrote a great article on CSS Grid layouts and how to get started.
- Jen Simmons' Layout Land videos are quickly becoming my favorite tech video series ever. In this one she will walk you through recreating some classic graphic design layouts with css-grid, transforms and more.
- Designer and coderKezz Bracey has created a great tutorial on hand coding SVG icons. Not only is it more fun than you'd expect, it also helps your understanding of SVG coordinates.
- How I design with CSS Grid by Chen Hui Jing. A very enjoyable and informative read on how Hui Jing handles creating layouts with CSS grid. He highlights the visual aspects inherint to the CSS grid system which might make it a lot easier to create solid and reusable code
JavaScript
- Jake Archibald gave a great talk at JSConf.Asia 2018. It was all about the event-loop and goes pretty in-depth.
- "Have you ever experienced the pain of trying to get state from the top of your react tree to the bottom?". If you've worked with React you know exactly what Kent C. Dodds is talking about here. Luckily there's a 'new' context API in which you can use a context an a provider to pass around props.
- Vanilla JS advocate Chris Ferdinandi has recently released vanillajstoolkit.com, a collection of code snippets, helper functions, boilerplates, polyfills, plugins and learning resources. I'm excited Chris created a dedicated site for this, as I've been following his website gomakethings.com for years and he was my spirit guide into ditching jQuery years ago!
- And speaking of spirit guides, Dr. Axel Rauschmayer and his blog 2ality have been my guide to understanding stages, proposals, TC39 and the whole works. in JavaScript’s a mess – and that’s a good thing he explains how JS deals with backwards compatibility and how we can deal with JavaScripts expanding feature set.
- Duncan Grant summed up the things he loves about vue in 10 things I love about Vue on medium.com. As I started to play around with VueJS, it's nice to read why people have been enjoying Vue so much.
- Dan Abramov explains how React
setStatebatching works on stackoverflow.com - There can never be enough Redux explainer articles, and Dave Ceddia's article on where and when to fetch data with Redux is a detailed explainer on something we often deal with.
- Sam Williams wrote a useful article on making your code cleaner, shorter and easier to read with ES6 on freecodecamp.org.
- The Single Page Application(SPA) Is Not a Silver Bullet is a friendly reminder by Seva Zaikov that not everything is supposed to be a SPA and that running JS can be costly. His examples only show the downloaded files and data on first load, but I guess that's kind of the point. Why should I have to download and parse a whole bunch of JS if all I want to do is look at some content?
- Installing NPM modules globally is messy. It reminds me of working with Ruby Gems and the dependency hell that followed. So maybe don't globally install that node-js package, written by Jake Wilson on codeburst.io
- GraphQL is something you won't stop hearing about this year, and with good reason. Sacha Greif wrote Five Common Problems in GraphQL Apps (And How to Fix Them) which I found insanely useful for reducing GraphQL boilerplate and avoiding performance problems.
General
- An article in Portuguese today! Wendell Adriel is a Brazilian developer who moved to Portugal and even though he comes from a very different place, his experience here has been as enjoyable as mine! He also explains a bit on the IT market in Portugal, expected salaries and how to position oneself in the market here: The IT Market in Portugal - A personal experience
- Chris Coyier made some good points on how many websites are the same nowadays in Website sameness on css-tricks.com. Although I know a boatload of amazing site-designs, most of the designs I come across are a variant of bootstrap. With CSS we have all the tools to create solid yet unique designs. Why don't we? Bootstrap can't be the ultimate webdesign, now can it?
- I kinda enjoy the blogposts by Delicious Brains. The WordPress plugin development company has been creating solid blogposts (not to mention solid plugins) for a while now, ranging on all kinds of topics. They're always really in-depth and very honest. That's why I enjoyed this 2017 review which is very honest and shows how hard it can be to run and grow a business.
- The increasing nature of frontend complexity by Kevin Ball is exactly about what you think it is about. It's still very worth the read though, as it's as much about complication as tremendous opportunity!
- When You’re a ‘Digital Nomad,’ the World Is Your Office - A bleak but, as far as I'm concerned, accurate picture of digital nomadism by Kyle Chayka
Inspiration
- Mandy Kerr gave a great talk @ SingaporeCSS about creative text effects. There's a whole bunch of cool ideas in her video and just skimming through it makes me want to try them out. Enjoy!
- luuuge.fr is a mini-site for the promotion of a music album. There's some chill music, nice artwork and springy popmotion action. Created by Maxime Le Breton
- lesfillesdu9novembre.com, a super cool and smooth portfolio site.
- Seriously.. OMG
- When parallax makes sense:
Sacha Greif@sachagreif
Really cool use of scroll animation on this Japanese bouldering gym’s site: mushrooming.co03:30 AM - 10 Feb 2018
2
9
OSS
- Preact Styled template by @NikkitaFTW
- Thanks by @feross
- OSQuery by Facebook
- Automerge - A JSON-like data structure that can be modified concurrently by different users, and merged again automatically.
Public Service Announcements
- Is this a good idea?
shawn swyx wang 🇸🇬@swyxYou probably don't need the `switch` statement:00:36 AM - 04 Feb 201816 -
aria-labeldoesn't play nice with automatic translation services:
stefan judis@stefanjudisHuh – never thought about that... `aria-label` doesn't play nicely with automatic translation services (because it won't be translated). `aria-labelledby` or a `visually-hidden` class are better alternatives.
👉🏻 "aria-label is a xenophobe" by @heydonworks. #a11y16:30 PM - 05 Feb 2018518 - I must admit that I had no idea!
Wes Bos 🔥@wesbosTIL nesting an input inside the label has better accessibility/ assistive device coverage than just using an ID
So:
<label for=“first">Name: <input id=“first”/> </label>
Is better than
<label for=“first">Name:</label>
<input id=“first”/>
github.com/evcohen/eslint…16:05 PM - 06 Feb 201888314 
Eric Lawrence 🎻@ericlawTIL: This state is called tablerone.21:32 PM - 23 Jan 20185411667- The new version of the Vue CLI seems pretty rad
Sarah Drasner@sarah_edoDuuuude the new version (3) of Vue CLI is amazing ✨
Check it out, I can use the default, or select from a bunch of options, not limited to:
- TypeScript
- scss/sass/less/stylus
- unit/e2e testing
- class based syntax
And I can ask it to remember my settings!15:01 PM - 07 Feb 20182991029 - This!
Whitney Williams@whitneyhacksCompanies: What do you do, exactly?
Me: I know the CSS spec by heart and I can code a flexbox layout correctly on the first try.
Companies: But do you know JavaScript?
...
It’s about time that we, as an industry, started accepting that the front end is about way more than JS. twitter.com/meyerweb/statu…06:13 AM - 12 Nov 2017Eric Meyer @meyerweb8452239 - I need to play this!
Sebastian Krośkiewicz@gynecomaster14:19 PM - 08 Feb 201845201
What have I been up to?
Enjoying some beautiful scenery in Nazaré, Portugal!
Have a great week!
Oldest comments (1)
Wow! Lots of things covered in this weekly roundup Arden. CSS seems to be really picking up fast this year because of CSS Grid. I am looking forward to more websites being more responsive because of it. :)