Web Developer Monthly Newsletter 💻🚀

42nd issue! If you missed them, you can read the previous issues of our Web Developer Monthly newsletter here.

If it’s your first time here… (otherwise, skip this part)

Being a web developer is a fantastic career option. You have many job opportunities, you can work around the world, and you get to solve hard problems.

One hard thing, however, is staying up-to-date with the constantly evolving ecosystem. You want to be a top-performing web developer, coder, programmer, software developer, but you don’t have time to select from hundreds of articles, videos and podcasts each day.

This monthly web development newsletter is focused on keeping you up-to-date with the industry, without wasting your valuable time. I curate and share the most important articles, news, resources, podcasts and videos of the month.

Think Tim Ferriss and the Pareto Principle (80/20 rule) meeting the Software Development world. What’s the 20% that will get you 80% of the results?

Let's dive in. Here's what you missed in December 2021 as a Web Developer…

Everything About Accessibility 😎

We all know it’s important… We have been told thousands of times. Now you have a full guide that teaches you everything you ever wanted to know about making your apps, blogs, and anything on the web with accessibility in mind. Bookmark this and enjoy the free series (it’s a 6 part series).

My Top 10 Articles from 2021 👑

I will be releasing this post in a few days. Make sure you subscribe to the blog (that purple box 1 or 2 scrolls up) for when it goes live!

Free Tools For Web Developers ✂️

Some tools and assets to help you build your next project since we are best friends by now (unless this is your first time reading my articles… in that case let’s take things slow):

1. Tailwind CSS Cheatsheet
2. Dracula theme for literally everything on your computer
3. Amazing logos for your next project
4. CSS Framework for Semantic HTML. Try it
5. Generate some patterns maaaaaaan ✌️
6. Pick the perfect palette for your next product
7. Glitch your images

For those of you who don't know, the ZTM team and I list our all-time best free resources here for you. Or... you can go back and read all of the previous issues of this newsletter. That's a joke. Don't do that!

React News 💎

Mostly everyone's favourite frontend library. What crazy things have they been up to?

• React Conf happened and you can watch all of the talks here including the keynote about the newest React 18! Or you can just read the important points here.

• It’s like the React team hates me and decided to release this a few days after I just updated all of my React videos in the ZTM courses with Create React App v4. CRA v5 just came out, and I will be going out in my backyard now to scream to the React heavens for forcing me to have to update my courses yet again. WHY ARE YOU DOING THIS TO ME CRA TEAM! Ok, I’m done.

• A React tutorial which teaches you how to use Search Params with React Router 6. Can’t wait for this knowledge to become obsolete when they release React Router 7.

• What happens when you combine 2 of the most “buzz”, “hype” React words currently together? Remix v1 release with React Server Components. You have reached peak React enlightenment. You can now tell people how React Recoil is old news.

• This came out a few months ago, but it is better late than never (and it’s a good one). An opinionated guide on React architecture (how to organize and structure a React application).

Packing Sand 🧳

Ever thought about packing some sand? Me neither. But I bet you will like Sandpacker (ok, forgive my lame joke but it’s late at night and I’m tired ok?). It’s an in-browser bundler that powers CodeSandbox and has just been open-sourced for everyone to use! With this release, you can use Sandpack to power any live running code on your website. Essentially, you can build your own CodeSandbox which opens up a whole new world of cool things you can build. This is your weekend project idea for the month.

Your Website Score 🚧

It's common knowledge that if you wanted to “grade” your website like you are submitting it for your final high-school exam, there is a nice tool you can use: Lighthouse.

It is usually used for testing performance and best practices during initial page load. But Lighthouse now also has a new user flow API that allows testing at any point within a page's lifespan. Puppeteer is used to script page loads and trigger synthetic user interactions, and Lighthouse can be invoked in multiple ways to capture key insights during those interactions. This means that performance can be measured during page load AND during interactions with the page. Here is a tutorial showing how it all works.

Top Lessons For New Developers 🆕

One of our ZTM grads wrote this great piece. I think many of you will resonate with a lot of the points here: 7 Lessons Learned From My First 6 Months As A Developer. An awesome article by Igor!

State of CSS 💄

State of CSS 2021 survey results are out. The popular State of JS survey will come out in January (there were some delays with this one this year).

P.S. Here is a set of CSS utilities for animating elements as they enter into view (pure CSS) to make your page elements pop with a little flare when visitors come to your site.

Figma to React App 🤯

AWS Amplify announced AWS Amplify Studio: a visual development environment that offers frontend developers new features to accelerate UI development with minimal coding. Amplify Studio automatically translates designs made in Figma to human-readable React UI component code. Within Amplify Studio, developers can then visually connect the UI components to app backend data. My mind is blown.

Defensive CSS 🤬

No MOM! My justify-content is aligned! (Defensive CSS... get it!?… If you didn’t laugh at that then you have no sense of humour because it was hilarious). Ok, back on track here.

We often wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or a weird behavior. Defensive CSS is a collection of snippets that can help you in writing CSS that is protected.

NPM Improving Security 🧱

NPM is trying to solve some of their security issues by forcing all NPM package publishers to have two-factor authentication. Good idea to prevent NPM package hijacking. Here is the press release.

Deno Joins the Club 🐱‍🐉

Deno aims to be the best runtime for the modern JavaScript developer (and I believe it will succeed in taking over the market one day). Deno is fundamentally built for modern JavaScript: Promises, async/await, ES modules and async iterators are all first-class citizens. Therefore this month Deno has joined ECMA International, the standards organization that is responsible for the JavaScript standard. Deno joins TC39 working group! Yey!

Github Improvements 🧞‍♂️

Github is rolling out a technology preview for substantial improvements to searching code on GitHub. It’s still in beta but this is going to make your Cntrl+F command on GitHub much nicer. Read all about it here and join the waitlist.

Love The Environment? 🐝

Do you care about Mother Earth? Do you love trees? Do you want to reduce your website carbon footprint? Is that even a thing? Well, apparently it is. You can use this guide to lower your environmental impact with a carbon budget. Relax everyone, we don’t need to have any environmental debates here... just an interesting read.

History Of Hosting 🕸

I love articles like this one that give you a little bit of a historical context of where we were and where we are now. It gives you a glimpse into the problems we had, and the solutions that came afterwards. This article almost made the Resource of the Month, but lost out to another one you will soon see. For now, I highly recommend you read this.

An Interesting Question 🦹

Imagine you are at an interview and the interviewer asks you: “Why should you use random characters in passwords?”... Think about it for a second. It may surprise you that it’s technically not for security but also kind of is.

A JavaScript Puzzle ♦️

Ok, another interview question for you JavaScript devs: “In JavaScript, how is awaiting the result of an async different than sync calls?”... Think about the answer, then read the solution here. I bet you didn’t answer it exactly like this. Super interesting eh? And now you’re ready for that interview question!

Blitz.js vs Next.js 🥀

Blitz.js can’t find traction and they are proposing that instead of competing with NextJS (which has absolutely blown up in popularity in 2021), to work alongside it, in order to make it a viable project for the future. An interesting way to pivot here by asking the community for their opinion. What do you think?

UI Testing Handbook 🌟

My old coworker Varun wrote this excellent guide on testing your UI. Bookmark it and enjoy it. It’s a guide that highlights UI testing strategies used by scaled front-end teams.

The Future Is Analog 🕹

Digital? The future is Analog. Check out this video about how future computers may be moving to analog. An excellent video for all those tech nerds out there.

New Libraries and Tools 🗿

Just because we had a ton of these this month, I've added them into this section. Check out these shiny new/interesting things:

• Microdiff is a tiny object and array comparison library. It is significantly faster than most other deep comparison libraries, and has full TypeScript support. Pretty cool so check it out.

• Tailwind CSS v3 is out and doing things.

• Vite keeps on improving with the release of v2.7

• Lint your JavaScript with this new library.

News Around the World 🗺

• The Internet is on fire. We can’t talk about the web without including this giant story that has created chaos in the tech world this month. Log4j vulnerability is going to have many more months of consequences. Read what happened here.

• U.S. State Department phones hacked with Israeli company spyware. NSO Group is stirring up a lot of controversy again.

Big Tech News 🏢

• Amazon is continuing to take over everything. We have reported on this before, but another reminder that they are building their own chips to take on Intel and Nvidia. They will make lots of money from this, I am sure, and be able to pay Italy which just fined Amazon record $1.3 billion for abuse of market dominance.

• Hot finding: Apple CEO Tim Cook 'secretly' signed $275B deal with China in 2016. The Diaoyu Islands, when viewed in Apple Maps in mainland China, continue to appear on a larger scale than surrounding territories.

• HashiCorp just went public (You may have heard of them if you are in the DevOps world or use Terraform).

• DeepMind’s New AI With a Memory Outperforms Algorithms 25 Times Its Size. The team explains how they first built their own large language model, called Gopher, which is more than 60 percent larger than GPT-3. Then they showed that a far smaller model imbued with the ability to look up information in a database could go toe-to-toe with Gopher and other large language models.

Completely useless to your career but still great 🙃

• See the biggest search trends of 2021 from Google.

• What is the most and least used emoji? This may surprise you.

• You suck at Origami.

• Average colour of a country. Australia wins best color.

• Play Prince of Persia made entirely with JS.

Best Resource of the Month ✅

Creativity. It’s a skill that is not often mentioned as part of the core skills to be considered a great programmer/software developer. I think it should be. Creativity is something you can develop and it’s something that not only creates extremely interesting humans, but also a skill that sets you apart from the rest. Here is an example of creativity.

Our job as programmers is not only to solve useless problems that have no connection to real life. Our job is to use the skill of programming to create, inspire, and sometimes do meaningless things just for fun. That will create a life worth living… and you will have way more fun along the way. So what is your creative project this month?

Another important skill to add to your repertoire is the skill of critically thinking through problems. How to Think: The Skill You’ve Never Been Taught.

Two amazing resources this month because it’s the end of the year and I like you for being here and reading all the way to this section.

Trick of the Month 🌗

• If you spend a lot of time on Wikipedia, this tool will make reading those articles MUCH nicer.

• This browser extension prevents the sites you specify from appearing in Google search results.

• Step 1: Make yourself sound super important and busy at work. Step 2: Achieve career success.

• A website to help you get past those pesky paywalls on websites.

• Cool CSS effect to try out: Glitch

Don't be selfish. Share this newsletter with your friends. See you next month! Happy New Year everyone ❤️

By the way, I teach people how to code and get hired in the most efficient way possible as the Lead Instructor of Zero To Mastery Academy. You can see a few of my courses below or see all ZTM courses here.