Web Developer Monthly 💻🚀

35th 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 May 2021 as a Web Developer…

CSRF, CORS, and HTTP 😈

With an increasing number of breaches, intrusions, and data thefts, securing a web application is extremely important. On the other hand, programmers often do not have a strong grasp of how attacks work and how to mitigate them. This post attempts to close that gap a little. In this article you will learn in detail what all the Cross-Site Request Forgery, Cross-Origin Request Sharing jargon means, and how to use them properly to secure your web applications.

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. Unique Face Generator with free tier
2. Repository with a collection of services with great free tiers for developers on a budget
3. Get inspired: A list of 100+ handpicked personal websites
4. Presentation slides for devs
5. Free artsy illustrations for your next project
6. Landing page inspirations
7. Daisy UI - pretty CSS components
8. Some boring avatars

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 34 of the previous issues (can you believe we're almost at 3 years of Web Developer Monthly?!). That's a joke. Don't do that!

Shiny Node.js 🧩

If you have been following ZTM, you know that we just launched a massive NodeJS course (and we just added a big section on security). It's always good to stay up to date with the latest features of Node, and in this youtube video you can learn about what is next for Node.js, new features, major changes, and what’s controversial.

On a related node (get it!?), people are excited about being able to run Node in the browser with this: WebContainers

Google Ranking Changes 🥉

This is big news for those worried about Google search rankings. The Google Page Experience update is launching. Essentially, the page experience (performance, accessibility, etc) will have bigger impact on rankings.

The update will take expected user experience into consideration for ranking in search results.

Google will also test showing a “visual indicator that highlights pages in search results that have great page experience”. Read the full breakdown here.

React News 💎

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

• Mantine which I first read it as "Man Time" and thought to myself "wow, that's a weird way to brand your React component library" is a nice little new React component and hooks library.

• A while back, I wrote about Rome and how it could be a big player in the future. Rome is an end-to-end development toolchain. It was started by the person who created Babel back in the day. They consolidate dozens of separate tools into one, with support for JavaScript, TypeScript, HTML, and CSS. Rome can install your dependencies, check your code for errors, run your tests, bundle your code, and more, all via a single CLI. Well, now they turned it into a VC money backed company. Lot's of money flowing into the JS tooling space lately.

• A Visual Guide To React Mental Models

• Everything you wanted to know about building forms in React.

• An excellent article on 5 advanced React patterns.

All about <img> 🏞

Everything you ever wanted to know about loading <img> on a web page. They are usually the heaviest elements on a page so being able to deliver them in a smart and efficient way, is vital to the user experience on your website. Learn it all here.

10 Years of JavaScript 🧙‍♂️

JavaScript has come a long way and in this article the author teaches you all the major changes that happened to the language in the past 10 years with runnable code.

A fun discussion around JavaScript evolution and this article can be found here as well.

Cutting Edge CSS 👨‍🎤

Do you want to scoff at other people that don't know the latest and greatest technologies? Do you feel that people don't know how to make a proper cup of espresso? Do you wear a beanie in the summer? Then this article is for you: [A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors]((https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals). Also a guide to the experimental Container Queries.

While we are here, here is a great list of tips to just do things right with CSS. If you enjoyed that, this person also did an HTML version of this.

WebComponents At Github 🍇

"We chose to use Web Components because our codebase was already structured into component-like behaviors. Still, as the GitHub monolith grew in size, we saw the need to implement better encapsulations before the front-end became unmanageable – and Web Components fit the bill. Web Components offered better portability and encapsulation than our existing JavaScript behaviors. We were happy to experiment with Web Components alongside our existing front-end infrastructure since it doesn’t incur any upfront cost or “buy-in” to a specific framework." Read the full reason they are using web components here.

Why You Should Use React Native 🔥

A lot of students ask what technology to use when they want to build a mobile app. Time and time again, my answer is React Native. Why? Luckily these people helped answer why:

10 Big apps that use React Native.

Oh ya, and Coinbase just wrote how they fully transitioned to React Native.

If you have used any of the above apps, you will know that they run really smoothly despite the "React Native is not performant enough" argument.

Weekend Project Ideas 🧰

Bomberjam is an artificial intelligence programming challenge. Players control a bot using the programming language of their choice. Four bots fight in a 2D grid. The bot with the highest score wins. One player can get points by destroying blocks, hitting another player and being the last player alive.

Started kit is provided here. This looks like a fun one!

Seriously, Play This 🤹‍♀️

This is so much fun. Take 20 minutes and play this: It is a mystery game where your goal is to solve a debugging problem! You'll collect clues, interpret evidence, and ultimately solve the Case of the 50ms Request!

In the sidebar, you'll notice a "What you know" list. As you collect more clues, the list will update with what you've learned.

If you enjoyed the game, then you can play a few other debugging games here.

Data Transformation in JS 📡

Not much to say here other than that this is a useful article of common data transformation functions you can use in JavaScript without using an external library: 9 single-statement JS algorithms for common data transformations.

The Future Of JAMStack ☄️

What's happening with JAMStack and where is the future headed? This is a fast evolving space and this article gives you a breakdown of what you need to know and what to keep an eye out on. Fun fact: this website is run with the JAMStack.

50 UI Tips 🎍

An excellent free book that shows you quick and easy 50 UI Tips. Enjoy it and thank the author!

V8 Sparkplug 💥

V8 engine which used to have the two compiler model that made it so fast (using TurboFan and Ignition) are now adding an extra step in between: Sparkplug to make things even faster. Read how it works here.

Angular 12 🏎

Angular is chugging along, and with this latest release, they now have "Ivy Everywhere". Ivy is the new rendering engine we have discussed before in this newsletter and this latest release deprecates the old View Engine. A few other new features and changes can be found here. Quick question, do you want to see an Angular course from ZTM? If so, tell me here.

Amazon vs Cloudflare 🧳

Amazon announced a new product: CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale. This is very similar to Cloudfare Workers. Essentially it allows you to run lightweight JavaScript code at the CDN edge locations around the globe. Keep an eye out on this space.

Bootstrap 5 Is Here 🙆‍♀️

Bootstrap 5 has officially landed! After three alphas, three betas, we can finally say that Bootstrap is recommended for production. If you want to read all the changes from the previous version, head on over here

Selection API ✍️

Do you ever want to mimic the editing selection capabilities that blog platforms like Medium have? Did you know that it is a fairly simply feature to implement with the Selection API? Here is how to do it.

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 10.2 is here with faster everything.
• Deno 1.10 is here with some new shiny things.
• The trend of writing JS tooling in languages other than JS (especially with Rust) is continuing. This time from Parcel 2.
• Wordpress just turned 18! Off to college they go...
• Jest 27 is here with some new defaults!

News Around the World 🗺

• The ripples created by the widespread Spectre vulnerability, which impacted a multitude of processors and devices in 2018, are being felt to this day. Security researchers have discovered several new variants of the flaw that, while difficult to carry out, would be tricky to mitigate. The three new types of potential Spectre attacks affect all modern AMD and Intel processors.

• Colonial Pipeline was hacked and hackers made a bunch of money but also apologized for creating the chaos that ensued.

• Neural implant lets paralyzed person type by imagining writing.

Big Tech News 🏢

• Google will be implementing a "hybrid" approach to work by combining remote work and in-office work for their employees. Google is also working towards removing the need for passwords on the web and mobile. Allllsooo, Google AMP is dead! AMP pages no longer get preferential treatment in Google search. You can tell Google had a big announcement month because there is one more cool thing to report.

• Twitter is introducing a bunch of new features after being stagnant for a while. This one, apparently makes you rich by just tweeting.

• Microsoft is finally pulling the plug. The Internet Explorer desktop application will be retired on June 15, 2022. Also, Microsoft has built an AI-powered autocomplete for code using GPT-3

• If you have an Amazon Alexa, you have just a few days to turn this feature off.

Completely useless to your career but still great 🙃

• Play Tetris where the next piece is always the worst piece (written in JavaScript and source code is available).

• Scroll and see what happens.

• Make Captcha Great Again with Doom.

Best Resource of the Month ✅

The importance of humility in software development. I see it a lot as people in software become more and more "senior" or what they think it means to be "senior". The ones who maintain their humility have a far greater chance of success than those that forget humility. Here is an excellent discussion on hackernews around this topic. My favourite comment:

I started attending college a year ago. At that time, I didn't know much about programming: just a bit of C and some Python - enough to make first year college projects. After I started frequenting HN, I came across a lot of comments by developers on programming languages, toolchains, libraries, etc. Even though I didn't understand their arguments, I still believed what they said, because I thought they were experienced, so they must be right. Even though I hadn't used the tools personally, I started developing premature opinions on them: Java is verbose, so it must be avoided, PHP is inelegant etc. These opinions also gave a feeling of security: because I thought that I had chosen the right language for programming (Rust!), the right operating system, the right text editor (vim), and the right window manager (i3). This made me arrogant, because I saw myself as above my classmates, who were still using 'inferior' tools and still struggling to grasp the concept of command line arguments. Over time, I realised that I was just basing my beliefs on HN comments, and it is not healthy in the long run. This article helped me a lot towards realising that. Thank you for posting this article :)

Trick of the Month 🌗

• An add-on based on the new WebExtensions technology and will automatically remove tracking elements from URLs to help protect your privacy.

• If you are a Mac user, you NEED THIS.

• 5 developer tools for detecting and fixing security vulnerabilities

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.