JSK Weekly - November 18, 2020

As we edge over the halfway mark for November, if you're looking for some good reading material to see you through the laid back days in the festive season, David Attard has put together a wonderful list of books that have enough evergreen content to make them worth keeping in "9 (FREE) JavaScript Books That Are Well Worth Reading." on Bits and Pieces.

Other highlights this week include Theodoros Mathioudakis' "How to emulate a “Constructor” in React Functional Component with Custom Hooks" and "How to Build Desktop Applications using Electron the Right Way" by Juan Cruz Martinez.


Array.Reduce() - Think Twice Before Using it!

Let's take a look at how we can write the above code in a more readable manner without using the reduce() method. const g = new Map();for (const [u, v] of edges) { if (!g.has(u)) g.set(u, []); if (!g.has(v)) g.set(v, []); g.get(u).push(v);} When we read the code from top to bottom, we understand that it creates an empty Map for the graph.

Authored by: Bit

Warp: Improved JS performance in Firefox 83 - Mozilla Hacks - the Web developer blog

We have enabled Warp, a significant update to SpiderMonkey, by default in Firefox 83. SpiderMonkey is the JavaScript engine used in the Firefox web browser. With Warp (also called WarpBuilder) we're making big changes to our JIT (just-in-time) compilers, resulting in improved responsiveness, faster page loads and better memory usage.

Authored by: Mozilla Hacks

How A Full Stack Framework Can Make An Impact In Your Business | Hacker Noon

It's been a year since the exhibition of QCObjects in the Web Summit and now a lot of people and companies are interested in placing QCObjects at the very core of its enterprise software solution. But why is it? Think for a moment about what is what a CIO of a big company should be looking for...

Authored by: Hacker Noon

How to Build Desktop Applications using Electron the Right Way

If you are like me, you love JavaScript and its ecosystem, and you have been building amazing web applications using frameworks like React or performant web servers with NodeJS . Now you want to develop a desktop application, and you don't want to learn a new programming language, or perhaps you want to re-use as much as you can from existing web projects.

Authored by: livecodestream

Top NextJS Boilerplates for 2021

Boilerplates are the minimal reusable code that is common and required across all applications. They can be thought of as a reusable "glue" for components. Combining them with independent reusable components boosts delivery and, quite simply, makes coding much more enjoyable. In this article, we will learn about some of the popular NextJS Boilerplates.

Authored by: Bit

Mock APIs: Different Techniques for React and Angular

In web development, specialization improves productivity. In line with this, we can find developers who specialize in frontend or backend. However, splitting work and combining them to deliver functionality isn't that easy when it comes to development. But the good news is, there are proven techniques that work in these circumstances.

Authored by: Bit

The Fetch API Cheatsheet: Nine of the Most Common API Requests

Almost every project needs to communicate with the outside world. If youʼre working with JavaScript frameworks, you'll most likely use Fetch API to do that. But when you're working with the API, do you remember the syntax by heart or do you need a little help? I have written many

Authored by: Ondrabus


Stranger Things alphabet wall scene using vanilla JavaScript

If you're a Stranger Things fan like me then I need explain no further, you understand exactly what we are trying to make here right ? Recall Season One, Will vanishes but remains near his house in the other dimension, uses the Christmas lights set up at his house by his mother to warn her of the demons and tells her to RUN.

Authored by: JavaScript In Plain English

JavaScript Decorators From Scratch

A decorator is simply a way of wrapping a function with another function to extend its existing capabilities. You "decorate" your existing code by wrapping it with another piece of code. This concept...

Authored by: Bit

Build an Accessible Web App with HTML, Sass, and JavaScript

Are you looking for another web app project to build? Are you interested in incorporating accessibility into your websites? Do you want to learn more about creating mobile first apps? If you answered "yes" to any of those questions, you will like the new tutorial we released on the freeCodeCamp.

Authored by: Beau Carnes

9 (FREE) JavaScript Books That Are Well Worth Reading

So when you consider a book on JavaScript, or any language, you have to shop smart. You have to find books that have enough evergreen content to make them worth buying instead of using your favourite programming websites for free. We think the following 9 JavaScript books have enough to make them worth keeping.

Authored by: Bit

3 Ways to Check if a Variable is Defined in JavaScript

How to check if a variable is defined in JavaScript using typeof operator, try/catch blocks, or window.hasOwnProperty().

Authored by: Dmitri Pavlutin


Making Sense Of TypeScript, In 50 Lessons

Meet our new book, "TypeScript in 50 Lessons", a deep-dive to understand what TypeScript is, how it works, and how you can make it work for you. With code walkthroughs, hands-on examples and common gotchas. 464 pages. Jump to the table of contents and get the book right away.

Authored by: Smashing Magazine


Adjusting Dates By Adding Date / Time Parts In Angular 11.0.0

Over the past week, I've had fun exploring dates in Angular. First, when I stumbled upon the formatDate() function that ships with Angular core; and then after, when I demonstrated how to recreate the Moment.js .fromNow() functionality in Angular.

Authored by: Ben Nadel

How To Translate Dynamic Strings In Angular 10

I am using some dynamic values to create a string and sending that to sweetalert2 configuration. There are a lot of ways we can translate the title text before passing to sweetalert2 but it is getting difficult when we have dynamic values in the title itself.

Authored by: patelatit53


React Redux Made Easy.

I personally believe that state management is still a huge mess because no matter what you do, as your project Grows no matter what you used, it will become difficult to manage state and the project structure overall.

Authored by: Raja Osama🔮

Building a Secure Mobile App With React Native

With the total global mobile app revenue estimated to amount from $365 billion in 2018 to $935 billion in 2023, undoubtedly mobile app development has become one of the thriving sectors for investors...

Authored by: Sophia Martin

How To Embed VSCode Into A Browser With React

To explain why TypeScript is important, you need to explain why developer tooling is important. To explain why developer tooling is important you will need a code editing environment. Fortunately the editor for VSCode (monaco editor) is open source, and feels just like VSCode.

Authored by: Matthew Caseres

4 Tips Beginner React Devs Should Follow

Okay, so when I say Server Side rendering, I also mean quite a few things related to it. For instance, NodeJS and webpack. You obviously wouldn't bother rendering your react app server-side as a beginner when you're still figuring out how react works and it's fine.

Authored by: DEB

The React Beginner's Handbook

React is one of the most popular JavaScript frameworks ever created, and I believe that it's one of the best tools out there. The goal of this handbook is to provide a starter guide to learning React. At the end of the book, you'll have a basic understanding of: What

Authored by: freeCodeCamp.org

Configuring prettier and eslint plugins for React from scratch

Hi everyone, how are you? Today we are going to configure the prettier and eslint plugins for a React project from scratch. We will be using VSCode as the default IDE, and all of the extension links in the below section will point to VSCode extensions.

Authored by: Anuradha Kumari


How to redirect to external URL in Vue

In this tutorial, we are going to learn about how to redirect to an external URL in the Vue Router. Normally, we redirect a user to a different page on the same site by using the following method: Suppose we have a /contact route in our vue app, when a user visits the /contact page we need to redirect them to an external url https://www.google.com/contact/ instead of the same domain redirect.

Authored by: Sai gowtham

What's New In Vue 3?

Vue 3 comes with a lot of interesting new features and changes to some of the existing ones that are aimed at making development with the framework a lot easier and maintainable. In this article, we're going to take a look at some of these new features and how to get started with them.

Authored by: Smashing Magazine

How to Add A Chatbot To Your Vue.js Apps

In this post, we will be learning how to add chatbots in Vue.js apps. Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. To get started, you would need a Dialogflow chatbot or working knowledge of Dialogflow and Vue JS. To integrate the chatbots with Vue.js, you will need a Kommunicate account.

Authored by: JavaScript In Plain English


How To Log Like A Boss With Node.js

Last couple weeks were tough for me. The reason behind the challenging and long working hours for weeks was launching the new version of a backend which had been developed for seven years. From day to day until this September, the codebase got bigger and bigger with every new features and their bug fixes.

Authored by: JavaScript In Plain English

Handling Async Operations in Node.js

After a lot of digging, I understood how node.js internally works. This blog is based on my researches, stay patient to deep dive!😁 Okay! So let's understand first what Node.js is 🐘. The documentation says: "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine ."

Authored by: JavaScript In Plain English

Libraries and Tools

Top 5 React state management libraries in late 2020

So, less than 2 months left and 2020 will be over! What an amazing year this was, wasn't it? 🙃 Enough of this sarcasm. I think we all know the reality. I only brought this up because timing is quite important for the topic of today's post (as it might differ over time), which is a list of - in my opinion - top React state management libraries.

Authored by: areknawo

Alternative libraries for Console.log() for your next JavaScript Project

If you are a JavaScript developer you must be using console.log() for debugging your JavaScript project. But do you know that there are some alternative libraries to console.log() . These libraries...

Authored by: Manish Mandal

How I learned reactive programming by re-building RxJs from scratch

Yes, the title is not a typo. We are actually going to reverse engineer RxJs library (stay tuned, tons of code to come 😀). But before we proceed let me tell you why I embarked on this crazy endeavour. In my day job I work with libraries such as React and RxJs religiously.

Authored by: Bit

Functional Programming

Use Constructor in React Functional Component with Custom Hooks

So, in simple words with a Constructor we initialize the state of our component, and someone could say that "Function components don't need a constructor. You can initialise the state in the useState call." The problem here is that Function components are... functions. They run whenever you call them.

Authored by: JavaScript In Plain English

Async/await is awesome, but don't abandon Promises

Let's create a button that will: perform an expensive synchronous operation, fire 2 AJAX requests, and update the DOM based on the AJAX responses. Here is the markup. Here are the functions. Let's also measure the duration of each operation with the Performance API, which visualizes when and how long each function executes on the Chrome DevTools Performance Timeline.

Authored by: Suhan Wijaya