Week in Review - Week 21/20
Published: 2020-05-24 14:03:19

Hello 👋🏻.

Welcome to my "Week in Review" series. Each week I'm going to share what I discovered, learned, and tested with you. This series will be my own [digital garden](https://tomcritchlow.com/2019/02/17/building-digital-garden/) one day. Let's sow some seeds and jump right into the review.

-------

This week was all about CSS and moving my newsletter from [Convertkit](https://convertkit.com/) to [Mailerlite](https://www.mailerlite.com/invite/3dadefd8e8ce5). [At work](https://www.lovelysystems.com/?utm_medium=natterstefan&utm_source=devto) I further optimized our React component and JavaScript utility library and got in touch with ES6 generators. Haven't really used them before, do you?

Let's see what else I have on my list for you.

⛓Things I learned, found and tried in week 21/20 🔧

- [Catalin Pit](https://twitter.com/catalinmpit) told me that Convertkit's modern theme does not work with dark mode... This was the final reason to move. The overall experience is not what I expected - they are doing great; it just doesn't work for me. **[Mailerlite](https://www.mailerlite.com/invite/3dadefd8e8ce5)** is my new newsletter tool. Let's see what I say about them in a few weeks.
- Have you used **generators and iterators** already? Tbh, I don't. One of my co-workers showed me how powerful they are. You can read more about them on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators), [javascript.info](https://javascript.info/generators) and [Digital Ocean](https://www.digitalocean.com/community/tutorials/understanding-generators-in-javascript). You can use generators to recursively traverse a nested data structure for instance - [here's an example](https://derickbailey.com/2015/07/19/using-es6-generators-to-recursively-traverse-a-nested-data-structure/).
- I changed [my default font](https://twitter.com/natterstefan/status/1262325063417827329?s=20). [Fira Code](https://github.com/tonsky/FiraCode) was replaced by **[JetBrains Mono](https://www.jetbrains.com/lp/mono/)**. Other developers also suggested [Dank Mono](https://dank.sh/), [Mono Lisa](https://www.monolisa.dev/), [Operator Mono](https://www.typography.com/fonts/operator/styles), [Victor Mono](https://github.com/rubjo/victor-mono), and [Cascadia Code](https://github.com/microsoft/cascadia-code).
- [Niall Maher](https://twitter.com/nialljoemaher) hosted his [Codú Community meetup](https://www.meetup.com/codu-community/events/270605287) on Tuesday. His guest was [Jhey](https://codepen.io/jh3y/pens/public), CodePen Pro, and a friend of Niall and me. He was talking about [Pug](https://www.sitepoint.com/a-beginners-guide-to-pug/) before he let us watch how he created [balloons 🎈🎈🎈 with animations from scratch](https://codepen.io/jh3y/pen/MWaZKwO). That was insightful, my friends! Here are some of the tools and insights Jhey shared with us:
  - [understand vmin and vmax](http://thenewcode.com/1137/MinMaxing-Understanding-vMin-and-vMax-in-CSS)
  - make [complex shapes with clip-path](https://bennettfeely.com/clippy/)
  - here's a [clip-path playground](https://codepen.io/jh3y/pen/XqVQqa) Jhey created (and [another fun one](https://codepen.io/jh3y/pen/gOpLBEa)).
- [Learn X in Y minutes](https://learnxinyminutes.com/) (thx to [Niall Maher](https://twitter.com/nialljoemaher))
- This one is really fun (thanks [Eddy](https://twitter.com/Veinq_/status/1263053306076725248?s=20)): [whatthef**kismystack](https://whatthefuckismystack.com/)! Mine is **S**3-**T**ravisCI-**E**mber.js-**F**irebase-**A**ngularJS-**N**ode.js 😂
- After being part of Jhey's workshop I wanted to dig more into the CSS animation topic again. Learning [how to create pure CSS loaders with animations](https://dev.to/devmount/learn-css-animation-by-creating-pure-css-loaders-3lm6) refreshed my knowledge quickly.
- It's really nothing special but yesterday I quickly created a simple animated [Pokeball on Codepen](https://codepen.io/natterstefan/pen/OJydeyE?editors=1100) :D. During my little practice I discovered https://cssgradient.io/ and https://gradientgenerator.com/ again. They are helpful.
- [My first contribution to the DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/45006) is waiting for approval - YEAH!
- [Tailwind Starter Kit](https://github.com/creativetimofficial/tailwind-starter-kit) and [tailblocks](https://github.com/mertJF/tailblocks) were two inspiring resources I used this week. 🚀

You see, [Jhey](https://dev.to/jh3y) entertained me almost my entire week. Especially when I add his book recommendation "Refactoring UI" ([book](https://refactoringui.com/), [blog post](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886)) to the list. I bought the book two days ago. It is fantastic. Thanks again for the recommendation my friend. I recommend reading it - especially when you want to create top-notch interfaces.

One more thing - last week I forgot to share my learnings from attending the [micro.sphere.it #1 Frontend Engineering](https://hopin.to/events/micro-sphere-it-frontend-engineering-1) event. Especially Zack Jackson's talk about [Webpack 5 Module Federation](https://www.youtube.com/watch?v=DAEqojidRmk) got me hooked. [Zack and I talked on Twitter](https://twitter.com/ScriptedAlchemy/status/1258829501032615937) already but seeing Webpack 5's Module Federation in action was very interesting. This is going to be very helpful IMHO. Watch the talk and you'll know what I mean.

This is it for week 21/20.

See you next week - same place, same platform. 👋🏻

Thanks,
Stefan

----

Do you have fancy tools you want to share with me? I'm always ready to try new things! Just comment below, [mention me on Twitter](https://twitter.com/natterstefan), or send me a DM. That would be awesome. 🥳

Let's stay connected on [_Twitter_](https://twitter.com/natterstefan) and [_LinkedIn_](http://www.linkedin.com/in/natterstefan).

---

_This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article._