This post curates a selection of frontend development articles on accessible components, gesture‑driven design, CSS performance tricks, obscure CSS properties, SVG filters, WebAssembly video frame extraction, Notion editor architecture, low‑code/no‑code tools, and front‑end engineering low‑code systems.
This article walks through the complete process of extracting video frames on the front end using FFmpeg compiled to WebAssembly, covering background requirements, a comparison of video‑canvas and server‑side approaches, detailed Emscripten setup, FFmpeg compilation, C‑level integration, memory optimizations, and deployment with Webpack.
This article explores the evolution from Flash to HTML5 video, details the complete video playback flow and events, and dives deep into Chromium’s media request, decoding, buffering, and MP4 container handling, including FFmpeg integration and a custom WebAssembly H265 player solution.
This article details the motivations behind Webpack 5, outlines a step‑by‑step migration workflow—including preparation, dependency upgrades, common pitfalls, and new build‑time and runtime capabilities such as Asset Modules, filesystem caching, WebAssembly, Web Workers, improved long‑term caching and top‑level await—while providing performance comparisons and practical code snippets.
The Tencent IMWeb team’s 2020 analysis highlights seven key frontend trends—explosive TypeScript adoption, React’s dominance among major frameworks, the rise of WebAssembly, accelerating low‑code platforms, serverless full‑stack development, DevOps maturation, and booming WebRTC—while forecasting continued growth in these areas for 2021.
This article explains a front‑end solution for generating on‑hover video frame previews by extracting frames from HLS streams using WebAssembly‑compiled FFmpeg, covering playlist parsing, TS decryption, WASM integration, canvas rendering, caching strategies, and performance considerations.
Celebrating JavaScript’s 25th anniversary, this article traces its rapid 10‑day creation in 1995, its evolution into the world’s most popular language, the rise of TypeScript, the impact of V8, and emerging technologies like WebAssembly that extend its influence across the web.
This article examines reliable and relatively reliable methods for executing untrusted JavaScript code in Node.js, comparing new Function, the VM module, and Worker Threads, discussing their isolation levels, memory and CPU limits, performance overhead, and extending to container and WebAssembly security solutions.
From the long‑awaited React 17 release and CRA 4.0 updates to Rust’s emerging role in WebAssembly, new CSS layout functions, Node 15 features, TensorFlow.js tutorials, serverless trends, and the rise of fast JavaScript linters, this roundup surveys the latest front‑end and related technologies.
This article examines reliable and trustworthy execution of dynamic JavaScript in Node.js, compares isolation techniques such as new Function, the vm module, and worker threads, evaluates their performance and security trade‑offs, and explores advanced container and WebAssembly sandboxing options.
This article surveys the most influential web development technologies for 2020, covering emerging standards such as WebAssembly, progressive web apps, AI integration, blockchain, and leading frameworks like PHP, Symfony, Express.js, Django, and Angular, while highlighting market statistics, use cases, and future growth prospects.
The TC39 meeting covered a range of ECMAScript proposals—including Error Cause, Intl.DisplayNames, .item() for indexables, Import Assertions, Class static initialization blocks, ResizableArrayBuffer, Intl.Enumeration, Double‑Ended Iterators, integer‑math extensions, Standardized Debug, String Dedent, Intl Locale and DisplayNames v2—detailing their stage‑gate requirements, example implementations, and impact on JavaScript development.
In this interview, Red Hat’s former chief architect Christian Posta explains how Istio’s architecture has been simplified from a fragmented control plane to the unified Istiod binary, outlines upcoming features in version 1.7, discusses WebAssembly integration, and shares his view on the evolving service‑mesh market.
The article examines the challenges of creating a Python implementation for WebAssembly, questioning what core features—such as a REPL, dynamic compilation, sys.settrace, and frame inspection—are essential for a language to be recognized as Python, and how much compatibility can be sacrificed for performance.
Chrome 84 was officially released with a focus on developer‑oriented updates, introducing App Icon Shortcuts, expanded Web Animations API support, Wake Lock and Content Indexing APIs, experimental Idle Detection and WebAssembly SIMD features, as well as continued SameSite cookie policy refinements.
V8 version 8.4, slated for release with Chrome 84, introduces developer‑focused enhancements including faster WebAssembly startup via Liftoff, improved debugging, SIMD origin trial support, new JavaScript WeakRef and FinalizationRegistry APIs, and syntax for private methods and accessors using the # prefix.
Learn how to create a simple interactive cat‑themed canvas game for mobile browsers using Go compiled to WebAssembly, covering environment setup with Docker, Go code for DOM manipulation, event handling, rendering, audio, and deployment, while explaining WASM concepts and differences from Service and Web Workers.
This article explores the rapid rise of AI in the frontend ecosystem, compares native and web‑based inference solutions, evaluates frameworks such as TensorFlow JS, ONNX JS, WebNN and the new MNN.js, and shares performance data, code examples, and future directions for cross‑platform AI deployment.
This tutorial walks you through creating a simple C project in WebAssembly Studio, converting the code to WebAssembly, editing the accompanying HTML and JavaScript, and running the result in the browser, providing a hands‑on introduction to WebAssembly development.
This article presents a comprehensive front‑end performance checklist covering resource inventory, priority grouping, native JavaScript modules, tree‑shaking, code‑splitting, Web Workers, WebAssembly, pre‑compilation, differential serving, unused code removal, bundle trimming and predictive loading techniques, with practical tool recommendations.
This article explains how WebAssembly has evolved beyond browsers, describes the WASI standard and its ecosystem, compares WASM containers with traditional Docker containers, and provides step‑by‑step instructions for installing a containerd WASM shim, configuring RuntimeClass, and deploying WASM workloads in a Kubernetes cluster.
The article questions the demise of traditional cloud models, examines the shift toward browser‑centric workflows, compares Chromebook and desktop capabilities, and highlights edge computing and hybrid solutions as emerging architectures that could reshape how we use personal and enterprise computing resources.
The article explores how frontend development will evolve over the next decade, covering the rise of TypeScript, the shift toward language‑agnostic WebAssembly, bundless builds, micro‑UI architectures, AI‑driven interfaces, and the move to serverless end‑to‑end development.
This article describes how to replace the JavaScript‑based JSZip decompression in a Three.js 3D viewer with a C‑based Zip library compiled to WebAssembly via Emscripten, run inside a Web Worker, and demonstrates measurable performance gains through detailed testing.
This article explains how to replace JSZip with a C‑based WebAssembly unzip module using Emscripten, integrate it via a Web Worker, and achieve faster decompression for Three.js 3D assets, complete with performance test results and detailed code examples.
This article outlines the most influential technology trends for 2020—including AI, programming languages, frameworks, static hosting, SPAs, chatbots, PWA and WebAssembly—to help developers prioritize learning and project planning.
The article outlines Node.js's rapid growth, its 2020 release cadence, and highlights major updates such as ECMAScript module support, WebAssembly integration, diagnostic reports, expanded internationalization, and other performance and security enhancements.
This article explains why WebAssembly needs a standardized system interface, introduces the WebAssembly System Interface (WASI) for portable and secure execution, and provides a step‑by‑step tutorial for compiling a C "cat" program with wasi‑sdk and running it via Node.js.
WebAssembly, officially standardized by W3C in December 2019 as the fourth core web language, offers a secure, portable, high‑performance binary format that runs in browsers, enabling near‑native execution for tasks like audio, video, graphics, 3D, and AI, while introducing features such as threads, shared memory, and direct host object access.
WebAssembly, now an official W3C web standard, provides a binary, memory‑safe sandbox for compiling languages like C/C++/Rust to run at near‑native speed in browsers and other environments, dramatically improving web performance and expanding the possibilities of web applications.
This article demonstrates how to leverage WebAssembly and Emscripten to compile C code for high‑performance MD5 hashing and archive (zip/7z) parsing in the browser, covering library selection, memory management, file I/O via WorkerFS, async processing, and integration of C functions with JavaScript.
Tencent’s 2020 frontend forecast builds on 2019’s TypeScript‑driven framework maturity, booming mini‑programs, and cross‑platform shifts toward Flutter and SwiftUI, while predicting cloud‑based serverless architectures, 5G‑enabled SSR and WebAssembly, and continued performance‑focused innovations across mini‑programs and cross‑platform development.
WebAssembly enables high‑performance, ahead‑of‑time compiled code to run in browsers, and iQIYI leverages it by writing a C‑based FLV‑to‑MP4 transcoder compiled to Wasm, executed in a Web Worker, which boosts live‑stream conversion speed, reduces CPU usage, and opens doors for further web‑based media processing.
This article examines the WABT project's wasm2c memory bug caused by improper use of realloc, explains two classic realloc pitfalls—failure detection and zero‑size allocation—provides safe coding patterns, and describes the submitted fix that has been merged into the main branch.
In 2019 front‑end development, React, Vue and Angular stabilized and converged toward Web Components, while zero‑configuration stacks like Umi simplified tooling, PWAs matured, mini‑programs surged, TypeScript adoption accelerated, WebAssembly gained traction, and browsers evolved into universal runtime platforms across devices.
This article details the research, design, and implementation of a high‑efficiency H.265 live‑streaming player on the web using WebAssembly‑compiled FFmpeg, custom I/O, Web Workers, and WebGL rendering to achieve low‑latency, high‑quality playback in modern browsers.
This article explains how to implement high‑efficiency H.265 live‑stream decoding on the web by compiling FFmpeg to WebAssembly, using Web Workers, custom FFmpeg I/O, and WebGL rendering to achieve smooth playback with reasonable CPU and memory usage.
Lucet, an open‑source WebAssembly compiler and runtime from Fastly, enables fast, low‑overhead execution of WebAssembly modules at the edge by instantiating thousands of instances per second with minimal memory, supporting languages like Rust, C, and offering WASI integration for secure, portable workloads.
This article explores how WebAssembly, compiled via Emscripten from C/C++ code, can accelerate file‑scanning tasks in a web‑based email attachment uploader, detailing the compilation pipeline, runtime communication, performance benchmarks against pure JavaScript, and practical optimizations for worker‑based processing.
The Binary AST proposal introduces a three‑layer binary encoding for JavaScript abstract syntax trees, aiming to reduce parsing time by up to 90 % and improve web application startup performance, with early prototypes showing promising results and growing community interest.
This article explains how to compile C/C++ code to WebAssembly with pthread support, run multithreaded WebAssembly modules in Chrome using Origin Trials, and provides step‑by‑step instructions, example code, and configuration details for developers.
V8 7.0, released on October 15, introduces memory‑saving Embedded built‑ins across platforms, preview support for WebAssembly threads via chrome://flags, new JavaScript features such as Symbol.prototype.description and a stable Array.prototype.sort using TimSort, plus API changes accessible through git logs and checkout commands.
This article explains how Mozilla optimized the Firefox engine to dramatically speed up function calls between JavaScript and WebAssembly by reducing bookkeeping, eliminating trampolines, merging activations, applying monomorphic call optimizations, and improving built‑in function handling, resulting in call performance that now exceeds native JavaScript‑to‑JavaScript calls.
The article examines WebAssembly as an emerging web development paradigm that offers a compiled, language‑agnostic alternative to JavaScript, discusses its integration with .NET via Mono and Blazor, compares tooling like NuGet to npm/WebPack, and highlights both the benefits and the continued need for JavaScript in modern web applications.
This article chronicles the ten‑year history of Google’s V8 JavaScript engine—from its secretive beginnings and open‑source launch to major performance improvements, benchmark trends, security challenges, and its expanding role in browsers, Node.js, and WebAssembly—highlighting key milestones and future directions.
This article examines WebAssembly’s core features—loading speed, execution performance, memory model, garbage collection, API access, multithreading, and portability—comparing them to JavaScript, and discusses suitable use cases such as high‑CPU tasks, gaming, and image processing, while noting current limitations and future prospects.
This weekly newsletter curates nine insightful articles covering Google’s Guess.js toolkit, I/O 2018 web highlights, front‑end AR techniques, Chrome’s autoplay restrictions, a deep dive into Redux, WebAssembly versus JavaScript performance, comprehensive CSS line‑break methods, ten common software architecture patterns, and guidance on front‑end engineer career advancement.
This article explains WebAssembly's architecture and compares its load time, execution speed, memory model, garbage collection, platform API access, debugging, multithreading, and portability with JavaScript, highlighting why Wasm is reshaping modern web development.
The Suning Front‑End Technology Forum in May 2018 gathered over 500 engineers to share insights on Node.js performance tuning, React 16's new features, WebRTC for online education, WebAssembly‑based optimization, and dashboard data‑visualization techniques, offering a comprehensive snapshot of modern front‑end advancements.
This newsletter highlights design principles for massive JavaScript applications, secure sandboxing techniques for Node.js, the latest Node.js 10 and V8 6.6 features, WebAssembly debugging, and the CRNWEB framework enabling a single codebase across React‑Native, web, and PWA platforms.
The article summarizes four technical sessions covering cloud‑based AI applications, progressive web apps with service‑worker and manifest details, WebAssembly performance advantages for native‑like web development, and the practical use of QUIC to reduce latency in network communication.
This article introduces WebAssembly, explains its performance advantages over JavaScript, details the setup of development tools like Emscripten, CMake, and WABT on macOS, and provides step‑by‑step examples for compiling C/C++ code to .wasm, loading modules in JavaScript, and using advanced features.
This article explores WebAssembly’s origins, technical architecture, current browser support, limitations such as lack of OOP, garbage collection, and multithreading, and discusses its security concerns and roadmap, ultimately questioning whether it will ever supplant JavaScript in the web ecosystem.
This article explains the evolution of JavaScript performance, introduces WebAssembly concepts and browser support, provides step‑by‑step installation of Emscripten, WABT, and related tools on macOS, demonstrates WebAssembly APIs such as validate, Module, compile, Instance, Memory and Table, and shows practical examples of compiling and invoking C/C++ and Rust code from JavaScript.
This article explains the evolution from asm.js to WebAssembly, compares their performance, outlines implementation strategies—including AssemblyScript, hand‑written asm.js, and C/C++ compilation with Emscripten—and provides practical code examples and tips for integrating WebAssembly into web applications.
This article explains the fundamentals of memory management, illustrating why ArrayBuffer and SharedArrayBuffer were added to JavaScript, how automatic garbage collection works, and what manual memory handling with functions like malloc and free entails, especially when using WebAssembly and C.
WebAssembly enables programs written in languages like C/C++ to run in browsers, and Mozilla’s WebAssembly Explorer provides a visual UI that reveals compiler optimizations—such as choosing between division and shift operations—while developers can also use Emscripten for production‑grade compilation.
This guide introduces WebAssembly and its ecosystem—explaining how Emscripten compiles C/C++ to asm.js or .wasm, how Binaryen converts asm.js to the final binary, and provides step‑by‑step Ubuntu installation, simple hello‑world compilation, build‑process wrappers, and real‑world examples such as FFmpeg, SQLite, and game engines.
Guido van Rossum discusses Python’s roadmap, noting challenges and progress in mobile deployment, the potential of WebAssembly, ongoing performance improvements, reasons for its popularity, and his vision for a self‑sustaining community that can carry the language forward without his direct involvement.
With the release of V8 5.1, Google adds preliminary WebAssembly support to Chrome 51, reviving hopes for near‑native web performance, while also boosting ES6 compatibility to 97%, and the article points readers to essential ES6 learning resources for modern front‑end development.
WebAssembly, now standardized by the four major browsers, lets developers write web apps in multiple languages with near‑native performance, overcoming JavaScript’s speed limits, and offers a compact binary format, sandboxed security, and a readable text format for debugging and learning.
