JSK Weekly - October 14, 2020

Happy International World Standards Day! We may not have set ISO standards for development, but we do have 'Best Practices', even if not everyone agrees about what they are, all of the time. This week, Juan Cruz Martinez says all projects should follow best practices to increase efficiency and quality in "Best Practices Every Node Developer Should Follow" while Eren Yatkin takes us through the "Proper Way To Connect MongoDb — NodeJs."

For more custom creations, Milton Marma gives a step step in "Create Custom Pipe in Angular to Replace Null Value With a Text" and Digamber Singh shows us how to "Create Custom Markdown Pipe in Angular 10 to Parse HTML". For those looking ahead in time, check out Fernando Doglio's "What’s In The Future For JavaScript?" on Bits and Pieces.


Using Hashed vs. Non-Hashed URL Paths in Single Page Apps

From their appearance, you can identify that the following are ordinary URLs. https://mysite.com/dashboard https://mysite.com/shopping-cart Ordinary URLs look pretty and clean. These types of URLs have a better advantage in terms of SEO. The scaffolding of web apps using frameworks like Angular supports this by default.

Authored by: Bit

Resource View in EJ2 Gantt Chart: A Perfect Assistant to Manage Resources

Resource management is a vital process in every organization. Resources should be allocated in projects effectively and efficiently to achieve the best productivity. Let's consider human resources, for instance. It requires planning, scheduling tasks, and placing appropriate employees in the right

Authored by: Syncfusion

How to Query the Full History of Your JSON Database

Usually, mapping these persistent in-memory structures to a durable device adds write amplification, as the full leaf-to-root path has to be adapted. We, however, use a keyed trie for our main document store. Thus no structural changes occur as in B-trees. Furthermore, we developed a new sliding snapshot algorithm to version the data pages and store variable-sized page fragments.

Authored by: SirixDB

How to style the disabled button using CSS

In this tutorial, we are going to learn about how to style the disabled (html) button using the css. Consider, we have a html button with the disabled attribute: To style the disabled button, we can use the :disabled pseudo-class selector in css.

Authored by: Sai gowtham

Strategies For Untangling Legacy Code

As software engineers, we are always busy making innovative things using different languages and frameworks. Sometimes we are expected to do that through initiating a new project but most of the time we are working on a legacy codebase that was initially written by someone else.

Authored by: Saeed Ahmad

Using Chart.js to Display Poll Data in a Cool Way

I added CSS to make the buttons and text show up properly. I added some colors, margins, padding, and put everything in a grid. I'm not going to go into severe detail, but you can find the CSS here. With the counter buttons' HTML and CSS looking decent, I went to work on their functionality.

Authored by: jason

Build File Upload/Download Functionality with Image Preview

In this article, we will create a file upload and download functionality with a preview of the image using the MERN stack.

Authored by: JavaScript In Plain English

Things You Must Know Before Using a CDN

Over the past few years, web applications have crossed many notable hurdles. One such achievement is the speed of loading these applications. Today, the bar is so high that users expect any web...

Authored by: Bit

Web Locks API: Cross-Tab Resource Synchronization

As computers have now become more powerful, they use several CPU threads to process data. This brings forth newer problems regarding resource sharing as there can be synchronization issues when multiple threads access a single resource. If you are familiar with threads, you would be aware of the concept of locks.

Authored by: Bit


A Simple Explanation of JavaScript Iterators

A collection is a data structure that contains elements. For example, a string is a collection of characters and an array is a collection of ordered items: To easily access elements of collections of different structure, JavaScript implements a special pattern named iterator.

Authored by: Dmitri Pavlutin

What's In The Future For JavaScript?

JavaScript is everywhere these days, and I'm not just talking about front-end (browsers) vs back-end (Node and Deno), I'm talking mobile, desktop and even hybrid apps as well. This has led it to...

Authored by: Bit

What is the Temporal Dead Zone (TDZ) in JavaScript?

I know Temporal Dead Zone sounds like a sci-fi phrase. But it's helpful to understand what the terms and concepts you work with everyday (or want to learn about) mean. Strap in, because this gets complicated. Are you aware that in JavaScript we can add { } to add a level of scope wherever we want?

Authored by: Kealan

Basic Middleware Pattern in JavaScript

In Express, we have the middleware functions with this signature: In Koa, we have this: Basically, you have some objects ( req, res for Express or ctx for Koa) and a next() function as the arguments of the middleware function. When next() is called, the next middleware function is invoked.

Authored by: Munif Tanjim


Master TypeScript in 50 Short 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. 452 pages. Jump to table of contents and get the book right away.

Authored by: Smashing Magazine


NgClass vs Class Binding in Angular

Like data, we can bind classes to elements in angular. To set some style conditionally on any element we can simply write the CSS styles on a class selector and we can add that CSS class conditionally to any element. To add or remove a CSS class dynamically from an element we can make use of class binding.

Authored by: JavaScript In Plain English

Create Custom Pipe in Angular to Replace Null Value With a Text

We all love to give users the best user experience possible. So, if a value is null users won't see anything in the browser. Not a good user experience. We will solve that problem by creating our own custom pipe that will replace the null or undefined value with a given text in the template expression.

Authored by: Milton Marma

Create Custom Markdown Pipe in Angular 10 to Parse HTML - positronX.io

Angular is known for its facile infrastructure. Theoretically, every work is possible on this powerful yet flexible framework. In this tutorial, we will learn how to profoundly render Markdown as HTML in Angular 10|9|8 or even the more previously developed versions. Apparently, this could be done through many other methods; however, i am going to [...]

Authored by: Digamber Singh

How to Navigate to Previous Page in Angular

Sometimes we would like to offer users a way to navigate back to where they had been before. Generally, this is what the browser's back button is for, but we can also provide the same feature in other places.

Authored by: Nils Mehlhorn


React Hooks: 5 Beginner's Tips

React Hooks is one of the latest addition to React that simplifies state and other React features. However, to use Hooks, you need to ensure that all React package versions use 16.8.0 or higher. Therefore it might take some time for existing React projects to adapt Hooks.

Authored by: Bit

An Example Birthday App, using React & Typescript, Exploring React

Link to demo I have a new approach to making side projects, which is to keep them pretty small and simple, so there is a hope of ever completing them. Also it's good to make them useful, so that at least I might get some use from it, and hopefully other people do too.

Authored by: Martin Capodici

Top 10 React Native Open Source Apps

In today's world of programming, you will see a lot of libraries and frameworks available in every programming language to make the programmer's task easier. Reusing code is as crucial as ever, given the fierce competition in the tech world.

Authored by: TheBestDevlist

How to Create a PWA with React 📱 Progressive Web Apps Guide

Need expert advice on how to create a PWA with React? Check this thorough PWA development tutorial prepared by our React programmers.

Authored by: Echo JS

Architecting and Making a Modal with React

It's a declarative UI building powerhouse. It separates concerns in a way that makes a component do one thing, and it does it amazingly. Currently, we write functions, those functions get called by other functions and they display some stuff on the screen. Pretty simple, as it should 💅.

Authored by: strife

Multi List Drag and Drop With react-beautiful-dnd, Immer, and useReducer

Getting setup with drag and drop can be complicated, especially with multiple lists. We'll explore how to use react-beautiful-dnd to create multi-list drag and drops. We'll also use Immer and useReducer to create immutable data structures to simplify and improve the performance of our code.

Authored by: Jason Brown

A Simple Explanation of React.useEffect()

I am impressed by the expressiveness of React hooks. It feels good when you can do so much by writing so little. But the brevity of hooks has a price - they're relatively difficult to get started. This is true for useEffect() - the hook that manages side-effects in React components.

Authored by: Dmitri Pavlutin


Write Your Own File Uploader in Aurelia 2

Writing your own file uploader is great! It means you have full control over your user scenario. You own the UX, and you don't have to pull in large clunky third party packages that slow down your site and might introduce security issues down the road!

Authored by: Andreas Wänqvist


Node.js Lesson 6: Util and Inheritance

This lesson and the coming one will cover some of the modules that we generally use in development. One of the modules is util and it comes very handy to ease the developer work while debugging. Let's talk more about it by answering the following questions.

Authored by: Soshace for Developers

Build A Production Ready Node/Express API With Docker

A container is an isolated process running on a shared operating system. To run an application in a container, you require an image which is a "bundle" of your source code, runtime, libraries, configuration files and other required assets. This "bundle" ensures standardization and that only required assets are included.

Authored by: JavaScript In Plain English

Proper Way To Connect MongoDb - NodeJs

Hey folks! I would like to ask you a question. What is the main thing of an application ? Well, just as you thought, it can be anything. Actually the goal of an application defines that thing. Therefore I will ask you a more specific question.

Authored by: erenyatkin

Best Practices Every Node Developer Should Follow

Node.js is popular among developers as an asynchronous and event-driven language used for backend development. It has a syntax easy enough to understand even for beginners. Whether you are a beginner or a seasoned developer using Node, following the best practices of Node.js programming is a must when developing applications aimed for production.

Authored by: livecodestream

Libraries and Tools

Writing JavaScript tools in other languages - a new trend?

Recently, we have seen an uptick of JavaScript tools being written in languages other than JavaScript. This blog post lists a few examples and explains the appeal of not using JavaScript. I asked on Twitter and these are a few of the examples that people mentioned: Build tools and linters: esbuild - Go: JavaScript bundler and minifier.

Authored by: Axel Rauschmayer

30 React JS Tools That You Can Use

React JS comes with a lot of tools, but which one to choose? You can easily search on Google but, you are not sure which one is best for you. So I have compiled a list for you to choose the best!

Authored by: Soshace for Developers

JavaScript tools that aren't built with JavaScript

Axel Rauschmayer wrote a quick post listing tools for the JavaScript ecosystem that aren't written in JavaScript (Rust and go are the popular languages these days). That's one for the bookmarks! For me, the main reason for changing tools can only be better performance.

Authored by: stefan judis

Functional Programming

Different ways to declare function in javascript - JS Startup

A javascript function is a fundamental building block of code that is designed to define once and called multiple times to perform a different-different task. Also, there are different ways to declare the function in javascript. A javascript function is executed when "something" invokes it (calls it) using the invoke method.

Authored by: Javascript Startup