Forem: Sailing

🚀 TCP vs UDP — What You Think You Know Is Already Outdated

Sailing — Wed, 12 Nov 2025 07:39:39 +0000

“TCP is reliable, UDP is unreliable.”
You’ve probably heard this a hundred times.
But — do you really understand what that means?

In today’s world, where latency defines experience and performance defines survival,
you must understand: what truly makes TCP and UDP different?

Don’t panic: First, where do TCP and UDP actually live?

In the OSI seven-layer model, both TCP and UDP reside in the Transport Layer.
Their mission: to provide end-to-end data delivery for the Application Layer (HTTP, FTP, DNS, etc.).

┌──────────────────────────────┐
│ Application (HTTP, FTP, DNS, WebRTC) │
├──────────────────────────────┤
│ Transport (TCP, UDP) ← Our focus │
├──────────────────────────────┤
│ Network (IP)                   │
└──────────────────────────────┘

Think of IP as the road that deliveries travel on,
and TCP/UDP as the delivery method itself.

Or simply put:

TCP = like FedEx → tracked, signed, guaranteed delivery.
UDP = like instant courier → fast, no guarantee.

The Transport Layer decides how data is delivered.

TCP — The “Control Freak” Built for Reliability

TCP (Transmission Control Protocol) is a connection-oriented perfectionist.
It ensures that every piece of data arrives accurately, in order, and intact
through a set of carefully engineered mechanisms.

1. Three-Way Handshake & Four-Way Termination: Building Trust

TCP is connection-oriented — data can’t flow until both sides shake hands three times.

Client                      Server
   │ -------- SYN -------> │   (Let’s connect)
   │ <------ SYN+ACK ----- │   (Got it, ready)
   │ -------- ACK -------> │   (Confirmed)
   │———Connection established———│

✅ These three steps confirm that both sides are ready to send and receive.
✅ When closing the connection, a four-way handshake ensures both sides disconnect safely.

2. Sliding Window & Congestion Control — Precision Like a Brake System

TCP doesn’t just send data — it controls it, adapting to network conditions with finesse.

Sliding Window: controls how many packets can be sent before requiring acknowledgment, improving throughput.
Congestion Control: dynamically adjusts transmission speed to prevent overload.
Classic algorithms include:
- Slow Start
- Congestion Avoidance
- Fast Retransmit

This results in TCP’s key guarantees:
✅ Ordered delivery
✅ Retransmission on loss
✅ No duplication (sequence numbers + checksums)
✅ Adaptive flow control

3. The Trade-Offs

Multiple RTTs (round-trip times) for handshakes and acknowledgments
Each packet carries overhead (ACKs, sequence checks, etc.)
Retransmission can cause performance collapse under packet loss

In short: TCP is reliable, but not fast to warm up.
For latency-sensitive tasks (like streaming, gaming, or voice chat), TCP feels heavy.

UDP — The “Speed Demon” with Zero Baggage

UDP (User Datagram Protocol) is a connectionless protocol — the polar opposite of TCP.
It doesn’t handshake, confirm, cache, or retransmit.
It does one thing really well: send data as fast as possible.

1. A Tiny 8-Byte Header

UDP’s packet structure:

┌────────────┬────────────┬────────────┬────────────┐
│ Source Port│ Dest Port  │ Length     │ Checksum   │
└────────────┴────────────┴────────────┴────────────┘
│                   Data...                         │
└───────────────────────────────────────────────────┘

Source Port: 16-bit ID of the sender process
Destination Port: 16-bit ID of the receiver process
Length: total packet length (including header)
Checksum: verifies errors (mandatory in IPv6)

Compared with TCP’s minimum 20-byte header, UDP’s 8 bytes are featherlight.

That means:
✅ Data enters the kernel → gets 8-byte header → straight to the NIC
✅ No handshake, confirmation, or buffering. (Fire and forget — maximum speed)

2. Connectionless ≠ Chaotic

“Connectionless” doesn’t mean “disorganized.”

It simply means no state is maintained between sender and receiver.
(TCP, on the other hand, tracks every connection’s state.)

✅ UDP keeps no connection tables — every packet is independent.
✅ Routing is based purely on (IP, Port) — simple and efficient.

Example:

TCP: Who are you? Who am I? What’s our current state?
UDP: Where to send? Done.

This stateless nature gives UDP very low kernel overhead,
perfect for broadcasting, real-time streaming, or high-scale distribution.

3. Why It’s So Fast

✅ Zero Handshake: no RTTs wasted on setup.
✅ Tiny Header: 8 bytes vs TCP’s 20+.
✅ No retransmission or flow control: minimal system overhead.

Low latency and high throughput — UDP’s ultimate edge.

The Modern UDP: Fast and Reliable

Don’t underestimate it — UDP is no longer just “fast but unreliable.”
It’s the foundation of modern high-speed internet protocols.

Protocol (based on UDP)	Features	Typical Use
QUIC (HTTP/3)	Encryption + multiplexing + congestion control	Web / Browsers
RTP / RTCP	Timestamped + loss-tolerant	Real-time audio/video
WebRTC	NAT traversal + P2P + real-time transport	Calls / screen sharing
KCP	User-space retransmission + fast handshake	Gaming / streaming

These all share one philosophy:

“Use UDP for speed, and build reliability ourselves.”

That’s why HTTP/3 (QUIC) outperforms HTTP/2 (TCP) — it combines speed with control.

UDP Performance Boost: Zero-Copy & Multiplexing

UDP’s simplicity makes advanced optimizations possible:

Zero-Copy I/O:

Data goes straight from user space to the NIC buffer.
Eliminates multiple memory copies.
Reduces context switching overhead.

Multiplexing:

One socket can serve many clients.
Routing by (IP, Port) — no new connections needed.
Extremely efficient for CDN or live-stream distribution.

TCP vs UDP: Which One Should You Choose?

Feature	TCP	UDP
Connection-oriented	✅ Yes (handshake)	❌ No
Reliable delivery	✅ Yes	❌ No
In-order	✅ Guaranteed	❌ Not guaranteed
Congestion control	✅ Yes	❌ No
Header size	≥20 bytes	8 bytes
Latency	Higher	Very low
Typical uses	HTTP, FTP, SMTP	DNS, WebRTC, gaming, streaming
Best for	Integrity	Real-time performance

Choosing the right one:

Scenario	Recommended	Why
Web / file transfer	TCP	Accuracy and order matter
Video conference / live stream	UDP	Low latency > perfection
Online gaming	UDP + custom reliability	Speed + flexibility
DNS lookup	UDP	Small and fast
Browser transport (HTTP/3)	QUIC (UDP-based)	Fast handshake + security

Conclusion: You’re Not Choosing a Protocol — You’re Choosing a Strategy

TCP is secure delivery.
UDP is instant delivery.

TCP trades time for certainty.
UDP trades certainty for speed.

The smart approach isn’t picking one side —
it’s balancing reliability and real-time performance for your specific needs.

Just like:

File transfers demand perfection.
Live streams demand immediacy.

What about you — which would you choose?
Drop your thoughts in the comments — hope this helped you learn something new and useful.

Exploring Dynamic Visual Effects in CSS with Transform and Animation

Sailing — Tue, 14 Oct 2025 02:30:44 +0000

Before the arrival of transform and animation, front-end developers often had to write large amounts of JavaScript code to achieve dynamic effects. However, with the introduction of these two CSS properties, creating rich motion and smooth transitions became much simpler — making user interfaces more engaging and interactive experiences more fluid.

In this article, we’ll dive deep into the transform and animation properties and explore how they can be used to create dynamic visual effects — with demo examples along the way.

Transform: The Power to Change the World

The transform property allows us to rotate, scale, skew, or translate elements without affecting their layout position on the page. This introduced a revolutionary change in CSS — effects that once required complex JavaScript logic can now be achieved with just a few lines of CSS.

<div class="box"></div>

.box {
    width: 100px;
    height: 80px;
    background-color: red;
    margin-bottom: 130px;
}

2D Transform

In 2D space, we can use functions such as translate(), scale(), rotate(), and skew() to manipulate elements.

<div class="box transform-box"></div>

.transform-box {
  transform: translate(50px, 100px) rotate(30deg) scale(1.5);
}

translate(x, y) — moves the element along the X and Y axes.
scale(x, y) — scales the element’s width and height.
rotate(angle) — rotates the element.
skew(x-angle, y-angle) — skews (shears) the element.

3D Transform

CSS 3D transforms take this a step further by allowing us to manipulate elements in three-dimensional space.

<div class="box transform-box-3D"></div>

.transform-box-3D {
  transform: translate3d(50px, 100px, 150px) rotate3d(1, 1, 1, 45deg);
}

translate3d(x, y, z) — moves the element along the X, Y, and Z axes.
scale3d(x, y, z) — scales the element in three dimensions.
rotate3d(x, y, z, angle) — rotates the element around a vector.
perspective() — defines the viewer’s distance from the 3D element, creating depth and perspective.

Animation: Making the World Move

If transform is static magic, then animation is what brings that magic to life. With animation, we can create smooth transitions that make transformations occur gradually over time, rather than instantly.

Keyframe Animations

The @keyframes rule lets us define keyframes — specific points in time where we can describe how an element should appear.

<div class="box rotate-box"></div>

@keyframes rotate-box {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotate-box {
  animation: rotate-box 2s infinite linear;
}

Animation Properties

The animation shorthand property combines multiple settings such as the animation name, duration, timing function, delay, iteration count, and direction.

.animation-box {
  animation: move-box 2s ease-in-out 1s 3 alternate;
}

Syntax: animation: name duration timing-function delay iteration-count direction;

animation-name — the name defined in @keyframes.
animation-duration — how long one cycle of the animation lasts.
animation-timing-function — defines the speed curve of the animation.
animation-delay — sets a delay before the animation starts.
animation-iteration-count — how many times the animation repeats.
animation-direction — whether the animation alternates direction on each cycle.

Combining Transform and Animation: Creating Magic

By combining transform and animation, we can produce truly eye-catching visual effects.

@keyframes fly-box {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(100px) rotate(180deg);
  }
  100% {
    transform: translateX(0) rotate(360deg);
  }
}
.fly-box {
  animation: fly-box 4s infinite;
}

Conclusion

The transform property allows you to rotate, scale, skew, or translate elements — all without affecting the document layout. This brought a revolutionary leap to CSS, enabling developers to achieve effects that previously required JavaScript.

Meanwhile, the animation property enables smooth transitions, turning instantaneous changes into gradual, time-based transformations.

While transform and animation each serve distinct purposes, combining them unlocks powerful possibilities — allowing you to build visually appealing, interactive, and dynamic user experiences with pure CSS.

Stop Using resize! You Might Be Missing Out on ResizeObserver

Sailing — Mon, 13 Oct 2025 10:16:04 +0000

Still using polling or window.resize to detect element size changes?
Then you might have missed a native API truly built for element resizing — say hello to ResizeObserver.

What Problem Does `ResizeObserver` Solve?

Before ResizeObserver was introduced, developers had only a few imperfect ways to detect element size changes:

window.addEventListener('resize')
Polling DOM dimensions with a timer
Using MutationObserver with manual logic
Relying on third-party libraries

All these share the same core issue:
They track window or DOM structure changes, not the element’s own size changes.

// 👎 Can't detect element size changes
window.addEventListener('resize', () => {
  console.log("The window changed, but did the element?");
});

ResizeObserver, on the other hand, was designed specifically for this purpose:

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Element size changed:', entry.contentRect);
  }
});

ro.observe(document.querySelector('#target'));

It’s built on the browser’s layout engine — asynchronous, performant, and focused purely on element-level resize detection.

Use Cases

🧭 Case 1: Chart Auto-Resize

Redraw charts (like ECharts or Highcharts) when their container size changes — avoiding stretched or squashed layouts.

const chart = echarts.init(document.getElementById('chart'));

const ro = new ResizeObserver(() => {
  chart.resize();
});
ro.observe(document.getElementById('chart'));

Supports container resizing, layout changes, hide/show transitions, and more —
no need for window.resize anymore!

🧩 Case 2: Responsive Layout Components

For button groups, menus, or card layouts that should adapt when their container width changes:

ro.observe(container);
ro.callback = entries => {
  const width = entries[0].contentRect.width;
  toggleLayout(width > 600 ? 'row' : 'column');
};

Use ResizeObserver instead of resize + getBoundingClientRect() — cleaner and more reactive.

🪞 Case 3: Nested iframes & Adaptive Containers

Elements inside an iframe can’t be detected by window.resize,
but ResizeObserver works perfectly!

Supports nested components
Works with Shadow DOM
Ideal for micro-frontend or complex layout systems

ResizeObserver vs Other Methods

Feature / Need	ResizeObserver ✅	window.resize ❌	MutationObserver ⚠️	setInterval ❌
Element size change	✅ Yes	❌ No	⚠️ Indirect	❌ No
Performance	⭐⭐⭐⭐	⭐⭐	⭐⭐	⭐
Precision	High	Low	Medium	Low
Real-time updates	High	Medium	Medium	Low
Code complexity	Low	Low	Medium	High

🚀 Advanced Tips (Save This!)

1. Debounce to Control Frequency

const debounce = (fn, delay = 100) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

const ro = new ResizeObserver(debounce(entries => {
  // your logic
}));

Perfect for high-frequency resize scenarios (dragging, dynamic layouts, etc.).

2. Observe Multiple Elements with State Management

const sizeMap = new Map();
const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    const old = sizeMap.get(entry.target);
    const now = entry.contentRect;
    if (!old || old.width !== now.width) {
      sizeMap.set(entry.target, now);
      handleResize(entry.target);
    }
  }
});

Useful for grid systems, dashboards, or reusable container pools.

3. Lifecycle-Safe Binding (Vue / React)

onMounted(() => {
  ro.observe(elRef.value);
});
onBeforeUnmount(() => {
  ro.unobserve(elRef.value);
});

Essential in Vue, React, or Web Components — ensures cleanup and prevents memory leaks.

Summary

In short:
ResizeObserver = lighter, more accurate, and more efficient element resize detection.

But keep these in mind:

Avoid reading layout synchronously in callbacks (like offsetHeight) to prevent reflow.
Use debounce/throttle for multiple elements or frequent resizes.
Always unobserve elements properly to prevent leaks.
Not supported in IE — use a polyfill if needed.

ResizeObserver makes listening to element size changes precise, efficient, and elegant.
Stop fighting with window.resize — embrace the native solution built for modern web layouts.

💡 “Stop Copying Regex!” — Manage, Validate, and Extract All Your Regex with regex-center

Sailing — Mon, 13 Oct 2025 10:06:25 +0000

Its biggest advantage can be summed up in three words: flexible, flexible, and flexible.

In daily development, regular expressions are everywhere — validating emails, phone numbers, URLs, ID cards, password strength, and more.
But every project and every file seems to have its own version of the same regex. It’s hard to maintain and easy to mess up.

For example:

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/;
if (!emailRegex.test(email)) {
  console.error('Invalid email format');
}

Or like this 👇

if (!/^1[3-9]\d{9}$/.test(phone)) {
  alert('Invalid phone number');
}

Over time, the same regex appears in multiple forms across the codebase —
updating one means a global replace, and team standards become inconsistent.

Eventually, everyone’s asking the same question:
“Where did this regex even come from?”

That’s exactly what regex-center is built to solve.

Regex Center = Regex + Management

regex-center is a professional regex management library —
it comes with 100+ built-in patterns, supports custom extensions, team-wide management, type hints, and ReDoS-safe validation.

It’s not just for matching — you can also extract, replace, highlight, and mask text easily.

🔧 Core Features

✅ 100+ built-in common regex rules
✅ Named groups (e.g. email:strict, password:strong)
✅ Unified management and extensibility (inject, use)
✅ Full TypeScript support
✅ Built-in ReDoS protection
✅ Advanced text operations (extract, replace, highlight, count)
✅ Works in both browser and Node.js — zero dependencies

🚀 Quick Start

Installation

npm install regex-center

Option 1: Use built-in regex rules (plug and play)

// 100+ built-in rules covering all common cases
import { rx } from 'regex-center';

// Retrieve and validate
rx.get('email');                          // → /^[^\s@]+@[^\s@]+\.[^\s@]+$/
rx.get('phone:CN');                       // → /^1[3-9]\d{9}$/
rx.test('email', 'user@example.com');     // true
rx.test('phone:CN', '13800138000');       // true
rx.test(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'user@company.com'); // true

// Grouped rules
rx.test('password:strong', 'Password123!');      // strong password
rx.test('email:enterprise', 'user@company.com'); // enterprise email

// Text processing
const text = 'Contact: user@example.com, Phone: 13800138000';
rx.extractAll('phone:CN', text);             // extract phone numbers
rx.replaceAll('phone:CN', text, '[PHONE]');  // replace phone numbers
rx.highlight('phone:CN', text, '<mark>$&</mark>'); // highlight

Option 2: Build a team-wide regex management system (recommended)

// Replace built-in regexes with your own team standards
rx.use({
  email: /^[a-z0-9._%+-]+@company\.com$/,  // only allow company emails
  phone: {
    default: 'mobile',
    mobile: /^1[3-9]\d{9}$/,              // mobile phone
    landline: /^0\d{2,3}-?\d{7,8}$/       // landline
  },
  employeeId: {
    pattern: /^EMP\d{6}$/,
    description: 'Employee ID: EMP + 6 digits',
    examples: {
      valid: ['EMP123456', 'EMP000001'],
      invalid: ['emp123456', 'EMP12345']
    }
  }
});

// Now only your team’s regex rules are available
rx.add('employeeId', /^EMP\d{6}$/);
rx.get('email'); // /^[a-z0-9._%+-]+@company\.com$/
rx.test('email', 'user@company.com'); // true
rx.test('email', 'user@gmail.com');   // false
rx.info('employeeId');                // view rule info

🧩 Custom Scenarios

Custom Rule Injection

Need to define your company’s domain rule?

rx.inject({
  email: /^[a-z0-9._%+-]+@company.com$/,
});

rx.test('email', 'jack@company.com'); // true
rx.test('email', 'jack@gmail.com');   // false

Batch Operations

const text = 'Emails: a@b.com, c@d.com, e@f.com';

// Highlight all
rx.highlight('email', text, '<mark>$&</mark>');
// => Emails: <mark>a@b.com</mark>, <mark>c@d.com</mark>, <mark>e@f.com</mark>

// Count matches
rx.count('email', text); // 3

extractBatch, replaceBatch, and countBatch are also available for more complex tasks.

Group Syntax

// Multiple formats for the same type — a unique feature of regex-center

// Password strength
rx.test('password:weak', '123456');          // weak
rx.test('password:medium', 'Password123');   // medium
rx.test('password:strong', 'Password123!');  // strong

// Email strictness
rx.test('email:basic', 'test@gmail.com');    // loose
rx.test('email:strict', 'user@company.com'); // RFC standard
rx.test('email:enterprise', 'admin@company.com'); // enterprise

// Numeric types
rx.test('number:integer', '123');
rx.test('number:decimal', '123.45');
rx.test('number:signed', '-123');

// View available groups
rx.info('password').groups; // ['weak', 'medium', 'strong']

⚡ Security & Performance

When injecting custom regex, regex-center automatically scans for ReDoS vulnerabilities,
preventing performance issues caused by poorly written regex patterns.

Even under heavy text-matching loads, it remains safe and stable.

📚 Built-in Regex Examples

Type	Syntax	Description	Example
Email	`email` / `email:basic`	Basic email	`rx.test('email', 'user@example.com')`
	`email:strict`	RFC-standard email	`rx.test('email:strict', 'user@company.com')`
	`email:enterprise`	Enterprise email	`rx.test('email:enterprise', 'admin@company.com')`
Phone	`phone:CN`	Chinese phone	`rx.test('phone:CN', '13800138000')`
	`phone:US`	US phone	`rx.test('phone:US', '+1-555-123-4567')`
ID Card	`idCard:CN`	Chinese ID	`rx.test('idCard:CN', '110101199003077777')`
Bank Card	`bankCard:CN`	Chinese bank card	`rx.test('bankCard:CN', '6222600260001234567')`
URL	`url`	Basic URL	`rx.test('url', 'https://example.com')`
IP	`ip:v4`	IPv4	`rx.test('ip:v4', '192.168.1.1')`
	`ip:v6`	IPv6	`rx.test('ip:v6', '2001:db8::1')`
Number	`number:integer`	Integer	`rx.test('number:integer', '123')`
	`number:decimal`	Decimal	`rx.test('number:decimal', '123.45')`
Date	`date:YYYY-MM-DD`	Standard date	`rx.test('date:YYYY-MM-DD', '2024-01-01')`
Password	`password:medium`	Medium	`rx.test('password:medium', 'Password123')`
	`password:strong`	Strong	`rx.test('password:strong', 'Password123!')`

💡 Tip

email defaults to email:basic.
For more patterns (e.g. hex, UUID, domain, color), check the Regex Reference.

🔍 How It Differs from Other Libraries

Feature / Library	validator.js	regexr.com	awesome-regex	regex-center
Focus	Validation functions	Online testing	Regex collections	Regex management and automation
Usage	`isEmail(str)`	Manual testing	Manual copy	`rx.test('email', str)`
Built-in rules	80+	None	External links	100+ + extensible system
Custom rules	❌	❌	❌	✅ via `inject`
Type hints	❌	❌	❌	✅ TypeScript support
Text tools	❌	✅ Demo only	❌	✅ extract / replace / highlight
ReDoS protection	❌	❌	❌	✅ automatic
Ideal use case	Validation	Learning	Collection	Team-level regex standardization

In short:

validator.js is for simple business validation
regexr is for visualization and learning
awesome-regex is a regex index
regex-center is a “regex management platform” that unifies validation, testing, security, and extensibility

✅ Conclusion

Regular expressions shouldn’t become invisible technical debt.
regex-center turns regex from scattered snippets into a centralized, managed, and standardized system —
so you can use regex like any other utility function.

If your team struggles with regex maintenance or wants a unified regex standard,
give regex-center a try.

Front-End Drag and Drop: Looks Simple, But Full of Hidden Pitfalls

Sailing — Mon, 13 Oct 2025 10:01:09 +0000

Drag-and-drop is one of the most common interactions in front-end development:
From dragging files in Baidu Netdisk to moving objects in Figma’s canvas, it’s everywhere.

Many developers think — isn’t drag-and-drop just mousedown + mousemove + mouseup?
Three lines of code and done!

But once you implement it in a real production environment, the pitfalls start appearing one after another:

Different event models between PC and mobile
Elements “flying” outside their containers
Events lost when dragging over iframes
Conflicts between drag and scroll on mobile devices
State loss when using frameworks like Vue or React

Building a working drag-and-drop is easy.
Building a robust and smooth drag-and-drop experience is hard.

Today, let’s break down how to implement a solid drag-and-drop system — and avoid the most common pitfalls.

The Basic Principle of Drag-and-Drop

Drag-and-drop relies on three core events:

mousedown — Start dragging
mousemove — Move the element
mouseup — End dragging

Here’s the simplest implementation:

const box = document.getElementById('box');
let isDragging = false;
let offsetX = 0, offsetY = 0;

// Start dragging
box.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - box.offsetLeft;
    offsetY = e.clientY - box.offsetTop;
});

// Move the element
document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        box.style.left = (e.clientX - offsetX) + 'px';
        box.style.top = (e.clientY - offsetY) + 'px';
    }
});

// Stop dragging
document.addEventListener('mouseup', () => {
    isDragging = false;
});

👉 Live demo: CodeSandbox

In short: drag-and-drop simply means continuously updating an element’s left/top while moving the mouse.

Common Pitfalls in Real Development

Here are some of the most frequent issues developers run into:

1. Multi-Device Compatibility

Different devices have different event systems:

PC → uses mouse events (mousedown, mousemove, mouseup)
Mobile → uses touch events (touchstart, touchmove, touchend)

function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
       ('ontouchstart' in window) ||
       (navigator.maxTouchPoints > 0);
}

2. Boundary Constraints

You need to keep draggable elements within their containers to avoid them flying off-screen.

Solution:

updatePosition(newX, newY) {
  const containerRect = this.container.getBoundingClientRect();
  const elementRect = this.element.getBoundingClientRect();

  const minX = 0;
  const minY = 0;
  const maxX = containerRect.width - elementRect.width;
  const maxY = containerRect.height - elementRect.height;

  newX = Math.max(minX, Math.min(newX, maxX));
  newY = Math.max(minY, Math.min(newY, maxY));

  this.element.style.left = newX + 'px';
  this.element.style.top = newY + 'px';
}

3. iframe Compatibility Issues

When dragging across an iframe, mouse events are lost as soon as the cursor enters the iframe area.
A common workaround: temporarily disable iframe pointer events during drag.

const iframes = document.getElementsByTagName('iframe');
for (const iframe of iframes) {
  iframe.style.pointerEvents = 'none';
}

4. Framework Compatibility

In frameworks like Vue or React, component re-renders can cause drag state loss.
You can use MutationObserver to watch for DOM changes and prevent style resets.

this.observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === "style" && 
        element.style.display === "none") {
      element.style.display = "block";
    }
  });
});

this.observer.observe(element, {
  attributes: true,
  attributeFilter: ["style"],
});

5. Scroll Conflicts on Mobile

On touch devices, dragging often triggers page scrolling.

handleTouch(event) {
  event.preventDefault();
  event.stopPropagation();

  this.startDrag(event);
}

Advanced Features

Besides the basics, real-world drag-and-drop often requires:

Grid snapping – automatically align to a grid
Edge snapping – auto-stick to edges
Position persistence – remember the element’s position after refresh

These features require additional logic and careful design.

A Better Solution: drag-kit

After all these pitfalls, you can see that building a robust drag-and-drop solution isn’t trivial.
It involves event abstraction, boundary control, iframe compatibility, performance optimization, and framework integration.

That’s why it’s better to use a mature library — drag-kit.

Key Features of drag-kit

Plug and play – ready to use in minutes
Cross-platform – automatically handles PC, mobile, and tablets
Rich features – built-in boundary, grid, and snap support
Framework friendly – works with Vue 2/3 and React
Performance optimized – smooth and lag-free
TypeScript ready

Quick Start

import { createDraggable } from 'drag-kit';

// Basic usage
createDraggable('myElement');

// Advanced configuration
createDraggable('myElement', {
  mode: 'screen',                    
  initialPosition: { x: '100px', y: '200px' },
  lockAxis: 'y',                     
  gridSize: 50,                      
  snapMode: 'auto',                  
  shouldSave: true,                  
  onDragStart: (el) => console.log('Start drag', el),
  onDrag: (el) => console.log('Dragging', el),
  onDragEnd: (el) => console.log('End drag', el)
});

Installation

npm install drag-kit

Vue 3 Example

import { onMounted } from 'vue';
import { createDraggable } from 'drag-kit';

export default {
  setup() {
    onMounted(() => {
      createDraggable('draggableElement', {
        initialPosition: { x: '100px', y: '200px' }
      });
    });
  }
};

Conclusion

While drag-and-drop seems simple in theory, it becomes complex in production due to:

Multi-device event differences
Boundary handling
iframe compatibility
Framework state loss
Mobile scroll conflicts

If you’re just building a quick demo — three lines of code are enough.
But if you’re building for production, a mature library like drag-kit saves you time, avoids pitfalls, and delivers a smooth, stable, and professional drag-and-drop experience.

👉 GitHub: drag-kit

Forem: Sailing

🚀 TCP vs UDP — What You Think You Know Is Already Outdated

Don’t panic: First, where do TCP and UDP actually live?

TCP — The “Control Freak” Built for Reliability

1. Three-Way Handshake & Four-Way Termination: Building Trust

2. Sliding Window & Congestion Control — Precision Like a Brake System

3. The Trade-Offs

UDP — The “Speed Demon” with Zero Baggage

1. A Tiny 8-Byte Header

2. Connectionless ≠ Chaotic

3. Why It’s So Fast

The Modern UDP: Fast and Reliable

UDP Performance Boost: Zero-Copy & Multiplexing

TCP vs UDP: Which One Should You Choose?

Choosing the right one:

Conclusion: You’re Not Choosing a Protocol — You’re Choosing a Strategy

Exploring Dynamic Visual Effects in CSS with Transform and Animation

Transform: The Power to Change the World

2D Transform

3D Transform

Animation: Making the World Move

Keyframe Animations

Animation Properties

Combining Transform and Animation: Creating Magic

Conclusion

Stop Using resize! You Might Be Missing Out on ResizeObserver

What Problem Does ResizeObserver Solve?

Use Cases

🧭 Case 1: Chart Auto-Resize

🧩 Case 2: Responsive Layout Components

🪞 Case 3: Nested iframes & Adaptive Containers

ResizeObserver vs Other Methods

🚀 Advanced Tips (Save This!)

1. Debounce to Control Frequency

2. Observe Multiple Elements with State Management

3. Lifecycle-Safe Binding (Vue / React)

Summary

💡 “Stop Copying Regex!” — Manage, Validate, and Extract All Your Regex with regex-center

Regex Center = Regex + Management

🔧 Core Features

🚀 Quick Start

Installation

Option 1: Use built-in regex rules (plug and play)

Option 2: Build a team-wide regex management system (recommended)

🧩 Custom Scenarios

Custom Rule Injection

Batch Operations

Group Syntax

⚡ Security & Performance

📚 Built-in Regex Examples

🔍 How It Differs from Other Libraries

✅ Conclusion

Front-End Drag and Drop: Looks Simple, But Full of Hidden Pitfalls

The Basic Principle of Drag-and-Drop

Common Pitfalls in Real Development

1. Multi-Device Compatibility

2. Boundary Constraints

3. iframe Compatibility Issues

4. Framework Compatibility

5. Scroll Conflicts on Mobile

Advanced Features

A Better Solution: drag-kit

Key Features of drag-kit

Quick Start

Installation

Conclusion

What Problem Does `ResizeObserver` Solve?