DEV Community

Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’»
Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’»

Posted on • Updated on

My Top 22 Chrome Extensions [Week 32/2020 in Review]

#chrome #browser #react #javascript

If you like my articles, you probably like my tweets and newsletter too. Let's connect on LinkedIn. πŸš€

Hello πŸ‘‹πŸ».

Welcome to my "Week in Review" series. Each week I will share what I discovered, learned, and tested with you.

Over the years I have tried lots and lots of extensions for Chrome. Some of them are helpful during development, they optimize the experience on GitHub and Reddit or perform other tasks. In this week's "Week in Review" episode I am going to show you a collection of my favorite Chrome extensions. Many of them are available for other browsers as well. I would be pleased if you would publish your recommendations in the comments below.

Then let's see what I have prepared for you this week.

Highlights

Some tweets you don't expect to perform, perform the most. Last week a tweet I wrote during breakfast went viral. Moral of the story: don't overthink tweets to many. Some of them will outperform others out of pure luck.

A few weeks ago I started hanging out in Google Meet and Zoom sessions with famous people on Twitter. This includes Bernd ArtmΓΌller, the Dark Meme Lord Francesco, and last week Jack Herrington. This is something I want to invest more time into and focus on: getting to know YOU better. Stay tuned to see how this plays out.

Another highlight was the release of Catalin's ebook "Improve Your Online Presence". I applied some of his strategies and was able to increase my newsletter signups by 25% - in just one week. And this is just the tip of the iceberg. There is more listed in his ebook I did not even try out yet. Did you learn and see changes from applying his tips already too? Let me know in the comments below.

My Top 22 Chrome Extensions

Chrome is my browser of choice. Especially the DevTools make my life as a Web-Developer easier. If you are not really into Chrome for various reasons, you can try Brave or Edge. They both built upon Chromium, the same as Chrome, but are more privacy-focused.

So here you go - this is my list of 22 Chrome extensions:

Extensions for Productivity & Work

Extensions for Writing

Extensions for Shopping

Extensions for Development

Extensions for Privacy

Other Extensions

πŸ“— Books

I am almost done with "Thinking, Fast and Slow" written by Daniel Kahneman. Only 3.5 hours left on Audible.

Catalin released his ebook "Improve Your Online Presence". It covers lots of tips about how to improve your social media skills. I wrote a book review about it.

And don't forget to take a look and buy the impressive "HOW TO GET FOLLOWERS ON TWITTER! How I went from 0 to 30k Followers in 90 Days!" course by Danny Thompson! Together with Catalin's book, you will rock Twitter!

What are you reading? Share your recommendations in the comments below. πŸ™πŸ»

β›“ Links of the Week

  • For my own URL shortener nttr.st I use bitly under the hood. I never build my own shortener (yet). But I started researching how to export all URLs from bitly. If you ever want to export your links from bitly, check out "How to export links from your free Bitly account.".
  • Did you know that Twitter got a patent for "Pull to Refresh" back in 2013?
  • Speaking of pull to refresh, this article explains how to implement a pull to refresh animation with vanilla JavaScript. It also provides a CodePen example.
  • Are you looking for resources for your side projects? Well, then this gold nugget is for you: "My favourite resources being a freelancer as a side hustle πŸ’Ž".
  • In my last review, I shared Bannerbear with you. This week I've got an open-source alternative for you: github.com/vercel/og-image. It enables you to create Open Graph images on the fly with dynamic text inputs.
  • VS Code is THE IDE for me. So it is no wonder, I am constantly looking for ways to improve my experience and productivity using it. I have installed many extensions (read more about in my week review 26/20), but some of them are not necessary. That is what I learned when I found and read "VS Code: You don't need that extension". For instance, automatically and periodically fetch the latest data from git with the git.autofetch setting. Awesome!
  • I have already told you I am in love with Alfred. It has noticeably improved my productivity. So no wonder I am constantly looking for new workflows. Besides having lorem ipsum texts at my fingertips I installed CharCounter last week. Previously I visited sites like charcounter.com to count chars and words of a text. Not anymore!
  • Last but not least, I am a fan of NextJS. My new website (not launched yet) is built with NextJS. If you don't know what NextJS is and want to learn more about it, I can recommend masteringnextjs.com. Besides that, NextJS has fantastic docs too.
  • Are you looking for good looking animations and transitions ion React? Then you should give React Transition Group a try. Looks awesome and just works! If you want to learn more about this topic check out "Animating Between Views in React".
  • Deploy your static websites, back-end applications, or docker containers with a one-click deployment from your GitHub, Bitbucket, or Gitlab repository with Hostman. You'll receive a $50 credit when you sign up with my link. Do me a huge favor and give them feedback about their service and product. Thank you very much!
  • Last week my team and I were discussing how to reset a component instance with an attached state from the outside. Let's say you provide an initial state to an input element and then you let the input handle the state independently. What if you want to reset that state forcefully? How can you destroy (unmount) the component and render the input again with another default state? Luckily for us, this is easy. We figured that React's key property can do this. You've probably seen the key property when rendering a list of elements. But you can also use it outside of lists to get the same result. A few days later - and this was funny - I got a newsletter from Kent C. Dodds with an article describing exactly that use-case! I suggest you read it if you want to know and learn more about it.
  • I must admit since I use styled-components I haven't done much with CSS variables. But in Jhey's last newsletter he mentioned env() and I got curious. I took a look at the topic again. env() looks exciting and can surely make one or the other CSS case easier. Here is an article describing it in more detail. Logrocket explains in their article how to use env to update and keep shared values in CSS and JavaScript in sync. This is interesting.

🐦 Tweets of the Week















This is it for week 32/2020.

See you next week - thank you. πŸ‘‹πŸ»

Stefan

If you like this article, chances are you will like my newsletter too. πŸš€

Let's stay connected on Twitter, LinkedIn, and GitHub.

You can buy me a coffee or support my work on patreon too if you want.

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

Top comments (2)

Collapse
 
tusharborole profile image
Tushar Borole •

Thanks for sharing

Collapse
 
natterstefan profile image
Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’» •

You’re welcome, Tushar.

Read next

lucaspereiradesouzat profile image

Autenticação com JWT no Frontend e Backend: Implementando com Node.js e ReactJS (em TypeScript)

Lucas Pereira de Souza -

kaja_uvais_a8691e947dd399 profile image

Subscribe form using HTML and CSS

Kaja Uvais -

omidnikrah profile image

πŸš€ Introducing Figma Sprite Generator – Effortlessly Create PNG Sprites from Your Figma Icons

Omid Nikrah -

thisweekinjavascript profile image

TC39 JavaScript Updates, TypeScript 5.7 Beta, Node.js v20.18.0 and more

James -