Forem: easyoon

[Translations] Implementing Animations with Throttle in JavaScript

easyoon — Wed, 08 Jan 2025 17:14:06 +0000

Implementing Animations with Throttle in JavaScript

This document explains how to improve animation performance using throttle in JavaScript and applies throttle to solve the issue of choppy scroll animations. It also compares the differences before and after applying throttle.

What is Throttle?

Throttle is a technique that limits a function to be called 'at most once' within a 'certain time interval'. In other words, even if an event occurs multiple times within a short period, the function will only be executed once within the time interval set by the throttle. For example, if a function has a throttle of 100ms, even if the event occurs 10 times in 1 second, the function will be executed a maximum of 10 times (at 100ms intervals).

Where is Throttle Used?

Throttle can be used in the following situations:

Preventing performance degradation due to excessive event triggering: When events such as scrolling, mouse movement, and window resizing occur frequently in a short period, the event handler can be executed excessively, causing performance issues. Throttle is used to mitigate this.
Making animations smoother: When it is necessary to express continuous changes, such as scroll animations, the animation may be choppy or stutter depending on the event frequency. Using throttle can make animations smoother.

Problem: Stuttering and Choppy Scroll Animations

An attempt was made to implement a smooth scroll animation according to the scroll wheel event, but before applying throttle, the animation was choppy.

Reason: This is because the wheel event occurs at a very high rate, causing the window.scrollBy function to be called excessively, preventing the browser from processing all requests.

Comparison

1. Code Before Applying Throttle

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

In this code, the handleWheel function is executed every time a wheel event occurs. This function calculates the scroll amount using the deltaY value of the event and scrolls by calling the window.scrollByfunction. The problem is that the wheel event can occur multiple times in a very short period, which causes window.scrollBy to be called excessively, resulting in a choppy animation.

2. Code After Applying Throttle

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;
    let throttleTimer;

    const handleWheel = (event) => {
        if (throttleTimer) return;

        event.preventDefault();

        throttleTimer = setTimeout(() => {
            window.scrollBy({
                left: event.deltaY,
                behavior: 'smooth'
            });
            throttleTimer = null;
        }, 16);
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

In the throttled code, the throttleTimer variable is used to manage function execution. The process works as follows:

When the handleWheel function is called, it checks if throttleTimer exists.
If throttleTimer exists (meaning a previously set timer is still active), the function returns immediately. This prevents new scroll requests from being processed while a scroll animation is already in progress.
If throttleTimer does not exist, event.preventDefault() is called to prevent the default scroll behavior, and setTimeout is used to execute the window.scrollBy function after 16ms.
Inside the setTimeout callback function, throttleTimer is set to null, resetting the throttle and allowing the function to be called again after the delay.

3. Potential Improvements

Initial Delay of setTimeout

setTimeout is used to implement the throttling mechanism. setTimeout executes the callback function after the specified delay (16ms in this case). Consequently, when the first wheel event occurs, window.scrollBy is invoked after a 16ms delay. This initial delay can lead to a perceived lack of immediate responsiveness, potentially being interpreted as stuttering, particularly with rapid wheel movements. (Further improvements will be explored in the future...)

[Translations]Comparing ethers.js and web3.js as Web3 Regains Popularity

easyoon — Fri, 27 Dec 2024 11:00:39 +0000

Original Article Link

Comparing ethers.js and web3.js as Web3 Regains Popularity

As Web3 regains attention, interest in ethers.js and web3.js, the primary JavaScript libraries used for Ethereum-based DApp (Decentralized Application) development, is also increasing. While both libraries enable interaction with the Ethereum blockchain, they have some key differences, especially in their development approach. This document compares the two libraries, exploring their characteristics, advantages, disadvantages, and differences in development style.

web3.js

web3.js is an older library that emerged in the early days of the Ethereum ecosystem. It provides a broad range of functionalities, offering all methods for interacting with the blockchain from a single web3 object. It primarily uses a callback function-based API style.

Advantages:

It has a long history and is used in many legacy projects.
Offers a wider range of features compared to ethers.js.

Disadvantages:

Relatively large and heavy, which can impact performance.
The API is somewhat complex, leading to a steeper learning curve.
Updates are slower compared to ethers.js.
Callback-based API can make asynchronous code writing somewhat complex.

ethers.js

ethers.js is a relatively newer library that adheres to modern JavaScript standards and focuses on providing a better developer experience. It is concise and lightweight, offering a modularized API. In particular, it improves development flexibility and security by clearly separating Provider and Signer. It uses a Promise-based API, allowing for concise asynchronous code.

Advantages:

Concise and lightweight, providing faster performance.
Has a clear API structure separated into Signer and Provider.
- Signer: Manages private keys and handles transaction signing (enhanced security).
- Provider: Manages blockchain network connections (easy support for various networks).
Provides enhanced security features and pays more attention to private key management.
Actively developed and maintained, with rapid reflection of the latest features.
Provides excellent documentation.
Promise-based API makes asynchronous code concise and readable.

Disadvantages:

As a relatively new library, it is not used in as many legacy projects as web3.js.

Provider and Signer: Core Concepts of ethers.js and web3.js

In the blockchain, especially the Ethereum ecosystem, Provider and Signer are crucial concepts. They define how DApps interact with the blockchain. ethers.js and web3.js handle these two concepts differently, leading to significant differences in development approach.

Provider: Read-Only Connection to the Blockchain

The Provider provides read-only access to the blockchain network. It is like a librarian. You can read books (blockchain data) and get information, but you cannot add or modify content in the books.

Key Functions:

Retrieving block information (block height, timestamp, etc.)
Retrieving transaction information
Checking account balances
Calling read-only functions (view functions) of smart contracts
Checking network status

Signer: Transaction Signing and Execution

The Signer provides the ability to sign transactions using a private key and submit them to the blockchain. It is like someone with a seal. Just as a document (transaction) becomes effective only when stamped, the Signer signs transactions so that they can be recorded on the blockchain.

Key Functions:

Private key management (secure storage and access)
Transaction creation and signing
Calling state-changing functions of smart contracts
Sending Ether

Provider and Signer in ethers.js

ethers.js structures its API by clearly separating Provider and Signer. This greatly enhances development flexibility and security.

Provider: Provides various Providers through the ethers.providers module. You can connect using services like Infura, Alchemy, Etherscan, or directly using an RPC URL.

Example: const provider = new ethers.providers.InfuraProvider("mainnet", "YOUR_INFURA_PROJECT_ID");

Signer: You can manage private keys using the ethers.Wallet class or connect with wallets like MetaMask.

Example (using private key): const wallet = new ethers.Wallet("YOUR_PRIVATE_KEY", provider);
Example (connecting MetaMask): const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner();

By separating Provider and Signer in ethers.js, you can gain the following advantages:

Enhanced Security: Private keys can be managed securely through wallets without direct management.
Increased Flexibility: Various Providers can be easily switched and used.
Easy Testing: You can perform tests using mock Signers in the test environment.

Provider and Signer in web3.js

web3.js does not clearly separate Provider and Signer. Although it manages accounts and signs transactions through web3.eth.accounts, it is not as clearly separated as ethers.js.

Provider: Sets the Provider using web3.setProvider().

Example: const web3 = new Web3(new Web3.providers.HttpProvider('YOUR_RPC_URL'));

Signer: Signs transactions using web3.eth.accounts.signTransaction(). In this process, you often have to use the private key directly, which can create security vulnerabilities. You can also use wallets like MetaMask, but the integration is not as clean as in ethers.js.

Summary Comparison

Feature	ethers.js	web3.js
Provider	Clearly separated, supports various Providers (Infura, Alchemy, etc.)	Set with `web3.setProvider()`
Signer	Clearly separated, Wallet class, easy wallet integration	Managed through `web3.eth.accounts`, may require direct private key management
Security	Secure private key management, enhanced security	Risk of private key exposure
Flexibility	High flexibility, supports various Providers and wallets	Relatively low flexibility

ethers.js greatly improves development flexibility, security, and convenience by clearly separating Provider and Signer. On the other hand, web3.js does not have this clear separation, which can make development somewhat complex and create security vulnerabilities. Therefore, when starting a new Web3 project, using ethers.js is generally recommended.

Differences in Development Style

Feature	web3.js	ethers.js
API Style	Single `web3` object, callback-based	`Signer` and `Provider` separated, Promise-based
Asynchronous Processing	Handles asynchronous code using callback functions, which can reduce code readability	Can write asynchronous code concisely and clearly using Promises (easy to use async/await)
Private Key Management	Requires direct private key management (potential security vulnerabilities)	Abstracted private key management through `Signer` (enhanced security)
Network Connection	Connection setup using `web3.setProvider()`	Supports various networks and connection methods through `Provider` (Infura, Alchemy, etc.)

Conclusion

When starting a new Web3 project, using ethers.js is recommended. It provides a better development experience, performance, security, and the latest features. In particular, the separation of Provider and Signer and the Promise-based API are in line with modern development practices and improve code readability and maintainability. However, web3.js may still be a good choice for maintaining existing web3.js projects or in specific situations.

References

[Translations] Analyzing Apple Website Animation (1_Scrolling Synchronization)

easyoon — Mon, 23 Dec 2024 10:32:57 +0000

Original Article Link

The official Apple website uses smooth scroll-based animations to highlight its content. In this post, we will analyze and replicate a similar animation to understand its implementation.

🎥 Original Apple Website (Video)

📜 Reproduced Implementation

1. Scroll Synchronization

The animation state is calculated in real-time based on the scroll position (scrollY).

2. Bidirectional Animation

When scrolling down: Text moves upward and fades out, while the video scales down.
When scrolling up: Text moves downward and reappears, while the video scales up.

3. CSS Property Utilization

Use transform: translateY and scale values proportional to the scroll position.
Smooth animation is ensured using requestAnimationFrame.

🔧 HTML Structure

The HTML structure consists of a simple layout with text and a background video.

📜 Reproduced Implementation

Set up CSS to enable smooth animations based on the scroll position.

/* Text Section */
.text-section {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  color: white;
  z-index: 2;
}

.video-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-video {
  width: 100vw;
  height: auto;
}

🎬 JavaScript (Scroll-based Animation)

Calculate the state of the text and video based on the scroll position and update their styles in real-time.

const textSection = document.querySelector(".text-section");
const videoSection = document.querySelector(".video-section");

function handleScroll() {
  const scrollY = window.scrollY;
  const windowHeight = window.innerHeight;

  const textOpacity = Math.max(0, 1 - scrollY / (windowHeight / 2));
  const textTranslateY = Math.min(scrollY / 2, 100);

  textSection.style.transform = `translateY(-${textTranslateY}px)`;
  textSection.style.opacity = textOpacity;

  const videoScale = Math.max(0.5, 1 - scrollY / (windowHeight * 2));
  videoSection.style.transform = `scale(${videoScale})`;
}

window.addEventListener("scroll", () => {
  requestAnimationFrame(handleScroll);
});

🖥️ Key Operation Breakdown

🖥️ Key Functionality Explanation

Scroll-based Calculation

textOpacity: Adjusts the opacity of the text to gradually fade out based on the scroll position.
textTranslateY: Calculates how far the text moves upward in proportion to the scroll progress.
videoScale: Adjusts the scaling of the video to shrink proportionally with the scroll position.

requestAnimationFrame

An asynchronous function that enhances animation performance by leveraging the browser's optimized rendering loop for smooth operation.

Bidirectional Animation

Scrolling Down: The text moves upward and fades out, while the video scales down.
Scrolling Up: The text moves downward and reappears, while the video scales up.

[AWS Beginner | Translations] Cloud Concepts | Models of Cloud Computing (IaaS, PaaS, SaaS)

easyoon — Wed, 11 Dec 2024 09:43:59 +0000

Cloud Concepts | Models of Cloud Computing (IaaS, PaaS, SaaS)

Original Article Link

Types of Cloud Computing

Divided into Cloud Computing Models and Cloud Computing Deployment Models:
- Cloud Computing Models: Classified based on the types of services provided by cloud computing.
- Cloud Computing Deployment Models: Classified based on the way cloud computing is delivered.

Cloud Computing Models

Five Basic Application Components:
- Network: LAN cards/cables
- Storage: SSD / HDD
- Computing: CPU / RAM
- OS: Windows / Linux
- Application
Categorized based on the components provided:
- IaaS
- Infrastructure as a Service: Only infrastructure is provided.
- Includes Network + Storage + Computing; users install the OS and applications themselves.
- Similar to renting a virtual computer.
- Example: AWS EC2
- PaaS
- Platform as a Service: Provides all components except for application code.
- Offers infrastructure, servers, and other necessary components for application development, allowing users to simply upload and run their code.
- Example: Firebase, Supabase
- SaaS
- Software as a Service: Includes infrastructure, OS, and necessary software.
- Provides the service itself, allowing users to access and use it without additional setup.
- Examples: Gmail, Slack, Dropbox, etc.

Cloud Computing Deployment Models

Public (Cloud) Model
- All application-related activities are executed within the cloud.
- Low resource costs.
- High scalability.
Private Model
- Offers the highest level of customization.
- Expensive initial resource costs.
- High maintenance resource costs.
- Enhanced security.
Hybrid Model
- A mix of private and public models.
- Often used during the transition from private to public.
- Commonly used as a backup for private models.