[June 2021] Web Developer Monthly 💻🚀

36th 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 newsletter is focused on keeping you up to date with the industry, keeping your skills sharp, 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 June 2021 as a Web Developer…

JavaScript On WebAssembly ⚙

Whenever you’re running JavaScript, the JS source code needs to be executed one way or another as machine code. This is done by the JS engine (i.e. V8 engine) using a variety of techniques such as interpreters and JIT compilers. JITs are how the browsers made JS run fast and brought in the "Web 2.0" movement, but you can’t really run JIT compilers inside of a WebAssembly module. So what is the solution? This is a great technical read that I highly recommend.

If your head hurts after that read, you can always test how much JavaScript weirdness you know.

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):

Mobile color palette generator
Create custom avatars!
Vector icon pack for all of your projects
Face, hand, and pose tracking to your frontend projects
Paper ideas for your early designs
Free resume templates
Copy-paste CSS buttons
Tint my 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 35 of the previous issues (we're only 1 month away from 3 years of Web Developer Monthly?!). That's a joke. Don't do that!

ES2021 Debut 🎊

ES2021 is official! Want to know what features being added to the JavaScript spec for this year? Here is a short and quick list.

React News 💎

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

The big news this month is that React 18 is coming to town! Here is the official announcement. You can also read this article that breaks down the important changes, or you can watch a video.
I usually don't get too excited about early tools and technology (last time I did was with the Deno v1 launch), but I can see this really taking off for React development: Utopia.
Top React Component Libraries to use in 2021!
A nice opinion piece on why you may want to stop using React.
From time to time React components have to perform expensive calculations like filtering a big list. In such cases, with care, you can try to improve the performance of your components using the memoization technique: how and when to use the useMemo() React hook.
This is a really cool way of testing your React applications.
How to make React components more intuitive?

Scaling Vue 🧩

Vue.js is definitely growing in popularity and is now an established framework for building applications. In this article, the author shares a project they have been working on over the last 3 years and they go through different technical points such as the modular architecture, micro-frontends, component’s state management, TypeScript, Vue 3, including how it all fits when it comes to scaling a large Vue applications.

If you like that article, check out our Vue Developer Career Path.

HTML, CSS > JS ⛱

HTML and CSS techniques to reduce your JavaScript! In this article, you will explore some of these native solutions that are available to the majority of your users through HTML and CSS instead of bloating things with JavaScript.

Google Fails Its Own Test 📉

Google is currently reworking its search algorithm to include Core Web Vitals as part of its search algorithm, which is putting a lot of pressure on web developers to improve page speeds.

It's causing a fair amount of panic, because 96% of sites currently fail the test. Our team can definitely relate - it's been quite the battle around here. Anyone else feel like they are chasing their own tail a little bit 🤔?

It sure seems like it as someone on Reddit tested Google's subdomains and discovered something fascinating: most of Google's sites fail the test too. I guess the rest of us don't have to feel so bad.

PS. If you want to improve your Lighthouse score metrics, here is a nice little guide.

The State Of Serverless 🧱♂️

Serverless has gained traction among organizations of all sizes, from cloud-native startups to large enterprises. With serverless, teams can focus on bringing ideas to the market faster — rather than managing infrastructure — all while paying for only what they use. In this report, they examined millions of functions run by thousands of companies to understand how serverless is being used in the real world.

Key takeaways:

Azure Functions and Google Cloud Functions are gaining on AWS Lambda
Python is the most popular Lambda runtime followed by Node.js
Lambda invocations are much shorter today than a year ago

SEO Scam 👨‍🎤

This is a fun little read about how SEO works and also how it can be abused. The top-ranking HTML editor on Google is an SEO scam and this article exposed it. Some highly-ranked online tools for editing or “cleaning” HTML seem to be secretly injecting links into their output to push themselves and affiliated sites up the search engine rankings. Google has now removed these editors because of this article.

Astro Makes Waves 🌊

"Ship less JavaScript" has been the hot new war cry for the last few years. In an effort to continue with the hype, Astro is born. Astro is a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. The one thing that this has going for it, is that it's from the creators of SnowPack and SkyPack. Keep an eye on them.

Deep Dive JavaScript 🔥

Do you love getting into the weeds of a topic and really diving deep? Do you love JavaScript? Then you are going to love this free book: Deep JavaScript

Weekend Project Ideas 🧰

Trust me on this. If you have the time this weekend, dive into this little tutorial and build a cool spinner effect. I guarantee you this is the most fun/impressive thing you will build this weekend. Take a look at the demo and tell me that isn't mesmerizing.

New Chrome Dev Tool 🤹‍♀️

The Chrome Dev Tool now has a new thing you can play with: the Memory Inspector! It has landed in Chrome 91. It allows you to inspect your ArrayBuffer, TypedArray, DataView, and Wasm Memory. Here is a rundown of how you may want to use it to test your applications.

Easy Open Source Contribution 🌸

This is a list of projects which have curated tasks specifically for new contributors. These are a great way to get started with a project, or to help share the load of working on open source projects.

Console.log Fu 🥋

The console is the built-in debugger of the browser. Many developers use console.log() all the time to print messages and debug problems in their code. However, this tool has a lot more to offer than you may have ever realized... learn about it here.

History Of The Web 🎞

This is a great article giving an overview of where we started and where we are now. Context is everything.

Error Cause 💥

A new ECMA Script proposal to have chainable errors. Why would we want to do this and where can this be useful? Here is the idea and why it may land soon officially as part of JavaScript

Parsing In JavaScript ⏳

If someone asked you in an interview what "parsing" is, would you be able to answer that? Even if you could, this article will be useful to understand how parsing works, why it is needed, and everything you wanted to know about parsing in JavaScript. Enjoy!

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:

Next.js 11 is out! Two new features to keep an eye on:

1. Create React App Migration: Automatically convert Create React App to be Next.js compatible.
1. Next.js Live: Code in the browser, with your team, in real time.

Graph CDN is out!: GraphCDN is the CDN for your GraphQL API and is created by 2 very established developers. Keep an eye on this.
Vue 3.1.0 Pluto is coming to town!
Deno 1.11 has some big updates like the stable deno lint command and official docker images.
Speaking of Deno.. there is now DenoDB for all of your database needs when working with Deno!

News Around the World 🗺

U.S. to give ransomware hacks similar priority as terrorism.
This is a pretty funny and easy way a hacker got access to EA Games code by just using Slack.
El Salvador becomes first country to adopt bitcoin as legal tender.

Big Tech News 🏢

Prosus (the primary shareholder of Chinese gaming mega co/WeChat developer, Tencent) will acquire Stack Overflow for $1.8 billion.
Apple, Mozilla, Google, Microsoft form group to standardize browser plug-ins. The new WebExtensions Community Group will try to forge a common architecture for future web extensions.
You may have heard that there is an overall chip shortage. Companies and countries are looking at ways to avoid this in the future, or being too reliant on one company. In that effort, Bosch has decided to open a German chip plant.
Apple had their World Wide Developer Conference. Here are the 15 biggest announcements from the event. iCloud Private Relay is probably the coolest announcement.
Nvidia had a crazy impressive announcement: Nvidia Canvas.
Microsoft has become the second company after Apple to reach a $2 trillion market cap. Just in time for the new Windows 11 announcement.

Completely useless to your career but still great 🙃

Real-Time Strategy game where you control your units by writing JavaScript code.
This website renders every single road within a city. See if you can figure out how they do it.
This may be the best website I have ever seen in my life.
People ruin everything.

Best Resource of the Month ✅

Do not feed the thought leaders . This was my favourite article from this past month. It contains some valuable lessons. My favourite one was, Ignore Universal Solutions:

"Software development is full of confident forecasters. We are a pretty new field, and yet everyone seems so sure that they have the best solution to whatever problem is at hand. I’d like to hear more people saying things like, “in this specific context, test-coverage seem like an important metric,” or “StopLang is great if you can afford the GC, but if you can’t, then you should look at IronOre.” A great tool is not a universal tool it’s a tool well suited to a specific problem."

Trick of the Month 🌗

Dev chat over SSH!
Convert an image of code to actual code!
Brave has created a new search engine to compete with Google. You can make it your default search even on chrome to keep your privacy. This is now my default search and so far the results have been great! Here is their official announcement.

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.