This article explains the fundamentals of DOM events, compares three ways to attach listeners, shows how to add and remove handlers, details event bubbling and capturing phases, and provides practical tips and common pitfalls for robust frontend interaction design.
This article explains why caching an array's length in a JavaScript for‑loop is often unnecessary for standard arrays, but can cause serious performance issues with live DOM collections, and shows the proper way to handle both cases efficiently.
This article explains the underlying browser mechanisms that cause page jank when creating millions of DOM elements, analyzes the event loop, rendering pipeline, macro‑ and micro‑tasks, and presents practical solutions such as setTimeout, requestAnimationFrame, MessageChannel, and requestIdleCallback to keep the UI responsive.
This article demonstrates how to turn an entire web page into an editable document instantly by setting the document.designMode property to "on" via the browser console, explains how to disable it, and compares related APIs such as contentEditable and execCommand.
Chrome 133+ adds the moveBefore method, a new DOM operation that moves elements while preserving their state, offering developers a simpler alternative to removeChild/insertBefore and improving scenarios like video playback, focus retention, and animation continuity.
This article explains the Vue.js nextTick API, why scrolling to newly added list items may stop prematurely, demonstrates proper usage with scrollIntoView, and provides a hand‑written implementation using MutationObserver to ensure DOM updates complete before executing callbacks.
This article traces the evolution of front‑end development from raw DOM manipulation through jQuery to modern Vue.js, highlighting the philosophical ideas behind Vue’s design, code examples, and the benefits of component‑based, reactive frameworks for building maintainable web applications.
This tutorial explains how to use Vue 3 to render a ranking list, add a unique data-key to each user item, and implement a click handler that smoothly scrolls the selected user into view with Element.scrollIntoView while optionally highlighting the element for two seconds.
This article explores how the depth of a webpage's DOM tree influences memory usage, style calculations, and rendering performance, presenting experiments that compare shallow and deeply nested structures and offering practical tips for monitoring and optimizing DOM depth.
PHP 8.4, slated for a November 2024 release, introduces enhanced multibyte string functions, HTML5‑aware DOM extensions, stronger password hashing, property hooks, parenthesis‑free method calls, JIT configuration changes, and deprecates implicit nullable types, offering developers a more powerful and secure platform.
This article explains how to obtain and calculate various distance and size properties in the browser—such as pageY, clientY, offsetY, scrollY, getBoundingClientRect, scrollTop, offsetTop, clientTop, and height metrics—using React event handlers and plain JavaScript, with practical code examples.
PHP 8.4, scheduled for release on 2024‑11‑21, introduces HTML5‑aware DOM parsing, raises the default bcrypt cost to 12, adds a reliable large‑XML parsing option, and provides new multibyte trim functions, offering developers enhanced security and easier string handling.
This article introduces five lesser‑known but powerful JavaScript browser APIs—getBoundingClientRect, IntersectionObserver, createNodeIterator, getComputedStyle, and requestAnimationFrame—explaining their properties, typical application scenarios such as drag‑and‑drop, lazy loading, DOM traversal, style inspection, and animation timing, and providing ready‑to‑use code examples.
This article explains how to apply CSS ellipsis to truncate overflowing text, then use JavaScript—particularly the createRange API and temporary DOM measurements—to detect when truncation occurs and display a popper tooltip only on hover, comparing several practical implementation methods.
This article describes how to abstract and improve DOM exposure tracking by first using a scroll listener with getBoundingClientRect and then refactoring to a more robust IntersectionObserver implementation, including code examples, configuration details, and compatibility considerations.
This article explains how to use PHP's built-in XML extension to parse XML files into a DOM tree and to generate XML documents programmatically, providing step‑by‑step code examples for loading, traversing, creating elements, setting attributes, and saving the resulting XML files.
This article explains the four primary browser rendering approaches—DOM (HTML+CSS), SVG, Canvas, and WebGL/WebGPU—detailing their principles, advantages, limitations, and practical examples to help developers understand the underlying mechanics of web‑based visualizations.
The article walks through building a simple JavaScript HTML parser by explaining browser parsing basics, using regular expressions to detect tags, managing a stack to match opening and closing elements, creating element and text node objects, and outlining code snippets while noting omitted features like script and style handling.
This article explores several techniques—including MutationObserver, IntersectionObserver, ResizeObserver, onload listeners, and an iframe hack—to reliably detect when a rich‑text container with images exceeds a maximum height so a "show more" button can be displayed.
This article explains how to create a basic HTML parser in JavaScript by using regular expressions and a stack to convert an HTML string into a tree of nodes, complete with code examples, initialization steps, and handling of opening, closing, and self‑closing tags.
The article details WebKit’s rendering pipeline in WKWebView, describing how the network process streams HTML bytes to the rendering process, which decodes them via TextResourceDecoder, tokenizes the characters with HTMLTokenizer’s state machine, and constructs an efficient DOM tree using HTMLTreeBuilder and queued insertion tasks.
WKWebView parses HTML by streaming bytes from the network process to the rendering process, decoding them into characters, tokenizing into HTML tokens, building a DOM tree through node creation and insertion, and finally laying out and painting the document using a doubly‑linked in‑memory structure.
This comprehensive tutorial explains how selections and cursors work in web pages, covering the underlying Selection and Range APIs, handling editable and non‑editable elements, manipulating text in inputs, textareas, and rich content, and providing practical code snippets for every scenario.
This article explains JavaScript’s event flow, detailing the three phases of capturing, target, and bubbling, demonstrates how to use addEventListener with the useCapture flag, and shows practical techniques for handling, delegating, and stopping event propagation in web applications.
This guide shows how to create a simple HTML page with a button that copies paragraph text to the system clipboard using the modern Clipboard API, including full code examples and explanations for both copy and cut operations.
This article walks through the complete browser rendering pipeline—HTML parsing, CSS rule construction, layout, paint, layer creation, rasterization, and compositing—explaining each step, the underlying data structures, performance implications, and practical tips for optimizing rendering in modern web applications.
This article explores methods to prevent user-injected JavaScript from manipulating DOM objects, including using Shadow DOM and Web Workers to create secure sandboxed environments.
This article explains what skeleton screens are, reviews existing implementation methods, and presents a custom DOM‑based approach with configurable rules, code snippets, and a Puppeteer‑driven CLI tool that automatically generates and injects skeleton screens for web pages.
This article introduces JavaScript fundamentals, explains three ways to include scripts, demonstrates simple click events, shows how to use selectors, outlines event handling, and covers DOM manipulation techniques such as modifying content, styles, and classes, including retrieving computed styles.
This article explains the differences between Node and Element in the DOM, clarifies the roles of NodeList and HTMLCollection, demonstrates how to inspect child nodes with code examples, and provides practical tips for handling these objects in frontend development.
This article presents a curated collection of 24 practical ES6 code snippets that address common front‑end challenges such as DOM manipulation, event handling, network requests, timing utilities, and file system operations, providing ready‑to‑use solutions for developers.
This article explains several JavaScript techniques—including event handlers, inline script tags, body attributes, and key‑down interception—to block right‑click menus, text selection, copying, pasting, and Ctrl+C/Ctrl+V on a webpage, while noting their limitations and trade‑offs.
This guide clarifies the differences between native JavaScript and jQuery iteration functions, shows how to convert between DOM and jQuery objects, and provides concrete code examples for each looping method—including for, forEach, every, some, map, filter, for‑in, each, $.map, $.grep, $.inArray and $.filter—so developers can choose the right tool without errors.
This tutorial walks through creating a lightweight web Gomoku game using JavaScript, detailing both a plain‑DOM renderer and a Canvas renderer, their interchangeable architecture, and core features like move handling, undo/redo, win detection, and board resetting.
This article traces the history of HTML from its SGML roots through the browser wars, explains the various HTML modules and document types, and details modern HTML5 features, semantic tags, multimedia support, custom elements, and performance‑optimisation techniques such as preload, prefetch, and async scripts.
This article reveals eight lesser‑known DOM and Web API features—such as addEventListener options, smooth scrollTo, optional timer arguments, defaultChecked, normalize/wholeText, insertAdjacent methods, event.detail, and scrollHeight/scrollWidth—explaining their purpose, browser support, and providing practical code examples.
The article lists DOM properties and methods—such as element measurements, scrolling APIs, focus calls, getComputedStyle, and various window and document attributes—that cause browsers to synchronously recalculate styles and layout, explains why they are performance bottlenecks, and offers practical mitigation techniques.
This article explains how to improve web page rendering speed by reducing the number of critical resources, shortening the critical path length, and minimizing critical bytes through DOM, CSSOM, and JavaScript optimizations, including practical code examples and performance measurements.
This article explains the browser's critical rendering path, detailing how HTML, CSS, and JavaScript are transformed into pixels through DOM construction, CSSOM creation, render tree generation, layout, and painting, and discusses how JavaScript can block and delay these stages.
This article provides a comprehensive guide to parsing XML in Java, covering the official DOM and SAX methods, third‑party JDOM and DOM4J libraries, detailed code examples for each approach, and a performance and feature comparison to help developers choose the most suitable parser.
This article explores practical JavaScript and DOM optimization techniques—avoiding eval, using local variables, minimizing reflows, and leveraging efficient string handling—to dramatically improve web application performance.
This article chronicles JavaScript’s journey from its humble origins in Netscape’s browser to becoming the dominant language for client‑side interactivity, asynchronous communication, JSON data exchange, and even server‑side development with Node.js, highlighting key milestones, technical concepts, and code examples.
This article explores how to implement recursive and non‑recursive DOM tree searches, hash‑based lookups, and several classic sorting algorithms—including quick sort and merge sort—in JavaScript, discussing their time and space complexities, stability considerations, and practical performance tips for front‑end development.
This article walks you through three approaches to implement drag-and-drop in JavaScript—plain code, a native object wrapper, and a jQuery extension—covering essential concepts like transform compatibility, event handling, position calculations, and object-oriented encapsulation, with detailed code examples and visual diagrams.
This article explains how to use native JavaScript, including getComputedStyle and custom utility functions, to accurately obtain the computed background-color of any DOM element while handling special cases such as display, opacity, and visibility without relying on libraries.
This article explains how to use pure JavaScript to retrieve an element’s final computed background‑color, covering inline and external styles, handling special cases like display, opacity, and visibility, and provides a recursive implementation with code examples and improvement suggestions.
This comprehensive guide walks beginners through JavaScript basics, DOM interaction, debugging, experiments, advanced concepts, frameworks, design patterns, and resources, providing a clear roadmap to become a proficient front‑end developer.
This article presents a comprehensive guide to front‑end performance optimization, covering how to prioritize bottlenecks, use debounce/throttle, reduce DOM reflows, optimize rendering, leverage requestAnimationFrame and Web Workers, and apply efficient CSS and script loading strategies, all illustrated with practical code examples.
From typing a URL to seeing a page, browsers perform a complex series of steps—including network requests, HTML and CSS parsing, DOM and render tree construction, layout, painting, and script execution—while handling errors and optimizations across components such as the UI, engine, networking, JavaScript interpreter, and storage.
This article provides a comprehensive, English‑language reference of common JavaScript DOM APIs—including element selection, class manipulation, node operations, attribute handling, content updates, CSS styling, size calculations, event binding, DOM ready detection, context binding, whitespace trimming, Ajax requests, JSON parsing, and node traversal—complete with code examples for each feature.
This article explains what browser repaints and reflows are, which operations trigger them, and provides practical techniques—such as batching style changes, using absolute positioning, leveraging document fragments, temporarily hiding elements, and caching values—to dramatically reduce their performance cost.
This article explains the browser's rendering pipeline—how HTML and CSS are parsed into DOM and CSSOM trees, how JavaScript can block rendering, and practical techniques like inlining critical CSS and moving scripts to the page bottom to improve load performance.
Learn six practical jQuery performance strategies—including appending outside loops, caching array lengths, detaching nodes, checking for empty selections, optimizing selectors, and using stylesheet rules—to dramatically reduce DOM manipulation costs and accelerate page rendering.
This article benchmarks three JavaScript techniques for updating a div's content—direct innerHTML concatenation, building a string before assignment, and assigning a pre‑built string—showing their execution times and explaining why minimizing DOM modifications dramatically improves performance.
The article showcases a suite of flashy JavaScript tricks—alternative anonymous‑function syntaxes, the void operator for undefined, logical‑operator conditionals, optional semicolons, early ES6 features, AMD wrapping, the Function constructor, and native DOM selectors—while warning that some shortcuts hurt readability and should be used sparingly.
