Awesome JavaScript Posts (Week 28)
Tags: javascript, beginners, webdev, programming
Published: 2021-07-26 17:16:44

Here is a curated list of the latest posts, blogs and repositories related to **JavaScript** from last week (week 28). 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. Building A Dynamic Header With Intersection Observer

Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the viewport — or perhaps in and out of the viewport itself? In JavaScript, attaching an event listener to constantly fire a callback on the scroll can be **performance-intensive**, and if used unwisely, can make for a sluggish user experience. But there is a better way with **Intersection Observer**.

Link: [dynamic-header-intersection-observer](https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/)

### 2. The Ultimate Guide to Browser-Side Storage

Browsers have evolved over the past three decades so it’s not surprising they offer a multitude of storage APIs which essentially do the same thing. It’s not always easy to find the *best *option and you may have to combine several depending on the functionality you’re implementing. Here is the ultimate guide to browser-side storage. 

Link: [the-ultimate-guide-to-browser-side-storage](https://blog.openreplay.com/the-ultimate-guide-to-browser-side-storage)

### 3. Freelance React Developer Checklist

Essentially this checklist makes your **onboarding as a React freelance developer** more seaming-less when entering a new project and team because before a company can **hire you as a React freelancer**, both sides need to talk through this checklist to get their requirements aligned.

Link: [freelance-react-developer](https://www.robinwieruch.de/freelance-react-developer)

### 4. Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1)

The Vue team has recently released the highly anticipated migration build for Vue 3. If you’ve been thinking about upgrading your **Vue 2 app to Vue 3**, this is what you need. The process of upgrading an app to the latest version of the framework can be a daunting task. This article series is created to make that process ***easier***.

Link: [vue-3-migration-build](https://www.vuemastery.com/blog/vue-3-migration-build/)

### 5. How To Migrate From jQuery To Next.js

In this article, we’re taking a closer look at different approaches and strategies on how we can migrate a web application that uses the **jQuery** framework, and start using one of the coolest **React** frameworks in the market: Next.js.

Link: [migrate-jquery-nextjs](https://www.smashingmagazine.com/2021/07/migrate-jquery-nextjs/)

### 6. New Tailwind App CLI

A zero-configuration cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications. Set up a tailwind app with

```yaml
# install the CLI globally
npm install -g new-tailwind-app

# use it with npx (recommended)
npx new-tailwind-app [app_name] --flag

# create a react.js tailwind app
npx new-tailwind-app [app_name] --react

# create a react.js tailwind app with prettier
npx new-tailwind-app [app_name] --react --prettier
```

Link: [new-tailwind-app](https://github.com/msaaddev/new-tailwind-app)

### 7. Using Redis with Node.js

**Redis** is a super fast and efficient in-memory, key-value cache and store. It’s also known as a data structure server, as the keys can contain strings, lists, sets, hashes and other data structures. This tutorial explains basic Redis data structures and interactions, as well as several common use cases using the **node-redis** library.

Link: [using-redis-node-js](https://www.sitepoint.com/using-redis-node-js/)

### 8. How to convert arrays to human-readable lists in JavaScript

Oftentimes, you might end up in situations where you have an array and you just want to deflate the entire array content in a **human-readable form**. Or more specifically in a **list-like format**. This tutorial explains how would you achieve this.

Link: [convert-arrays-to-human-readable-lists-in-javascript](https://www.amitmerchant.com/how-to-convert-arrays-to-human-readable-lists-in-javascript/)

### 9. How to Structure a Large Scale Vue.js Application

What is the best way to structure a **Vue.js application** so that it scales and remains maintainable and extendable the more it grows? This is a question that I've heard on numerous occasions and I think one answer to that question lies in the **principle of predictability**. When it comes to creating a scalable project you want everything about it to be as predictable as possible.

Link: [structure-a-large-scale-vue-js-application](https://vueschool.io/articles/vuejs-tutorials/how-to-structure-a-large-scale-vue-js-application/)

### 10. The Road to Ember 4.0

In his EmberConf 2021 keynote, Yehuda shared a name for Ember's next edition: **Polaris**. In order to unblock Polaris providing the best, most productive experience the Ember project can build, we're going to remove already-deprecated APIs in a 4.0 release. **Ember 4.0 will be released around September 20th**.

Link: [the-road-to-ember-4-0](https://blog.emberjs.com/the-road-to-ember-4-0/)

<hr/>

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: 

- https://github.com/palashmon/awesome-js-posts

Also, if you liked this article, be sure to ❤ it.

## Happy Coding!