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!
HTML and CSS
- 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!
- 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.
- 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.
- Meet the new
dialogelement! 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
dialogdemo on codepen which you should check out!
- Harry Roberts came up with a really clever way to track dead css with a tracking pixel.
- Although this article is pretty old, it's not less relevant: An excellent explanation on using feature queries and css grid by Jen Simmons.
- 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.
- 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.
- 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.
- 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.
- 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.
- The latest syntax.fm podcast about
async/awaitis a real treat!
- 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.
- The amazing Zell Liew published a beginners guide to understanding the REST API on Smashing Magazine.
Libraries and tools
- 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.
- Speaking of the
dialogelement, Hugo Giraudel has been maintaing a11y-dialog which is a very lightweight and flexible modal dialog. It now supports the native
- Another cool library by Zouhir: The
lqip-loaderfor Webpack. LQIP standing for 'Low quality image placeholder'. It generates both a
base64of your low quality image as a dominant color palette of your jpeg.
- A great tool to benchmark your CSS-in-JS libraries by Nicolas
- 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!
- A small PSA from Nicolas J. Engler: Nicolás J. Engler 👾@nicolasjenglerPlease, 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
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_padFigured 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
- 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 firstname.lastname@example.org' Github issue. Dan Abramov@dan_abramovI 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
- Pagespeed is a must!
- FYI, Google Chrome is going to change some autoplay policies.
- This is pretty sweet. I used to tag on an array method at the end of a
.from()but this is way nicer.
- A sweet SVG morphing triple toggle button created by Gabi on Codepen.
- A CSS only recursive navigation. Pretty sweet. By Sean codes.
- 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.
- 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_specialI 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.info06:43 AM - 15 Jan 2018
- Is there Uber? By Sara Vieira Sara Vieira 🎉@🇵🇹@nikkitaftwI 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!