Weekly Web Roundup - 03

Is it me or did this week just flew by in no-time? I didn't get too much things done the last couple of days but more on that later. Last weeks roundup was a bit of a mess so this week I'm trying out a different structure. Any tips on a better format are most welcome!

• Week 02
• Week 01

HTML and CSS

1. Wes Bos just released a new video course and it's all about CSS grid. Thanks to sponsoring from Mozilla the course is available for free! I'm really excited about this deal, as it's a great way to 'move the web forward'. Wes is a great teacher and there are 25 videos and about four hours of material in the course! By the end of it, you also can be a grid sensei!
2. CSS grid and CSS columns seem to go together like lamb and tunafish (bonus points if you get the reference). In this medium article, Patrick Brosset explains the relationship between the two layout features and how they combine.
3. Ohans Emmanuel wrote an interesting article about CSS naming conventions and how they can safe you time debugging. I'm especially a fan of the BEM - stick-man analogy.
4. Meet the new dialog element! Keith J. Grant wrote an introduction to the native HTML 5.2 dialog element and some easy to miss features. He also created a great dialog demo on codepen which you should check out!
5. Harry Roberts came up with a really clever way to track dead css with a tracking pixel.
6. Although this article is pretty old, it's not less relevant: An excellent explanation on using feature queries and css grid by Jen Simmons.
7. Also, the same Jen Simmons started a YouTube channel called Layout Land where she publishes great talks / tutorials on modern CSS layouts. It's a super chilled out channel and as long as she'll be publishing, I'll be watching.

JavaScript

1. Bad month for the main thread. The title of Dave Rupert his article on the slowdown of CPU's and the impact on running JavaScript. "It isn’t far fetched that a device would reduce power consumption when on battery, it makes the device last longer, makes users happier. This explains iOS’ less-than-stellar performance in Low Power mode. I know this mode well because my last phone probably spent 80% if its life in Low Power mode." - Dave Rupert
2. Vladimir Metnew wrote a pretty opinionated article on hackernoon.com about preferring library based frameworks and toolkits above so called starter kits. I like the point he makes on long-term support and cost of customizing with starters, but at the other hand, aren't starters often a kick-off point for tool-kits? Anyway, it's nothing to get riled up about, and there are some solid points in there.
3. There have been many topics on React Router v4, and most of them have been about people not wanting to upgrade. Tyler McGinnis published an article on dev.to explaining and introducing React Router v4. If you're planning on creating a new React app with routes or upgrading your existing app to v4, this is a must-read.
4. Nicolás Bevacqua, better known as PonyFoo published a talk about modular design thinking in a very convenient and readable format. It's full of great advice and warns against code that is 'too clever' and overengineering. As I'm not a regular conference attendee, I hope more people will publish their talks and transcripts this way.
5. Reddit user Kevin Flynn did a great job in explaining the how and why of Webpack to someone who 'just wants to drop some JavaScript in the page'. I totally get the sentiment but Kevin's answer reminds me of why Webpack is something pretty damn amazing.
6. The Slack engineering team released a great article on how to stay speedy with Webpack. It's a solid guide to get better build performance and clearly explains where the bottlenecks are.
7. An article on Front-end in 2018 by Kealan Cooler. It's a nice roundup of what we can expect this year, mainly in the world of JavaScript.
8. The latest syntax.fm podcast about async/await is a real treat!
9. How the rest operator and default values affect the function length property. To be fair, I didn't even knew functions had a length property, so I learned two things today. Informative article by Stefan Judis, who's articles seem to become a regular appearance in this roundup.
10. The amazing Zell Liew published a beginners guide to understanding the REST API on Smashing Magazine.

Libraries and tools

1. JARVIS is a 'very intelligent browser based Webpack dashboard' created by Zouhir. The dashboard gives you a whole bunch of information about your Webpack development or production build in a great overview. I haven't tried it out yet but as it has pretty colors I'm inclined to share it with you.
2. Speaking of the dialog element, Hugo Giraudel has been maintaing a11y-dialog which is a very lightweight and flexible modal dialog. It now supports the native dialog element.
3. Another cool library by Zouhir: The lqip-loader for Webpack. LQIP standing for 'Low quality image placeholder'. It generates both a base64 of your low quality image as a dominant color palette of your jpeg.
4. A great tool to benchmark your CSS-in-JS libraries by Nicolas
5. Most of us know Sindre Sorhus as an overactive JS developer and creator of 50% of the NPM packages currently in your dependencies, but recently Sindre has picked up some other stuff as well. He made this great Refined Twitter Chrome extension (also usable with Firefox) and it really makes Twitter so much better! Also, Sindre has opened a Patreon page where you can support him so he can continue to contribute and maintain open source packages!

PSA

1. A small PSA from Nicolas J. Engler:

   

   

   Nicolás J. Engler 👾

   @nicolasjengler

   

   Please, don't forget about the `object-fit` and `object-position` properties in CSS, they have some pretty decent support. caniuse.com/#feat=object-f…

   16:13 PM - 13 Jan 2018

   

2. Henry Zhu, steward of BabelJS is looking for some help with the babel roadmap. If you think you can assist, don't hesitate to check in with him on Github.

   

   Henry Zhu

   @left_pad

   

   Figured I'd post it at some point 🤔: looking for help with a roadmap for Babel (some things I thought of): github.com/babel/babel/pu…. Not sure it's the best format/place but feel free to comment on the PR/here, I know I could add a lot more details to a bunch of these.

   00:50 AM - 14 Jan 2018

   

3. Create React App 2.0 is coming but there's yet loads to be discussed and implemented. If you think you can help out, check out the 'Roadmap for react-scripts@2.0' Github issue.

   

   

   Dan Abramov

   @dan_abramov

   

   I published a roadmap for what’s going to be in Create React App 2.0. We need your help on issues and PRs that aren’t quite ready yet! github.com/facebookincuba…

   16:49 PM - 16 Jan 2018

   

4. I sorta share this sentiment.

   

   JavaScript Kanye

   @ken_wheeler

   

   @_zouhir Engineers build bridges. I fetch and display lists of data on websites.

   13:59 PM - 18 Jan 2018

   

5. Pagespeed is a must! Liquid error: internal
6. FYI, Google Chrome is going to change some autoplay policies.
7. This is pretty sweet. I used to tag on an array method at the end of a .from() but this is way nicer.

   

   

   Addy Osmani

   @addyosmani

   

   Tip: JavaScript's Array.from() accepts a second argument that's a `map` function. Useful for calling on each element of an array you created.

   07:30 AM - 19 Jan 2018

   

Inspiration

1. A sweet SVG morphing triple toggle button created by Gabi on Codepen.
2. A CSS only recursive navigation. Pretty sweet. By Sean codes.
3. I've been following Punchesbears for a while now because he's making a game about raccoons and I desperately need it in my life.

   

   

   PunchesBears ㅎ㉨ㅎ

   @punchesbears

   

   working on Wreckoons dodgeball mode today. it's a bit more Hunger Games than I intended.

   21:58 PM - 14 Jan 2018

   

4. Woah, super smooth WebGL animations in Kenji Saito's sparkling new Portfolio! website. For the occasion he decided to create his own micro WebGl libary called tubuGL.

   

   

   Kenji Saito

   @kenji_special

   

   I updated my simple portfolio site for 2018. I changed it every January. I made it with my own micro webgl library. I will spend more time for it this year. kenji-special.info

   06:43 AM - 15 Jan 2018

   

5. Is there Uber? By Sara Vieira

   

   

   Sara Vieira 🎉@🇵🇹

   @nikkitaftw

   

   I made a thing to check if there is uber in the city you input: isthereuber.in 🚘
   
   Also checks for lyft , cabify and taxify 🌈

   17:39 PM - 14 Jan 2018

   

What have I been up to

• ☀️ Oh man the sun is out here in Lisbon, Portugal and it's amazing. I kinda feel like summer is already creeping around the corner. That's probably the Dutch part of me speaking.
• I've been making this huge blog post on Promises and async / awaitas I was redoing Wes Bos' ES6 For everyone and found it particular useful. I'll publish it one of these days!
• I finished Dan Abramov's Redux course on Egghead.io. It's soooo dense with information! Even though I've worked with Redux before, I learned so much about the whole principle and what is actually happening.
• I botched a coding test. It was part of my first interview process in years and I wasn't prepared for coding tests and all that. I kinda enjoyed the process though (even though I don't think that online coding tests are a good assessment of skills). I'm quite content freelancing, but I'm also open for great chances and being part of a forward striving team. If you've got any leads for awesome front-end work in Lisbon or remote, let me know!
• The last two days were mostly spent with technicians fixing stuff around the house. These things always take more of your time than you'd expect (definitely here in Portugal) so the days were kind of wasted. The boiler is working again though, so that's nice!

Enjoy the weekend!

Arden