What is Nx?

Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality.

Nx, short for “Nrwl Extensions,” is an open-source development toolkit designed to help teams manage monorepos more efficiently. Nx can be used with various front-end and back-end frameworks, including React, Angular, VueJS( in v17), NestJS, and more.

At its core, Nx enables developers to build and manage multiple related projects within a single repository. Whether you’re working on a large-scale enterprise application or a collection of microservices, Nx provides a unified solution to handle complex codebases with ease.

Key Features of Nx

Let’s dive into some of the key features that make Nx a powerful choice for managing monorepos:

1. Code Sharing

Nx simplifies code sharing between projects within your monorepo. Instead of duplicating code or creating shared libraries, you can easily reference and reuse code across your various projects. This promotes code consistency and reduces redundancy.

# Generate a shared library in React
nx generate @nrwl/react:library my-shared-lib

2. Dependency Management

Nx automatically handles dependencies and ensures that the correct versions of packages are used across all projects. This eliminates compatibility issues and makes it easier to keep your projects up to date.

# Running tests for a specific project
nx test my-react-app

3. Smart Build System

Nx comes with a smart build system that optimizes build times. By only building what has changed, it significantly speeds up the development cycle, allowing for faster iteration and testing.

# Building a project
nx build my-react-app

4. Powerful Scaffolding

With Nx, you can quickly generate code templates for different types of projects, components, and more. This reduces the overhead of setting up new projects and enforces best practices from the beginning.

# Create a new React application
nx generate @nrwl/react:application my-react-app

5. Caching for Speed

One of the standout features of Nx is its caching system. It intelligently caches build artifacts and dependencies, significantly reducing build times. Nx ensures that only the necessary parts of your monorepo are rebuilt, saving time and resources.

# Using cached artifacts for faster builds
nx build my-react-app

Caching is another critical feature of Nx that contributes to a more efficient development process. Nx leverages both local and remote caching mechanisms to save you valuable development time.

A. Local caching involves storing build artifacts, dependencies, and other essential data on your local machine. When you re-run a task, Nx checks if the required data is already available in your local cache. If it is, the task can be completed without rebuilding or re-downloading dependencies, resulting in significantly faster task execution.

B. Remote caching takes efficiency a step further. Nx allows you to store your build artifacts and dependencies remotely, often in a shared cache for your team or organization. When you run tasks, Nx checks the remote cache first. If the required data is available, Nx retrieves it from the remote cache, eliminating the need to rebuild or re-download. This feature is especially valuable in a collaborative development environment, as it ensures consistent, efficient task execution across team members.

Caching is a game-changer for monorepos, making Nx a valuable tool for projects of all sizes.

6. Automatic Dependency Updates

Staying up to date with dependencies and keeping your codebase compatible with the latest libraries and tools is a common challenge in software development. Nx offers a solution to this problem through its extensive set of plugins and tools. When you leverage Nx plugins, you gain the ability to automate dependency updates and code generation.

// run the migrate command to migrate 
nx migrate latest // same as nx migrate nx@latest

This fetches the specified version of the nx package, analyzes the dependencies, and fetches all the dependent packages. The process keeps going until all the dependencies are resolved. This results in:

• The package.json being updated
• A migrations.json being generated if there are pending migrations.

At this point, no packages have been installed, and no other files have been touched.

Link:- https://nx.dev/core-features/automate-updating-dependencies

7. Make It Your Own

Nx’s extensibility is one of its most compelling features. Nx is designed to be highly customizable and extendable, allowing you to fine-tune it to meet the unique needs of your projects and team.

A. Create Your Own Plugins:- Nx provides the tools and capabilities to create your own plugins. Whether you need custom schematics, generators, or additional functionality, you can build plugins to integrate seamlessly with Nx.

B. Share Your Plugins:- If you develop a plugin that you believe could benefit the broader development community, you have the option to share it. Contributing your plugins to the Nx ecosystem can be a great way to give back to the community and improve the toolkit for everyone.

Whether you’re extending Nx with your own plugins or leveraging the existing set of plugins from the community, Nx’s flexibility and extensibility allow you to make it your own and adapt it to your specific project requirements.

Getting Started with Nx

To get started with Nx, you can follow these steps:

1. Install Nx globally with npm, yarn, pnmp, or …..
2. Create a new Nx workspace using the provided CLI command.
3. Begin adding your projects, libraries, and code to your workspace.

Nx Installation

npm install -g create-nx-workspace

Or if you prefer using yarn:

yarn global add create-nx-workspace

Creating a New Nx Workspace

nx create-nx-workspace my-nx-workspace
## Replace my-nx-workspace with your desired project name.

Creating Application

nx g @nx/react:application my-app
## Replace my-app with your desired project name.

https://nx.dev/nx-api/react/generators/application
https://nx.dev/nx-api

Start the app

 # nx run [host app name/ your main app]:serve

nx run my-app:serve

Useful commands

nx run my-app:serve # start the app
nx run my-app:test # run the unit test
nx run my-app:lint #run lint on the app
nx run my-app:build #make build for your app
nx --help # Nx Documentation and Help

I appreciate your time and attention in reading this post on Nx, the powerful toolkit for monorepos. I hope you found the information valuable and insightful. Nx is truly a game-changer in the world of software development, and we’re excited to share its benefits with you.

If you have any questions, want to learn more, or are considering integrating Nx into your development workflow, feel free to reach out. I am here to support your journey in making development more efficient and enjoyable.

Thank you for being a part of our community, and we look forward to sharing more insights and knowledge with you in the future. Happy coding!

Find me here:-

An Introduction to Nx: The Ultimate Tool for Monorepos(One tool for almost everything) was originally published in JavaScript Kingdom on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. Web Authentication API : It allows websites to offer strong authentication mechanisms using biometrics, USB tokens, or other methods, replacing traditional password-based authentication. It helps improve security and user experience.
2. Web Bluetooth API: The Web Bluetooth API enables websites to communicate with Bluetooth Low Energy (BLE) devices, such as IoT devices, directly from a browser. This can be used for applications like connecting to fitness trackers, home automation devices, and more.
3. Web Share API: The Web Share API allows websites to trigger the native sharing capabilities of a user’s device. It provides a consistent way to share content from a web app to various social media platforms or other apps on the device.
4. Web Speech API: The Web Speech API provides speech recognition and synthesis capabilities in browsers. This can be used to build voice-controlled interfaces or to add speech output to your applications.
5. Payment Request API: The Payment Request API simplifies the checkout process by providing a standardized way to request payment and shipping information. It integrates with various payment providers and streamlines the payment process for users.
6. Media Devices API: The Media Devices API allows web applications to access media input and output devices, such as cameras and microphones. This API can be used for tasks like selecting cameras for video recording or choosing microphones for audio input.
7. Web Components: Web Components is a collection of standards that enables you to create reusable custom HTML elements. It consists of Shadow DOM, Custom Elements, and HTML Templates. Web Components allow you to encapsulate and extend existing HTML elements, creating your own components that can be reused across projects.
8. Service Workers: Service Workers are scripts that run in the background of a web page, independent of the web page itself. They enable features like offline caching, push notifications, and background synchronization. Service Workers can enhance the user experience by providing faster loading times and offline access to web applications.
9. Native File System API: The Native File System API enables web applications to read and write files on a user’s device using a user-friendly file picker interface. This API enhances the capabilities of web applications for working with local files.
10. Background Fetch API: The Background Fetch API allows developers to schedule background tasks for fetching and processing data even when the web app is not open. This is useful for scenarios like content updates or syncing data in the background.
11. Idle Detection API: The Idle Detection API allows websites to detect when a user’s device is idle or actively in use. This can be useful for optimizing the timing of certain tasks or interactions based on the user’s engagement with the device.

Remember that browser support for these APIs may vary, and you should always check compatibility tables and usage guides for the latest information. Additionally, stay updated with the latest developments in the web ecosystem to discover new APIs and features that can enhance your web development projects.

Use https://caniuse.com/ to check web API browser support.

Connect here
https://twitter.com/rao123dk
https://www.linkedin.com/in/rao123dk

New Browser APIs That Every Web Developer Should Know was originally published in JavaScript Kingdom on Medium, where people are continuing the conversation by highlighting and responding to this story.

Some regular expressions are looking simple, but can execute a very long time, and even “hang” the JavaScript engine.

Sooner or later most developers occasionally face such behavior. The typical symptom — a regular expression works fine sometimes, but for certain strings it “hangs”, consuming 100% of CPU.

In such case a web-browser suggests to kill the script and reload the page. Not a good thing for sure.

For server-side JavaScript such a regex may hang the server process, that’s even worse. So we definitely should take a look at it.

Catastrophic backtracking can also occur in JavaScript, which uses regular expressions in its built-in String.prototype.match() and RegExp.prototype.exec() methods.

Here’s an example of a regular expression in JavaScript that can cause catastrophic backtracking:

let pattern = /^(a+)*b/;
let input = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaab";
let match = input.match(pattern);

The regular expression ^(a+)*b is trying to match the string "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaab" but it will cause the engine to explore an exponential number of possible match paths because of the use of unbounded repetition (*) which causes the engine to backtrack through each character one by one to find a "b" at the end.

To avoid catastrophic backtracking in JavaScript, you can use the same solutions as mentioned above, such as using bounded repetitions, avoiding nested quantifiers and use possessive quantifiers.

For example, instead of using ^(a+)*b use ^(a{1,10})*b. This limits the number of a's that can be matched and it will not cause catastrophic backtracking.

It’s important to keep in mind that when working with large inputs or when using regular expressions with complex patterns, it’s essential to keep an eye on performance and to test the regular expressions using different inputs to ensure that they’re not causing any issues.

For more details visit.

Happy Coding….

Catastrophic Backtracking in Regular Expressions was originally published in JavaScript Kingdom on Medium, where people are continuing the conversation by highlighting and responding to this story.

Lets talk about free tunneling solution, to host your local web applications over the cloud and access the app from the publicly accessible web url. No server is required.

1. Ngrok

Authorization — User is required to sign up in order to generate auth token.

Support(HTTP / HTTPS, SSH) — Supports all 3 protocols.

Usage — Usage is through ngrok executable (or through node js based library).

Free Or Paid — Offers both free and paid version. Free version has limited but rich functionalities.

Subdomain Support — Subdomains are supported in the paid version.

How to setup Ngrok in your system

1. Visit https://dashboard.ngrok.com/signup
2. Download and install Ngrok. Ref:- https://dashboard.ngrok.com/get-started/setup
3. Get Authtoken visit https://dashboard.ngrok.com/get-started/your-authtoken
4. Add Authtokn in your system by command

./ngrok authtoken 1UawrhXGOPp53533ftC_49AXASfWj5vwmoshrbwpFB8M9

5. Run the command ./ngrok http YOUR_APP_PORT

Example:- ./ngrok http 3000

You will get public url something like this http://d4f9-47-31-222-247.ngrok.io/

2. Localtunnel

Authorization — No auth token is required. You can simply install the node package and start using it.

Support(HTTP / HTTPS, SSH) — Supports http/https.

Usage — Can be simply used through nodejs executable.

Free vs Paid — Is Free.

Subdomain Support — Free version supports subdomain too. If available it starts subdomain with the given value.

How to setup Localtunnel in your system

1. Install localtunnel by NPM (npm install -g localtunnel ) add sudo if you are linux user sudo npm install -g localtunnel
2. Run lt --port YOUR_APP_POST

Example :- lt --port 3000

your url is: https://tidy-catfish-70.loca.lt

3. localhost.run

Authorization — No download or signup

Support(HTTP / HTTPS, SSH) — Supports http/https.

Usage — Show clients work running on your computer.

Free vs Paid — Forever free tier(Only paid for custom subdomain)

Subdomain Support — yes but paid for custom subdomain

How to setup localhost.run in your system

1. No download or signup
2. Run below command

ssh -R 80:localhost:YOUR_APP_PORT ssh.localhost.run

Example:- 

ssh -R 80:localhost:3000 ssh.localhost.run

Your Public URL :- https://ef3d1418fa2ef3.localhost.run

Thanks for Reading and Happy Coding !!

Please share your suggestion and feedback in comment or DM me on my twitter(@rao123dk). Mots welcome to your Suggestions and Feedback.

https://twitter.com/rao123dk
https://www.linkedin.com/in/rao123dk

Host locally running app on the internet (free) without any web server was originally published in JavaScript Kingdom on Medium, where people are continuing the conversation by highlighting and responding to this story.

Here,we are going to discuss about comparison and equality between == , === and object.is().

First of all, I want to share about when the first time I saw Object.is() and where. I was writing the first time test case for React component in (Enzyme+jest). Then I got the first error in my terminal like this expected(received).toBe(expected) //object.is equality. After that, I have explored and now here we are. Thanks.

There are four equality algorithms

1. Abstract Equality Comparison (==)
2. Strict Equality Comparison (===): used by Array.prototype.indexOf, Array.prototype.lastIndexOf, and case-matching
3. SameValueZero: used by TypedArray and ArrayBuffer constructors, as well as Map and Set operations, and also String.prototype.includes and Array.prototype.includes since ES2016
4. SameValue: used in all other places

JavaScript provides three different value-comparison operations

1. Double equals (==) will perform a type conversion when comparing two things, and will handle NaN, -0, and +0 specially to conform to IEEE Standard for Floating-Point Arithmetic (IEEE 754) (so NaN != NaN, and -0 == +0);
2. Triple equals (===) will do the same comparison as double equals (including the special handling for NaN, -0, and +0) but without type conversion; if the types differ, false is returned.
3. Object.is does no type conversion and no special handling for NaN, -0, and +0 (giving it the same behavior as === except on those special numeric values).

Why do we need Object.is ?

You might think, we already have strict equality (checks type + value) checking in JavaScript with the === operator, why do we need this function? Well strict equality isn't sufficient in some cases and they are the following:

Object.is() helps us by being able to compare these values to see if they are similar, something the strict equality operator cannot do.

Conclusion & Feedback

Triple equals(===) is called strict comparison operator in JavaScript. Object.is and strict comparison operator behave exactly the same except for NaN and +0/-0.

Please share your suggestion and feedback to me in comment box or DM me on my twitter(rao123dk). Your Suggestions and Feedback is Welcome.

Thanks for reading.

Happy Coding! Special thanks to MDN web docs for awesome explanations.

Comparisons and sameness Between == , === and Object.is was originally published in JavaScript Kingdom on Medium, where people are continuing the conversation by highlighting and responding to this story.

Right knowledge is the ultimate solution to all our problems. — Bhagavad Gita

Every Problem contains within itself the seed of its own solution. — Stanley Arnold

In this Post, we are going to learn, How to solve the same problem by multiple ways in JavaScript.

1. IIFE(Immediately Invoked Function Expression)

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

Here we can write IIFE by 12 ways.

2. Creating Arrays

The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects. For this topic I would like to say thanks to 2ality.com .

Here we can create array by 10 ways.

3. Function

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure — a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.

Here we can write function by 6+ ways.

4. Covert to Number

The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor. A primitive type object number created using the Number() function.

Here we can convert string to Number by 9 ways.

Thanks for Reading!

If you found any mistake please post in comments. I would like to hear your suggestions and comments. This is my first post.

My twitter handle :-

{… Many ways in JavaScript } was originally published in JavaScript Kingdom on Medium, where people are continuing the conversation by highlighting and responding to this story.