JSK Weekly - September 22, 2021

Last week we took a quick, but narrow, trip down memory lane. This, week, let's open the lane up a bit to look at the evolution of technology and programming languages as a whole in "Why Are There So Many Programming Languages?"

Other popular stories this week include "Engineering Technology from Idea to Release with Mitali Karmarkar" and "4 Programming Paradigms Every Developer Should Know" on Bits and Pieces.


General

5 Best Practices to Choosing Third-Party NPM Packages

This article presents 5 best practices to select a third-party npm package for a project.

Authored by: Bit

Why Are There So Many Programming Languages?

There are so many programming languages out there, and more are developed every few years. We have Python, JavaScript, PHP, C++, Ruby, Java, C#, and way too many more to list here.

Authored by: Coderslang: Become a Software Engineer

Engineering Technology from Idea to Release with Mitali Karmarkar on Web Rush #151

Mitali Karmarkar talks with us about working on Azure Static Web Apps. What is a static web app? What was the first line of code written? Where were some challenges faced developing it? Moving from beta to live, and how they gathered feedback. And advice for anyone building a product in 2021.

Authored by: John Papa

Mouse Drag with Svelte and Vanilla JS

Because it's simple There is a nice article on how to use mouse drag with rxjs. With the modern javascript frameworks and libraries, we got to the point where is hard to do simple things. We don't need rxjs, all we need is vanilla js.

Authored by: Filip Vitas

Getting Started with Next.js and Styled Components

Styled components are one of the popular approaches we take in case we don't want any CSS components. It is a very powerful and handy library that will create reusable design components including your theme management. If you haven't heard about the styled components then I will highly recommend you to watch over this link to learn.

Authored by: JavaScript In Plain English

ES-Modules: For a faster JavaScript? - FrontNet Blog

ES Modules are an official, standardized module system for JavaScript. But what exactly does that mean, which problems does it solve and how do ES Modules work? Modular systems are useful.

Authored by: FrontNet Blog

Why 'Showwcase' is the Future for All Developers

I joined them as a Founding creator recently & I can see a big stage for all of us(developers). Team Showwcase also makes sure that feedback is actively heard and integrated into the development of the product. I've personally given a couple of ideas and they got implemented in the actual product.

Authored by: JavaScript In Plain English

4 Programming Paradigms Every Developer Should Know

I'm a firm believer that if you're a developer, you need to be aware of how things work outside of your comfort zone, even if you're not planning to step outside of it anytime soon. The fact that you know there is a different way of doing something is by itself opening up your horizon to new methodologies and technologies.

Authored by: Bit


JavaScript

Best Practices For Using Comments In JavaScript

There are no pre-defined rules to use comments. But as an individual or a team, it is essential to agree upon some best practices around comments for consistency. Comments should be insightful for the person who reads them, and we should always avoid writing how the code works in comments.

Authored by: Bit

Demystifying 'var,' 'let' and 'const' in JavaScript

JavaScript is a dynamically typed language. Dynamically typed languages are those languages, where the type of the variable purely depends on the type of the value that is being stored inside the variable. For example, if the type of the value is a String, then the type of the variable would also be a String.

Authored by: AJO JOHN (mallu_dev)

Memoization in JavaScript: A Guide

In this article, I want to talk about both the useMemo hook and the useCallback hook since they are both crucial for creating performant React applications through the use of memoization. Memoization is essentially just caching. Imagine a complex function that is slow to run which takes a as an argument.

Authored by: JavaScript In Plain English

Synchronous vs Asynchronous JavaScript - Call Stack, Promises, and More

Let me start this article by asking, "What is JavaScript"? Well, here's the most confusing yet to-the-point answer I have found so far: JavaScript is a single-threaded, non-blocking, asynchronous, concurrent programming language with lots of flexibility.Hold on a second - did it say single-threaded and asynchronous at the same time?

Authored by: Tapas Adhikary

How to Learn JavaScript A Little Faster

When you're just starting to learn to code, it might feel like it's always a struggle. Your progress seems very slow and it's easy to be discouraged. In this article, I'll show you some tips and tricks that will help you to learn JavaScript more efficiently. Before we start, we

Authored by: Coderslang: Become a Software Engineer

An Intro to JavaScript Proxy

Have you ever been in a situation where you wish you could have some control over the values in an object or array? Maybe you wanted to prevent certain

Authored by: CSS-Tricks

JavaScript Rest vs Spread Operator - What's the Difference?

JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same. The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array.

Authored by: Oluwatobi Sofela

JavaScript toLowerCase() - How to Convert a String to Lowercase and Uppercase in JS

This article explains how to convert a string to lowercase and uppercase characters. We'll also go over how to make only the first letter in a word uppercase and how to make the first letter of every word in a sentence uppercase. Let's get started! How to use the toLowerCase(

Authored by: Dionysia Lemonaki

JavaScript Strings And Numbers Are Immutable, Why?

Long story short: Strings and Numbers in JavaScript are passed by value and not by reference, thus making them immutable First of all, this may seem confusing at the thought of it, as to why this happens in JavaScript. But it is because you first need to understand that Immutability is not the same as Reassignment!

Authored by: Binge On Code

How to Remove an Item from A JavaScript Array in 5 Ways

There are many ways to remove items from a JavaScript array. In this piece, we will look at 5 ways to do this. For one reason or the other, at times you want to remove items from a JavaScript array.

Authored by: Binge On Code


Angular

Angular 12 Detect Width and Height of Screen Tutorial - positronX.io

Recently, I was assigned a task to build a responsive layout; however, I was not allowed to take the help of CSS media query; on the other hand, I was to use the *ngIf directive as the window size changes. So, I decided to go through the Angular window size detection with the help of [...]

Authored by: Digamber Singh

Implementing Angular Code Flow with PKCE using node-oidc-provider

This posts shows how an Angular application can be secured using Open ID Connect code flow with PKCE and node-oidc-provider identity provider. This requires the correct configuration on both the client and the identity provider. The node-oidc-provider clients need a configuration for the public client which uses refresh tokens.

Authored by: damienbod


React

How to Perform CRUD Operations in a React Data Grid Using Redux: A Complete Guide

The Data Grid is one of the most useful controls, representing data simply and interactively. It allows you to display data in rows and columns. Each cell may contain text, images, or other controls. From simple contact lists to complex grids, Data Grid can handle it all.

Authored by: Syncfusion

10 Amazing React Native Project Ideas

Inspire your next app development project with these great ideas.

Authored by: livecodestream

An Easy Guide to React useReducer() Hook

Posted September 15, 2021 If you've used hook useState() to manage non-trivial state like a list of items, where you need to add, update and remove items in the state, you might have noticed that the state management logic takes a good part of the component body.

Authored by: Dmitri Pavlutin

How to Develop a Web AR Facefilter with React and ThreeJS in 2021

For the 3 year anniversary of 🧙🏼‍♂️ Level30Wizards we wanted to build something that's related to our work, brand and interests. We finally ended up creating a Snapchat like facefilter for Web AR or Web XR. You can try the final product here: Facefilter demo Hey, are you looking to build a Facefilter for a client or project?

Authored by: Mees R

React Tutorial - How to Build a Text Translation PWA

In this article, I'll show you how to build a text translator application using React. It will support 17 languages, and you can do cross translation too. Here's what we'll create: This is how our application will look after we're done building it.

Authored by: Nishant singh

React Js Resize, Compress and Crop Image Size Tutorial - positronX.io

React js image resize tutorial; In this quick guide, we will learn how to crop an image in React js app using the react image crop package. Image cropping is the process of resizing the image after selecting from the input select HTML form element.

Authored by: Digamber Singh

I instructed GitHub Copilot to code an Instagram profile feed in React. Here's what happened.

I got my hands on GitHub Copilot a month ago, I was already amazed by Copilot crushing Leetcode problems in seconds. The very fact that it is trained upon billions of lines of public code is fascinating. 👀 Yes, it's all cool and stuff, but can it solve the day-to-day problems I face as a Frontend Engineer?

Authored by: Ayush Singh


Libraries and Tools

25 Hand-Picked React Libraries You Probably Didn't Know Existed

A new way to upload files - Multiple Input Formats - Image Optimization - Responsive - Async or Sync Uploading A flexible and beautiful Select Input control for ReactJS with multiselect...

Authored by: Harsh Makadia


Testing

Testing React Applications: The Mindset (with Examples)

What I'll try to achieve in this article is to give you a basis of how (I think) you should think when testing your code and run you through some React based examples as React is my strong suite.

Authored by: Siniša Nimčević ⌨️ ✍️ 🥋 🔄

Postman E2E Tests Integrated into GitHub Actions Pipeline with Newman

What will we exercise in this publication: Versioning of the Postman collection and environment. Assertion writing in tests using the Postman API. Running versioned tests using Newman, Postman's headless CLI. Integration of tests that run by Newman, in the GitHub Actions pipeline.

Authored by: pedro morais


Functional Programming

Working with JavaScript's Built-In Array Functions

When working with any programming language, you'll probably need some functionality that is not integrated into that language natively. Thus, you'll either implement them yourself, or turn to using various modules or libraries. This directly affects the efficiency of your application (more memory usage, more HTTP requests, etc.).

Authored by: StackAbuse

Let's Demystify Hoisting in JavaScript

Hoisting is a feature in JavaScript which moves all the variable and function declarations to the top of the code (this statement doesn't mean that the code is physically moved to the top.). As we all know, the JavaScript engine creates an execution context where it runs the JavaScript code.

Authored by: AJO JOHN (mallu_dev)

Monetize Open-Source Software With Gatsby Functions And Stripe

Gatsby Functions provide front-end developers a way to write and use server-side code without the hassle of maintaining a server. If making money from open-source is of interest to you and your site isn't built using Gatsby, this approach may well be the answer you were looking for.

Authored by: Smashing Magazine





0 comments