Web Developer Monthly 💻🚀

38th 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 August 2021 as a Web Developer…

How To Become A Knight 🗡

Do you want to be a Knight? Do you love/want to love flexbox? If you answered yes to both of these, then you are in for a tasty treat. Now you can enjoy learning while playing games: Knights of the flexbox table "Leave me along mom! I'm studying!"

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. TailwindCSS components you can copy and paste
2. Blobs for... actually I don't know why, but why not?
3. Some free high quality assets for your next project
4. Figen - Post cover and background generator tool
5. Translate code to common English
6. Pretty Buttons Generator
7. Open source illustrations for all your needs

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 37 of the previous issues. That's a joke. Don't do that!

git switch and git restore 🚏

In version 2.23 of git, two new commands have been introduced to replace the old git checkout (it is still available, but people new to git should start with these new ones preferably). As you would expect, they basically each implement one of the two behaviors of git checkout, and splitting git checkout in two. Read all about it here.

React News 💎

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

• Try to say this fast 5 times: "Render props, Render props, Render props, Render props, Render props". Ok, now go read this. Once you're done with that, then check this out.

• Learn about the use case of iterating over React children and the ways to do it. In particular, you will deep dive into one of the utility methods, React.Children.toArray. An interesting read.

• Some new React Native updates: version 0.65 with a new version of Hermes, improvements to accessibility, package upgrades, and more. More updates coming in the second half of the year to React Native so keep an eye out on this space.

• Did you know that React is part of the Ruby on Rails stack as well?

The Future Of Web 🛰

The web of today looks a lot different than it did 10 years ago. Amazing things that you could only do in a desktop app (I'm looking at you Photoshop), can now be done inside of the web browser, giving more people around the world access to powerful tools. This article gives us a perspective of what we have now, and what the future of the web might look like. All I can say, is that it's a good time to be a web developer (or become one if you aren't already)!

1/2 Image 🎑

Halve the size of images by optimizing for high density displays... A great tutorial on how to optimize your images for the user's screen sizes. Full of fun little demos. Check it out here.

Hot Seat: Safari 🏜

Is Safari the new Internet Explorer? This hot take on the Safari browser and why it is lagging behind the other browsers in adopting new features is an interesting one. Is it a bug or a feature of Safari? Safari is killing the web.

Fun fact: Internet Explorer 3.0 was released 25 years ago.. here is the story behind it.

WebRTC In A Nutshell 📞

Everything you ever wanted to know about WebRTC that is important. WebRTC stands for Web Real-Time Communication. The key concept to WebRTC is that it’s meant for direct connection. This means that after the connection has been established, in most cases, you don’t need any sort of server being involved in data transfer. That translates to faster transfer speeds. This fact makes it the best choice right now for audio/video streaming or creating P2P networks like Torrent. Read the full tutorial here.

JavaScript UIs That Don't Break 🗜

Things on the web can break — the odds are stacked against us. Lots can go wrong: a network request fails, a third-party library breaks, a JavaScript feature is unsupported (assuming JavaScript is even available), a CDN goes down, a user behaves unexpectedly (they double-click a submit button), the list goes on. This article breaks down how we can build resilient JavaScript UIs.

Deno News 🦕

It's time to run deno upgrade again! Deno 1.13 is out!

Also, you can find Deno on MDN now!

That's it. I just wanted its own section since I love Deno. Carry on...

Visualizing a Codebase 👨‍🎤

This one is really cool: How can we “fingerprint” a codebase to see its structure at a glance? The above article explores ways to automatically visualize a GitHub repo, and how that could be useful.

MDN’s Autocomplete Search 👓

A really fun read on how to implement autocomplete search like you can find on the MDN website. They even provide the code for you at the end. Enjoy!

NodeJS Security 🦋

If you have taken our Complete NodeJS: Zero to Mastery course, then you don't need this since we already cover it all... but if you continue to ignore that excellent course (not biased at all), then check out this NodeJS Security Cheatsheet.

Weekend Project Ideas 🧰

Are you kidding me? You have no time for a weekend project. Go finish off that CSS flexbox Knight game at the top!

Does JavaScript Need More? 🆘

JavaScript needs more helper functions for iteration (map(), filter(), etc.) – where should we put them? Here is an idea by everyone's favourite JavaScript expert.

Idioms maaaaannnn ✌️

No idea what idioms are? Think of it as short snippets of useful things. Check out this massive list of programming idioms.

Accent-Color 👛

CSS accent-color property from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements. accent-color: hotpink; should now be your most used CSS line.

Ps, Microsoft and Google are working together to bring CSS import just like in JavaScript. CSS module scripts

HTTP3 💥

Did you know HTTP 3 is a thing? Here is a breakdown of the concepts and what to expect. All about that QUIC.

Did you know that the old "single file big bundle of JavaScript" is no longer the best practice that it was a few years ago thanks to HTTP2 (which is now the norm)? If that sentence confuses you, read this.

Align Align Align 🎯

A simple concept that is surprisingly hard to do and that all of us have encountered at least once in our career. How do you align text inside a button?

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:

• Yarn 3.0 is here! With this one, they hope to upset a lot less developers than when they released Yarn 2.0.

• React Hot Toast 2.0 is here for all your toasty needs.

• Vue 3.2 is here as well y'all!

• NextJS 11.1... so many NextJS versions, it's getting exhausting.

• Build interactive maps with https://leafletjs.com/

• TypeScript "more obscure features you will never use" 4.4 release.

News Around the World 🗺

• Vue.js is Wikimedia (that Wikipedia) Foundation's official choice for adoption as future JavaScript framework for use with MediaWiki.

• This is why online privacy is important. Afghans scramble to delete digital history, evade biometrics.

Big Tech News 🏢

• Apple got in REAAAALLLY hot water this past month by announcing something that had good intentions but could open the door to dire consequences on privacy. A must read.

• Twitter announced the first ever algorithmic bias bounty challenge. Finding bias in machine learning (ML) models is difficult, and sometimes, companies find out about unintended ethical harms once they’ve already reached the public. Twitter is trying to change that with this new challenge. Good timing since we recently released a Bug Bounty and Web Security course here on ZTM!

• Square acquired Afterpay for a measly 29 billion dollars...everyone is getting in on the micro-lender game.

• Intel will start building Qualcomm chips and it laid out a roadmap to expand its new foundry business to catch rivals such as Taiwan Semiconductor Manufacturing Co (TSMC) and Samsung by 2025.

• TikTok overtakes Facebook as world's most downloaded app.

Completely useless to your career but still great 🙃

• Start drawing.

• The very first 2 hours of MTV.

• Astronomy Photographer of the Year shortlist... just WOW.

• Procedurally generated fish drawings because drawing fish by hand is lame.

• Why Your Windows Hard Drive Uses The Letter C:

• Classic JavaScript weirdness that is completely useless to your career but still great. This is exactly what this section is for.

Best Resource of the Month ✅

DevOps, SRE, and Platform Engineering. These hot new titles have become more and more commonplace in our industry. There is one problem though. Nobody actually knows what they all mean (or at least 99% of people), and many people want to learn "DevOps" without actually knowing what knowledge that even requires. Now you can pretend to be smarter than everybody else by actually knowing the definition and differences between these 3 things.

Even if this may not be directly related to this newsletter's industry, it's something you will encounter in your career so I recommend you read this one!

Trick of the Month 🌗

• Want a faster browser? Maybe it's your plugins...

• Using the new in-built JavaScript debugger in Visual Studio Code, you can use the browser developer tools console right inside the editor.

• Just a reminder from last month's newsletter... this now exists.

See you next month!

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.