JSK Weekly - September 23, 2020

We've noticed that while some are surprised we're almost in month ten of 2020, others seem to feel it's been one of the longest years yet. And then there's those who felt the Mesozoic Era was shorter than the wait for Vue 3 to be released. Well it's finally here. Dwayne Charrington features Evan You's video in "Vue 3 is Finally Released".

Some other top stories this week, Mahdhi Rezvi's "Mastering JavaScript ES6 Symbols", Chidume Nnamdi's "Understanding Memory Leaks in Nodejs" and Nathan Sebhastian's "Web Component: Why You Should Stick to React", all on Bits and Pieces.


Microfrontends Survey Evaluation

In June I've written a post regarding the " State of Microfrontends ". This article focused on the technical solutions available and presented some key players as well as a bit of background info. Recognizing that the user side was lacking I published a small survey.

Authored by: Bit

How to Build and Validate Beautiful Forms with Vanilla HTML, CSS, & JS

Forms are hard. Knowing how to properly collect and validate user data is one of the most important skills a frontend developer needs to have. But it's hard because edge cases abound. You have to consider all of the ways a user could break your pretty little form while simultaneously providing an excellent user experience.

Authored by: freeCodeCamp.org


Mastering JavaScript ES6 Symbols

During the discussion with the editor of Bits and Pieces, I was asked to address an issue raised in React JS involving Symbols. Below is a link to the raised issue. For those who did not go through the above link or did not understand what was happening, below is a summary for you.

Authored by: Bit

Understanding Data Structures in JavaScript (Linked Lists)

Understanding Linked Lists can be a difficult task when you are a beginner JavaScript developer since JavaScript does not provide built-in Linked List support. In an advanced language like JavaScript, we need to implement this data structure by scratch and, if you are unfamiliar with how this data structure works, the implementation part becomes that much more difficult.

Authored by: Soshace for Developers

Everything about null in JavaScript

Posted September 22, 2020 JavaScript has 2 kinds of types: primitives (strings, booleans, numbers, symbols) and objects. Objects are complex data structures. The simplest object in JavaScript is the plain object - a collection of keys and associated values: But there are situations when an object cannot be created.

Authored by: Dmitri Pavlutin

Array Manipulation 2

Starting with a 1-indexed array of zeros and a list of operations, for each operation add a value to each of the array element between two given indices, inclusive. Once all operations have been performed, return the maximum value in your array. For example, the length of your array of zeros n = 10.

Authored by: livecodestream


An important TypeScript feature you might not be using yet

TypeScript extends JavaScript with types, enabling you to catch errors before they occur. Setting types on primitives and on simple objects is usually straight-forward, but it might become tricky when you need small variations of more complex structures. You might need a readonly version, a version with only some properties, a version where all properties are nullable.

Authored by: JavaScript Kicks


Angular 10 Pagination Tutorial with ngx-pagination Example - positronX.io

This is a comprehensive Angular 10 Pagination tutorial. In this tutorial, we will learn how to add server-side pagination in the Angular 10 data table. To add pagination in Angular, we will use the ngx-pagination package. We will also create an angular service to fetch data remotely and display data in tabular form with pagination.

Authored by: Digamber Singh

Playing Zoom Bingo In Angular 10.1.2

The other day, I was on a call that felt more like a reverse Turning Test in which the human on the other end was trying to their hardest to imitate the cold, detached logic of a machine.

Authored by: Ben Nadel


Web Component: Why You Should Stick to React

There's an interesting discussion on the Internet about how Web Components will replace modern front-end libraries, and that popular tools like React and Vue will slowly become obsolete like MooTools and jQuery. Maybe you want to use React for your web application projects, but fear that it's going to be replaced by Web Components.

Authored by: Bit

7 Top React Static Site Generators in 2020

A static site generator takes the source files and generates an entire website - or a static site that is sourced from purely static HTML files. They enable you to create a static, HTML-based website that doesn't rely on databases or external data sources, avoiding server-side processing when accessing your website.

Authored by: Bit

How to add Bootstrap to React

In this article we will see some best practices for React Bootstrap. Integrating native bootstrap in React is not as easy as it seems, as you will need to find a way to remove the jQuery dependency of Bootstrap before integrating it in your React Project. So lets start with our Reactjs bootstrap tutorial.

Authored by: Sunil Joshi

Introducing the New JSX Transform - React Blog

Although React 17 doesn't contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What's a JSX Transform?

Authored by: Luna Ruan


How to Easily Add Bootstrap 5 Into an Aurelia 2 Application - I Like Kill Nerds

The Bootstrap 5 alpha was announced a few months ago and I instantly jumped on it and started using it. The lack of jQuery and more robust colour palettes as well as grid system were too hard to pass up. If you are reading this in the future and Bootstrap 5 has already been released, [...]

Authored by: Dwayne Charrington

Using Dragula with Aurelia 2 and TypeScript

I needed drag and drop functionality in one of my projects, and instead of implementing it myself I choose to try out Dragula. Using third party plugins is a breeze with Aurelia 2! Dragula has been around for a while

Authored by: Andreas Wänqvist


Vue 3 is Finally Released - I Like Kill Nerds

After an endless stream of betas and release candidates, Vue 3 is finally here. Congratulations to the Vue team and all of the contributors who made the release happen. As many of you know, I'm on the Aurelia core team and I've seen how hard it is shipping a new major release.

Authored by: Dwayne Charrington


Will Deno Kill NPM?

If you are a frontend developer, you would have used the Node Package Manager (NPM) in your applications. It is the default package manager for the JavaScript runtime environment, NodeJs. NPM has...

Authored by: Bit

Understanding Memory Leaks in Nodejs

Note: This applies to Nodejs because Node.js runs on a V8 JavaScript engine. So whatever happens in Nodejs happens in JavaScript. In JavaScript, memory is divided into two: Heap and Stack. Stack: This is the area in our JS program address space where primitives values and pointers to object references to the heap are stored.

Authored by: Bit

Node.js Lesson 4: NPM Package Structure

Hey everyone, this lesson is going to be all about the node package and its structure. We will understand what the package.json file actually is and its characteristics. We will learn what does those mighty properties inside package.json denotes and why they are important. Let's start.

Authored by: Soshace for Developers

Node and Passport JS - Google OAuth20 Authentication

To begin with, let's create an Express Application. The below commands create a new folder and initialize Node.js. mkdir passport_stacd passport_sta/npm init -ytouch index.js After initializing, install all the required packages. Here I am installing the following packages. express - Light-weighted framework for webservers and APIs. cookie session - To store Sessions.

Authored by: sjlouji

Create MongoDB database models in Node.js

Create a new directory and initialize node with the command npm init. mkdir helloworldcd helloworld/npm init -y To run the node js server, we need to type node index.js in the terminal each and every time when I change anything in the code. I found it difficult. So I started using nodemon.

Authored by: sjlouji

Libraries and Tools

A Quick Introduction to Redux

Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.

Authored by: sjlouji

Top 7 Best Free React Dashboard Libraries

MaterialPro React Admin is a minimal React template with hooks inspired from Google's Material Design UI. MaterialPro React Admin Lite is a carefully handcrafted beautiful React admin dashboard template of 2019. It's built with a modular and modern design concept. MaterialPro React Admin Lite is completely free to download and use for your personal as well as commercial projects.

Authored by: Sunil Joshi

Functional Programming

Modern backend is a JavaScript function | Swizec Teller

Many engineers think server-side code is the scary domain of True Engineers. Something newbies, juniors, and frontend engineers shouldn't touch. They're wrong. Modern backend is a joy. ❤️ Backend code scares people because it sounds complex. And serious, and critical, and a bit boring.

Authored by: Swizec