Page 16 - JavaScript

Configuring Webpack, maintaining npm packages, debugging build pipelines, this often costs more time in Symfony projects than the actual frontend logic. Symfony AssetMapper makes the bundler unnecessary for most projects: import maps, automatic versioning and ES modules directly from PHP, without a Node.js build step.

requestAnimationFrame is the only correct way to implement animations in the browser. Anyone using setTimeout or setInterval is fighting the rendering cycle instead of working with it. This article shows how rAF works, how to build a robust render loop, and which traps destroy the frame rhythm.

A cookie consent banner decides directly whether tracking scripts, marketing pixels and third party embeds are allowed to load at all. With Alpine.js you build a cookie consent banner that separates categories cleanly, persists consent, only loads scripts after consent has been granted, and allows withdrawal at any time without a page reload.

Vite transpiles TypeScript at blazing speed during development via esbuild, but deliberately skips type-checking so Hot Module Replacement and dev server startup stay fast. This article shows how to bring type errors back into view with vite-plugin-checker, configure vite.config.ts cleanly, and set up a minimal Vite plus TypeScript project for admin widgets and frontend tools.

htmx brings AJAX, swap transitions and server-side rendering back into simple HTML attributes, and Tailwind CSS supplies the matching utility-first styling without a separate frontend build. This article shows how loading states, transitions between swaps and dynamically loaded fragments get styled consistently, without needing a complete JavaScript framework.

The Network Information API provides information about connection type, estimated bandwidth and an enabled data saver mode through navigator.connection, letting applications dynamically adjust image quality, prefetching and video resolution. The once parallel Battery Status API was removed from most browsers for privacy reasons, and this article gives both APIs a realistic place and shows practical alternatives.

Astro ships no JavaScript by default and renders pages as static HTML, and Tailwind CSS brings a utility system that fits exactly that architecture. Combining Tailwind CSS with Astro gives you small CSS bundles, clearly bounded interactive islands and a build that almost optimizes itself once you understand the islands architecture properly.

A service worker is not an optional feature, it is the foundation for apps that give users a complete experience even with a poor or missing connection. Thinking Offline-First means building apps that are faster, more reliable and more installable than classic web applications.

x-show and template x-if both solve conditional rendering, but with fundamentally different DOM behavior. Knowing the differences in lifecycle hooks, transitions and performance lets you make the choice deliberately instead of randomly, avoiding unnecessary re-initializations or bloated DOM.

Few concepts in JavaScript cause as much confusion as this binding. A method works perfectly when called directly and suddenly returns undefined when passed as a callback. This article shows where this binding typically breaks, how to debug it systematically and which fix actually fits which situation.