DEV Community: Zachary Lee

The Differences Between "export default xx" and "export {xx as default}"

Zachary Lee — Tue, 21 Oct 2025 03:57:14 +0000

Originally published in my newsletter.

The Basics of JavaScript Modules

Modules are self-contained pieces of code that can be imported and used in other modules. They help developers keep code organized, maintainable, and easy to understand.

To work with modules, you need to understand the import and export syntax. Here’s a quick recap:

import: Used to import named exports or default exports from other modules.
export: Used to export values, functions, or classes from a module, making them available for other modules to import.

There are two types of exports:

Named exports: You can have multiple named exports in a module. They are explicitly imported using their names.
Default exports: Each module can have only one default export. They are imported without specifying a name.

The Behavior of export { xxx as default }

In JavaScript, imports are live bindings, or references, rather than values. This means that when you import a variable from another module, you’re importing a reference to that variable, not a copy of its value.

Consider the following example:

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export { value as default };
// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // ?
}, 1000);

In this case, guess what value is printed?

The answer is 888 not 1. This is because export exports references.

The Behavior of export default xxx

The export default syntax is used to export a default value from a module. However, when you use export default value, the current value is exported, not a live reference.

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export default value;
// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // 1
}, 1000);

In this case, when the value variable in math.js changes, the value variable in app.js does not change. This is because value holds the current value at import time, not a live reference.

Export Reference Data Types

As you can see, we exported primitive data types earlier, but what if we exported reference data types?

// math.js
const value = {
  current: 1,
};

setTimeout(() => {
  value.current = 888;
}, 500);

export default value;
// OR
// export { value as default };
// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value.current);
}, 1000);

As you can see, there is no difference between export default xxx and export { xxx as default } when dealing with reference data types. It can be understood that they are always reference types in JavaScript, and they will not be deeply copied when exported.

Best Practices and Recommendations

While both export default xxx and export { xxx as default } can be used to export default values, but their behavior differs in certain scenarios. Here are some recommendations to help you choose the right syntax:

Use export default xxx when you want to export a value, such as a string, or number, and you don't need live bindings.
Use export { xxx as default } when you need live binding, especially when the exported value may change over time (not recommended).
For reference data types, either syntax can be used, since they always export a reference.
A related suggestion: For code readability and maintainability, it is recommended to use named exports instead of default exports, here is why.

Conclusion

The differences between export default xxx and export { xxx as default } in JavaScript may appear subtle, but they can have an impact on your code's behavior. Hope this article is helpful to you.

If you find this helpful, please consider subscribing to my newsletter for more insights on web development. Thank you for reading!

How does HTTPS work

Zachary Lee — Tue, 21 Oct 2025 03:39:22 +0000

Originally published in my newsletter.

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was originally designed for communication between web browsers and web servers, but with later development, its application is not limited here, the mature software and hardware environment makes it the infrastructure of the Internet. I believe you must have been exposed to it, it is just like water or air in software development, it’s all too common.

But as programmers, we may ignore a lot of key information because of its commonness, resulting in some problems in daily work development and do not know how to solve them. Then this article will introduce you to one of the key pieces of information — HTTPS.

Why HTTPS?

Why does it appear? What problem does it appear to solve?

To answer the above questions, we need to first analyze the characteristics of HTTP.

The characteristics of HTTP are simple, flexible, and easy to extend, but at the same time it is stateless (you can use Cookie technology to achieve “stateful”), and it is transmitted in clear text, which means that its data is completely visible and easy to be eavesdropped or forgery.

At the same time, HTTP is widely used, so scenarios with high-security requirements such as online payment require corresponding security measures, so HTTPS appeared.

What is HTTPS?

The RFC document of HTTPS has very little content. It specifies a new protocol name “HTTPS” and the default port number is 443, which is to insert a “security layer” between TCP and HTTP.

This security layer, as the name implies, encrypts the data sent and decrypts the data received so that the middleman cannot steal the information. Then as long as you understand this security layer, you also understand HTTPS.

SSL is the Secure Sockets Layer, which is at layer 6 (Presentation) in the OSI model. It was invented by Netscape in 1994. There are two versions, v2 and v3, and v1 was never disclosed because of its flaws.

When SSL developed to v3, it proved itself to be a very good secure communication protocol, so the Internet Engineering Group IETF renamed it TLS (Transport Layer Security) in 1999, and officially standardized, the version number from 1.0 is recalculated, so TLS1.0 is actually SSL 3.1.

At present, TLS has developed three versions, namely 1.1 in 2006, 1.2 in 2008, and 1.3 in 2018, and each new version is continuously enhancing security and performance. The most widely used TLS 1.2 at present, so let’s unravel the secrets of TLS 1.2!

HTTPS (TLS 1.2) secret

Let me explain the above image first:

Handshake phase:

The client generates a client-random and then passes the symmetric cipher suites and asymmetric cipher suites it supports to the server.
After the server receives it, it will select the encryption algorithm to use from the encryption suite, generate a server-random and pass the certificate of the service to the client.
After the client receives it, it will first verify the certificate. If the certificate is valid, it will generate a pre-master random number, encrypt it with the public key in the certificate and the selected asymmetric encryption algorithm , and then pass it to the server. It will also come with a Client finished confirmation message.
The server receives the encrypted pre-master and can decrypt it using the private key. A confirmation message of the Server finished will then be passed to the Client.

Transfer stage:

After the handshake phase, both ends already have client-random, server-random, and pre-master. Mix them to generate the final master secret, and use the previously selected symmetric encryption algorithm to encrypt and decrypt the required transmitted data.

God, is it so troublesome that I just want to send data? I thought the same thing when I first saw it.

Let’s be patient and take a closer look, it’s actually not that difficult.

What are symmetric encryption and asymmetric encryption?

Let’s first explain the symmetric encryption and asymmetric encryption mentioned above.

Symmetric encryption means that the same key is used for encryption and decryption. Asymmetric encryption has two keys, A and B. If you use the A key to encrypt, you can only use the B key to decrypt; conversely, If you want the B key to encrypt, you can only use the A key to decrypt.

In the handshake phase of HTTPS, we use asymmetric encryption, why? Suppose we use symmetric encryption:

As can be seen from the above figure, the client-random and service-random and symmetric encryption suites passed in are in clear text, which leads to the fact that if a hacker gets the data, they can generate the same key, which can be cracked data.

If we use asymmetric encryption, the pre-master encrypted by the client can only decrypt the key stored by the server.

What is a CA certificate?

Because once the hacker uses DNS hijacking and replaces the IP address that the user wants to access with the hacker’s IP address, the request will be sent directly to the hacker’s service. He implements the public key and private key on his service, and the client completely does not know!

So we need the CA (Certificate Authority) certificate authority to help us prove that this service is the service we want to access!

How to check the validity of the CA certificate?

The client will verify according to the following process:

Check if the certificate has expired
Check if revoked by CA
Check whether the certificate is issued by the CA authority. We will use the original certificate information to calculate the message digest, use the CA public key to decrypt the digital signature in the certificate, and then compare the message digest with the digital signature.
Prove the legitimacy of the CA organization. The CA certification chain is a tree structure, and the root CA certificate is found step by step. The root CA certificate (self-signed certificate) is built into the system. The requirements are very strict. If the root CA certificate is valid, it also proves that the certificate is valid. But if malware injects an illegitimate root CA certificate into a user’s system, there’s no way around it.

Why is the transmission phase symmetric encryption?

This is because the symmetric encryption algorithm usually uses bit operations, and the asymmetric encryption is mainly the calculation of some large number multiplications in RSA, so the efficiency of asymmetric encryption is very low, which will seriously affect the transmission speed and make the user experience very poor. And the master secret we generated in the handshake phase is secure enough, so we can use symmetric encryption in the transfer phase.

If you find this helpful, please consider subscribing to my newsletter for more insights on web development. Thank you for reading!

Ditch Git Checkout: Use Git Switch and Git Restore Instead

Zachary Lee — Mon, 14 Oct 2024 02:45:48 +0000

If you use Git in your daily work, git checkout is a common command. It's often used to switch branches, and if you look at the documentation, you can see the phrase "switch branches or restore working tree files". But UNIX should be Do One Thing and Do It Well. This was confusing, so Git 2.23 brought a pair of commands to replace it.

Before introducing how it works, we need to briefly understand its associated Git concepts.

Working copy (working tree file): It refers to the file in the repository that appears on the hard disk.
Index (staging area or cache): it refers to you have git add-ed, or, what would be committed if you were to run git commit.
HEAD: It refers to the “current” or “active” branch, when we need to check out a branch (referring to your attempt to match the branch with what is in the working copy), only one can be checked out at a time.

git checkout can checkout a branch or create a new branch and checkout into it:

# Switched to branch 'test'
$ git checkout test

# Switched to a new branch 'test'
$ git checkout -b test

# Switch back to the previous branch
$ git checkout -

# Switched to a commit
$ git checkout master~1

And git switch is used to take over branch related, so it can also do:

# Switched to branch 'test'
$ git switch test

# Switched to a new branch 'test'
$ git switch -c test

# Switch back to the previous branch
$ git switch -

# Switched to a commit
$ git switch -d master~1

And as we said at the beginning, git checkout can also restore working tree files. This part of the feature is taken over by git restore.

In the past, we could use git checkout -- main.c to restore the working tree file from the index, the syntax was git checkout [treeish] -- <filename>, where treeish could be specified as the source. Simple examples:

# Restoring the working tree from the index
$ git checkout -- ./main.c

# Restoring index content from HEAD
$ git reset -- ./main.c

# Restoring the working tree and index from HEAD
$ git checkout HEAD -- ./main.c

Note that when restoring index content from HEAD, we can only use git reset, and git checkout has no corresponding option.

Show with a graph:

git restore makes it easier to determine which files will be restored, and where they will be restored. The following options specify the restore location:

-W
--worktree
-S
--staged

By default, -W and --worktree will restore the working tree from the index, the same as if no options were specified (like git restore -- ./main.c ). Whereas -S and --staged will restore the index contents from HEAD. When passing both, the index and working tree will be restored from HEAD.

For instance:

# Restoring the working tree from the index
$ git restore -- ./main.c
# Equivalent to
$ git restore --worktree -- ./main.c

# Restoring index content from HEAD
$ git restore --staged -- ./main.c

# Restoring the working tree and index from HEAD
$ git restore --staged --worktree ./main.c

Show with a graph:

The above-mentioned is the default, if we want to restore from a different commit, we can use the --source option. E.g:

# Restore `./main.c` in the working tree with the last commit
$ git restore -s HEAD^ -- ./main.c
# Equivalent to
$ git restore --source=HEAD^ -- ./main.c

Another useful git restore case might be restoring a mishandled file. E.g:

# Incorrectly deleted files
$ rm -f ./main.c

# Quickly restore main.c from index
$ git restore ./main.c

For batch recovery:

# Restore all C source files to match the version in the index
$ git restore '*.c'

# Restore all files in the current directory
$ git restore .

# Restore all working tree files with top pathspec magic
$ git restore :/

Conclusion

The features of git checkout are clearly separated: git switch is used to switch branches, while git restore is used to restore working tree files. They provide more explicit semantics, in line with the UNIX philosophy.

Both commands were proposed in 2019, and as of now, they are experimental. There may be changes, but usually not by much, so you can use them now, they are easier to understand and less confusing.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

The Secrets of JavaScript Object Property Order

Zachary Lee — Mon, 14 Oct 2024 02:44:09 +0000

Someone asked me recently, are JavaScript object properties necessarily unordered and unpredictable?

Developers with early exposure to JavaScript might answer that Object.keys() or for...in returns an unpredictable order of object properties. But is that still the case?

As you might expect, there are now rules to follow.

Starting with ECMAScript 2020, Object.keys, for...in, Object.getOwnPropertyNames, and Reflect.ownKeys all follow the same order of specification. They are:

1. Own properties are array indexes, in ascending numeric index order

An array index is a String-valued property key that is a canonical numeric String. And a canonical numeric String is a String representation of a number that would be produced by ToString, or the string "-0". So for instance, "012" is not a canonical numeric String, but "12" is.

2. Other own String properties, in ascending chronological order of property creation

The above code adds the knowledge point of the event loop. Because setTimeout is an asynchronous macro task, the c property has not been added to obj when console.log is output.

3. Own Symbol properties, in ascending chronological order of property creation

The Symbol property is the same as the String property, in ascending chronological order of property creation. But the Object.keys, for...in, Object.getOwnPropertyNames methods cannot get the object's Symbol properties, Reflect.ownKeys and Object.getOwnPropertySymbols can.

Conclusion

When an object’s property keys are a combination of the above types, the object’s non-negative integer keys (enumerable and non-enumerable) are first added to the array in ascending order, then String keys are added in insertion order. Finally, Symbol keys are added in insertion order.

But if you strongly depend on the insertion order, then Map guarantees that for you.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

Understanding the infer Keyword in TypeScript

Zachary Lee — Fri, 27 Sep 2024 14:58:34 +0000

TypeScript, a statically-typed superset of JavaScript, has gained massive popularity in the tech community due to its ability to catch errors early and improve code readability. One of TypeScript’s powerful features is the infer keyword, which allows developers to write more expressive and dynamic types.

The Infer Keyword

Introduced in TypeScript 2.8, the infer keyword is used within conditional types to create temporary type variables. These type variables can then be used to infer types within a true or false branch of a conditional type. The infer keyword enables developers to write more dynamic and expressive types, as it allows TypeScript to determine a specific type based on the context in which it's used.

To better understand how infer works, let's take a look at the basic syntax of a conditional type:

type MyConditionalType<T> = T extends SomeType ? TrueType : FalseType;

In this example, T is a generic type parameter, and SomeType represents a type that T is being compared to. If T extends SomeType, the type of MyConditionalType<T> will be TrueType. If not, it will be FalseType.

Now, let’s introduce the infer keyword into the mix:

type MyInferredType<T> = T extends SomeType<infer U> ? U : FalseType;

Here, we use the infer keyword to create a temporary type variable U within the true branch of the conditional type. If T extends SomeType, TypeScript will try to infer the type of U based on the type of T.

Examples

ReturnType

ReturnType is a utility type that extracts the return type of a function. It's a perfect example of how the infer keyword can be used to create dynamic types. Here's the definition of ReturnType:

type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

In this definition, T is a function type that takes any number of arguments and returns any type. Using the infer keyword, we create a temporary type variable R to represent the return type of the function. If T is a function, TypeScript infers the return type and assigns it to R.

Let’s see ReturnType in action:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetReturnType = ReturnType<typeof greet>; // GreetReturnType is inferred as 'string'

Here, ReturnType is used to infer the return type of the greet function, which is string.

Parameters

Another useful utility type that leverages the infer keyword is Parameters. This type extracts the parameter types of a function as a tuple. The definition of Parameters is as follows:

type Parameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never;

In this example, we create a temporary type variable P to represent the parameter types of the function. If T is a function, TypeScript infers the parameter types and assigns them to P as a tuple.

Let’s look at an example using Parameters:

function add(a: number, b: number): number {
  return a + b;
}

type AddParameters = Parameters<typeof add>; // AddParameters is inferred as [number, number]

Here, Parameters is used to infer the parameter types of the add function, which is a tuple [number, number].

PromiseType

The PromiseType utility type can be used to extract the type that a Promise resolves to. This is particularly useful when dealing with asynchronous functions. Here's the definition of PromiseType:

type PromiseType<T extends Promise<any>> = T extends Promise<infer U> ? U : never;

In this example, we create a temporary type variable U to represent the type that the Promise resolves to. If T is a Promise, TypeScript infers the resolved type and assigns it to U. Here’s an example:

async function fetchData(): Promise<string> {
  return "Fetched data";
}

type FetchedDataType = PromiseType<ReturnType<typeof fetchData>>; // FetchedDataType is inferred as 'string'

In this case, PromiseType is used to infer the type that the fetchData function's promise resolves to, which is string.

UnboxArray

The UnboxArray utility type can be used to extract the type of the elements within an array. Here's the definition of UnboxArray:

type UnboxArray<T extends Array<any>> = T extends Array<infer U> ? U : never;

In this example, we create a temporary type variable U to represent the type of the elements within the array. If T is an array, TypeScript infers the element type and assigns it to U. For instance:

type MyArray = number[];

type ElementType = UnboxArray<MyArray>; // ElementType is inferred as 'number'

Here, UnboxArray is used to infer the type of elements within the MyArray type, which is number.

Limitations

While the infer keyword is incredibly powerful, it has some limitations:

It can only be used within conditional types.
It’s not always possible for TypeScript to infer the correct type, especially when dealing with complex or recursive types. In such cases, developers may need to provide additional type annotations or refactor their types to help TypeScript infer the correct type.

Conclusion

By understanding and leveraging the power of infer, you can create more flexible TypeScript projects. Start considering incorporating the infer keyword into your toolkit today.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

How Server-Sent Events (SSE) Work

Zachary Lee — Fri, 27 Sep 2024 14:47:11 +0000

SSE (Server Sent Events) is not widely used in the world of web development, this article will take a deep dive into what SSE is, how it works, and how it can benefit your application.

What is SSE?

SSE is a simple and efficient way to send real-time updates from a server to a client over an HTTP connection. It is a part of the HTML5 specification and is supported by all modern web browsers. SSE is based on a unidirectional data flow, where the server sends messages to the client, but the client cannot send messages back to the server.

SSE uses a text-based format known as “Server-Sent Events” to send data to the client. The data is sent as a series of events, each of which contains a message and an optional event type. The event type is used to distinguish between different types of messages and allows the client to handle them differently.

How does SSE work?

The SSE protocol works by establishing a persistent HTTP connection between the server and the client. This connection is kept open for as long as the client wants to receive updates from the server. When the server has new data to send, it sends an HTTP response with a special MIME type “text/event-stream”.

The response contains a series of events, each of which is separated by a new line character (“\n”). Each event has the following format:

event: [event type]\n
data: [message]\n\n

The “event” field is optional and is used to provide a name for the event. The “data” field contains the actual message being sent. The two newline characters at the end of each event are used to signal the end of the event.

Here’s an example of a simple SSE response:

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

In this example, we’re sending three events to the client. The first two events have the event type “message” and contain simple text messages. The third event has the event type “customEvent” and contains a JSON object as its message.

When the client receives an SSE response, it uses the data to update its user interface. This can be done using JavaScript to manipulate the DOM, for example.

Implementing SSE

Implementing SSE in your application is relatively straightforward. Here’s an example of how to implement SSE using Node.js and the Express framework:

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

In this example, we’re setting up an SSE endpoint at “/events”. We’re setting the necessary headers for SSE and sending an initial event to the client to confirm that the connection has been established.

We’re then setting up an interval to send periodic events to the client every second. Finally, we’re cleaning up the interval when the connection is closed by the client.

On the client side, we can use the following JavaScript code to listen for SSE events:

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});

In this example, we’re creating a new EventSource object and passing in the URL of our SSE endpoint. We’re then listening for the “message” event and logging the data to the console. We’re also listening for the “error” event in case there are any connection issues.

Note that the EventSource path on the front end can only be used by GET requests, if you want to use POST and other HTTP methods, you need to parse the response data yourself.

If you want a native Node.js implementation, here’s one

Use cases for SSE

SSE can be used in a wide range of applications that require real-time updates. Here are a few examples:

Social media platforms: SSE can be used to provide real-time updates for social media platforms, such as notifications of new messages, comments, or likes.
Financial applications: SSE can be used to provide real-time updates for financial applications, such as stock prices, currency exchange rates, or news.
Online gaming: SSE can be used to provide real-time updates for online gaming applications, such as notifications of game events, scores, or rankings.

Benefits of using SSE

There are several benefits to using SSE over other real-time communication methods such as polling or WebSockets:

Efficiency

SSE uses a persistent HTTP connection, which means that the overhead of establishing and maintaining the connection is much lower than with other methods. This makes SSE more efficient and less resource-intensive, which is especially important when dealing with large numbers of clients.

Simplicity

SSE is a simple protocol that is easy to understand and implement. It does not require any special libraries or frameworks and can be implemented using standard web technologies such as JavaScript and HTTP.

Reliability

SSE is a reliable protocol that provides automatic reconnection in case of a network interruption. This ensures that the client will continue to receive updates even if the connection is temporarily lost.

Conclusion

Server-Sent Events (SSE) are a simple and efficient way to send real-time updates from a server to a client over an HTTP connection. It is a part of the HTML5 specification and is supported by all modern web browsers. SSE uses a unidirectional data flow, where the server sends messages to the client, but the client cannot send messages back to the server. This saves you from constantly polling the server for events, which not only improves performance but also reduces complexity.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

Ditch dotenv: Node.js Now Natively Supports .env File Loading

Zachary Lee — Sun, 22 Sep 2024 08:07:16 +0000

One of the staples of environment management in Node.js has been the use of the dotenv package, which facilitates the loading of environment variables from a .env file. However, recent updates in Node.js have introduced built-in capabilities that may reduce or eliminate the need for external packages like dotenv for managing environment variables.

Native `.env` File Handling

Starting from version 20.6.0, Node.js allows the use of the --env-file flag when executing scripts. This flag specifies a path to an .env file that Node.js will read before running the specified script. This approach streamlines the process of setting environment variables, making it more integrated and less reliant on third-party packages.

Consider a scenario where you have the following environment configuration:

# .env file
NODE_OPTIONS='--title="Sample Node App"'
USER_NAME='John Doe'

To run a Node.js script using this configuration, you would use:

node --env-file=.env your-script.js

Inside your-script.js, accessing these variables can be done as follows:

console.log(process.title); // Outputs: Sample Node App
console.log(`Hello, ${process.env.USER_NAME}`); // Outputs: Hello, John Doe

Simplified Loading with `process.loadEnvFile()`

Building upon the initial support, Node.js version 21.7.0 introduced the process.loadEnvFile() method. This function simplifies the loading of environment variables by incorporating them into the runtime process without the need for command-line flags.

You can load the environment variables programmatically within your application as shown below:

process.loadEnvFile(); // Automatically loads `.env` from the current directory

// Or specify a path
process.loadEnvFile('./config/env_vars.env');

Parsing Environment Variables

In addition to loading environment variables, Node.js 21.7.0 introduced util.parseEnv(), a utility function that parses a string containing environment variable definitions into an object.

Here’s how you might use util.parseEnv():

const util = require('node:util');
const envVars = util.parseEnv('API_KEY=12345');
console.log(envVars.API_KEY); // Outputs: 12345

Support for Multi-line Values in `.env` Files

Another feature in Node.js 21.7.0 is the support for multi-line values in .env files:

CERTIFICATE="-----BEGIN CERTIFICATE-----
MIIDdTCCAl2gAwIBAgIJAKC1hi9s2wfMM...
-----END CERTIFICATE-----"

You can now include such multi-line strings directly in your .env files, making management of complex configurations cleaner and more straightforward.

Conclusion

The native .env file support introduced in the latest Node.js allows your project to be set up faster and reduces dependencies on external packages such as dotenv.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

How to Create a Type to Retrieve All Keys of an Object in TypeScript

Zachary Lee — Mon, 16 Sep 2024 04:30:01 +0000

Typescript has a feature called keyof that can be used to obtain the keys of an object. However, the keyof operator only works for the first level of an object, and when we want to obtain all keys in a deep level, things get a bit more complicated. In this article, we will discuss how to implement a type that can obtain all keys in a deep level.

Overview of the Problem

To understand the problem we are trying to solve, let’s start with an example. Consider the following object:

const obj = {
  a: {
    b: 1,
    c: {
      d: 2,
      e: 3
    }
  },
  f: {
    g: 4
  }
}

If we want to obtain all the keys of this object, including the keys in the nested objects, we need a type that can recursively traverse the object and return all the keys. This can be a challenging task, especially for complex objects with multiple levels of nesting.

A Possible Solution

One approach to solving this problem is to use a recursive type definition. Typescript allows us to define recursive types using intersection types. An intersection type is a type that represents a value that has all the properties of all the types in the intersection.

We can define a recursive type that represents an object with a set of keys, where each key is either a primitive value or another object that also has a set of keys. Here’s how we can define this type:

type DeepKeys<T> = T extends object
  ? {
      [K in keyof T]-?: K extends string | number
        ? `${K}` | `${K}.${DeepKeys<T[K]>}`
        : never;
    }[keyof T]
  : never;

This type definition may seem a bit complex, so let’s break it down into smaller parts.

The type DeepKeys<T> is a conditional type that checks if the input type T is an object. If T is an object, we use a mapped type to create a new object with the same keys as T, but the values are the keys of the nested objects, represented as a string. If T is not an object, we return an empty string.

The mapped type uses the keyof operator to get the keys of the object, and then we use a conditional statement to check if each key is a string or number. If the key is a string or number, we concatenate it with a dot and the keys of the nested object, obtained recursively using DeepKeys<T[K]>. If the key is not a string or number, we return never, which means the key is not valid.

Using the Type

Now that we have defined the DeepKeys type, we can use it to get the keys of any object with nested objects. Here's an example of how we can use it:

const obj = {
  a: {
    b: 1,
    c: {
      d: 2,
      e: 3,
    },
  },
  f: {
    g: 4,
  },
  h: undefined,
};

type DeepKeys<T> = T extends object
  ? {
      [K in keyof T]-?: K extends string | number
        ? `${K}` | `${K}.${DeepKeys<T[K]>}`
        : never;
    }[keyof T]
  : never;

function getAllKeys<T extends object>(
  obj: T,
  prefix: string = '',
): DeepKeys<T>[] {
  return Object.entries(obj).reduce((result: string[], [key, value]) => {
    const newPrefix = prefix ? `${prefix}.${key}` : key;

    return result.concat([
      newPrefix,
      ...(typeof value === 'object' && value !== null
        ? getAllKeys(value, newPrefix)
        : []),
    ]);
  }, []) as DeepKeys<T>[];
}

const keys = getAllKeys(obj);
console.log(keys); // ["a" | "f" | "h" | "a.b" | "a.c" | "a.c.d" | "a.c.e" | "f.g"]

In this example, we define a function called getAllKeys that takes an object as an argument and returns an array of all the keys in the object. We use the Object.keys method to get the keys of the object, and then we cast the result to the DeepKeys type to ensure that we get all the keys, including the keys in the nested objects.

Limitations

While the DeepKeys type can be useful in many situations, it does have some limitations. One limitation is that it only works for objects with a finite depth. If we have an object with an infinite depth, such as an object that contains a reference to itself, the type definition will result in a stack overflow error.

Another limitation is that the resulting type can be very complex for objects with many levels of nesting, which can make it difficult to work with. In some cases, it may be necessary to use a simpler type definition or a different approach to get the keys of an object.

Conclusion

In this article, we have discussed how to implement a type that can obtain all the keys in an object, including the keys in the nested objects. We have used a recursive type definition to define the DeepKeys type, which allows us to recursively traverse the object and return all the keys. We have also provided an example of how to use the DeepKeys type to get the keys of an object.

While the DeepKeys type has some limitations, it can be a useful tool for working with objects with nested objects.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

7 Lesser-Known HTML Attributes to Enhance User Experience

Zachary Lee — Wed, 11 Sep 2024 04:29:00 +0000

HTML is a powerful language for creating web pages, and while most developers are familiar with commonly used HTML attributes, there are several lesser-known attributes that can provide additional functionality and enhance the user experience.

1. The `enterkeyhint` Attribute for Virtual Keyboards

When designing web forms for mobile devices, it’s important to consider the virtual keyboards that users interact with. The enterkeyhint attribute is a global attribute that can be applied to form controls or elements with the contenteditable attribute set to true. It assists users by providing hints to the virtual keyboard about the intended action associated with the "Enter" key. This attribute accepts values such as enter, done, go, next, previous, search, and send, allowing you to customize the hint based on the specific context of your application.

<input type="text" enterkeyhint="done">

2. Attributes for Custom Ordered Lists

While working with ordered lists <ol>, you can utilize several lesser-known attributes to customize the behavior of the numbering. These attributes include:

The reversed attribute: It allows you to number the list items in reverse order, from high to low instead of the default low to high.
The start attribute: It defines the number from which the list should start.
The type attribute: It specifies whether to use numbers, letters, or Roman numerals for the list items.
The value attribute: It enables you to set a custom number for a specific list item.

<ol reversed>
  <li>List item...</li>
  <li>List item...</li>
  <li>List item...</li>
</ol>

<ol reversed start="20" type="1">
  <li>Typee: A Peep at Polynesian Life (1846)</li>
  <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
  <li>Mardi: and aVoyage Thither (1849)</li>
  <li>Redburn: His First Voyage (1849)</li>
  <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
  <li>Moby-Dick; or, The Whale (1851)</li>
  <li>Pierre; or, The Ambiguities (1852)</li>
  <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

3. The `decoding` Attribute for `<img>` Element

The decoding attribute allows you to provide a hint to the browser about how an image should be decoded. This attribute can be added to an <img> element and accepts three values: sync, async, and auto.

sync: Decode the image synchronously, which is the default behavior.
async: Decode the image asynchronously to avoid delaying the presentation of other content.
auto: Let the browser use its default decoding method.

<img src="/images/example.png" alt="Example" decoding="async">

By specifying the appropriate decoding behavior, you can optimize the loading and rendering of images on your web page.

4. The `loading` Attribute for `<iframe>` Element

Similar to lazy loading images, the loading attribute can be applied to <iframe> elements to control when the iframe's content should be loaded. By setting the loading attribute to lazy, you can defer the loading of the iframe until it's about to enter the viewport. This helps improve performance by reducing the initial page load time.

<iframe src="/page.html" width="300" height="250" loading="lazy"></iframe>

5. The `crossorigin` Attribute for Cross-Origin Resource Sharing (CORS)

When working with elements like <img>, <audio>, <video>, <script>, and <link>, you may come across the need for cross-origin resource sharing (CORS). The crossorigin attribute allows you to specify how the resource should be fetched in terms of CORS.

<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Example Image">

The attribute accepts two values: anonymous and use-credentials. Setting it to anonymous indicates that the resource should be fetched without including user credentials, while use-credentials indicates that the user credentials should be included.

6. The `disablepictureinpicture` Attribute for `<video>` Element

The disablepictureinpicture attribute can be applied to the <video> element to disable the Picture-in-Picture (PiP) feature. PiP allows videos to be displayed in a floating window, but if you want to prevent this behavior, you can simply add the attribute to the video element.

<video src="example.mp4" disablepictureinpicture controls></video>

7. The `integrity` Attribute for Scripts

To ensure that external scripts haven’t been tampered with, you can make use of the integrity attribute. This attribute allows you to provide a cryptographic hash value that the browser can use to verify the integrity of the script file before executing it.

<script src="script.js" integrity="sha256-Kx70Z9jzvYF0Eex8oO7w08=" crossorigin="anonymous"></script>

By including the integrity attribute with the appropriate hash value, you can add an extra layer of security to ensure the script's authenticity.

Conclusion

In this article, we have explored a collection of lesser-known HTML attributes that can enhance your web development projects. From improving user interactions to optimizing resource loading, these attributes provide valuable functionalities that may not be widely known or utilized.

If you find this helpful, please consider subscribing_for more useful articles and tools about web development. Thanks for reading!

Difference Between new Function() and new function() in JavaScript

Zachary Lee — Tue, 10 Sep 2024 13:42:14 +0000

JavaScript is indeed flexible, but it also brings some confusion. For example, you can use multiple ways to do the same thing, such as creating functions, objects, etc. So what is the difference between the two mentioned in the title?

new Function is another way to create a function, its syntax:

const func = new Function ([arg1, arg2, ...argN], functionBody);

A simple example:

const sum = new Function('a', 'b', 'return a + b');

sum(1 + 2); // 3

Well, this gives great flexibility. It’s not common, but there are some cases where it can be used. For example, we can use it when we need to dynamically compile a template into a function, which is what Vue.js does as far as I know. Besides that, it can also be used if we need to receive code strings from the server to create functions dynamically.

Let’s quickly talk about its features. See what the code below will output?

globalThis.a = 10;

function createFunction1() {
  const a = 20;
  return new Function('return a;');
}

function createFunction2() {
  const a = 20;
  function f() {
    return a;
  }
  return f;
}

const f1 = createFunction1();
console.log(f1()); // ?
const f2 = createFunction2();
console.log(f2()); // ?

The answer is 10 and 20. This is because new Function always creates functions in the global scope. Only global variables and their own local variables can be accessed when running them.

Whereas new function() is intended to create a new object and apply an anonymous function as a constructor. Such as the following example:

const a = new (function () {
  this.name = 1;
})();

console.log(a); // { name: 1 }

That’s it. Actually, every JavaScript function is a Function object, in other words, (function () {}).constructor === Function returns true.

An associated knowledge point is how to use new Function() to create an asynchronous function? MDN gave us the answer:

// Since `AsyncFunction` is not a global object, we need to get it manually:
const AsyncFunction = (async function () {}).constructor;

const fetchURL = new AsyncFunction('url', 'return await fetch(url);');

fetchURL('/')
  .then((res) => res.text())
  .then(console.log);

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

The Secrets of the 'delete' Operator in JavaScript

Zachary Lee — Sat, 07 Sep 2024 11:26:36 +0000

The delete operator is arguably an old language feature of JavaScript. As it literally means, it wants to destroy something, but what exactly can be destroyed?

delete 0

When delete 0 is executed, will it be destroyed from the execution system from 0?

Obviously not, its real purpose is to delete a property reference of an object.

delete object.property
delete object['property']

Generally, successful deletion will return true and failure will return false, but there are some exceptions.

Own properties

The delete operator only works on its own property. If there is a property with the same name on the prototype chain, this property will be skipped.

Non-existent property

If the deleted property does not exist, delete will have no effect, but will still return true.

const object = {};
delete object.name; // true

Non-configurable property

Non-configurable properties cannot be removed.

In non-strict mode, removing a non-configurable property of itself will return false, but in strict mode, it will throw a TypeError.

Properties declared by var, let, const

In the global scope, neither properties declared with var nor functions declared with function declarations (non-function expressions) can be deleted. This is because both the declared properties are mounted on the window and are non-configurable, so the logic of the previous item will be followed when deleting.

In addition, properties declared with var, let, const and those functions cannot be deleted, either in the global scope or in the function scope.

{
  let object = {
    name: 1,
  };

  function getName(obj) {
    return obj.name;
  }

  console.log(delete object); // false
  console.log(delete getName); // false
}

In non-strict mode, false is returned, but in strict mode, a SyntaxError is thrown instead of a TypeError.

Array property

First of all, the length property of the array is not configurable, so deleting it in strict mode will throw a TypeError.

In addition, when deleting an array element, the deleted item will be empty.

If you want to modify the original array, you can use Array.prototype.splice()

Conclusion

The real purpose of the ‘delete operator’ in JavaScript is to delete a property reference of an object. It can behave strangely in some special cases, so it’s best to only use it to remove configurable properties that exist on the object itself.

Besides that, please note that the ‘delete operator’ has nothing to do with freeing memory directly (compared to delete in C++), this is because the runtime environment of the JavaScript manages memory automatically. For more information on programming language memory management check out my previous article.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

Creating a React Hook for Rotating Images at Any Angle

Zachary Lee — Thu, 05 Sep 2024 09:40:17 +0000

In web development, you may need to rotate an image, which is easy to do in CSS. Simple code like this transform: rotate(90deg);. But what if we want to do it in JS?

TLDR

Draws the image to the canvas in the browser environment and rotates it. But before that, we need to do some math to keep the original image aspect ratio.

Core

Assuming that we have loaded the image, calculating the rotated image can be done as follows:

const { PI, sin, cos, abs } = Math;
const angle = (degree * PI) / 180;
const sinAngle = sin(angle);
const cosAngle = cos(angle);

const rotatedWidth = abs(imageWidth * cosAngle) + abs(imageHeight * sinAngle);

const rotatedHeight = abs(imageWidth * sinAngle) + abs(imageHeight * cosAngle);

And next, we use some of the canvas APIs to do the actual rotation:

const canvas = document.createElement('canvas');

const { width: canvasWidth, height: canvasHeight } = canvas;
const canvasCtx2D = canvas.getContext('2d');

canvasCtx2D.clearRect(0, 0, canvasWidth, canvasHeight);
canvasCtx2D.translate(canvasWidth / 2, canvasHeight / 2);
canvasCtx2D.rotate(angle);

canvasCtx2D.drawImage(
  image,
  -imageWidth / 2,
  -imageHeight / 2,
  imageWidth,
  imageHeight,
);

return canvas.toDataURL('image/png');

Wrap up

With the core code in place, we can make some optimizations and write dedicated React hooks to use it:

import { useEffect, useRef, useState } from 'react';

type RotatedImage = {
  src: string;
  width: number;
  height: number;
} | null;

let canvas: HTMLCanvasElement | null = null;
let canvasCtx2D: CanvasRenderingContext2D | null = null;

const getRotatedImage = (
  image: HTMLImageElement | null,
  rotation: number,
): RotatedImage => {
  canvas ??= document.createElement('canvas');
  canvasCtx2D ??= canvas.getContext('2d');

  if (!image || !canvasCtx2D) return null;

  const { width: imageWidth, height: imageHeight, currentSrc } = image;
  const degree = rotation % 360;
  if (!degree) {
    return {
      src: currentSrc,
      width: imageWidth,
      height: imageHeight,
    };
  }

  const { PI, sin, cos, abs } = Math;
  const angle = (degree * PI) / 180;
  const sinAngle = sin(angle);
  const cosAngle = cos(angle);

  canvas.width = abs(imageWidth * cosAngle) + abs(imageHeight * sinAngle);
  canvas.height = abs(imageWidth * sinAngle) + abs(imageHeight * cosAngle);

  // The width and height of the canvas will be automatically rounded.
  const { width: canvasWidth, height: canvasHeight } = canvas;

  canvasCtx2D.clearRect(0, 0, canvasWidth, canvasHeight);
  canvasCtx2D.translate(canvasWidth / 2, canvasHeight / 2);
  canvasCtx2D.rotate(angle);

  canvasCtx2D.drawImage(
    image,
    -imageWidth / 2,
    -imageHeight / 2,
    imageWidth,
    imageHeight,
  );

  const src = canvas.toDataURL('image/png');
  canvas.width = 0;
  canvas.height = 0;

  return {
    src,
    width: canvasWidth,
    height: canvasHeight,
  };
};

const useRotateImage = (imageSrc: string, rotation?: number): RotatedImage => {
  const imageEle = useRef<HTMLImageElement | null>(null);
  const [rotatedImage, setRotatedImage] = useState<RotatedImage>(null);

  useEffect(() => {
    if (typeof rotation === 'number') {
      let currImage = imageEle.current;

      if (currImage?.currentSrc !== imageSrc) {
        currImage = new Image();
        imageEle.current = currImage;

        currImage.src = imageSrc;
      }

      currImage.decode().then(
        () => setRotatedImage(getRotatedImage(currImage, rotation)),
        () => setRotatedImage(null),
      );
    }
  }, [imageSrc, rotation]);

  return rotatedImage;
};

export default useRotateImage;

Here I reuse the same canvas element to reduce repeated creation. Secondly, it should be noted that I set its width and height to 0 after each rotation to reduce memory usage. By the way, I also did the operation of clearing the canvas. This is because in the HTML spec when you modify the width and height of the canvas (whether it is the same as before) will clear the canvas, which is the same as canvasCtx2D.clearRect(0, 0, canvasWidth, canvasHeight), which is supported by modern browsers.

In useRotateImage, I keep a reference to the image element and set the rotated image state after image.decode(), which is resolved after the image data is ready.

Below is a online use case:

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

DEV Community: Zachary Lee

The Differences Between "export default xx" and "export {xx as default}"

The Basics of JavaScript Modules

The Behavior of export { xxx as default }

The Behavior of export default xxx

Export Reference Data Types

Best Practices and Recommendations

Conclusion

How does HTTPS work

Why HTTPS?

What is HTTPS?

HTTPS (TLS 1.2) secret

What are symmetric encryption and asymmetric encryption?

What is a CA certificate?

How to check the validity of the CA certificate?

Why is the transmission phase symmetric encryption?

Ditch Git Checkout: Use Git Switch and Git Restore Instead

Conclusion

The Secrets of JavaScript Object Property Order

1. Own properties are array indexes, in ascending numeric index order

2. Other own String properties, in ascending chronological order of property creation

3. Own Symbol properties, in ascending chronological order of property creation

Conclusion

Understanding the infer Keyword in TypeScript

The Infer Keyword

Examples

ReturnType

Parameters

PromiseType

UnboxArray

Limitations

Conclusion

How Server-Sent Events (SSE) Work

What is SSE?

How does SSE work?

Implementing SSE

Use cases for SSE

Benefits of using SSE

Efficiency

Simplicity

Reliability

Conclusion

Ditch dotenv: Node.js Now Natively Supports .env File Loading

Native .env File Handling

Simplified Loading with process.loadEnvFile()

Parsing Environment Variables

Support for Multi-line Values in .env Files

Conclusion

How to Create a Type to Retrieve All Keys of an Object in TypeScript

Overview of the Problem

A Possible Solution

Using the Type

Limitations

Conclusion

7 Lesser-Known HTML Attributes to Enhance User Experience

1. The enterkeyhint Attribute for Virtual Keyboards

2. Attributes for Custom Ordered Lists

3. The decoding Attribute for <img> Element

4. The loading Attribute for <iframe> Element

5. The crossorigin Attribute for Cross-Origin Resource Sharing (CORS)

6. The disablepictureinpicture Attribute for <video> Element

7. The integrity Attribute for Scripts

Conclusion

Difference Between new Function() and new function() in JavaScript

The Secrets of the 'delete' Operator in JavaScript

delete 0

Own properties

Non-existent property

Non-configurable property

Properties declared by var, let, const

Array property

Conclusion

Creating a React Hook for Rotating Images at Any Angle

TLDR

Core

Wrap up

Native `.env` File Handling

Simplified Loading with `process.loadEnvFile()`

Support for Multi-line Values in `.env` Files

1. The `enterkeyhint` Attribute for Virtual Keyboards

3. The `decoding` Attribute for `<img>` Element

4. The `loading` Attribute for `<iframe>` Element

5. The `crossorigin` Attribute for Cross-Origin Resource Sharing (CORS)

6. The `disablepictureinpicture` Attribute for `<video>` Element

7. The `integrity` Attribute for Scripts