One of the most critical challenges facing new software products is simple but brutal: when you launch, you have zero users. This phenomenon is known as the Cold Start problem — a metaphor derived from trying to start a car in the middle of winter. It’s slow, painful, and likely to fail unless you warm things up fast. This is my 46th Medium article.

So, how can new software attract users?

After speaking with several friends who are building startups, one insight stood out: Cold Start is the number one hurdle for most founders. It’s often not that hard to build a product — but it’s extremely hard to find users. Solving Cold Start, and sustaining user growth afterward, is the only path to survival and long-term traction.

Cracking Cold Start Begins with Network Effects

To overcome Cold Start, you must engineer network effects into the core of your product.

So, what are network effects?

A network effect occurs when a product becomes more valuable as more people use it. It’s about turning user connections into retention and stickiness.

Take the telephone, for example. At launch, it had a Cold Start issue — it could only connect two fixed users, like a glorified walkie-talkie. Naturally, few people wanted it. But once telephone networks formed, adoption skyrocketed. The more users joined, the more valuable the system became.

In short: your product must enable users to connect with each other in order to generate compounding value.

Start with an Atomic Network

When launching a new product, the goal should be to build an “Atomic Network” — a small, dense group of users who can extract real value from the network without needing mass adoption.

An atomic network is the smallest self-sustaining unit of your product’s ecosystem — where core interactions are already meaningful.

Whether you recruit friends, tap into existing communities, or pay users to join, your first milestone should be to make this initial network functional and engaging from Day One.

Make Sure the Atomic Network Delivers Value in 3 Minutes

Here’s a practical benchmark: the atomic network should offer enough utility that new users stay engaged for at least 3 minutes.

If users drop off before that, it’s a signal that the network density is too weak to deliver value.

Examples from high-growth platforms:

• Uber: The atomic network includes 15–20 active drivers in a local area, ensuring a car arrives within 3 minutes.
• Airbnb: Around 300 active listings per city create enough inventory to attract and retain users.
• Reddit: 1,000 active subreddits ensure every type of user finds a niche that interests them.
• Slack: A viable team starts with 3 people and at least 2,000 messages exchanged to demonstrate meaningful collaboration.

If Your Product Lacks Network Attributes — Add Them

Users come for the tools, but stay for the network.

Instagram started as a basic photo filter app. While initially novel, it failed to retain users — they left after playing with it a few times. The breakthrough came when it evolved into a photo-sharing social network, adding the ability to follow others and see real-time photo streams. That shift created the network effect — and led to Instagram’s $1 billion acquisition by Facebook within 18 months.

Other notable examples:

• Yelp: Evolved from a simple directory into a review-driven local network.
• LinkedIn: Transformed from an online résumé builder into a professional networking ecosystem.

Lesson: If you want network effects, you must become the network.

The 20,000-User Threshold

In most market segments, once your product reaches 20,000 active users, the Cold Start barrier is effectively broken.

This is the inflection point where the network begins to grow organically, and word-of-mouth kicks in. Once you pass this critical mass, growth becomes exponential and sustainable.

Final Thoughts

The Cold Start problem isn’t just a technical or marketing challenge — it’s a structural design issue. You must build your product in a way that creates value for the first 10 users, not just the first million.

Focus on atomic networks. Engineer network effects early. And remember: growth is not a feature you add later. It must be embedded from the beginning.

Breaking the Cold Start Barrier was originally published in Hacking Hunter on Medium, where people are continuing the conversation by highlighting and responding to this story.

Typically, many developers easily fall into the if-else trap, not because of the complexity of other solutions, but because it follows the natural language pattern. This is my 45th Medium article. In below, I added the example of multiple if-else spaghetti code.

const setColor = (color) => {
    let colorHexCode = '';
    if (color === 'blue') {
        colorHexCode = '#4169E1';
    } else if (color === 'green') {
        colorHexCode = '#98FF98';
    } else if (color === 'butter') {
        colorHexCode = '#FFE4C9';
    } else if (color === 'pink') {
        colorHexCode = '#E78895';
    } else {
        colorHexCode = '#B4B4B8';
    }
    document.getElementById('button').style.color = colorHexCode;
};

Some people may think using a ternary operator helps to escape from the if-else maze.

Ternary? Operator:

Technically, if-else and ternary serve as conditional operations and the ternary operator is not a revolutionary difference from if-else. The ternary operator returns a value, making it useful for direct value assignment. Below, I added the example of using multiple ternaryoperators.

const setColor = (color) => {
  document.getElementById('button').style.color =
    color === 'blue'
      ? '#4169E1'
      : color === 'green'
      ? '#98FF98'
      : color === 'butter'
      ? '#FFE4C9'
      : color === 'pink'
      ? '#E78895'
      : '#B4B4B8';
};

The above example also reduces the readability of the code.

Switch() Case:

If not using if-else or ternary operator, most developers may go with the switch statement. However, the switch statement entails a significant amount of boilerplate and repetitive code that we could do without.

const setColor = (color) => {
  let colorHexCode = '';
  switch (color) {
    case 'blue':
      colorHexCode = '#4169E1';
      break;
    case 'green':
      colorHexCode = '#98FF98';
      break;
    case 'butter':
      colorHexCode = '#FFE4C9';
      break;
    case 'pink':
      colorHexCode = '#E78895';
      break;
    default:
      colorHexCode = '#B4B4B8';
  }
  document.getElementById('button').style.color = colorHexCode;
};

Lookup Table

The key advantage of using a lookup table over traditional conditional structures like if-else or switch statements is that lookup table turns multiple instances of comparative logic into data.

const colorHexCode ={
    'blue': '#4169E1',
    'green': '#98FF98',
    'butter': '#FFE4C9',
    'pink': '#E78895',
    'default': '#B4B4B8'
}
const setColor = (color) => {
  let colorHexCode = '';
  document.getElementById('button').style.color = colorHexCode[color]? colorHexCode[color]: colorHexCode['default'];
};

in the above example, there is only one logic check using a ternary operation for the default fallback.

const colorHexCode = {
  blue: '#4169E1',
  green: '#98FF98',
  butter: '#FFE4C9',
  pink: '#E78895',
  default: '#B4B4B8',
};
const setColor = (color) => {
  let colorHexCode = '';
  document.getElementById('button').style.color  = colorHexCode[color] ||  colorHexCode['default'];
};

in the above example, there is only one logic check but we avoid ternary operation and use OR operator for the default fallback.

In the above two examples, the code illustrates the logic as a single operation, making it more expressive. Additionally, the code becomes easier to test due to the minimized logic. By consolidating our comparisons into pure data, we ensure improved maintainability.

Conclusion

By using a lookup table, the code is cleaner and easy to read and maintain. The average time complexity for the if-else statement, ternary operator, switch statement and lookup table is O(1). There is no difference between the time complexity but the lookup table is a simple pattern and clean.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io

Escaping if-else maze in JavaScript was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

In Node.js, there are multiple ways to copy files., let’s take a look at the possible ways and analysis each of them. This is my 44th Medium article.

1.copyFile

The copyFile() function, which can copy a file directly to the destination directory, performs the simplest action.

fs.copyFile('./data.txt', './dest/info.txt');

The above method, asynchronously copies the file from src to dest. If dest is already exists then by default it is overwritten. There are no args passed to the callback function over than any possible exception. Node.js does not ensure that copy operations are atomic. Node.js will attempt to delete the target file if an error happens after opening the target file for writing.

There is a disadvantage when we use the above method. If the target directory does not exist then an exception will be thrown because the target directory must exist (the method will not automatically create the target directory). Therefore, before using the above method, user must validate whether the target directory definetly exists or not? If the target directory doesn’t exists, user could use fs.mkdir()or fs.mkdirSync()to create the target directory. copyFile() method can’t copy directories.

💡 Speed up your blog creation with DifferAI.

Available for free exclusively on the free and open blogging platform, Differ.

Introducing DifferAI

2. readFile and writeFile

In this way, read the content of the source file and then write to the target file. If the content of the source file has to be modified during copying, this method is suitable

The disadvantage of this method is the same as the above copyFile() method. readFile() method is used to read the contents of the source file and writeFile() method can only write files in existing directories. By using this method we can’t copy directories. The content can be modified while being copied is the advantage of using this method.

3. createReadStream and createWriteStream

readFile() method and writeFile() method are the whole block of operation data. If the file size is large the above method will put more strain on system resources. createReadStream() and createWriteStream() is to use the way of stream to manipulate data.

fs.createReadStream('./data.txt').pipe(fs.createWriteStream(`./info.txt`));

4. cp

The new fs.cp() method has been added since version 16.7.0 of Node.js. By using this method, the entire directory structure including subdirectories and files can be copied asynchronously from src to dest. fs.cp() method can copy either a file or a directory. The configuration’s recursive property needs to be set to true if a directory copy is required.

To copy files

To copy the directory, including subdirectories and files.

As you can see, this fs.cp() method is much better than the above 3 methods.

1. The dest directory doesn’t need to be required to exist. The dest directory will be automatically created if it doesn’t already exist (regardless of the level of a directory)
2. You can completely copy files in the entire folder, including subdirectories, without recursively copying them separately.

When you are going to use this method first thing first you need to confirm the Node.js version!

What if you want to copy every file in the folder but you only have a lower version of Node.js? We can recursively copy some files in addition to the native cp command for Linux, which is covered in the next section:

How to use:

copyDir('./component', './page/home');

5. cp command in Linux

To execute Linux native commands, we may use the exec or spawn commands in child_process. To copy files or directories, the cp command in Linux is used.

Conclusion

You could able to use the above 5 methods if you are using the latest node version. Using the fs module in the node, I have shared the fastest ways to copy a file/directory. We utterly looked at the asynchronous methods that we accessed through the fs module of Node.js.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io

How to copy files and folders in Node.js? was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

I often want to rewrite localStorage to implement a certain function. What are the methods to rewrite the methods in localStorage? There are many developers who want to rewrite the methods in localStorageto realize the expiration time of the key, or to monitor the read and write of the key. So what are the methods to override the methods in localStorage. This is my 43rd Medium article.

1. Rewrite directly on localStorage

Many developers like the idea of ​​rewriting, first keeping the original method and then rewriting the method directly on localStorage like below.

However, this way of writing is not overriding the method setItem(), but to add a setItem attribute to localStorage. When the value attribute of the method is declared, the native setItem() method is overwritten.

I haven’t tested it too much, but in some browsers, this attribute will be ignored and causing our rewriting to fail.

2. Override the method on localStorage.__proto__

If we look closely, setItem and getItem are inherited from Storage __proto__ pseudo property.

Then we directly override the above localStorage.__proto__ method.

This implements the real override of the setItem() method.

But there is still a problem here. Both localStorage and sessionStorage inherit from Storage. After rewriting the properties or methods on localStorage.__proto__, the methods in sessionStorage are also rewritten.

3. External packaging layer

We do not directly modify the method of localStorage itself, but wrap a layer on the outside, and then use localStorage to realize the storage function at the bottom layer.

In this way, the degree of freedom is relatively higher, and there is no compatibility problem in Section 1. Only the name used has changed and the properties and methods in localStorage are completely blocked.

If you want to use a custom object without the pack then you need to implement all the properties and methods. It is not possible to mock a method alone like the above.

4. Override localStorage

Use Object.definePropertyor Proxyequivalent to completely overriding the localStorage variable. Better than Section 3 in that the name has not changed.

4.1 Direct coverage, no effect

If you use the following method to cover directly, it will have no effect.

window.localStorage = Object.create(null);  console.log(window.localStorage); //still native

We get the property descriptor of localStorage through Object.getOwnPropertyDescriptor. It can be found that there is no writable: true attribute, which means that localStorage is not directly writable.

4.2 Overriding with Object.defineProperty

Since there is no writableattribute, we will add one to it. We can override localStorage with Object.defineProperty.

But you can’t use the above writing method with one layer outside. If you directly give the above myLocalStorage to localStorage then it will generate infinite recursion (to avoid misleading, the wrong writing method will not be written here).

I have made a backup of localStorage here. If you need a native method then you can also operate it.

5. Summary

In this article, we do not specifically implement a function such as setting the expiration time. But talk about how to rewrite localStorage or the methods in it from another perspective.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

How to Override Methods in localStorage? was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

What does the term “microservices” mean exactly? What sort of architecture falls within the microservices? Despite the abundance of materials online, none of them are easy for beginners to understand. In my opinion, this concept is actually rather straightforward and is easily explainable. Nowadays, developers need to do changes to an application and need to deploy it as soon as possible without redeploying the whole application. This problem led to the microservices development paradigm. This is my 42nd Medium article.

Monolithic software

You must first understand the development of software architecture in understanding microservices. Software that had all functionalities created at once was known as monolithic software in the early days of software development. Like an integrated machine, the entire piece of software exists as one unit.

In the monolithic architecture, it is conceivable that the more functions of the software will be the more complex and many shortcomings will be exposed.

1. All functions are coupled together, affect each other, and are ultimately difficult to manage.
2. Even if only one line of code is modified, the entire software must be rebuilt and deployed, which is very costly.
3. Because the software is made into a whole, it is impossible for each function to be developed and tested separately, but only as a whole, so the waterfall development model must be adopted.

In short, large-scale software with monolithic architecture is not only slow to develop but also forms complex code that is difficult to maintain and upgrade and becomes a heavy burden for programmers.

Service-Oriented Architecture

It has long been suggested that the monolithic architecture must be divided, the coupling of the code must be broken, and the program should be divided into independent functional units in order to address the aforementioned issues. The term “service-oriented architecture” (SOA) first appeared about 20 years ago, when functional units could be provided remotely as “services”.

Software that continually performs a certain function in the background is known as a service. The most popular service is the Web service, which offers external web access through port 80.

“Service-Oriented Architecture” is to split a single large program into independent services like smaller programs. The services are connected by communication protocols and each service is a separate, independently operating entity that performs various tasks.

This architecture has many advantages. Those are,

1. Each service has a single function which is equivalent to a small software and convenient for development and testing.
2. Each service runs independently, which simplifies the architecture and improves reliability.
3. The same service might be used for multiple purposes, therefore encouraging and supporting code reuse.
4. For easy upgrades, different services can be developed and deployed independently.
5. Good scalability, simple addition of more machines and functionalities, and capacity to bear heavy loads
6. Less probability to have a single point of failure because a service won’t affect by another service’s failures.

Language is not a factor in service-oriented design, as opposed to monolithic architecture. Different services may need to be deployed in various environments and systems, and they may be built using various languages and tools. This indicates that the service-oriented architecture operates on several servers by default, each of which offers a service, and the combination of numerous servers creates a full-fledged network application.

Microservices

Microservices design focuses on categorizing programs that are otherwise huge and cumbersome. Each microservice is focused on a certain feature or function of an application. Several of these microservices are combined to make a single, efficient application.

This instinctive, functional split of an application has a lot of advantages. The user interface can be used by the client to make requests. Simultaneously, one or more microservices are engaged to accomplish the desired operation via the API gateway.

Advantages of Microservices Architecture

In application development using microservice architecture is a beneficial approach. A microservice is an independent process. This process can run locally, on another server, or in the cloud (such as cloud services and cloud function FaaS). Its characteristics are the same as service-oriented architecture, but because it is lighter, the decoupling and service-oriented functions can be done more thoroughly. Also, it can be standardized, the same container will have the same result no matter where it is run, so there are many SaaS products on the market that provide standardized microservices.

• Scaling up requires less development work.

As microservices are self-contained, smaller development teams may work on different components simultaneously to update current functionality. This makes it much easier to not just discover and scale hot services independently of the rest of the app, but also to enhance the app as a whole.

• Independent deployment

Each microservice setups a full-stack application. At any point, microservices are to be deployed independently. It’s simple for development teams to work on one microservice to solve bugs and then redeploy it without redeploying the entire application because microservices are granular in nature.

• improved fault isolation

Even a minor component failure might render the entire application inoperable in a monolithic application. Determining the mistake can occasionally be time-consuming. Since the entire program is separated into independent, fully functional software components, identifying the problematic component is simple when using microservices. Other unrelated units will still work even if errors happen.

• No reliance on a single tech stack

A set of programming languages, front-end and back-end tools, frameworks, databases, and other similar elements are collectively referred to as a technological stack and are used by developers to create applications. Developers can choose a technology stack with microservices that is most suited for a certain microservice and its functions.

Microservice architecture accelerates and optimizes software development. Agile deployment aptness combined with flexible application of various technologies significantly reduces the development cycle duration. Microservices architecture is used for data processing tasks, media content (ie. Netflix, Amazon Prime), website migration, handling transactions and generating invoices.

Docker, which debuted in 2014, completely changed how software is developed. It enables program containerization, uses a minimal amount of system resources, and lets each container create its own operating environment.

Evidently, “service-oriented architecture” can be implemented using containers, and each service now resides in a container rather on a server. Multiple servers are not required in this method. To construct a service-oriented architecture, which was previously impossible, the system runs several containers in the most basic scenario. Microservices are the name of this implementation. Microservices are service-oriented architectures that make use of container technology. Although it still uses “service” as a functional unit, the implementation is now lightweight, just requiring a new container (a process), thus the term “microservice”.

Challenges in microservice

From deployment through operation and maintenance, the microservices architecture has its share of difficulties. Some of the hurdles are discussed below.

• Inter-service communication

A microservice frequently need to communicate and interact with another microservice to meet certain demands or complete particular tasks. This demand maintains a fully functional API providing a channel of communication between various services making up the application.

• Distributed logging

When many microservices are implemented as a component of an application, each of these services has a unique logging method. As a result, there are significant amounts of dispersed log data that are unstructured and challenging to manage.

• spanning transactions

Distributed transactions are those that need a number of microservices to be deployed and operating correctly in order to complete. This implies that a transaction involves several microservices and databases, and it will fail if even a little error is in just one of them.

• Cyclic dependencies

In a microservices architecture, codependency between two or more application services or modules is referred to as a cyclic dependency. It may be challenging to grow the application or separately deploy and manage microservices due to cyclical dependencies. Additionally, they are notorious for making code harder to maintain. Decoupling becomes very hard if they continue for a while.

Conclusion

The most widely used and trustworthy method for creating cloud applications nowadays is the microservices architecture. It has strong support because of the many benefits it offers tech development teams, including faster development times, increased flexibility, and higher reliability.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, and Discord.

What Are Microservices? was originally published in AWS in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this article, I will explain how to retrieve the stats ( claps count, voter count, response count, and reading time) of Medium feed posts using a REST API, the lack of this feature in the Medium RSS feed is what motivated me to create this advanced Medium API. This is my 41st Medium article.

Initial Intuition

I wanted to obtain the stats ( claps count, voter count, response count, and reading time) of my Medium posts while working on my personal website development. 2 years before when I implement the medium widget to my website I found Pixelpoint.io which generated a widget with clap counts of a medium post. At that moment I wondered how they implemented it? Then I forget to research it but last month I found that pixelpoint.io’s widget is not working. I looked everywhere for a solution to my needs but couldn’t find one, so I had no choice but to code it myself.

My initial intuition was to look at the RSS feed but there were no such details are provided then I looked at the official documentation of the public REST API by Medium, and nothing was there either. The Medium REST API only allows you to create a Medium article by HTTP POST method(cf section 3.3). You can’t retrieve or edit a Medium article by using the Medium API 😔.

In order to get an understanding of how the useful stats are retrieved in the Medium post, I started to inspect the Medium using browser developer tools. Shockingly, there was no request to obtain the stats among all the XHR calls, which push me to look at the HTML response of the Medium post.

curl https://medium.com/p/unique_Id_of_the_post >> post.html

As a javascript variable, the claps count, voter count, response count, and reading time are directly injected into the HTML response. You can verify that by typing console.log(window.__APOLLO_STATE__); in the Javascript console of the Post page.

Then I scrape those useful stats using request and cheerio .

How to scrape data in Script Tag

In a medium post, data comes as JSON in a script tag. By using javascript, those data are picked up and rendered in DOM on the browser-side. Usually, data in a script tag takes this form:

Then I scrape Medium post data without a headless browser.

First, I get the website and look for errors. Then I confirmed whether the body exists, and load the body using cheerio in $ . In try block, all the tag script contents are mapped in an array. Then find the element which includes window.__APOLLO_STATE__ , replace the assignment window.__APOLLO_STATE__ = with an empty string. I replace the /"/g with ‘"’ and parse with JSON.parse . Finally, get the appropriate values from the JSON.

The advantages of this technique over headless browsers are super fast and takes way less processing and resources.

How to use the Advanced Medium API

You could able to use the Advanced Medium API that I developed as follows:

There are 5 types of requests. you could be able to get all the responses by using HTTP GETmethod.

Medium feed in JSON

You could able to get the RSS feed of the last 10 Medium posts by using the following links (replace your username instead of @username ).

medium.com/feed/@username 
or 
username.medium.com/feed

The following request of the API gives the direct JSON conversion of that RSS Feed.

curl https://advanced-medium-api.herokuapp.com/medium/user/{userId}

Medium Advanced Data

You could able to get the Medium feed in JSON with the missing part of the Medium feed such as clapCount, voterCount, responseCount, readingTime. each missing data injected in every post(items) object.

The following request of the API gives the JSON conversion of the RSS feed with the injection of missing data.

curl https://advanced-medium-api.herokuapp.com/advanced/user/{userId}

Medium Customized Data

JSON conversion of the Medium RSS feed is customized according to the categories. Order the Medium post’s tags according to their use count among the latest 10 posts and the tagOrder return that tags' order rank. Medium's latest 10 posts were divided by 3 and every 3 posts were pushed in an array and those arrays were pushed in one array. There is an algorithm that returns the most suitable tag for the Medium post among the other tags of that Medium post.

The following request of the API gives the customized version of the Medium feed in JSON

curl https://advanced-medium-api.herokuapp.com/customized/user/{userId}

Medium Customized Advanced Data

This response contains the Medium customized data with the injection of missing stats such as clapCount, voterCount, responseCount, readingTime.

The following request of the API gives the customized version of the Medium feed in JSON with the missing part of the Medium feed.

curl https://advanced-medium-api.herokuapp.com/advanced/customized/user/{userId}

Missing data of a particular post.

This response contains only the missing part (clapCount, voterCount, responseCount, readingTime) of Medium feed for a particular Medium post.

Request 💻 ➡ 🌎 :

curl https://advanced-medium-api.herokuapp.com/medium/post/{postId}

Response 🌎➡💻 :

{
  "clapCount": 98,
  "responseCount": 4,
  "voterCount": 12,
  "readingTime": 4
}

Conclusion

This API is Open Source and I welcome your contributions. last 2 years I used the medium widget from Pixelpoint.io which generated a widget with clap counts of a medium post. I didn’t do research to get the missing part of the Medium feed when I used Pixelpoint.io. but 2 months before Pixelpoint.io is not working and this incident affects my personal website. Therefore I pushed myself and created this API.

The Medium RSS Feed’s Missing Part was originally published in Geek Culture on Medium, where people are continuing the conversation by highlighting and responding to this story.

An easy way to maintain clean code in React

Using absolute imports to better organize your React project is a great way. Relative imports are hard to follow and break during refactoring. Absolute imports manage your project easier as it grows. Forget long relative imports after this article. This is my 40th Medium article.

The Problem

What if your project’s folder structure is complex, and you need to go up in it? Inside of your components, you have imports that look like the below example with relative imports.

import {MyComponent} from ‘../../../../components/MyComponent’;

You can break the above import by changing the path of the component from which you are importing your MyComponent. Let’s assume you decide to move MyComponent into its own folder. Then you would need to update all of your imports in your project and add one extra ../ to all of your imports. Relative imports has some more problems.

• Pretty hard to refactor
• It becomes worse as you get further deeper into it.
• You need to change the entire codebase if you need to extract the code to be used externally as an NPM module.

Absolute Imports

By using absolute imports, you can alias some folders to a name like below:

import {MyComponent} from ‘components/MyComponent’;

Absolute imports have some advantages.

• There is no ../../../../hell. Therefore easier to type out the imports.
• Easily copy-paste the code with imports into another file in the project and not have to tinker with import paths.
• It is short and sweet

The below example is a file with Relative imports.

Make the imports in the above file prettier.

Therefore, how can you use absolute imports with ReactJs?

Using TypeScript

If you need to set up absolute imports in your Typescript application add/update your tsconfig.json file in the root directory of the project. Then you need to update the compiler option baseUrl in the file.

Using JavaScript

Setting up absolute imports to Typescript and setting up absolute imports to JavaScript is pretty much the same process. Create the jsconfig.json file in the root directory of the project. Then you need to update the following snippet.

Now you can import your components like this.

import {MyComponent} from ‘components/MyComponent’;

You can also use the compiler option paths as well. Perhaps you want to alias your component folder. For that, you need to set up your tsconfig.json, or jsconfig.json as shown in below:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@component/*": ["src/components/*"],
    }
  }
}

Now you can import the components from your component folder like this:

import {MyComponent} from ‘@component/MyComponent’;

is that enough?

Well, no… You need to make your IDE smart to understand absolute imports in your files. Here I am going to mention the progress for the top 2 IDEs. Those are VS Code and WebStrom.

For VS Code

VS Code is smart enough to understand the tsconfig.json, or jsconfig.json file. Intellisense and jump-to-source are just working fine with absolute imports.

Therefore, you can follow the above process.

For WebStrom / IntelliJ Idea

Select the src folder in the project window and right-click on it. Select the option Mark Directory as and then select the Resources Root option.

Now go to Settings -> Editor -> Code Style -> JavaScript and select the Imports tab. Then check the Use paths relative to the project, resource or sources roots.

Now WebStrom knows where the absolute imports are pointing. There won’t no warnings and autocomplete/ jump-to-source will work. This means the auto-import mechanism uses absolute imports.

If you are a strict developer like me, use something like Airbnb’s ESLint config.

With ESLint

Create React App also has an ESLint setup but it has a minimal set of rules. eslint-plugin-import is used by Airbnb and this plugin checks undefined imports. When you are going to use Airbnb’s ESLint config it will give you the error shown below:

You can fix the error by add settings prop in your ESLint config. That setting prop point that your imports might be relative to src folder. Therefore, you need to add update your ESLint config in .eslintrc file like this:

You don’t need to install any NPM modules to avoid the ESLint error, add the settings prop is enough.

By Convention

Absolute imports have been possible for a long time with Webpack. When you are naming your aliased folder, you need to use PascalCase/CamelCase because it is the convention follow in the Webpack.

Conclusion

Absolute imports might befuddle a new developer for a while. If they understand it, then it is pretty easy to use. Therefore, I suggest including a few lines about importing mechanisms in your Readme, or you might link to this article. I am not going to change any content after I publish this article. I hope you enjoyed this small trick to better organize your React project.

Have fun coding! 😃

More content at plainenglish.io

Why and How to Use Absolute Imports in React was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Mocking network requests even easier

Nowadays, it is necessary to modify an older library to TS and perform unit testing. If the library is modified to TS, there is still a little bit better. Unit testing is purely a current study and sold now. For beginners to learn the Jest framework, I think the more troublesome thing in unit testing is to test network requests. So record some of the ways that Mock dropped Axios to initiate network requests. This is my 39th Medium article.

Introduction

The examples mentioned in the article are all in the jest-mock-server repository. You can start the example directly by installing the package manager, for example, installing through yarn:

$ yarn install

Some commands are specified in the package.json, which are as follows:

• npm run build : The packaging command of rollup .
• npm run test:demo1 : Simply mock the network request library encapsulated.
• npm run test:demo2 : Complete the mock by re-implement hook.
• npm run test:demo3 : Use the library in Jest to complete the implementation of demo2.
• npm run test:demo4-5 : Start a node server, proxy the network request through the proxy of axios, and forward it to the started node server. By setting the corresponding unit test request and response data, the corresponding relationship is used to realize the test, which is jest-mock-server finished work.

Here we encapsulate a layer of axios, which is closer to the real scene. You can view the test/demo/wrap-request.ts file. In fact, it simply creates an axios instance internally and forwards the response data.

The test/demo/index.ts file simply exports a counter method, where these two parameters are processed to a certain extent before the network request is initiated. Then the response data is also processed to a certain extent, just to simulate related operations.

Here Jest uses the browser environment simulated by JSDOM, the startup file test/config/setup.js is configured in the setupFiles attribute configured in jest.config.js, and JSDOM is initialized here.

demo1: Simple Mock network request

Simple mock processing is performed in test/demo1.test.js, and you can try to run it through npm run test:demo1. In fact, a mock operation is performed on the wrap-request library that wraps axios. wrap-request will be compiled when Jest is started. After the library is mocked here, all the files imported into the library afterward will get the mocked objects. In other words, we can think that this library has been rewritten, and the methods after rewriting are all JEST’s Mock Functions . You can use functions such as mockReturnValue for data simulation. For Mock Functions, please refer to this link.

Here we have completed the Mock of the return value, which means that we can control the value returned by the request in the wrap-request library. However, it was mentioned before that there are also certain processes for the incoming parameters. We haven’t made any assertions on this part of the content, so we also need to try to deal with this.

demo2: hook network request

demo2 can be tried to run through npm run test:demo2. As mentioned above, we can handle the return value but there is no way to assert whether the input parameters are processed correctly so we need to deal with this situation. Fortunately, Jest provides a way to directly implement the function library that is mocked. Therefore, Jest also provides a mockImplementation method, which is used in demo3. Here we have rewritten the mocked function library. We can also use jest.fn to complete Implementations . Here we write a hook function before returning and then implement assertions or specify return values ​​in each test. In this way, the above problem can be solved, which is actually the realization of mockImplementation of Mock Functionsin Jest.

demo3: Use Jest’s mockImplementation

demo3 can be tried to run through npm run test:demo3. The example in demo2 is actually complicated to write. In Jest, Mock Functionshas the implementation of mockImplementation which can be used directly.

demo4–5: Really initiate a network request

demo4 and demo5 can be tried to run through npm run test:demo4–5. In this way, a real data request is made. Here, axios proxy will be used to forward internal data requests to the specified server port. Therefore, the server is also started locally and the test is performed by specifying the request and response data related to the corresponding path. If the requested data is incorrect then the related response data will not be matched normally. Therefore, the request will directly return 500. If the returned response data is incorrect, it will also be captured during the assertion. In the jest-mock-server library, first, we need to specify three files which are corresponding to the three life cycles that each unit test file to be executed before startup. Jest test is executed before the three life cycles and the three life cycles are executed after the Jest test is completed. The three files which we need to specify are the setupFiles, globalSetup, and globalTeardown configuration items of the jest.config.js configuration file.

First we are going to start with setupFiles. In addition to initializing JSDOM, we also need to operate the default proxy of axios. Because the solution adopted is to use the proxy of axios to forward data requests. Therefore, it is necessary to set the proxy value at the forefront of the unit test.

Once we set up the above file inside thetest/config folder then we need to add two more files in there which are globalSetup and globalTeardown . These two files refer to the operations performed before the Jest unit test starts and after all tests are completed. We put the server startup and shutdown operations in those two files.

Please note that the file running in these two files is a separate independent contex which has nothing to do with the contex of any unit test including the file specified by the setupFiles configuration item. Therefore, all the data here is either specified in the configuration file, or It is to transmit between server ports through the network.

For the configuration port and domain name information, put it directly in the globals field in jest.config.js. For the debug configuration item, it is recommended to use it in conjunction with test.only.

Now, there may be suggestion that why the server should not be started and shut down in the beforeAll and afterAll life cycles of each unit test file. Therefore, I have tried this solution. In this solution, for each test file, the server is started and then shut down. Therefore, this solution is relatively time-consuming. But in theory, this solution is reasonable. After all, it is true that data isolation is necessary. But there is a problem when afterAll is closed. It does not actually close the server and port occupation because the close method is called when the node server is closed. WhenafterAll is closed, It just stopped processing the request but the port is still occupied. When the second unit test file is started, an exception will be thrown that the port is being used. Although I tried some solutions, they are not ideal because sometimes the port is still occupied. Especially when the node is run for the first time after it is turned on, the probability of abnormality is relatively high. Therefore, the effect is not very satisfactory. In the end, the complete isolation scheme is adopted. For specific related issues, please refer to this link.

Since we adopt a completely isolated solution, there are only two options when we want to transmit the request and response data for the test request. The two solutions are either when the server is started all the data is specified in the test/config/global-setup.js file or the data is transmitted through the network when the server is running, the path is specified and the network request of the path will carry data and the data request will be specified in the closure of the server. Therefore, both options are supported here. I think it is more appropriate to specify your own data in each unit test file, so here is only one example of specifying the data to be tested in the unit test file. Regarding the data to be tested, a DataMapper type is specified to reduce exceptions caused by type errors. Therefore, two data sets are exemplified here. In addition, regular expressions are supported when matching query and data. The structure of the DataMapper type is relatively standard.

In the below two unit tests, the data to be tested is specified in beforeAll. Note that beforeAll is return setSuitesData(data) because the unit test is executed after the data is set and the response is successful, followed by the normal request and response whether the assertion test is correct.

How to mock network request in Jest was originally published in Geek Culture on Medium, where people are continuing the conversation by highlighting and responding to this story.

Now frontend engineering is more and more important. Although Ctrl+C and Ctrl+V can also be used to complete requirements, once they are modified, it becomes a huge task. Therefore, copying of code is reduced, and the packaging and reuse capabilities are increased to achieve maintainability and reversibility. The code used becomes particularly important.

In React, components are the main unit of code reuse. The combination-based component reuse mechanism is quite elegant, but for more fine-grained logic (state logic, behavior logic, etc.), reuse is not so easy. It is difficult to disassemble the state logic as a reusable function or component. In fact, before the appearance of Hooks, there was a lack of a simple and direct way of component behavior extension, which is considered to be mixins, higher-order components (HOC), and render props. The upper-level model explored under the existing (component mechanism) game rules has not solved the problem of logic reuse between components from the root. This is my 38th Medium article.

Mixins

Of course, React no longer recommends using mixins as a reuse solution for a long time, but it can still provide support for mixins through create-react-class. Note that mixins are not supported when declaring components in ES6 classes.

Mixins allow multiple React components to share code. They are very similar to mixins in Python or traits in PHP. The emergence of the mixin solution comes from an OOP intuition. In the early days, it only provided React.createClass() API to define components. (In React v15.5.0, it is officially abandoned and moved to create-react-class). Naturally, (class) inheritance has become an intuitive attempt, and in JavaScript prototype-based extension mode, it is similar to the inherited mixin scheme. It has become a good solution. Mixin is mainly used to solve the reuse problem of life cycle logic and state logic, and allows the component life cycle to be extended from the outside. This is especially important in Flux and other modes, but many defects have also appeared in continuous practice:

• There is an implicit dependency between the component and the mixin (Mixin often depends on the specific method of the component, but the dependency is not known when the component is defined).
• There may be conflicts between multiple mixin (such as defining the same state field).
• Mixin tends to add more states, which reduces the predictability of the application and leads to a sharp increase in complexity.
• Implicit dependencies lead to opaque dependencies, and maintenance costs and understanding costs are rising rapidly.
• It is difficult to quickly understand the behavior of components, and it is necessary to fully understand all the extension behaviors that rely on mixin and their mutual influence.
• The method and state field of the component itself is afraid to be easily deleted because it is difficult to determine whether mixin depends on it.
• Mixin is also difficult to maintain, because Mixin logic will eventually be flattened and merged together, and it is difficult to figure out the input and output of a Mixin.

There is no doubt that these problems are fatal, so Reactv0.13.0 abandoned Mixin static crosscutting (similar to inherited reuse) and moved to HOC higher-order components (similar to combined reuse).

Example

The example of the ancient version, a common scenario is: A component needs to be updated regularly. It is easy to do it with setInterval(), but it is very important to cancel the timer when it is not needed to save memory. React provides a lifecycle method to inform the component. The time of creation or destruction, the following Mixin, use setInterval() and ensure that the timer is cleaned up when the component is destroyed.

HOC

After Mixin, HOC high-order components take on the heavy responsibility and become the recommended solution for logical reuse between components. High-order components reveal a high-order atmosphere from their names. In fact, this concept should be derived from high-order functions of JavaScript. The high-order function is a function that accepts a function as input or output. It can be thought that currying is a higher-order function. The definition of higher-order components is also given in the React document. Higher-order components receive components and return new components. function. The specific meaning is: High-order components can be seen as an implementation of React decoration pattern. High-order components are a function, and the function accepts a component as a parameter and returns a new component. It will return an enhanced React components. High-order components can make our code more reusable, logical and abstract, can hijack the render method, and can also control propsand state.

Comparing Mixin and HOC, Mixin is a mixed-in mode. In actual use, Mixin is still very powerful, allowing us to share the same method in multiple components, but it will also continue to add new methods and attributes to the components. The component itself can not only perceive but also need to do related processing (such as naming conflicts, state maintenance, etc.). Once the mixed modules increase, the entire component becomes difficult to maintain. Mixin may introduce invisible attributes, such as in the Mixin method used in the rendering component brings invisible property props and states to the component. Mixin may depend on each other and is coupled with each other, which is not conducive to code maintenance. In addition, the methods in different Mixin may conflict with each other. Previously React officially recommended using Mixin to solve problems related to cross-cutting concerns, but because using Mixin may cause more trouble, the official recommendation is now to use HOC. High-order component HOC belong to the idea of ​​ functional programming. The wrapped components will not be aware of the existence of high-order components, and the components returned by high-order components will have a functional enhancement effect on the original components. Based on this, React officially recommends the use of high-order components.

Although HOC does not have so many fatal problems, it also has some minor flaws:

• Scalability restriction: HOC cannot completely replace Mixin. In some scenarios, Mixin can but HOC cannot. For example, PureRenderMixin, because HOC cannot access the State of subcomponents from the outside, and at the same time filter out unnecessary updates through shouldComponentUpdate. Therefore, React After supporting ES6Class, React.PureComponent is provided to solve this problem.
• Ref transfer problem: Ref is cut off. The transfer problem of Ref is quite annoying under the layers of packaging. The function Ref can alleviate part of it (allowing HOC to learn about node creation and destruction), so the React.forwardRef API API was introduced later.
• WrapperHell: HOC is flooded, and WrapperHell appears (there is no problem that cannot be solved by one layer, if there is, then two layers). Multi-layer abstraction also increases complexity and cost of understanding. This is the most critical defect. In HOC mode There is no good solution.

Example

Specifically, a high-order component is a function whose parameter is a component and the return value is a new component. A component converts props into a UI but a high-order component converts a component into another component. HOC is very common in React third-party libraries, such as Redux’s connect and Relay’s createFragmentContainer.

Attention should be paid here, do not try to modify the component prototype in the HOC in any way, but should use the combination method to realize the function by packaging the component in the container component. Under normal circumstances, there are two ways to implement high-order components:

• Property agent Props Proxy.
• Reverse inheritance Inheritance Inversion.

Property Agent

For example, we can add a stored id attribute value to the incoming component. We can add a props to this component through high-order components. Of course, we can also operate on the props in the WrappedComponent component in JSX. Note that it is not to manipulate the incoming WrappedComponent class, we should not directly modify the incoming component, but can operate on it in the process of combination.

We can also use high-order components to load the state of new components into the packaged components. For example, we can use high-order components to convert uncontrolled components into controlled components.

Or our purpose is to wrap it with other components to achieve the purpose of layout or style.

Reverse inheritance

Reverse inheritance means that the returned component inherits the previous component. In reverse inheritance, we can do a lot of operations, modify state, props and even flip the Element Tree. There is an important point in the reverse inheritance that reverse inheritance cannot ensure that the complete sub-component tree is parsed. That means if the parsed element tree contains components (function type or Class type), the sub-components of the component can no longer be manipulated.

When we use reverse inheritance to implement high-order components, we can control rendering through rendering hijacking. Specifically, we can consciously control the rendering process of WrappedComponent to control the results of rendering control. For example, we can decide whether to render components according to some parameters.

We can even hijack the life cycle of the original component by rewriting.

Since it is actually an inheritance relationship, we can read the props and state of the component. If necessary, we can even add, modify, and delete the props and state. Of course, the premise is that the risks caused by the modification need to be controlled by yourself. In some cases, we may need to pass in some parameters for the high-order attributes, then we can pass in the parameters in the form of currying, and cooperate with the high-order components to complete the operation similar to the closure of the component.

note

Don’t change the original components

Don’t try to modify the component prototype in HOC, or change it in other ways.

Doing so will have some undesirable consequences. One is that the input component can no longer be used as before the HOC enhancement. What is more serious is that if you use another HOC that also modifies componentDidUpdate to enhance it, the previous HOC will be invalid, and this HOC cannot be applied to functional components that have no life cycle.
Modifying the HOC of the incoming component is a bad abstraction, and the caller must know how they are implemented to avoid conflicts with other HOC. HOC should not modify the incoming components, but should use a combination of components to achieve functions by packaging the components in container components.

Filter props

HOC adds features to components and should not significantly change the convention itself. The components returned by HOC should maintain similar interfaces with the original components. HOC should transparently transmit props that have nothing to do with itself, and most HOC should include a render method similar to the following.

Maximum composability

Not all HOCs are the same. Sometimes it only accepts one parameter, which is the packaged component.

const NavbarWithRouter = withRouter(Navbar);

HOC can usually receive multiple parameters. For example, in Relay, HOC additionally receives a configuration object to specify the data dependency of the component.

const CommentWithRelay = Relay.createContainer(Comment, config);

The most common HOC signatures are as follows, connect is a higher-order function that returns higher-order components.

This form may seem confusing or unnecessary, but it has a useful property, like the single-parameter HOC returned by the connect function has the signature Component => Component , and functions with the same output type and input type can be easily combined. The same attributes also allow connect and other HOCs to assume the role of decorator. In addition, many third-party libraries provide compose tool functions, including lodash, Redux, and Ramda.

Don’t use HOC in the render method

React ’s diff algorithm uses the component identifier to determine whether it should update the existing subtree or discard it and mount the new subtree. If the component returned from the render is the same as the component in the previous render ===, React passes The subtree is distinguished from the new subtree to recursively update the subtree, and if they are not equal, the previous subtree is completely unloaded.
Usually, you don’t need to consider this when using it, but it is very important for HOC, because it means that you should not apply HOC to a component in the render method of the component.

This is not just a performance issue. Re-mounting the component will cause the state of the component and all its subcomponents to be lost. If the HOC is created outside the component, the component will only be created once. So every time you render it will be the same component. Generally speaking, this is consistent with your expected performance. In rare cases, you need to call HOC dynamically, you can call it in the component’s lifecycle method or its constructor.

Be sure to copy static methods

Sometimes it is useful to define static methods on React components. For example, the Relay container exposes a static method getFragment to facilitate the composition of GraphQL fragments. But when you apply HOC to a component, the original component will be packaged with a container component, which means that the new component does not have any static methods of the original component.

To solve this problem, you can copy these methods to the container component before returning.

But to do this, you need to know which methods should be copied. You can use hoist-non-react-statics to automatically copy all non-React static methods.

In addition to exporting components, another feasible solution is to additionally export this static method.

Refs will not be passed

Although the convention of high-level components is to pass all props to the packaged component, this does not apply to refs, because ref is not actually a prop, just like a key, it is specifically handled by React. If the ref is added to the return component of the HOC, the ref reference points to the container component, not the packaged component. This problem can be explicitly forwarded to the internal component through the React.forwardRefAPI refs.

Render Props

Like HOC, Render props is also a veteran model that has always existed. render props refers to a simple technology that uses a props valued as a function to share code between a kind of React components. A component with render props receives a function. This function Return a React element and call it instead of implementing its own rendering logic. Render props is a function props used to tell the component what content needs to be rendered. It is also a way to implement component logic reuse. Simply put, it is being copied. In the component used, pass a prop property named render (the property name may not render, as long as the value is a function). The property is a function. This function accepts an object and returns a subcomponent, which will The object in the function parameter is passed as props to the newly generated component, and when using the caller component, you only need to decide where to renderthe component and what logic to renderand pass in the relevant object.
Comparing HOC and Render props, technically, both are based on the component combination mechanism. Render props has the same extensibility as HOC. It is called Render props. It does not mean that it can only be used to reuse rendering logic, but that it is here. In this mode, the components are combined through render(), similar to the establishment of a combination relationship through Wrapper’s render() in HOC mode. The two are very similar, and they will also produce a layer of Wrapper. In fact, Render props and HOC . It can even be converted to each other.
Similarly, Render props will have some problems:

• The data flow is more intuitive. The descendant components can clearly see the source of the data, but in essence, Render props is implemented based on closures. A large number of component reuse will inevitably introduce the callback hell problem.
• The context of the component is lost, so there is no this.propsproperty, and this.props.childern cannot be accessed like HOC.

Hooks

There are endless code reuse solutions, but overall code reuse is still very complicated. A large part of this is because fine-grained code reuse should not be bundled with component reuse. HOC, Render props, etc. are based on component combination The solution is equivalent to first packaging the logic to be reused into components, and then using the component reuse mechanism to achieve logic reuse. Naturally, it is limited to component reuse, so there are problems such as limited scalability, Ref partition, Wrapper Hell, etc. , Then we need to have a simple and direct way of code reuse. Functions. Separating reusable logic into functions should be the most direct and cost-effective way of code reuse. But for state logic, some abstract patterns are still needed. (Such as Observable) can be reused, which is exactly the idea of ​​Hooks, using functions as the smallest code reuse unit, and built-in some modes to simplify the reuse of state logic. Compared with the other solutions mentioned above, Hooks makes the logic reuse within the component no longer bundled with the component reuse. It is really trying to solve the problem of fine-grained logic reuse (between components) from the lower level. In addition, this statement The modular logic reuse scheme further extends the explicit data flow and combination ideas between components to the components.
File Hooks are not perfect either, but for now, its disadvantages are as follows:

• The additional learning cost mainly lies in the comparison between Functional Component and Class Component .
• There are restrictions on the writing method (cannot appear in conditions, loops), and the writing restrictions increase the cost of reconstruction.
• It destroys the performance optimization effect of PureComponent and React.memo shallow comparison. In order to get the latest props and state, the event function must be recreated every render()
• In closure scenarios, old state and props values may be referenced.
• The internal implementation is not intuitive, relying on a mutable global state, and no longer so pure.
• React.memo can’t completely replace shouldComponentUpdate (because state change is not available, only for props change).
• The useStateAPI is not perfect in design.

How To Reuse React Components was originally published in Codezillas on Medium, where people are continuing the conversation by highlighting and responding to this story.

The browser allows JavaScript scripts to read and write to the clipboard, and automatically copy or paste content. In general, scripts should not modify the user’s clipboard, so as not to meet the user’s expectations. However, sometimes it can be convenient to do this, such as the “one-click copy” function, the user clicks a button, and the specified content is automatically entered into the clipboard. Currently, there are three ways to implement clipboard operations.

• Document.execCommand()method
• Asynchronous Clipboard API
• copy,cut and paste Events

This article introduces these three methods one by one. This is my 37th Medium article.

Document.execCommand() method

Document.execCommand() is the traditional method of manipulating the clipboard, which is supported by various browsers. It supports the three operations of copy, cut, and paste.

• Document.execCommand('copy') — copy
• Document.execCommand('cut') — cut
• Document.execCommand('paste') — paste

Copy or Cut operation

When copying, first select the text and then call the Document.execCommand('copy'), the selected text will enter the clipboard.

In the above example, the script first selects the text in the inputElement of the input box ( inputElement.select() ), and then Document.execCommand('copy') copies it to the clipboard. Note that the copy operation is best placed in the event listener function, triggered by the user (for example, the user clicks a button). If the script is executed autonomously, some browsers may report an error. Cut operation is also similar to the copy operation.

Paste operation

When pasting, calling Document.execCommand('paste') will output the contents of the clipboard to the current focus element.

Disadvantage

Although the Document.execCommand() method is convenient, it has some disadvantages. First, it can only copy the selected content to the clipboard, and cannot write content to the clipboard arbitrarily. Secondly, it is an asynchronous operation. If you copy/paste a large amount of data, the page will freeze. Some browsers will also pop up a prompt box and ask the user for permission. At this time, the page will become unresponsive before the user makes a choice. In order to solve these problems, browser vendors have proposed an asynchronous Clipboard API.

Asynchronous Clipboard API

Clipboard API is the next-generation clipboard operation method, which is more powerful and reasonable than the traditional Document.execCommand() method. All its operations are asynchronous and return Promise objects without causing page jams. Moreover, it can put arbitrary content (such as pictures) into the clipboard. The navigator.clipboard property returns the Clipboard object, and all operations are performed through this object.

const clipboardObj = navigator.clipboard;

If the navigator.clipboard property returns undefined, it means that the current browser does not support this API (you can see the full compatibly table on Can I use…). Since users may put sensitive data (such as passwords) on the clipboard, allowing scripts to read them arbitrarily will cause security risks, so this API has more security restrictions. First of all, the Chrome browser stipulates that only HTTPS protocol pages can use this API. However, the development environment (localhost) allows the use of non-encrypted protocols. Secondly, the user’s permission needs to be clearly obtained when calling. The specific implementation of permissions uses the Permissions API. There are two permissions related to the clipboard: clipboard-write (write permission) and clipboard-read (read permission). The “write permission” is automatically granted to the script, and the “read permission” must be explicitly granted by the user. In other words, the script can be automatically completed when writing to the clipboard, but when reading the clipboard, the browser will pop up a dialog box asking whether the user agrees to read.

In addition, it should be noted that what the script reads is always the clipboard of the current page. One problem that this brings is that if you paste the relevant code into the developer tool and run it directly, an error may be reported because the current page at this time is the window of the developer tool, not a web page.

If you paste the above code into the developer tool and run it, an error will be reported. Because when the code is running, the developer tool window is the current page, and there is no DOM interface that the Clipboard API depends on this page. One solution is to put the relevant code in setTimeout() to delay running, and quickly click on the page window of the browser before calling the function to turn it into the current page.

After the above code is pasted into the developer tool to run, quickly click on the page window of the webpage to make it the current page, so that no error will be reported.

Clipboard object

clipboard.readText()

The clipboard.readText() method is used to copy the text data in the clipboard.

In the above example, after the user clicks on the page, the text in the clipboard will be output. Note that the browser will pop up a dialog box at this time, asking the user whether to agree with the script to read the clipboard.

If the user disagrees, the script will report an error. At this time, you can use the try...catch structure to handle errors.

clipboard.read()

The clipboard.read() method is used to copy the data in the clipboard, which can be text data or binary data (such as pictures). This method requires explicit permission from the user. This method returns a Promise object. Once the state of the object becomes resolved, an array can be obtained, and each array member is an instance of a ClipboardItem object.

The ClipboardItem object represents a single clip item and each clip item has a clipboardItem.types property and a clipboardItem.getType() method. The clipboardItem.types property returns an array whose members are the MIME types available for the clip item. For example, a clip item can be pasted in HTML format or in plain text format. Then it has two MIME types (text/html and text/plain). The clipboardItem.getType(type) method is used to read the data of the clip item and returns a Promise object. This method accepts the MIME type of the clip item as a parameter and returns the data of that type. This parameter is required, otherwise, an error will be reported.

clipboard.writeText()

The clipboard.writeText() method is used to write text content to the clipboard.

The above example is that after the user clicks on the web page, the script writes text data to the clipboard. This method does not require user permission, but it is best to put it in try...catch to prevent errors.

clipboard.write()

The clipboard.write() method is used to write arbitrary data to the clipboard, which can be text data or binary data. This method accepts a ClipboardItem instance as a parameter, which represents the data written to the clipboard.

In the above example, the script writes a picture to the clipboard. Note that the Chrome browser currently (until this writer writes this article) only supports writing images in PNG format. clipboardItem() is a constructor natively provided by the browser to generate an instance of clipboardItem. It accepts an object as a parameter. The key name of the object is the MIME type of the data, and the key value is the data itself. The following example is to write the value of the same clip item in multiple formats to the clipboard, one is text data, and the other is binary data for pasting on different occasions.

Copy, Cut, and Paste Events

When the user puts data into the clipboard, the copy event will be triggered. The following example is to convert the text that the user puts on the clipboard to uppercase.

In the above example, the clipboardData property of the event object contains the clipboard data. It is an object with the following properties and methods.

• Event.clipboardData.setData(type, data) : To modify the clipboard data, you need to specify the data type.
• Event.clipboardData.getData(type) : To obtain clipboard data, you need to specify the data type.
• Event.clipboardData.clearData([type]) : Clear clipboard data, you can specify the data type. If you do not specify the type, all types of data will be cleared.
• Event.clipboardData.items : An array-like object contains all clip items, but usually there is only one clip item

The following example is to intercept the user’s copy operation and put the specified content into the clipboard.

In the above example, first, use e.preventDefault() to cancel the default operation of the clipboard, and then the script takes over the copy operation. The cut event is triggered when the user performs a cutting operation. Its processing is exactly the same as the copy event, and the cut data is also obtained from the Event.clipboardData property.

When the user uses the clipboard data to paste, the paste event will be triggered. The following example is to intercept the paste operation, the data in the clipboard is taken out by the script.

Conclusion

For user experience, Clipboard access is a great tool. But Clipboard access has its thorns. Some users bring malicious data and some users carry sensitive data. Make sure you handle other user’s data responsibly. You need to prepare yourself for those nasty paste events.

Asynchronous Clipboard API is new, and no browser supports all features, but it’s easier to use and more robust than the old Document.execCommand() method.

Explore Clipboard Operation in JavaScript was originally published in Geek Culture on Medium, where people are continuing the conversation by highlighting and responding to this story.