Here is a curated list of the latest posts, blogs and repositories related to JavaScript from last week (week 29). I hope you will find it useful and it will help you to gain more knowledge about what's latest happening in the world of JavaScript.
Let's start!
1. Let’s Build a Pre-render Website with Next.js and Deploy to Vercel
I hope you already know why I chose it as the first post here this week. 😉
Pre-render websites (Server-side rendering) are better for SEO, search engine crawling and social media sharing compared to client-side rendering. In this tutorial, we will explore Next.js to develop a pre-render website using the Static Generation feature, then deploy it on Vercel Cloud.
Link: lets-build-a-pre-render-website-with-next-js
2. Typewriter Animation That Handles Anything You Throw at It
In this tutorial, we will see a more robust JavaScript version of a typewriting animation. The author is going to show that we can animate multiple words just by changing the actual text. No need to modify the code every time you add a new word because JavaScript will do that for you. Enjoy this awesome post with so many demos. 😃
Link: typewriter-animation-that-handles-anything
3. JavaScript Promises: then(f,f) vs then(f).catch(f)
In JavaScript, you can access the fullfillment value or the rejection reason of a promise in 2 ways.
A) Use 2 callbacks on promise.then(fn, fn):
promise
.then(success, error);
B) Or use a chain of promise.then(fn).catch(fn):
promise
.then(success)
.catch(error);
Is there any difference between the 2 approaches? Let’s find out!
Link: javascript-promises-then-vs-then-catch
4. React Context for Beginners – The Complete Guide (2021)
React context is an essential tool for every React developer to know. It lets you easily share the state in your applications. In this comprehensive guide, we will cover what React context is, how to use it, when and when not to use context and lots more. Even if you've never worked with React context before, you're in the right place. You will learn everything you need to know with simple, step-by-step examples.
Link: react-context-for-beginners
5. Simple monorepos via npm workspaces and TypeScript project references
A monorepo is a single repository that is used to manage multiple projects. In this blog post, we’ll explore how to set up a simple monorepo for two npm packages. All we need is already built into npm and TypeScript.
Link: simple-monorepos
6. Building a ‘Table Of Contents’ with active indicator using JavaScript Intersection Observers
This post covers a modern way of automatically creating a table of contents for your blog post that updates with a ‘current position’ indicator. If you are on a ‘desktop’ size screen, I’m talking about the ‘quick links’ you can see below the advert thing on the right of this very post. Clicking a link lets you jump to a section and when that section is in view we highlight it so you can see where you are in the post.
Link: building-a-table-of-contents-with-active-indicator
7. The Color Thief package
Grab the color palette from an image using just Javascript. Works in the browser and in Node.
Link: color-thief
8. What is the Super keyword in JavaScript?
The super keyword can be used for accessing properties and functions on an object’s parent. Previously, accessing a super property (like super.x) was implemented via a runtime call. Starting from V8 v9.0, we reuse the inline cache (IC) system in non-optimized code and generate the properly optimized code for super property access, without having to jump to the runtime.
Link: quickly-service-purpose-using-javascript-super
9. Hyper 3 is finally out!
Hyper 3 is finally out! The primary focus for this release is performance.
The latest version includes several enhancements that make Hyper really fast. For those of us who spend a significant amount of time on the command line, this release is a total game changer.
Link: hyper-3-is-finally-out
10. Easier browser debugging with Developer Tools integration in Visual Studio Code
If you’re debugging JavaScript in Visual Studio Code you probably have used either the Chrome Debugger or the Microsoft Edge Debugger extension. Neither are necessary any longer to debug as JavaScript debugging is now built-in to Visual Studio Code. This does not only mean that you can uninstall these extensions, but we also made debugging more convenient.
Link: easier-debugging-developer-tools-in-visual-studio-code
If you have read or found a quality post or blog recently related to JavaScript that you will like to be included in the GitHub repository, then please submit a PR here:
- palashmon/awesome-js-posts ( 240 Github ⭐ )
Also, if you liked this article, be sure to ❤ it.