JavaScript
-
Webpack – Build script Optimise
These are few tips on improving webpack performance. CSS Loaders In this configuration, webpack won’t need to scan the entire node_modules for css files because we know that only component-library-1 and component-library-2 packages would contain css files. This helps us in saving a little bit of time. Thse will be added as PostCSS plugins. When webpack processes a .css file,… Continue reading
-
Speech Synthesis Engine – Building from Scratch
Building a speech synthesis engine from scratch using free and open-source tools can be a complex task, but it’s definitely possible. To understand natural language processing and speech synthesis, start by learning more about them and experimenting with existing open-source TTS engines. Choose a Text-to-Speech (TTS) Engine There are several open-source TTS engines available, for… Continue reading
-
Speech Synthesis Audio File: How to Generate
Using Node.js and the google-tts-api package, we can download the synthesized speech as an audio file. Using a server-side solution for the Web Speech API is necessary because in the browser, it does not provide a built-in method to directly save the output as a file. This script uses the google-tts-api package to generate a URL for an MP3… Continue reading
-
Web Workers – Using them at work
The key benefit of using Web Workers is to perform computationally intensive tasks because Web Workers run in a separate thread. And their lack of access to the DOM is its strength and since it also doesn’t have access to the other APIs available in the main thread – these all factors make it safer… Continue reading
-
JavaScript codes that can break a Web page
I’ve tried to gather some common examples of JavaScript code that can break a React application and prevent it from rendering. The rationale behind compiling this is to compare the isolation levels offered by various Micro Front End strategies e.g. Webpack Module Federation. Our first candidate for embedding a micro front end was to use… Continue reading
-
How to use Webpack Module Federation for building Micro FrontEnds
Introduced in Webpack 5, it’s a powerful tool for micro frontend architecture. Module Federation allows you to create separate builds that form a single application. It enables dynamic loading and sharing of code and dependencies between different parts of your app at runtime. Let’s break it down. Setting Up a New Webpack Project: Create a… Continue reading
-
Managing Dependencies in an Isomorphic app with NPM Aliases
NPM package aliasing is a feature that allows developers to define custom names, or aliases, for their dependencies, lets you install packages under an aliased name to prvent naming collisions with your local modules. This also enables them to use a more intuitive or project-specific naming convention instead of relying on the package’s official name. Compatibility:… Continue reading
-
NPM: Link external Directories to import as Packages
We will use npm link to achieve this. First, we will have to create a global symlink to the package we want to use. Go to the directory of the package you want to link. This should be the external directory that you want to use as a package in your workspace. Run the following command: Now,… Continue reading
-
run arg1 [arg2…] – What does this […] notation mean here
Let’s take an example of the command yarn add dep1@x.y.z [dep2…] to understand this better. The notation dep1@x.y.z [dep2…] is not an array notation. It’s a way to indicate that you can add multiple dependencies at once. dep1@x.y.z is the first dependency you’re adding. dep1 is the name of the dependency, and x.y.z is the version number. [dep2…] is indicating that you can continue… Continue reading
-
Understanding Packages – How to use and what each section means
In a typical package, you will also find a package.json file. A package.json file is a manifest file that’s used in projects based on Node.js. name: Indicates the name of the package and in this case, the name is @myorg/component. The @myorg/ part suggests that this package is a part of a larger project or organization named myorg. This scoped package… Continue reading