JSK Weekly - June 17, 2021

It's no secret that we love JavaScript, which is why it's always great when someone else tells the world why it's so wonderful. Ella Wilson details the Top 10 Reasons Why JavaScript Will Improve Your Web & App Solutions in "JavaScript — The Best Choice for Business Software Development in 2021"

If you're looking forward the release of React 18, check out the React team's "The Plan for React 18" and then Nathan Sebhastian's "Trying Out React 18 Alpha Release" on Bits and Pieces for a first hand walk through.


General

Building a Component Marketplace For Your Team

Modern application development is component-driven. Today, a large portion of the applications we develop are composed of modern components in React, Vue, Angular, or even just pure web components using a compiler like Stencil. This is a good thing since building with Legos is faster and more scalable.

Authored by: Bit

How to Dynamically Import ECMAScript Modules

How to use import(pathToModule) to dynamically import ECMAScript modules in JavaScript.

Authored by: Dmitri Pavlutin

Tips for real-world Alpine.js · Code with Hugo

Demo: https://codepen.io/hugodf/pen/dyvqPbw On click, console output: Proxy: a JavaScript object which enables you to wrap JS objects and intercept operations on it This is core to Alpine's reactivity, proxies allow Alpine to detect data updates. Demo: https://codepen.io/hugodf/pen/vYxzEEw The same as you would use the data if it wasn't in a proxy.

Authored by: Hugo Di Francesco

Guide to Elasticdump - Moving and Saving Elasticsearch Indices

Elasticsearch initially began as a custom search engine. These days, it has gone above and beyond that singular role as it's part of log aggregation stacks, security monitoring, and even as a datastore for performing exploratory analysis. Indices in Elasticsearch is where the data is stored, and there are often times when these indices need to be transported from one cluster to another.

Authored by: StackAbuse

Why Using the MERN Stack is a Popular Start-Up App Idea

If you're a start-up, everything is new for you however tech-savvy you may be. Running a business and being a part of it are two different things. So, the first thing that comes to your mind is...

Authored by: Shifa Martin

How to Grow as a Developer?

Motivation is the most important part of every aspect of our lives: it takes motivation to exercise when you could sleep for another hour, to practice something when you could easily switch to a funny Youtube video. If you don't have the motivation to grow, you won't.

Authored by: kotosha


JavaScript

Trusted Types API for JavaScript DOM Security

This makes the client-side code run unexpectedly. Therefore, the vulnerability exists in the client-side code. Attackers make use of instances where they can inject harmful payload into your code to...

Authored by: Bit

JavaScript - The Best Choice for Business Software Development in 2021

Like most developers/IT consultants, your answer might vary by the project complexity, budget, time, scalability, security, resources, etc. As is reasonable! But, I believe that the most critical...

Authored by: Ella Wilson

How to Resolve Callback Hells with Lovely JavaScript Promises

Make your promise... In my last article, we have seen how JavaScript with Node.js performs asynchronous operations. Do you remember callbacks ? Callback is the backbone for asynchronous programming in Javascript. There are two main problems we face in using callbacks in our programming: 1.

Authored by: JavaScript In Plain English

JavaScript Numeric Separators

Writing good code is important -- writing code that's easily human readable is a next level skill. It's not often that APIs are introduced whose seemingly only useful function is making code more readable, but let me introduce you to JavaScript numeric separators: an API that lets developers use underscores to make numbers more readable!

Authored by: David Walsh

Dates in local format with Javascript

In the articles we have about dates in JavaScript we were missing one about how to create dates in local... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.

Authored by: MA-NO WebDesign&Dev

The Difference Between Object.assign() and Object.create() in JavaScript

The difference between Object. create() and Object. assign() is one of the most asked questions in JavaScript interviews. Therefore, it is necessary to know the differences between the two methods and also know the nitty-gritty of their implementations. In this article, we shall cover the differences between Object. assign() and Object.

Authored by: JavaScript In Plain English

When CSS Isn't Enough: JavaScript Requirements For Accessible Components

Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.

Authored by: Smashing Magazine

13 Basic But Important JavaScript Interview Questions

var - variables declared using var allow you to change the value of variables. Example: var a =13. Scope of variables declared using var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it or, for variables declared outside any function, global.

Authored by: JavaScript In Plain English

Array Destructuring in JavaScript: A Comprehensive Beginner's Guide

According to the official MDN documentation, the destructuring assignment syntax "is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables." Before we delve into the examples, let's understand how array destructuring works conceptually. Destructuring is an ECMAScript 6 (ES6/ECMAScript 2015) feature.

Authored by: Soumadri Banerjee

Let's Build a CRUD Website with HTML, CSS, JavaScript and an External API

In this article, we will give you a tutorial for creating a web application with just only basic HTML, CSS and JavaScript (based on Bootstrap 5) to perform CRUD operations. Well, CRUD operations are the four basic operations of manipulating data including Create/ Construct, Read, Update and Delete.

Authored by: Karn Yong

Want to Discover How JavaScript Frameworks Work Behind the Scenes?

Let's start by discussing the concept that constitutes the nucleus of our framework. If you already have an academic background in computer science, that's pretty good because you should be familiar with compilation theories. But even if it's not the case, no worries, that's absolutely not necessary, we will have a practical example when discussing the subject.

Authored by: Sayf Essyd

8 Useful Array Methods in JavaScript

Arrays methods to rule the world. One of the integral concepts of JavaScript is arrays. Arrays help us to contain our data and allow us to make things happen in our program. They help keep the machine moving!

Authored by: Alyssa Easterly


TypeScript

Advanced TypeScript: A Generic Function to Merge Object Arrays

This post is mirrored on my blog, chrisfrew.in I just can't stop writing these generic functions! This is another powerful generic function that follows my previous post on building a generic function to update an array at a specific key according to a specific test value.

Authored by: Chris Frewin


Angular

Sharing Data between Angular Components

Angular is perfect for building single-page web apps, mobile apps with compelling animations, progressive web apps that work offline, enterprise apps, e-commerce apps, and more. In an Angular application, we may have many components with a lot of functionality/features. While developing an application we may come across a situation where we need to pass data from one component to another.

Authored by: JavaScript In Plain English

How I Fixed a Bug in Angular

Hello, everyone! Today I'm going to tell you how I've contributed to the Angular community. You will learn about the contribution process to a large open-source project and I'll shed light on the code review. Let's get started! In my previous job, we had a long-lived SPA application, which the user may keep open for a very long time.

Authored by: Dmitry Drobyshev

Angular for Absolute Beginners

(Part 1) Angular is an open-source JavaScript framework and it is mainly maintained by Google. This framework is a framework for building single-page client applications and is completely based on JavaScript. Angular is written in Typescript (Typescript is a scripting language). Angular is a very stable JavaScript framework.

Authored by: JavaScript In Plain English


React

The Plan for React 18 - React Blog

The React team is excited to share a few updates: We've started work on the React 18 release, which will be our next major version. We've created a Working Group to prepare the community for gradual adoption of new features in React 18.

Authored by: React

How to Create a React Carousel ⚛️ 🎠

In this blog, we will be looking at how to implement a carousel slider in React. I recreated a website for a tech start-up that provides its products for many enterprise businesses and proudly displays those brand logos on its website.

Authored by: JavaScript In Plain English

Trying Out React 18 Alpha Release

The React Team has recently released a new alpha version of React 18. The main addition to this new version is concurrent features that improve the performance of your React application.

Authored by: Bit

3 Easy Ways to Solve SEO Problems in React Applications

React is awesome for its speed and component-based architecture, but it has some drawbacks in terms of SEO. Let's discuss them. React applications are built with a single HTML file. Using the concept of conditional rendering, we can decide what to show inside our JavaScript code. Technically, we don't need a dynamic URL.

Authored by: Mohammad Faisal


Vue

How to Implement Google Bubble Charts in Vue Js - positronX.io

Vue js Bubble Chart tutorial; A quick yet informative tutorial on adding Google bubble chart in Vue js application. In this Vue js bubble chart example tutorial, we will show you how to use the Vue google charts package in the vue application and profoundly implement bubble chart in the vue app using Google charts.

Authored by: Digamber Singh


Node.js

Node.js API Authentication with JSON Web Tokens

In this article, we are going to cover how to access the JSON web token (JWT) and also to protect our routes by the JSON web token. Have you ever thought about the process of authentication? What lies under the layers of abstraction and complexity? Nothing out of the ordinary.

Authored by: JavaScript In Plain English


Libraries and Tools

7 Tools for Faster Frontend Development in 2022

Speed up and scale frontend development using the best tools. Develop, test, build, and ship modern websites and applications faster. Gatbsy, Next, Netlify, etc.

Authored by: Bit


Testing

Cypress vs Other Test Runners

Note: the diagram in this blog post is similar to the diagram used by Rainer Hahnekamp in his presentation Angular & Cypress. The browser automation end-to-end (E2E) test runners are very differen

Authored by: Gleb Bahmutov

Run Two Cypress Test Runners At The Same Time

How to test a real-time Socket.io chat app by running two Cypress test runners concurrently. Please start by reading the blog post Test a Socket.io Chat App using Cypress. In this blog post we will run two Cypress test runners concurrently without any synchronization between them to test a real-time chat application.

Authored by: Gleb Bahmutov


Functional Programming

Higher-Order Functions in JavaScript

As the name suggests, the map() method is used to map the values of an existing array to new values and it pushes the new values to a new array and it returns that new array. Now, map() also takes a callback function and hence it is known as a higher-order function.

Authored by: RAHUL





0 comments