DEV Community: 悦者生存

how to deal with whether the dom in the visual area?

悦者生存 — Sat, 13 Sep 2025 12:51:28 +0000

Hi there 🙌

what knowledge can we learn through this article?

what the different between viewport and DOM Layout?
width, innerWidth(window.innerWidth for viewport width), clientWidth, offsetWidth, scrollWidth?
how to use getBoundingClientRect()
how to use Intersection Observer API
practical Application Scenarios
- Image/Component Lazy Loading
- Infinite Scrolling
- Element Exposure Statistics

use getBoundingClientRect()

getBoundingClientRect() is a native DOM method that returns a DOMRect object containing the element’s position relative to the top-left corner of the viewport (properties like top/bottom/left/right) and dimensions (width/height). It eliminates the need to manually accumulate offset values, simplifying calculations.

Judgment Conditions (Vertical Visibility Example)

Partially visible: rect.top < window.innerHeight && rect.bottom > 0 (the element’s top is above the viewport’s bottom, and its bottom is below the viewport’s top)
Fully visible: rect.top >= 0 && rect.bottom <= window.innerHeight

Code Example

function isInViewport(elem) {
  const rect = elem.getBoundingClientRect();
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // Check for partial visibility (vertical + horizontal)
  return (
    rect.top < viewportHeight && 
    rect.bottom > 0 && 
    rect.left < viewportWidth && 
    rect.right > 0
  );
}

// Optimization: Add throttling to the scroll event (avoid frequent calculations)
function throttle(fn, delay = 100) {
  let lastTime = 0;
  return () => {
    const now = Date.now();
    if (now - lastTime > delay) {
      fn();
      lastTime = now;
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  const target = document.getElementById('target');
  if (isInViewport(target)) {
    target.style.backgroundColor = 'red';
  }
}));

use intersection observer API

The Intersection Observer is a browser-provided asynchronous observation API designed to detect the "intersection state" (whether they overlap, and the overlap ratio) between a "target element" and a "root element" (default: the viewport). It eliminates manual position calculations in scroll events and offers excellent performance (browser-internal optimizations avoid reflows/repaints), making it the preferred choice for modern front-end development.

Code Example(Basic Usage: Viewport Detection)

// 1. Create an Observer instance
const observer = new IntersectionObserver((entries) => {
  // entries: Array of intersection details for observed elements (may include multiple elements)
  entries.forEach(entry => {
    // entry.isIntersecting: Whether the element intersects with the root (entered the viewport)
    if (entry.isIntersecting) {
      console.log('Element entered the viewport', entry.target);
      // Optional: Stop observing (e.g., for lazy loading images, only need one detection)
      observer.unobserve(entry.target);
    } else {
      console.log('Element left the viewport', entry.target);
    }
  });
}, {
  // Configuration: Root = viewport, detect 100px early
  rootMargin: '100px 0px',
  // Trigger callback when overlap ratio reaches 10%
  threshold: 0.1
});

// 2. Observe the target element
const target = document.getElementById('target');
observer.observe(target);

// 3. (Optional) Stop observing all elements (e.g., when a component is destroyed)
// observer.disconnect();

Advanced Usage: Observe a Custom Scroll Container

To detect if an element is within a custom scroll container (instead of the viewport), set root to the container element:

const scrollContainer = document.getElementById('scroll-container');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element entered the scroll container’s viewport');
    }
  });
}, {
  root: scrollContainer, // Root = custom scroll container
  rootMargin: '0px',
  threshold: 1 // Trigger when fully visible
});

Pros & Cons
✅ Pros:
Asynchronous execution (does not block the main thread), ensuring excellent performance (no scroll event jank).
Supports early/late detection (rootMargin) and precise overlap ratio monitoring (threshold).
Concise code (no manual position calculations).
❌ Cons: Limited compatibility (supports IE11+, Chrome 51+, Firefox 55+); older browsers require a polyfill (e.g., the intersection-observer library via npm).

How to create deep clone of an object using javascript?

悦者生存 — Fri, 12 Sep 2025 14:01:19 +0000

Hi there 🙌

What knowledge can you learn through this article?

Differentiate primitives and references
how to use typeof or instanceof?
how to accurly to get types?
how to traversal map and set?
how to use weakmap?
understand Prototype Chain
what is the different between Reflect.ownKeys() and hasOwnProperty?
what is the different between Reflect.ownKeys() and Object.keys?
what is the different between Reflect.ownKeys() and for...in...?

How the Custom Function Works

primitive value: directly return string,number,boolean etc;
Circular reference: Use weakMap to track cloned object, preventing infinite recursion when an object references itself;
Special Types:
- Date: clone using new Date(original);
- RegExp: clone using new RegExp(original);
- Map/Set: create an instances and recursively clone their value;
Array/Object: create an instances and recursively clone nested properties

function deepClone(original, cloned = new WeakMap()) {
  // 1. Handle primitive values (direct copy)
  if (original === null || typeof original !== "object") {
    return original;
  }
  // or you can use instanof 
  // original instanceof Object


  // 2. Handle circular references (avoid infinite recursion)
  if (cloned.has(original)) {
    return cloned.get(original);
  }

  // 3. Handle special object types
  const type = Object.prototype.toString.call(original);

  // Clone Date
  if (type === "[object Date]") {
    const clone = new Date(original);
    cloned.set(original, clone);
    return clone;
  }

  // Clone RegExp
  if (type === "[object RegExp]") {
    const clone = new RegExp(original.source, original.flags);
    clone.lastIndex = original.lastIndex; // Preserve lastIndex
    cloned.set(original, clone);
    return clone;
  }

  // Clone Map
  if (type === "[object Map]") {
    const clone = new Map();
    cloned.set(original, clone); // Cache before recursion to handle circular refs
    original.forEach((value, key) => {
      clone.set(deepClone(key, cloned), deepClone(value, cloned));
    });
    return clone;
  }

  // Clone Set
  if (type === "[object Set]") {
    const clone = new Set();
    cloned.set(original, clone);
    original.forEach(value => {
      clone.add(deepClone(value, cloned));
    });
    return clone;
  }

  // 4. Clone arrays or plain objects
  // Create a new instance (array or object)
  const clone = Array.isArray(original) ? [] : {};
  cloned.set(original, clone); // Cache to handle circular references

  // Recursively clone nested properties
  Reflect.ownKeys(original).forEach(key => {
    clone[key] = deepClone(original[key], cloned);
  });

  return clone;
}

// Test Cases
const original = {
  name: "Bob",
  birth: new Date("1990-01-01"),
  regex: /hello/g,
  map: new Map([["a", 1]]),
  set: new Set([1, 2, 3]),
  nested: { x: 10, y: [20, 30] }
};

// Add a circular reference (original references itself)
original.self = original;

const cloned = deepClone(original);

// Verify independence
cloned.nested.x = 100;
cloned.map.set("b", 2);

console.log(original.nested.x); // 10 (original unchanged)
console.log(cloned.nested.x);  // 100 (clone modified)
console.log(cloned.self === cloned); // true (circular reference preserved)

CSS Grid Layout Tutorial

悦者生存 — Sat, 18 May 2024 04:04:49 +0000

OVERVIEW

The Grid Layout is the most powerful CSS layout scheme.
It divides the web page into a grid and the different grids can be combined arbitrarily to create various layouts. Previously, the effects could only be achieved through a complex CSS framework, however, it is built into the browser.

The layout like the one in the above picture is exactly where the grid layout excels.

The grid layout and the flex layout have certain similarities, which can specify the positions of multiple items inside the container. However, there are also significant differences between them.

The flex layout is the axis layout, which can only specify the position of the "item" relative to the axis and can be regarded as one-dimensional. the grid layout divides the container into "rows" and "columns", generating cells, and specifying the cell where the "item" is located, which can be regarded as a two-dimensional layout. the grid layout is much more powerful than the flex layout.

basic concept

The area adopting the grid layout is called a 'container'. the child elements positioned in the grid inside the container are called 'items'.

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

in the above code, the outermost

element is the container, and the three inner elements are the items.

notice: the item can only be the top-level child elements of the container and not include the child elements of the item.
For example, the

element isn't the item in the above code. the grid layout only takes effect on items.

the horizontal area inside the container is called a "row", and the vertical area is called a "column".

in the above picture, the horizontal dark area is the "row", and the vertical dark area is the "column".

cell

The intersection area of the row and the column is called a "cell".

under the circumstances, n rows and m columns will generate nxm cells. For example,3 rows and 3 columns will generate 9 cells.

grid lines

The lines that divide the grid are called "grid lines". The horizontal grid lines divide the rows, and the vertical grid lines divide the columns.

under normal circumstances, there are n+1 horizontal grid lines in n rows and m+1 vertical grid lines in m columns. For example, there are four horizontal grid lines in three rows.

The properties of the container

The properties of the grid layout are divided into two categories. One category is defined on the container and is called container properties; the other category is defined on the item and is called item properties. the part first introduced the container properties.

display

display: grid specifies a container adopting the grid layout.


div {
  display: grid;
}

under default circumstances, the elements of the container are the block-level elements but they also can be set inline elements.

div {
  display: inline-grid;
}

the above code specifies that the div element is an inline element, and the inside of the element uses a grid layout.

notice: that after setting the element as a grid layout, the settings such as float, display: inline-block, display: table-cell, vertical-align, and column-* of the container child elements (items) will become invalid.

grid-template-columns and grid-template-rows

After the container specifies the grid layout. then we'll divide the container into rows and columns. the grid-template-columns attribute specifies the width of each column, and the grid-template-rows attribute specifies the height of each row.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

In the above code, it specifies a grid of three rows and three columns. column width and row height both being 100px

In addition to using absolute units, percentages can also be used.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

repeat()

sometimes, it's very troublesome to write the same value repeatedly, especially when there are many grids. at this time, we can use the repeat() function to simplify the repeated value. the above code is rewritten with repeat() as follows.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

The repeat() function accepts two parameters, one parameter is the number of repetitions, and the other parameter is the value to be repeated.

auto-fill

sometimes, the size of the cell is fixed, but the size of the container is uncertain. if you want each row(or each column) to accommodate as many cells as possible, then the auto-fill keyword can be used to indicate automatic filling.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

the above code indicates the width of each column is 100px, then it is automatically filled until the container can no longer accommodate more columns.

fr

in order to facilitate the representation of proportional relationships, the grid layout provides fr keyword. if the width of two columns is 1fr and 2fr respectively, it means that the latter is twice as much as the former.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

the above code represents two columns of the same width.

fr can be combined with the unit of the absolute length, and this will be very convenient.


.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

the above code represents that the width of the first column is 150px, and the width of the second column is half of that of the third column.

minmax()

The minmax() function generates a range of lengths and represents that length is within this range. it accepts two parameters, namely the min value and the max value.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

in the above code, minmax(100px, 1fr) indicates that the width of the column is not less than 100px and not more than 1fr.

auto

The auto key indicates that the width of the column is determined by the browser.


grid-template-columns: 100px auto 100px;

in the above code, the width of the second column is basically equal to the maximum width of the cells in this column, unless the cells set the min-width attribute and the value is more than the biggest width.

layout instance

The grid-template-columns attribute is very useful for page layout. The two-column layout only requires one line code.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

in the above code, the left column is set to 70%, the right column is set to 30%.

the traditional grid layout is very easy to write.


grid-template-columns: repeat(12, 1fr);

grid-row-gap, grid-column-gap, grid-gap

the grid-row-gap attribute sets the gap between rows, and the grid-column-gap attribute sets the gap between columns.

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

the grid-gap attribute is the combined shorthand form of grid-column-gap and grid-row-gap and the syntax is as follows.

grid-gap: <grid-row-gap> <grid-column-gap>;

therefore, the above code of CSS is equivalent to the following code.

.container {
  grid-gap: 20px 20px;
}

if grid-gap omitted the second value, the browser considers the second value to be equals to the first value.

according to the latest standard, the grid- prefix of the three attribute name has been remove, grid-column-gap and grid-row-gap are written as column-gap and row-gap, and grid-gap is written as gap.

justify-items, align-items

the justify-items attribute is used for setting the horizontal position of the cell content, the align-items attribute be used for setting the vertical position of the cell content.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

the writing of the two attributes is exactly the same, and they can both take the following values.

start： align the starting edge of the cell
end： align the ending edge of the cell
center： center inside the cell
stretch： stretch and occupy the entire width of the cell(default value)

.container {
  justify-items: start;
}

the above code indicates that the content of the cell is align-left, the effect is shown in the figure below.

.container {
  align-items: start;
}

the above code indicates that the content of the cell is aligned at the top and the effect is shown in the figure below

justify-content, align-content

the justify-content property is the horizontal position of the entire content area in the container, and the align-content property is the vertical position of the entire content area in the container.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

the writing method of these two attributes is exactly the same, both can take the following values.

start - align the starting border of the container

end - align the ending border of the container

center - center inside the container

stretch - when the item size is not specified, it stretches to fill the entire gird container

item attribute

These attributes are defined on the item.

grid-column-start, grid-column-end, grid-row-start, grid-row-end

The specific method is to specify on which grid lines the four borders of the item are respectively positioned.

grid-column-start: the vertical grid line where the left frame is located
grid-column-end
grid-column-end: the vertical grid line where the right frame is located
grid-row-start: the horizontal grid line where the top frame is located
grid-row-end: the horizontal grid line where the bottom frame is located

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

the above code indicates that the left frame of the item-1 is the second vertical grid line, and the right frame of the item-1 is the fourth grid line.

in the above figure， we only specify the right frame of the item-1, but do not specify the top frame and the bottom frame, so it can adopt the default position that the top frame is the first grid line and the bottom frame is the second grid line.

except the item-1, the other items do not have a specified position and are automatically laid by the browser, at this time their position is determined by the grid-auto-flow attribute of the container, the default value of the attribute is row, so it will be arranged "row by row first and then column by column".

justify-self, align-self

the justify-self attribute sets the horizontal position of the cell content
the align-self attribute sets the vertical position of the cell content

start： align the starting edge of the cell
end： align the ending edge of the cell
center： center inside the cell
stretch： stretch and occupy the entire width of the cell(default value)

.item-1  {
  justify-self: start;
}

what is BFC?

悦者生存 — Tue, 23 Apr 2024 07:25:57 +0000

What is BFC?

BFC (Block Format Context) refers to the formatting context of a block-level element. It defines how elements are laid out and interact with each other within a block structure.

The characteristic of the BFC

In web design and front-end development, BFC has the following characteristics and effects:

In the vertical direction: it is arranged from top to bottom, which is consistent with the arrangement method of the document flow.
In the BFC, the margins of two adjacent containers up and down will overlap.
The floating elements will be calculated for height by the parent.
The area that forms the BFC will not overlap with the floating elements.

The method to generate BFC

Floating Elements: the value of the Floating Elements is not None;
Position Elements: the value of the Position Elements is absolute or fixed;
Flexible Elements: the value of the Flexible Elements is flex or inline-flex;
Overflow Elements: the value of the Overflow Elements is not visible;

The role of BFC

solve the overlapping problem of margin: the BFC is an independent area, and the internal elements and the external elements don't affect each other, turning two elements into BFC elements after, the overlapping problem is solved;
solve the collapse problem of margin: set overflow: hidden
for the parent element;
solve the problem of height collapse: when the children are set floating attribute, the parent element will have a height collapse problem, that is, the height of the parent element will become 0. if you want to solve the problem, you should turn the parent elements into a BFC. The common method is to set overflow: hidden for the parent element.

build your own redux

悦者生存 — Sat, 20 Apr 2024 06:15:18 +0000

Presumably, many students have used redux. how to build your own redux? It is said that Redux only has 100 lines of code, but there are 10 thousand lines of comments.

the role of the Redux

Redux is used for state management

Why do we need Redux?

when the project becomes Larger and Larger, it becomes increasingly difficult to transfer data between components.

What is the greatest feature of Redux?

One-way data flow： the state of the entire application is centrally stored in one place, which is convenient for management and tracking. Both React and Vue adopt actually one-way data flow. you can understand one-way data flow as that the parent components pass the data to child components through props, but child components can't modify the props and modify the value of parent components through the method p

The principle of the redux

data store + publish-subscribe model. really, it's just so simple.

Store

you can imagine a warehouse and the boxes inside the warehouse are the initial data.

the publish-subscribe model handles actually the boxes inside the warehouse.

The publish-subscribe model

we can break down the publish-subscribe, the publish-subscribe modal mainly implements a platform, similar to the YouTube website. the authors can publish(dispatch) video, the users can subscribe, and the place to manage the publish-subscribe is a reducer.

Then it must have a 'store' to store the many things. if you want to see all the videos, you can use the 'getState()' method.

What is the core API of the Redux doing?

// create YouTuBe platform, based on reducer(the place to manage publish-subscribe)
const store = Redux.createStore(reducer, initialState);
// get all videos
store.getState();
// user subscribes to the author
store.subscribe(function(){});
//The author publishes some video
store.dispatch({type:'description'});
// Implementing the management center
function reducer(state, action){};

Implement redux

From the above APIs, it can be seen the redux has a createStore method, which returns a store object, the store object has three methods.

// create createStore method, the params is reducer
function createStore(reducer) {
    // offer the API to get all videos
    function getState() {}
    // offer subscribe API
    function subscribe() {}
    // offer publish API
    function dispatch() {}
    return {
        getState,
        subscribe,
        dispatch,
    };
}

Redux mainly implements the store method, however, the reducer method is implemented by the user.

How to implement reducer

we can offer a template of the reducer function. when users implement the reducer function, They should write according to the template

function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return state + 1;
        case "decrement":
            return state - 1;
        default:
            return state;
    }
}

let's analyze these two parameters, the state parameter is data that will be changed, the action parameter is an action that will happen.

Prefect the createStore function

// create  createStore function
function createStore(reducer, initialState) {
    // closure store state
    let state = initialState;
    // initial listener array
    const listener = [];

    //Get all videos
    function getState() {
        return state;
    }
    function subscribe() {
         // push function
         listener.push(func);
     }

    function dispatch(action) {
        state = reducer(state, action);
        for (let i = 0; i < listeners.length; i++) {
            const listener = listeners[i];
            // excute
            listener();
        }
    }
    return {
        getState,
        subscribe,
        dispatch,
    };
}

here, our Redux source code has been simply implemented, and friends can try it.