JSK Weekly - August 10, 2022

Everyone has heard the term "Sharing is caring", right? Well, it turns out that sharing is also practical, when it comes to dev work. This week Isuri Devindi asks "Can the Composition API Replace Vue Mixins?" on Syncfusion, Prithwish Nath discusses "Better Developer Velocity with Shared JavaScript Utility Functions" and Victor Yakubu illustrates "Sharing JavaScript Code Between Applications with Bit" on Bits and Pieces.


General

Fast UI - Building a To-Do App with VanillaJS and Web Components

Fast is a component library designed and maintained by Microsoft. In fact, while you can definitely use Fast as a component library, you can do a lot more than that with it. The way it's been designed, Fast allows you to build a whole design system with it if that's what you want.

Authored by: Bit

Announcing Docusaurus 2.0 | Docusaurus

Today we are extremely happy to finally announce Docusaurus 2.0! 🥳️ At Meta Open Source , we believe Docusaurus will help you build the best documentation websites with minimal effort, letting you focus on what really matters: writing the content.

Authored by: Docusaurus 2.0

99% of Beginners Do Not Understand the Difference Between 'for' Loops & 'forEach'

Let's first look at the essential difference: The 'for' loop has been in existence since the beginning of JavaScript. 'forEach', introduced in ES5, is mounted on the prototype of iterable objects, such as Array Set Map. 'forEach' is an iterator responsible for traversing an iterable object. So what are traversal, iteration, and iterable objects?

Authored by: JavaScript In Plain English

Converting Speech to PDF with NextJS and ExpressJS

With speech interfaces becoming more of a thing, it's worth exploring some of the things we can do with speech interactions. Like, what if we could say something and have that transcribed and pumped out as a downloadable PDF? Well, spoiler alert: we absolutely can do that!

Authored by: CSS-Tricks

Run Multiple Requests with Async/Await and Promise.all

I have a task which is to call multiple requests from API. When the user enters multiple queries which are separated by a comma, I have to make the corresponding times of requests to the API. For example, if the URL is localhost:3000/api/posts/tags=tech,history,health, I will have to make 3 requests!

Authored by: JavaScript In Plain English


JavaScript

Sharing JavaScript Code Between Applications with Bit

Bit allows you to think of every part of your code as an independent component, independent because it can be tracked and versioned by bit and it comes with its own dependencies, and a component because it is easy to maintain and can be easily used across the same project or even installed into a totally different project that will require that component.

Authored by: Bit

How to Add a Space Between the Characters of a String in JavaScript

In this article, we'll learn how to easily include spaces between the characters of a string in JavaScript. To add a space between characters of a string, call the split() method on the string to get a character array, then call the join() method on the array to join the characters with a space separator.

Authored by: Coding Beauty

JavaScript Random Number - How to Generate a Random Number in JS

When working with a JavaScript program, there may be times when you will need to generate a random number. For example, you may want to generate a random number when developing a JavaScript game, such as a number guessing game. JavaScript has many built-in methods for working with numbers and

Authored by: Dionysia Lemonaki

How to Use Events in Node.js

We often hear the term that Node.js has an event-driven architecture or is event based but what exactly is this event-based model? Today, in this article, we will try to decode the same. Suppose you went to a Pizza Hut to have a delicious Pizza.

Authored by: JavaScript In Plain English

Better Developer Velocity with Shared JavaScript Utility Functions

The industry-standard approach to helper/utility functions is to maintain a dedicated folder, name and group them by functionality and strong relatedness criteria, and export/import each implicitly, as needed. So far, so good. But utility functions are non-context specific. Of course, you're going to reuse them in other projects, pass them on to team members, or even share them online, right?

Authored by: JavaScript In Plain English

How to Implement the SOLID Principle in JavaScript?

This article will give you a basic concept of the SOLID principle in the JavaScript language. We will have a different way of following this principle with each language. However, in JavaScript, it's...

Authored by: Hai Thai Hoang

How to Read a JSON File in JavaScript - Reading JSON in JS

When fetching data from external sources or servers, you need to make sure that the data returned is in JSON format. Then you can consume the data within your application. In some situations, when you're working locally or when you upload the data file to a server, we might want

Authored by: Joel 🦸‍♀️


Angular

Use Angular Async Pipe to Make Your Life Easier

The AsyncPipe is one of the tools that Angular provides to make our life easier. Based on the official documentation, the does 4 things: It subscribes automatically to an Observable (or Promise) and returns the latest emitted value. It marks the associated component for change detection whenever a new value is emitted.

Authored by: Vasileios Kagklis


React

Avoiding CORS issues in React/Next.js

If you've written any frontend code, you've likely encountered a CORS error before, like this: Access to _ has been blocked by CORS policy Cross-Origin Resource Sharing (CORS) is a protocol that defines how web requests should be handled when they are across different URLs.

Authored by: PropelAuth

How to add lazy loading to React Components? - Upmostly

Lazy loading is used for the optimization of the application. As the application size increases, we create more components in our app, leading to a more extensive application bundle size. As the bundle size of our application increases, the application takes more time to load which reduces the performance and is a sign of a bad user experience.

Authored by: Upmostly

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application. At the same time, we will share how to use the Redux store in React to manage the complex states. Apart from that, we will also learn how to create a slice state using the redux toolkit module.

Authored by: Digamber Singh

You Have Been Using React Native Modals Wrong

Do you find using modals in React Native to be a bit of a pain? You're not alone! Trying to keep control of its open state and repeating the code everywhere you want to use it can be pretty tedious. And the problem only gets worse when you try to create complex flows.

Authored by: JavaScript In Plain English

3 Cache Strategies to provide a better UX in your React Applications - Upmostly

Integrating a caching strategy is one of the best ways through which we can improve a website's performance, reduce the number of resources used, and ultimately improve our users' experience by faster loading times. There are 3 main strategies when it comes to integrating a caching solution with your React application, which all depend on your own custom requirements.

Authored by: Upmostly


Vue

Can the Composition API Replace Vue Mixins?

Vue Mixins is a very popular concept for reusable code sharing between components. However, the Composition API introduced in Vue 3 provides much better functionalities to implement reusable components.

Authored by: Syncfusion

How to Get an Input Value in Vue

After taking input from users with a text field, there has to be a way to retrieve the data and do something with it. In this article, we'll learn how to easily get the value of an input field in Vue.

Authored by: Coding Beauty

How to Use SVG Elegantly in Vue.js

npm i svg-sprite-loader Install svg-sprite-loader. Projects created through vue-cli scaffolding will use url-loader to process SVG by default, so it needs to be processed. Use include, include and img to differentiate. Then modify the webpack.base.conf.js configuration so that svg-sprite-loader will only process the files under the src/icons we specified.

Authored by: JavaScript In Plain English


Node.js

Node.js Logging for Professionals

Logging is an essential part of any production-grade application. It's one of the most important parts. Today we will learn how we can use logging effectively in Node.js. And how to do it for a production-grade application. There are many good logging libraries for Node.js. And certainly the most popular of them is winston.

Authored by: Mohammad Faisal

How to create a module-based Node.js executable

Many of my projects include Node.js scripts to perform setup or teardown steps. And while I could run all of them with the node binary ( node create-thumbnails.js ), I prefer to remove the file extension and make the scripts executables (./create-thumbnails ). This approach saves characters, and makes me feel like a hacker!

Authored by: stefan judis





0 comments