![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Some top stories not to miss this week are "How to Customize the Angular Tree Grid by Creating Reusable Components" by Alan Sangeeth on Syncfusion, Dilantha Prasanjith's "5 Methods to Persisting State Between Page Reloads in React" on Bits and Pieces and "How to work with worker threads in NodeJS" by Anjalee Sudasinghe.
General
How to Generate Service Workers Automatically
During the past few years, Service Workers emerged to fill the void of background script execution in JavaScript. With the increasing adoption of Service Workers, many tools and libraries emerged to improve developer productivity. Out of these, one such library is Workbox.
Authored by: Bit
Building Microfrontends Using Single-SPA Framework
First, we need to start by setting up the Root configuration application using create-single-SPA CLI tool, which is provided by Single-SPA. npm install -g create-single-spayarn global add create-single-spa However, it is not mandatory to install create-single-spa globally. Next, create the root configuration App using the following commands.
Authored by: Bit
ESLint + VSCode: How to Format Your Code Using .eslintrc
I've gotten very used to having VSCode autoformat my file when I save. Usually, I use Prettier. But I joined a project that uses ESLint to manage its code style, and I wanted to match the team's formatting. I wanted that sweet auto-formatting on save, but using the eslintrc.json file in the project's root dir instead of Prettier.
Authored by: Dave Ceddia
Programming memes
Everyone loves a good laugh, and this past weekend with some time in hand due to the Easter holidays I spent some time browsing my almost forgotten facebook account. I don't use my FB account much, but everytime I open the app it never fails to deliver quality meme content.
Authored by: Juan Cruz Martinez
4 Bit Use-Cases: Build Like the Best Teams
Bit transforms modern frontend development into a modular composition of components, to unlock powerful benefits for your team. Bit extends the advantages of microservices to everything you build. With Bit, you will be able to split development between autonomous teams, compose independent features, and continuously integrate to build world-class apps.
Authored by: Bit
How to Leverage the Fullscreen API... and Style It
Let's look at the Fullscreen API in JavaScript. It allows you to do a pretty powerful thing: full screening exactly one particular element you want it to.
Authored by: CSS-Tricks
How To Do Dynamic Routing With Next.js
Dynamic Routing means we don't want to specify static routes for the pages; it would be dynamically generated using data from API or other means. Consider you build a portfolio site it might have pages like about, contact, and home page we required to define routes for each page statically.
Authored by: JavaScript In Plain English
JavaScript
Best IDEs for JavaScript Development in 2021
Every developer has a favorite IDE. I do as well. (I'll reveal my personal favorite at the end of this article 😃) How do we choose which IDE is best for development? Well, the features of an IDE do...
Authored by: Bit
JavaScript Switch Statement - With JS Switch Case Example Code
Creating conditionals to decide what action to perform is one of the most fundamental parts of programming in JavaScript. This tutorial will help you learn how to create multiple conditionals using the switch keyword. How switch statements work in JavaScriptThe JavaScript switch keyword is used to create multiple conditional statements,
Authored by: NathanSebhastian
A Basic Guide To Object-Oriented Programming (OOP) patterns in JavaScript
console.log(jonas.__proto__); console.log(jonas.__proto__.__proto__);console.log(jonas.__proto__.__proto__.___proto__proto_);console.dir(Person.prototype.constructor); const arr = [1,2,3,4,5];console.log(arr.__proto__.__proto__); //all object propertiesconst h1 = document.querySelector("h1");//{ species: "Homo sapiens", calcAge: f, constructor: f} //{ constructor: f, _defineGetter_: f, _defineSetter_: f, hasOwnProperty: f, ....} //null //constructor property points back at person console.log(arr.__proto__); //contains all the built-in array methodsconsole.log(arr.__proto__.__proto__.__proto__); //null console.dir(h1); //objectconsole.log(x=> x*2); //object console.log(arr.__proto__ === Array.prototype); //true We can add new methods to this prototype and all the arrays will then inherit it.
Authored by: Ayush Verma
The Ultimate Guide to JavaScript Promises
In this tutorial, we would be talking about all the JavaScript promises, their differences and their use cases. Promises are a way to implement async programming in JavaScript(ES6). A Promise will become a container for future value. In a layman's term, you place and order for an item on Amazon.
Authored by: Faithful Ojebiyi 🗯️
Angular
How to Customize the Angular Tree Grid by Creating Reusable Components
The Tree Grid controls helps you add lots of features to your app like data binding, editing, sorting, filtering, paging, aggregating rows, and exporting to Excel, CSV, and PDF formats. Customizing your Tree Grid helps you meet the requirement of any app or client.
Authored by: Syncfusion
Angular 11 FullCalendar Create and Display Dynamic Events - positronX.io
Angular full calendar integration tutorial; Throughout this tutorial, we will learn how to implement the Fullcalendar package in the Angular 11 application and how to create dynamic events in Angular using the profound FullCalendar JavaScript plugin. We will give you a shorter demo of dynamic events and create a basic php file and run it [...]
Authored by: Digamber Singh
React
5 Methods to Persisting State Between Page Reloads in React
One of the straightforward options is to use localStorage in the browser to persist the state. Let's take a look at an example. We have count in our state. Now let's say if we want to keep this count value persist when the page reloads, we can do that by simply introducing localStorage.
Authored by: Bit
Blitz.js - The Full-stack React Framework - Interview with Brandon Bayer
Although React is a UI library, that doesn't mean you couldn't write full-stack applications around it. Frameworks, such as Next.js, have appeared to make it easier. To learn more about one such framework, Blitz.js, I am interviewing Brandon Bayer. I'm the creator and full-time maintainer of Blitz.js.
Authored by: SurviveJS
The Complete React Tutorial for 2021 - Learn Major React Concepts by Building a Project
Welcome to the complete React tutorial for 2021. This guide should help you become effective with React as quickly as possible as you build a complete application along the way. Compared to many tutorials you might have gone through before, this one is meant to be thoroughly practical from start
Authored by: Reed Barger
Is React a Library or a Framework? Here's Why it Matters
Developers have spent a great deal of time talking about what React is. But they have left out why this topic matters so greatly for anyone who builds React applications. The answer to this question is essential for any React developer, regardless of their skill level. This is because it
Authored by: Reed Barger
How to Decouple logic from UI with React components
Decoupling the logic and UI makes it easier to write and test components. The main goal of this article is to make sure we are writing our new components in a way where each component cares only about its data, error handling, loading, and any other needed logic (we will discuss sharing data between components in a different article).
Authored by: JavaScript In Plain English
How to Use React Hook Form with TypeScript
Let's first install dependencies yarn add react-hook-form Import the the useForm hook from the library. This hook exports all the necessary controls for our form. import { useForm } from "react-hook-form"; As we are using TypeScript we should take advantage of the type system.
Authored by: Mohammad Faisal
Node.js
How to work with worker threads in NodeJS
Learn all about worker threads in NodeJS, what problems they solve and how to work with them.
Authored by: livecodestream
Building A Video Streaming App With Nuxt.js, Node And Express
In this article, we'll be building a video streaming app using Nuxt.js and Node.js. Specifically, we'll demonstrate how to implement a streaming service with the following components: a server-side Node.js application that will handle fetching and streaming videos, generating thumbnails for your videos, and serving captions and subtitles for videos; a client application in Nuxt.js that will consume the videos on our server.
Authored by: Smashing Magazine
Libraries and Tools
The Best React Libraries You Should Be Using Today
Let's take a look at five React libraries that serve as a great addition to any React project you're looking to build in 2021 and beyond. I chose these libraries because not only do they help us build functional and impressive-looking applications, but they also allow us to do so
Authored by: React Bootcamp
Testing
A Simple Technique to Test your Code in JavaScript
Being able to test the code you have written is an important part of coding. For several projects that I worked on, after writing some code for an application, I would then test the code by going into the application, checking whether everything is working as expected and that I had not broken anything.
Authored by: JavaScript In Plain English
Functional Programming
Don't ever write your own function to parse URL parameters
Sometimes the platform we are building on provides more functionality than we can keep in our own heads. However, depending on the problem, we often find ourselves trying to write the code to solve the issue rather than finding and using the existing solution provided by the platform.
Authored by: Phil Nash
