<?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>DEV Community: Homayoun Mohammadi</title>
    <description>The latest articles on DEV Community by Homayoun Mohammadi (@homayounmmdy).</description>
    <link>https://dev.to/homayounmmdy</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1471880%2F4515bc7f-f526-4a52-bd17-0a7d96df127e.jpg</url>
      <title>DEV Community: Homayoun Mohammadi</title>
      <link>https://dev.to/homayounmmdy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/homayounmmdy"/>
    <language>en</language>
    <item>
      <title>WinRAR’s 40-Day “Trial” That Never Ends: The Genius of Eugene Roshal</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Tue, 09 Jun 2026 17:16:58 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/winrars-40-day-trial-that-never-ends-the-genius-of-eugene-roshal-5d7h</link>
      <guid>https://dev.to/homayounmmdy/winrars-40-day-trial-that-never-ends-the-genius-of-eugene-roshal-5d7h</guid>
      <description>&lt;p&gt;&lt;em&gt;This is Eugene Roshal, the software engineer behind WinRAR.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The creator of one of the most famous "free trials" in software history.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Back in 1995, Roshal launched WinRAR with a simple &lt;strong&gt;40-day trial&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Pretty normal, right?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Except there was one unusual detail.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;When the trial expired...&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The software didn't stop working.&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No lockouts.&lt;/li&gt;
&lt;li&gt;No disabled features.&lt;/li&gt;
&lt;li&gt;No forced subscription.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Just a small message&lt;/strong&gt; politely asking users to buy a license.&lt;/p&gt;

&lt;p&gt;And &lt;em&gt;millions&lt;/em&gt; of people clicked &lt;strong&gt;"Close."&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Year after year.&lt;/p&gt;

&lt;p&gt;As a result, WinRAR spread to computers all over the world.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Students used it.&lt;/li&gt;
&lt;li&gt;Developers used it.&lt;/li&gt;
&lt;li&gt;Office workers used it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Many people have seen the WinRAR trial reminder &lt;em&gt;hundreds&lt;/em&gt; if not &lt;strong&gt;thousands&lt;/strong&gt; of times.&lt;/p&gt;

&lt;p&gt;What makes the story even more interesting is that this wasn't some clever viral growth hack.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;It was simply the shareware model of the time.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The software trusted users&lt;/strong&gt; to pay if they found it valuable.&lt;/p&gt;

&lt;p&gt;And many businesses, organizations, and professional users &lt;em&gt;did.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;That revenue was enough to keep the project alive for &lt;strong&gt;decades.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Meanwhile, WinRAR became one of the most recognizable applications in computing history.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Even today,&lt;/em&gt; millions of people still use it to compress, extract, and manage files.&lt;/p&gt;

&lt;p&gt;In an industry obsessed with subscriptions, paywalls, and aggressive upselling, WinRAR became famous for doing something surprisingly simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;It asked.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;And trusted users to decide.&lt;/em&gt;&lt;/p&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%2Fsu1dtyn1ogbi5a65kx3q.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%2Fsu1dtyn1ogbi5a65kx3q.jpg" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>developers</category>
      <category>marketing</category>
      <category>product</category>
      <category>software</category>
    </item>
    <item>
      <title>Scary ChatGPT Bug: AI Generates Nightmarish Images from a Simple Prompt Trick</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Mon, 08 Jun 2026 20:10:03 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/scary-chatgpt-bug-ai-generates-nightmarish-images-from-a-simple-prompt-trick-18ei</link>
      <guid>https://dev.to/homayounmmdy/scary-chatgpt-bug-ai-generates-nightmarish-images-from-a-simple-prompt-trick-18ei</guid>
      <description>&lt;p&gt;&lt;strong&gt;A newly discovered glitch in ChatGPT is sending shivers down users' spines. By using a simple prompt to retrieve a non-existent image, the AI falls into a hallucination loop, generating deeply unsettling and nightmarish visuals.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Users have recently uncovered a bizarre and terrifying bug in OpenAI’s ChatGPT. When fed a basic prompt asking to retrieve an imaginary photo that was never uploaded, the AI bypasses its safety guardrails and generates horrifying, surreal images—ranging from a naked man with a fish head to armed Teletubbies. &lt;/p&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%2Fnipuxddjkaxify3m8yc2.webp" 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%2Fnipuxddjkaxify3m8yc2.webp" alt="naked man with a fish head to armed Teletubbies." width="799" height="527"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The glitch has rapidly gone viral across social media platforms, leaving users shocked by the dark side of AI hallucinations.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the New ChatGPT Image Bug?
&lt;/h2&gt;

&lt;p&gt;According to a report by &lt;em&gt;Digital Trends&lt;/em&gt;, the bug exploits a loophole in how ChatGPT handles image retrieval requests. Users are sending a specific text prompt demanding the AI to "retrieve the attached image" and process it without asking any questions. &lt;/p&gt;

&lt;p&gt;The catch? &lt;strong&gt;There is no attached image.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;Instead of recognizing the missing file and returning a standard error message, the AI begins to hallucinate. It attempts to fulfill the prompt by generating completely random, deeply disturbing visuals. While the AI might initially resist the prompt, users have found that simply tweaking a few words allows them to bypass the system's resistance, forcing it to generate the eerie content.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Creepiest AI Hallucinations Reported
&lt;/h2&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%2F044ezspt4rjd938igpqf.webp" 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%2F044ezspt4rjd938igpqf.webp" alt=" " width="800" height="570"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Because the AI is essentially guessing what a "non-existent" image might be, the outputs are entirely random. However, they almost universally share a theme of emptiness, dread, and surreal horror. &lt;/p&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%2Fdcatp2mq52j770gjk3eg.webp" 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%2Fdcatp2mq52j770gjk3eg.webp" alt=" " width="799" height="295"&gt;&lt;/a&gt;&lt;br&gt;
Users on X (formerly Twitter) have shared some of the most unsettling outputs generated by the bug, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  A naked man with a fish head sitting in a bathtub.&lt;/li&gt;
&lt;li&gt;  A giant rat feeding a human baby.&lt;/li&gt;
&lt;li&gt;  Familiar cartoon characters placed in deeply horrifying and violent situations.&lt;/li&gt;
&lt;li&gt;  Armed and hostage-taking Teletubbies.&lt;/li&gt;
&lt;/ul&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%2Fmvczungofgphj1vcgjs6.webp" 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%2Fmvczungofgphj1vcgjs6.webp" alt=" " width="773" height="562"&gt;&lt;/a&gt;&lt;br&gt;
Every time the prompt is run, the AI generates a completely new, unpredictable image, making the results feel like a digital game of Russian roulette with nightmare fuel.&lt;/p&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%2Fdn8k0dgz5meh4130bkit.webp" 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%2Fdn8k0dgz5meh4130bkit.webp" alt=" " width="799" height="599"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Echoes of Google’s 2024 Pixel Studio Glitch
&lt;/h2&gt;

&lt;p&gt;This unsettling phenomenon strongly echoes a major controversy from 2024 involving Google’s Pixel Studio app. During that incident, Google’s AI image generator was caught producing highly inappropriate and violent images of beloved, family-friendly characters like Mickey Mouse and SpongeBob SquarePants. &lt;/p&gt;

&lt;p&gt;Both incidents highlight a persistent challenge in generative AI: when models are pushed into edge cases or confused by conflicting prompts, their "hallucinations" can quickly veer into disturbing territory.&lt;/p&gt;

&lt;h2&gt;
  
  
  Has OpenAI Responded?
&lt;/h2&gt;

&lt;p&gt;As of now, there is no clear technical explanation for why this specific prompt triggers such dark and surreal hallucinations. It remains unknown whether the AI is pulling from specific dark corners of its training data or if the lack of visual context simply causes its image-generation weights to degrade into chaotic noise.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;OpenAI has not yet released an official statement or acknowledged the bug.&lt;/strong&gt; Until a patch is deployed, users are advised to avoid experimenting with the prompt, as the resulting images are highly unsettling.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>news</category>
    </item>
    <item>
      <title>Anthropic Calls for Global Pause on AI Development: Are We Losing Control?</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Sat, 06 Jun 2026 18:57:43 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/anthropic-calls-for-global-pause-on-ai-development-are-we-losing-control-2jk6</link>
      <guid>https://dev.to/homayounmmdy/anthropic-calls-for-global-pause-on-ai-development-are-we-losing-control-2jk6</guid>
      <description>&lt;p&gt;Anthropic, the AI safety company behind the popular Claude family of models, has issued a stark warning to the tech world: &lt;strong&gt;it is time to temporarily halt the development of the world’s most powerful AI systems.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;According to a newly released report, the rapid pace of AI advancement is producing models that show early indicators of slipping out of human control. Anthropic argues that slowing down the development of frontier AI is not just a safety precaution, but a global necessity to allow societal structures and AI alignment research to catch up.&lt;/p&gt;

&lt;p&gt;However, the company acknowledges a massive "prisoner’s dilemma" in the tech industry. If only one company pauses, its competitors will quickly overtake it. Therefore, Anthropic is calling for a synchronized, globally verifiable pause involving major AI players, particularly in the United States and China.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Proposal: A Coordinated Global Pause
&lt;/h2&gt;

&lt;p&gt;In its report, Anthropic explicitly states: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"We believe it would be good for the world to have the option to slow down or temporarily pause the development of frontier AI, so that social structures and alignment research can adapt to the advancement of this technology."&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&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%2F276nhtiysof4fz6o2f8i.webp" 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%2F276nhtiysof4fz6o2f8i.webp" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For this pause to be effective, it cannot be a solo endeavor. Anthropic emphasizes that without a global coordination mechanism, companies and governments will be forced to make incredibly difficult security decisions amidst intense geopolitical and market pressures. &lt;/p&gt;

&lt;h2&gt;
  
  
  The "Nuclear Arms Control" Dilemma for AI
&lt;/h2&gt;

&lt;p&gt;Anthropic draws a strong parallel between the regulation of advanced AI and historical nuclear arms control treaties. However, the company notes that managing AI will be significantly more difficult. &lt;/p&gt;

&lt;p&gt;While it is relatively easy to spot the physical infrastructure required to build a nuclear missile via satellite imagery, &lt;strong&gt;hiding the training process of an AI model is incredibly easy.&lt;/strong&gt; The temptation for a company or nation to secretly continue developing frontier AI in the shadows will be immense. To combat this, Anthropic plans to convene government officials, scientists, advocacy groups, and rival AI companies in the coming months to design a verifiable framework for an AI pause.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Looming Threat of "Recursive Self-Improvement"
&lt;/h2&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%2Fkk0uzxmuy39mhsok92vg.webp" 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%2Fkk0uzxmuy39mhsok92vg.webp" alt=" " width="800" height="464"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One of the most chilling sections of the report focuses on a concept known in computer science as &lt;strong&gt;Recursive Self-Improvement&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;This refers to a scenario where an AI system can fundamentally train itself to become exponentially smarter, entirely without human assistance. While Anthropic notes that we have not yet reached this exact milestone, the company warns that it could arrive much sooner than most governments are prepared for. Current evidence suggests that human involvement in the AI development process is shrinking at an alarming rate.&lt;/p&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%2Fjt0olvsvq1m7keuydper.webp" 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%2Fjt0olvsvq1m7keuydper.webp" alt=" " width="800" height="464"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Alarming Internal Data: AI is Rapidly Surpassing Humans
&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%2Fg9we6n4g4le13cife3c2.webp" 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%2Fg9we6n4g4le13cife3c2.webp" alt=" " width="800" height="350"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To illustrate how quickly the landscape is shifting, Anthropic shared staggering internal data regarding its own models:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Coding Output:&lt;/strong&gt; With the help of Claude, Anthropic’s engineers are now shipping &lt;strong&gt;8 times more code&lt;/strong&gt; compared to the 2021–2025 period.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Complex Problem Solving:&lt;/strong&gt; Claude’s success rate in solving open-ended, complex coding problems has reached &lt;strong&gt;76%&lt;/strong&gt;, with code quality now rivaling that of human developers.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Mythos Preview Capabilities:&lt;/strong&gt; The new &lt;em&gt;Mythos Preview&lt;/em&gt; model has accelerated the optimization of AI training code by a massive &lt;strong&gt;52x&lt;/strong&gt; (compared to a mere 3x improvement in 2024 models). &lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Research Superiority:&lt;/strong&gt; In internal tests, Mythos Preview outperformed human researchers in research decision-making &lt;strong&gt;64% of the time.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Anthropic concedes that if AI systems can successfully design their successor models, it could trigger unprecedented, positive revolutions in medicine, technology, and the economy. However, this exact capability drastically amplifies security risks and the danger of losing control.&lt;/p&gt;

&lt;h2&gt;
  
  
  Geopolitical Hurdles: The US, China, and the White House
&lt;/h2&gt;

&lt;p&gt;Despite the clear safety warnings, Anthropic’s proposal faces fierce pushback from Silicon Valley executives and US government officials. Critics argue that Anthropic is fear-mongering, focusing on worst-case doomsday scenarios to artificially slow down competitors under the guise of "AI safety."&lt;/p&gt;

&lt;p&gt;Furthermore, the geopolitical reality makes a global pause incredibly difficult. US officials have repeatedly argued that any slowdown in AI development risks handing a strategic technological supremacy to China. &lt;/p&gt;

&lt;p&gt;However, there are glimmers of diplomatic progress. US President Donald Trump recently announced that during a trip to Beijing, he held discussions with Chinese leaders regarding potential cooperation on AI safety and security. Furthermore, Trump signed an executive order this week mandating a &lt;strong&gt;30-day government evaluation period&lt;/strong&gt; before the most powerful American AI models are allowed to be released to the public.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Road Ahead
&lt;/h2&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%2Fgyfdlzoxps3poi5atnte.webp" 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%2Fgyfdlzoxps3poi5atnte.webp" alt=" " width="800" height="350"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Anthropic’s call for a pause is a watershed moment in the AI safety debate. It shifts the conversation from theoretical philosophy to urgent, actionable policy. As AI models like Claude and Mythos Preview continue to break records in coding and research, the window for humanity to establish robust, verifiable guardrails is rapidly closing. &lt;/p&gt;

&lt;p&gt;Whether the world’s leading tech giants and superpowers can agree to hit the brakes remains the most critical question of the decade.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>machinelearning</category>
      <category>news</category>
    </item>
    <item>
      <title>The Lonely Programmer Who Built an Entire Operating System: Terry Davis</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Thu, 04 Jun 2026 13:20:28 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/the-lonely-programmer-who-built-an-entire-operating-system-terry-davis-30l4</link>
      <guid>https://dev.to/homayounmmdy/the-lonely-programmer-who-built-an-entire-operating-system-terry-davis-30l4</guid>
      <description>&lt;p&gt;This is &lt;strong&gt;Terry A. Davis&lt;/strong&gt;  the singular mind behind &lt;strong&gt;TempleOS&lt;/strong&gt; and &lt;strong&gt;HolyC&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;A developer who didn’t just want to build software…&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;He wanted to understand the computer at its absolute core.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;While most programmers build apps, websites, or tools, Terry spent nearly a decade building something almost unimaginable for one person:&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;a complete 64-bit operating system&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;a custom JIT compiler&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;an entirely new programming language&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;all from scratch.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Alone.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;At first, many people mocked the project.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The retro 16-color graphics.&lt;/li&gt;
&lt;li&gt;The lack of internet connectivity.&lt;/li&gt;
&lt;li&gt;The unconventional design.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To outsiders, it looked strange and outdated.&lt;/p&gt;

&lt;p&gt;But underneath was one of the most astonishing feats of solo engineering in programming history.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TempleOS included:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a 3D graphics engine&lt;/li&gt;
&lt;li&gt;a playable flight simulator&lt;/li&gt;
&lt;li&gt;a word processor&lt;/li&gt;
&lt;li&gt;a full development environment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;all written by one man, with zero external dependencies.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Then came the darkest chapters.
&lt;/h3&gt;

&lt;p&gt;Terry battled &lt;strong&gt;severe schizophrenia&lt;/strong&gt;, &lt;strong&gt;homelessness&lt;/strong&gt;, &lt;strong&gt;public breakdowns&lt;/strong&gt;, and &lt;strong&gt;relentless online harassment&lt;/strong&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;For many people, the noise of his illness became louder than the brilliance of his work.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;But he never stopped building.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Even during his hardest moments, he continued refining his operating system, driven by a deeply personal and uncompromising vision.&lt;/p&gt;

&lt;p&gt;After his tragic death in 2018, the conversation began to change.&lt;/p&gt;

&lt;p&gt;Developers started looking past the internet memes and recognizing the raw genius behind what he created.&lt;/p&gt;

&lt;p&gt;Today, &lt;strong&gt;TempleOS&lt;/strong&gt; is studied and respected worldwide as one of the most extraordinary solo software projects ever built.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Terry Davis’s story is more than programming.&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;It’s about obsession.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Vision.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dedication.&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;And continuing to build even when nobody understands what you’re creating.&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Sometimes the people who change computing the most are the ones building quietly, completely alone.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&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%2Fvkz6br1zeudxafzmc80l.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%2Fvkz6br1zeudxafzmc80l.jpg" alt="Terry Davis" width="290" height="290"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>developer</category>
      <category>programming</category>
      <category>softwareengineering</category>
      <category>systems</category>
    </item>
    <item>
      <title>New Features Added to the Web Platform in May 2026</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Tue, 02 Jun 2026 19:31:22 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/new-features-added-to-the-web-platform-in-may-2026-5b7a</link>
      <guid>https://dev.to/homayounmmdy/new-features-added-to-the-web-platform-in-may-2026-5b7a</guid>
      <description>&lt;p&gt;The web platform keeps evolving every month, and May 2026 introduced several surprisingly useful improvements across modern browsers.&lt;/p&gt;

&lt;p&gt;New releases from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Chrome 148&lt;/li&gt;
&lt;li&gt;Firefox 151&lt;/li&gt;
&lt;li&gt;Safari 26.5&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;brought better CSS capabilities, improved performance APIs, and new browser features that can make web apps feel more modern and efficient.&lt;/p&gt;

&lt;p&gt;Here are some of the most interesting updates developers should know about.&lt;/p&gt;

&lt;h1&gt;
  
  
  1. The &lt;code&gt;:open&lt;/code&gt; CSS pseudo-class is finally fully supported
&lt;/h1&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%2F57ymfdl8a20g44fgslkk.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%2F57ymfdl8a20g44fgslkk.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One of the most practical CSS improvements this month is the &lt;code&gt;:open&lt;/code&gt; pseudo-class becoming Baseline supported across major browsers.&lt;/p&gt;

&lt;p&gt;This lets developers style elements based on whether they are open or closed.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;dialog&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;date pickers&lt;/li&gt;
&lt;li&gt;color pickers&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;select&amp;gt;&lt;/code&gt; dropdowns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Before this, developers often used attributes like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;details&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;open&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we can simply use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nd"&gt;:open&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;which is cleaner, easier to read, and more semantic.&lt;/p&gt;

&lt;p&gt;This may look like a small change, but it improves maintainability in larger UI systems.&lt;/p&gt;

&lt;h1&gt;
  
  
  2. Container queries just became much easier to use
&lt;/h1&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%2Fnoze1v4255bhkhhofux1.webp" 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%2Fnoze1v4255bhkhhofux1.webp" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Container queries continue getting better.&lt;/p&gt;

&lt;p&gt;Previously, developers had to define both:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a container name&lt;/li&gt;
&lt;li&gt;and a container type&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;just to query a container.&lt;/p&gt;

&lt;p&gt;Now browsers support &lt;strong&gt;name-only container queries&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 css"&gt;&lt;code&gt;&lt;span class="nf"&gt;#container&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;container-name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;--sidebar&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;@container&lt;/span&gt; &lt;span class="n"&gt;--sidebar&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nc"&gt;.content&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;2rem&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 removes extra setup and makes responsive component-based design much simpler.&lt;/p&gt;

&lt;p&gt;For frontend developers working with design systems, this is a very welcome improvement.&lt;/p&gt;

&lt;h1&gt;
  
  
  3. CSS style queries are now supported everywhere
&lt;/h1&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%2Ftam3nhzbviwpx8m3t2zw.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%2Ftam3nhzbviwpx8m3t2zw.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Firefox 151 added support for style queries using custom properties.&lt;/p&gt;

&lt;p&gt;This means developers can now apply styles depending on CSS variables defined on parent containers.&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 css"&gt;&lt;code&gt;&lt;span class="k"&gt;@container&lt;/span&gt; &lt;span class="n"&gt;style&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;--theme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nc"&gt;.card&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#1a1a1a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;white&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 opens the door for much smarter theming systems and reusable UI components.&lt;/p&gt;

&lt;p&gt;Instead of relying heavily on JavaScript, many dynamic styling behaviors can now be handled directly in CSS.&lt;/p&gt;

&lt;h1&gt;
  
  
  4. Native lazy loading for video and audio
&lt;/h1&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%2F4040d9zi7d1dooe29b4u.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%2F4040d9zi7d1dooe29b4u.jpg" alt=" " width="800" height="536"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Chrome 148 introduced lazy loading support for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;loading="lazy"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This works similarly to lazy loading images.&lt;/p&gt;

&lt;p&gt;Media files will only load when they are close to entering the viewport.&lt;/p&gt;

&lt;p&gt;Benefits:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;faster page loads&lt;/li&gt;
&lt;li&gt;reduced bandwidth usage&lt;/li&gt;
&lt;li&gt;better performance on mobile devices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For content-heavy websites, this can make a noticeable difference.&lt;/p&gt;

&lt;h1&gt;
  
  
  5. Firefox now supports the Document Picture-in-Picture API
&lt;/h1&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%2Fnc4lxh01jof3b2nc2pjb.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%2Fnc4lxh01jof3b2nc2pjb.png" alt=" " width="800" height="499"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is one of the most interesting additions this month.&lt;/p&gt;

&lt;p&gt;Unlike traditional Picture-in-Picture that only works for videos, the Document Picture-in-Picture API allows developers to open an always-on-top floating window containing custom HTML content.&lt;/p&gt;

&lt;p&gt;Possible use cases:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;floating music players&lt;/li&gt;
&lt;li&gt;meeting controls&lt;/li&gt;
&lt;li&gt;timers&lt;/li&gt;
&lt;li&gt;stock trackers&lt;/li&gt;
&lt;li&gt;productivity widgets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This creates opportunities for much richer multitasking experiences on the web.&lt;/p&gt;

&lt;h1&gt;
  
  
  6. The Web Serial API is expanding
&lt;/h1&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%2F3bdep4e7iutzs50kg3sk.webp" 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%2F3bdep4e7iutzs50kg3sk.webp" alt=" " width="800" height="603"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Firefox 151 added support for the Web Serial API on desktop, while Chrome 148 added Android support.&lt;/p&gt;

&lt;p&gt;This API allows websites to communicate with hardware devices like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;microcontrollers&lt;/li&gt;
&lt;li&gt;Arduino boards&lt;/li&gt;
&lt;li&gt;3D printers&lt;/li&gt;
&lt;li&gt;embedded systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The web platform continues moving beyond traditional websites and becoming more capable as an application platform.&lt;/p&gt;

&lt;h1&gt;
  
  
  Beta Features Worth Watching
&lt;/h1&gt;

&lt;p&gt;Some exciting features also appeared in beta browser releases.&lt;/p&gt;

&lt;h2&gt;
  
  
  Chrome 149 Beta
&lt;/h2&gt;

&lt;p&gt;Includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CSS gap decorations&lt;/li&gt;
&lt;li&gt;improved &lt;code&gt;shape-outside&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Promise-based smooth scrolling APIs&lt;/li&gt;
&lt;li&gt;better BFCache support for WebSockets&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Firefox 152 Beta
&lt;/h2&gt;

&lt;p&gt;Includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;full support for &lt;code&gt;field-sizing&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;improved Notifications API&lt;/li&gt;
&lt;li&gt;better animation APIs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These features are not fully stable yet, but they show where modern frontend development is heading.&lt;/p&gt;

&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;What makes these updates interesting is not just the number of new features.&lt;/p&gt;

&lt;p&gt;It’s how much the web platform is improving developer experience.&lt;/p&gt;

&lt;p&gt;Many things that previously required:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JavaScript workarounds&lt;/li&gt;
&lt;li&gt;heavy frameworks&lt;/li&gt;
&lt;li&gt;custom hacks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;can now be done directly with modern CSS and native browser APIs.&lt;/p&gt;

&lt;p&gt;The web keeps becoming more powerful, more performant, and more capable every month.&lt;/p&gt;

</description>
      <category>news</category>
      <category>webdev</category>
      <category>web</category>
      <category>frontend</category>
    </item>
    <item>
      <title>I Built rtl-text-tools ( A Complete RTL Text Processing Toolkit for JavaScript )</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Mon, 01 Jun 2026 18:40:06 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/i-built-rtl-text-tools-a-complete-rtl-text-processing-toolkit-for-javascript--4ed4</link>
      <guid>https://dev.to/homayounmmdy/i-built-rtl-text-tools-a-complete-rtl-text-processing-toolkit-for-javascript--4ed4</guid>
      <description>&lt;p&gt;If you’ve ever worked with Arabic, Persian, Hebrew, Urdu, or any RTL (Right-to-Left) language on the web, you probably know the pain.&lt;/p&gt;

&lt;p&gt;Mixed RTL/LTR text rendering breaks unexpectedly. Punctuation looks wrong. Numbers don’t match the locale. Ellipsis appears on the wrong side. URLs inside Arabic text become unreadable. And emails or plain-text environments completely destroy formatting.&lt;/p&gt;

&lt;p&gt;After dealing with this problem repeatedly, I decided to build:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;rtl-text-tools&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A lightweight RTL text processing toolkit for JavaScript and TypeScript.&lt;/p&gt;

&lt;p&gt;It handles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;RTL detection&lt;/li&gt;
&lt;li&gt;Direction normalization&lt;/li&gt;
&lt;li&gt;Arabic/Persian digit conversion&lt;/li&gt;
&lt;li&gt;RTL punctuation conversion&lt;/li&gt;
&lt;li&gt;Ellipsis fixing&lt;/li&gt;
&lt;li&gt;Unicode bidi wrapping&lt;/li&gt;
&lt;li&gt;CSS helpers&lt;/li&gt;
&lt;li&gt;DOM helpers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And it works all the way back to IE11 with zero runtime dependencies.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why This Exists
&lt;/h2&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%2Fsth6z1lucvp0g7pqjdxy.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%2Fsth6z1lucvp0g7pqjdxy.jpg" alt=" " width="800" height="342"&gt;&lt;/a&gt;&lt;br&gt;
Most internationalization libraries focus on translations and formatting APIs.&lt;/p&gt;

&lt;p&gt;But very few actually solve the rendering problems of RTL text itself.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"مرحبا, رقم 123..."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Visually, this often renders awkwardly in mixed-direction environments.&lt;/p&gt;

&lt;p&gt;You usually want:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"...مرحبا، رقم ۱۲۳"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;move ellipsis to the correct visual side&lt;/li&gt;
&lt;li&gt;convert punctuation&lt;/li&gt;
&lt;li&gt;convert digits&lt;/li&gt;
&lt;li&gt;preserve RTL readability&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s exactly what rtl-text-tools does.&lt;/p&gt;
&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;rtl-text-tools
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Quick Example
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;fixRTL&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;fixRTL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;مرحبا, رقم 123...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// → "...مرحبا، رقم ۱۲۳"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Arabic digits are also supported:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;fixRTL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;مرحبا, رقم 123...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;lang&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;arabic&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// → "...مرحبا، رقم ١٢٣"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the text isn’t RTL, it returns the original string unchanged:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;fixRTL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello world&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// → "Hello world"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. RTL Detection
&lt;/h3&gt;

&lt;p&gt;Detect whether text contains RTL scripts.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;hasRTL&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;hasRTL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;مرحبا&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nf"&gt;hasRTL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;שלום&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nf"&gt;hasRTL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Supports:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Arabic&lt;/li&gt;
&lt;li&gt;Hebrew&lt;/li&gt;
&lt;li&gt;Persian/Farsi&lt;/li&gt;
&lt;li&gt;Urdu&lt;/li&gt;
&lt;li&gt;Syriac&lt;/li&gt;
&lt;li&gt;Thaana&lt;/li&gt;
&lt;li&gt;N’Ko&lt;/li&gt;
&lt;li&gt;Samaritan&lt;/li&gt;
&lt;li&gt;Mandaic&lt;/li&gt;
&lt;li&gt;and more&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Digit Conversion
&lt;/h3&gt;

&lt;p&gt;Convert Latin digits into locale-specific numerals.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Persian digits&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;toPersianDigits&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;toPersianDigits&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Price 123&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// "Price ۱۲۳"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Arabic-Indic digits&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;toArabicDigits&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;toArabicDigits&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Price 123&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// "Price ١٢٣"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. RTL Punctuation Conversion
&lt;/h3&gt;

&lt;p&gt;Convert standard punctuation into RTL equivalents.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;convertPunctuation&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;convertPunctuation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;مرحبا, كيف حالك?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// "مرحبا، كيف حالك؟"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Converts:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;LTRRTL,،?؟;؛&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  4. Ellipsis Fixing
&lt;/h3&gt;

&lt;p&gt;One of the most annoying RTL rendering issues.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;moveEllipsis&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;moveEllipsis&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;مرحبا...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// "...مرحبا"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also supports the Unicode ellipsis character:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;moveEllipsis&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;مرحبا…&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// "…مرحبا"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. Bidi Wrapping for Plain Text
&lt;/h3&gt;

&lt;p&gt;CSS doesn’t exist in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;emails&lt;/li&gt;
&lt;li&gt;terminals&lt;/li&gt;
&lt;li&gt;textareas&lt;/li&gt;
&lt;li&gt;logs&lt;/li&gt;
&lt;li&gt;PDFs&lt;/li&gt;
&lt;li&gt;some chat systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For those environments, Unicode bidi markers are essential.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;wrapRTL&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;wrapRTL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;مرحبا&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It wraps text using invisible Unicode direction control characters for reliable RTL rendering.&lt;/p&gt;

&lt;p&gt;You can also safely embed LTR content inside RTL paragraphs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;wrapLTR&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;wrapLTR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://example.com&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6. React + CSS Helpers
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;getRTLStyles&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nf"&gt;getRTLStyles&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;مرحبا&lt;/span&gt; &lt;span class="nx"&gt;بالعالم&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&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;Returns:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;direction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;unicodeBidi&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;embed&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  7. DOM Helper
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;setDirAttribute&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rtl-text-tools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;setDirAttribute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ar&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;dir=&lt;/span&gt;&lt;span class="s"&gt;"rtl"&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"ar"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  IE11 Compatibility
&lt;/h2&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%2F6xtvdmxcxrua7chm4xsa.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%2F6xtvdmxcxrua7chm4xsa.jpg" alt=" " width="579" height="295"&gt;&lt;/a&gt;&lt;br&gt;
I intentionally made this package compatible with legacy environments.&lt;/p&gt;

&lt;p&gt;The compiled output targets ES5:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;no arrow functions&lt;/li&gt;
&lt;li&gt;no replaceAll&lt;/li&gt;
&lt;li&gt;no regex u flag&lt;/li&gt;
&lt;li&gt;no modern syntax assumptions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So yes ,  it even works in IE11.&lt;/p&gt;
&lt;h2&gt;
  
  
  The Real Problem With RTL on the Web
&lt;/h2&gt;

&lt;p&gt;Most developers only think about:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;direction&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nt"&gt;rtl&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But RTL support is actually much deeper than that.&lt;/p&gt;

&lt;p&gt;The difficult part is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;mixed-direction content&lt;/li&gt;
&lt;li&gt;Unicode bidi behavior&lt;/li&gt;
&lt;li&gt;punctuation mirroring&lt;/li&gt;
&lt;li&gt;locale digits&lt;/li&gt;
&lt;li&gt;inline URLs&lt;/li&gt;
&lt;li&gt;plain-text rendering&lt;/li&gt;
&lt;li&gt;email clients&lt;/li&gt;
&lt;li&gt;terminals&lt;/li&gt;
&lt;li&gt;copy/paste consistency&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This package tries to solve those practical problems in one place.&lt;/p&gt;

&lt;h3&gt;
  
  
  Example: Mixed RTL/LTR Text
&lt;/h3&gt;

&lt;p&gt;Without normalization:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;من در پارکی راه می رفتم Do not Park here&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The rendering can become visually confusing depending on the environment.&lt;/p&gt;

&lt;p&gt;With normalization:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;normalizeDirection&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The text becomes readable with proper RTL base direction.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Zero Dependencies?
&lt;/h2&gt;

&lt;p&gt;Text utilities should be lightweight.&lt;/p&gt;

&lt;p&gt;This package is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;dependency-free&lt;/li&gt;
&lt;li&gt;tree-shakeable&lt;/li&gt;
&lt;li&gt;framework-agnostic&lt;/li&gt;
&lt;li&gt;TypeScript-friendly&lt;/li&gt;
&lt;li&gt;browser-compatible&lt;/li&gt;
&lt;li&gt;usable in Node.js&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Open Source
&lt;/h2&gt;

&lt;p&gt;The project is fully open source and contributions are welcome.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/homayounmmdy/rtl-text-tools" rel="noopener noreferrer"&gt;https://github.com/homayounmmdy/rtl-text-tools&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NPM:&lt;/strong&gt; &lt;a href="https://www.npmjs.com/package/rtl-text-tools" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/rtl-text-tools&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;RTL support on the web is still surprisingly underdeveloped.&lt;/p&gt;

&lt;p&gt;A lot of developers building multilingual products end up reinventing the same utilities repeatedly.&lt;/p&gt;

&lt;p&gt;I wanted a small toolkit that handled the annoying RTL edge cases properly and could be dropped into any project easily.&lt;/p&gt;

&lt;p&gt;If you work with Arabic, Persian, Hebrew, Urdu, or multilingual interfaces, I hope this package saves you some time.&lt;/p&gt;

&lt;p&gt;Feedback, issues, and contributions are always welcome.&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Modern Web Security Attacks Every Developer Must Know (2026 Guide) Clickjacking</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Sun, 31 May 2026 16:38:47 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/modern-web-security-attacks-every-developer-must-know-2026-guide-clickjacking-onc</link>
      <guid>https://dev.to/homayounmmdy/modern-web-security-attacks-every-developer-must-know-2026-guide-clickjacking-onc</guid>
      <description>&lt;p&gt;Modern websites are not only about beautiful UI and animations security matters too.&lt;/p&gt;

&lt;p&gt;One of the most common browser-based attacks is called &lt;strong&gt;Clickjacking&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Even frontend developers should understand it because this attack targets the UI itself.&lt;/p&gt;

&lt;h2&gt;
  
  
  🛡️ What is Clickjacking?
&lt;/h2&gt;

&lt;p&gt;Clickjacking is a type of attack where a malicious website tricks users into clicking something they cannot see.&lt;/p&gt;

&lt;p&gt;Usually, the attacker places your website inside an invisible &lt;code&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt; and overlays fake buttons or content on top of it.&lt;/p&gt;

&lt;p&gt;The user thinks they are clicking one thing…&lt;/p&gt;

&lt;p&gt;but they are actually clicking buttons on your real website underneath.&lt;/p&gt;

&lt;h2&gt;
  
  
  ⚠️ Real Example
&lt;/h2&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%2F800dniulr5s8dg0017fz.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%2F800dniulr5s8dg0017fz.png" alt=" " width="800" height="419"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Imagine this:&lt;/p&gt;

&lt;p&gt;A user visits a fake website with a “Play Video” button.&lt;/p&gt;

&lt;p&gt;But behind that button, your banking website is loaded invisibly inside an iframe.&lt;/p&gt;

&lt;p&gt;When the user clicks “Play Video” they might actually:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;transfer money&lt;/li&gt;
&lt;li&gt;change account settings&lt;/li&gt;
&lt;li&gt;enable permissions&lt;/li&gt;
&lt;li&gt;delete data&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;without realizing it.&lt;/p&gt;

&lt;h2&gt;
  
  
  🧠 Why It’s Dangerous
&lt;/h2&gt;

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

&lt;ul&gt;
&lt;li&gt;trick users into performing actions&lt;/li&gt;
&lt;li&gt;steal interactions&lt;/li&gt;
&lt;li&gt;bypass user intention&lt;/li&gt;
&lt;li&gt;abuse trusted websites&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In some advanced cases, attackers can even capture keyboard input or sensitive interactions.&lt;/p&gt;

&lt;h2&gt;
  
  
  🔒 Modern Protection Methods
&lt;/h2&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%2F1h6va5tmxfhi0dk2a2wc.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%2F1h6va5tmxfhi0dk2a2wc.jpg" alt=" " width="568" height="393"&gt;&lt;/a&gt;&lt;br&gt;
Modern browsers provide built-in defenses.&lt;/p&gt;
&lt;h3&gt;
  
  
  1. X-Frame-Options Header
&lt;/h3&gt;

&lt;p&gt;This HTTP header controls whether your website can be embedded inside an iframe.&lt;/p&gt;
&lt;h4&gt;
  
  
  Block all framing
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;X-Frame-Options: DENY
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  Allow only your own website
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;X-Frame-Options: SAMEORIGIN
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is the most common option.&lt;/p&gt;
&lt;h3&gt;
  
  
  2. Content Security Policy (Recommended)
&lt;/h3&gt;

&lt;p&gt;Today, most developers prefer using CSP.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;Content-Security-Policy: frame-ancestors 'self';
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This tells the browser:&lt;/p&gt;

&lt;p&gt;“Only allow this website to be framed by itself.”&lt;/p&gt;

&lt;p&gt;You can also allow specific domains:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;Content-Security-Policy: frame-ancestors 'self' https://example.com;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  ⚠️ Important Note
&lt;/h1&gt;

&lt;p&gt;Older browsers handled clickjacking differently.&lt;/p&gt;

&lt;p&gt;Some legacy protections used JavaScript frame-busting techniques like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;script&amp;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;self&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;top&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;top&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="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But modern security headers are much more reliable.&lt;/p&gt;

&lt;h1&gt;
  
  
  ✅ Best Practice
&lt;/h1&gt;

&lt;p&gt;For modern applications:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use &lt;code&gt;Content-Security-Policy&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Add &lt;code&gt;frame-ancestors&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Avoid unnecessary iframes&lt;/li&gt;
&lt;li&gt;Protect sensitive actions with confirmation steps&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;Frontend security is not only the backend developer’s responsibility.&lt;/p&gt;

&lt;p&gt;Even UI decisions can become security vulnerabilities.&lt;/p&gt;

&lt;p&gt;Understanding attacks like Clickjacking helps developers build safer and more trustworthy web applications.&lt;/p&gt;

</description>
      <category>security</category>
      <category>cybersecurity</category>
      <category>frontend</category>
      <category>programming</category>
    </item>
    <item>
      <title>From Quiet Researcher to Programming Pioneer: Dennis Ritchie’s Lasting Legacy</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Sat, 07 Feb 2026 16:56:15 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/from-quiet-researcher-to-programming-pioneer-dennis-ritchies-lasting-legacy-pc0</link>
      <guid>https://dev.to/homayounmmdy/from-quiet-researcher-to-programming-pioneer-dennis-ritchies-lasting-legacy-pc0</guid>
      <description>&lt;p&gt;Dennis Ritchie was the computer scientist who created the &lt;strong&gt;C programming language&lt;/strong&gt; and co-created the &lt;strong&gt;Unix operating system&lt;/strong&gt; , two innovations that shaped nearly all modern software.&lt;/p&gt;

&lt;p&gt;In the late 1960s at &lt;strong&gt;Bell Labs&lt;/strong&gt;, Ritchie worked alongside Ken Thompson on building Unix, a new operating system designed to be simple, portable, and powerful. But Unix needed a better programming language to grow.&lt;/p&gt;

&lt;p&gt;So Ritchie created &lt;strong&gt;C&lt;/strong&gt; in the early 1970s.&lt;/p&gt;

&lt;p&gt;C allowed developers to write efficient, low-level system software while staying flexible and portable. This made it the perfect language to rewrite Unix, which helped the operating system spread across different machines , something revolutionary at the time.&lt;/p&gt;

&lt;p&gt;C later became the foundation for many major languages including &lt;strong&gt;C++, Java, &lt;a href="https://dev.to/homayounmmdy/from-javascript-creator-to-privacy-pioneer-brendan-eichs-comeback-story-1gkl"&gt;JavaScript&lt;/a&gt;, Go, and more&lt;/strong&gt;, influencing how modern software is built.&lt;/p&gt;

&lt;p&gt;Unix itself became the ancestor of countless systems, including &lt;strong&gt;&lt;a href="https://dev.to/homayounmmdy/from-student-hacker-to-open-source-legend-linus-torvalds-revolution-1jj3"&gt;Linux&lt;/a&gt;, macOS, iOS, and Android&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;For their groundbreaking work, Ritchie and Thompson received the &lt;strong&gt;Turing Award (1983)&lt;/strong&gt; and later the &lt;strong&gt;National Medal of Technology (1999)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Despite his massive impact, Ritchie remained a quiet figure in tech, focused more on building tools than seeking recognition.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Some of the most powerful innovations aren’t loud , they quietly become the foundation everything else is built on.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&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%2Fzwbcmr7i6t48w6rayuwx.webp" 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%2Fzwbcmr7i6t48w6rayuwx.webp" alt="Dennis Ritchie" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>c</category>
      <category>unix</category>
    </item>
    <item>
      <title>From Student Hacker to Open-Source Legend: Linus Torvalds’ Revolution</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Fri, 06 Feb 2026 17:51:55 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/from-student-hacker-to-open-source-legend-linus-torvalds-revolution-1jj3</link>
      <guid>https://dev.to/homayounmmdy/from-student-hacker-to-open-source-legend-linus-torvalds-revolution-1jj3</guid>
      <description>&lt;p&gt;Linus Torvalds is the creator of &lt;strong&gt;Linux&lt;/strong&gt; and &lt;strong&gt;Git&lt;/strong&gt;, two technologies that silently power modern software development.&lt;/p&gt;

&lt;p&gt;In 1991, while studying computer science in Finland, Torvalds started building a small operating system out of curiosity. He shared it online as a “fun project” and invited developers to contribute.&lt;/p&gt;

&lt;p&gt;That project became &lt;strong&gt;Linux&lt;/strong&gt;, which today powers most servers, cloud platforms, Android devices, and supercomputers worldwide.&lt;/p&gt;

&lt;p&gt;But Torvalds didn’t stop there.&lt;/p&gt;

&lt;p&gt;In 2005, frustrated with existing version control tools while managing Linux development, he created &lt;strong&gt;Git&lt;/strong&gt; in just a few days. Git later became the backbone of modern software collaboration and is now used by millions of developers and platforms like GitHub.&lt;/p&gt;

&lt;p&gt;Torvalds also faced criticism for his blunt communication style and stepped back in 2018 to improve his leadership approach before returning to guide the Linux community.&lt;/p&gt;

&lt;p&gt;Today, his work proves one powerful idea:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;When you build tools that help others create, your impact multiplies far beyond your own work.&lt;/p&gt;
&lt;/blockquote&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%2Fk8erychw064n9esd0kfb.webp" 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%2Fk8erychw064n9esd0kfb.webp" alt="Linus Torvalds" width="473" height="441"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>linux</category>
      <category>git</category>
    </item>
    <item>
      <title>From JavaScript Creator to Privacy Pioneer: Brendan Eich’s Comeback Story</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Sat, 03 Jan 2026 11:26:28 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/from-javascript-creator-to-privacy-pioneer-brendan-eichs-comeback-story-1gkl</link>
      <guid>https://dev.to/homayounmmdy/from-javascript-creator-to-privacy-pioneer-brendan-eichs-comeback-story-1gkl</guid>
      <description>&lt;p&gt;This is &lt;strong&gt;Brendan Eich&lt;/strong&gt; the visionary who created &lt;strong&gt;JavaScript&lt;/strong&gt;, the language powering the modern web. But his story didn’t start with recognition.&lt;/p&gt;

&lt;p&gt;As a teenager fascinated by math and computers, Eich obsessed over how software worked beneath the surface. That curiosity led him to study computer science and eventually join &lt;strong&gt;Netscape&lt;/strong&gt; in the mid-1990s.&lt;/p&gt;

&lt;p&gt;Then came the moment that changed the internet.&lt;/p&gt;

&lt;p&gt;Under extreme deadline pressure, he built &lt;strong&gt;JavaScript in just 10 days&lt;/strong&gt;. At first, it was mocked by developers as messy and inconsistent… even called a “toy.” But while critics doubted it, JavaScript quietly fueled the early web and never stopped growing.&lt;/p&gt;

&lt;p&gt;Within two decades, it became one of the &lt;strong&gt;most widely used programming languages in the world&lt;/strong&gt;, running browsers, servers, mobile apps, and even IoT devices.&lt;/p&gt;

&lt;h2&gt;
  
  
  Then came the fall.
&lt;/h2&gt;

&lt;p&gt;In 2014, after becoming Mozilla’s CEO, past political donations triggered massive backlash. Amid public controversy and internal pressure, he &lt;strong&gt;stepped down after only two weeks&lt;/strong&gt;. For many, that would have ended their influence in tech.&lt;/p&gt;

&lt;p&gt;But Eich didn’t disappear.&lt;/p&gt;

&lt;p&gt;In 2015, he co-founded &lt;strong&gt;Brave Software&lt;/strong&gt;, launching the &lt;strong&gt;Brave browser&lt;/strong&gt; a fast, privacy-focused alternative that blocks ads and trackers by default. Brave challenged Big Tech with a new vision: &lt;strong&gt;user-controlled attention and privacy-first browsing.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Today, &lt;strong&gt;Brave serves millions of users&lt;/strong&gt;, supports decentralized technologies like IPFS, and integrates cryptocurrency through Brave Rewards.&lt;/p&gt;

&lt;p&gt;Brendan Eich’s journey isn’t just about building software. It’s about &lt;strong&gt;resilience, reinvention, and staying true to your vision.&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Even if the world pushes you out, you can still build something greater.&lt;/p&gt;
&lt;/blockquote&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%2Fpkb41dyohkv2hpju7j7n.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%2Fpkb41dyohkv2hpju7j7n.jpg" alt="Brendan Eich" width="554" height="554"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>ByteSize Bios , Big Stories in Small Bytes</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Fri, 02 Jan 2026 15:26:15 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/bytesize-bios-big-stories-in-small-bytes-2amf</link>
      <guid>https://dev.to/homayounmmdy/bytesize-bios-big-stories-in-small-bytes-2amf</guid>
      <description>&lt;p&gt;Introducing &lt;strong&gt;ByteSize Bios&lt;/strong&gt;, a new series starting in &lt;strong&gt;2026&lt;/strong&gt;, where I explore the history of computing  byte by byte.&lt;/p&gt;

&lt;p&gt;In each post, I spotlight the &lt;strong&gt;pioneers, rebels, and visionaries&lt;/strong&gt; who shaped code, culture, and the digital world. From forgotten geniuses to household names, these are the stories worth remembering.&lt;/p&gt;

&lt;p&gt;Each bio is &lt;strong&gt;short, scannable, and meaningful&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;⏱️ 1-2 minutes to read&lt;br&gt;
✨ No fluff. Just legacy.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Who built the first compiler?&lt;/li&gt;
&lt;li&gt;Who fought for an open web?&lt;/li&gt;
&lt;li&gt;Who coded in silence during wartime?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’ll uncover the stories that shaped the digital world we live in today. 🔍&lt;/p&gt;

&lt;p&gt;📅 First bio drops soon.&lt;/p&gt;

</description>
      <category>techhistory</category>
      <category>programming</category>
      <category>digitallegacy</category>
    </item>
    <item>
      <title>JavaScript Closures Explained in Simple Terms</title>
      <dc:creator>Homayoun Mohammadi</dc:creator>
      <pubDate>Tue, 30 Dec 2025 17:31:05 +0000</pubDate>
      <link>https://dev.to/homayounmmdy/javascript-closures-explained-in-simple-terms-109h</link>
      <guid>https://dev.to/homayounmmdy/javascript-closures-explained-in-simple-terms-109h</guid>
      <description>&lt;p&gt;Closures are one of the most important concepts in JavaScript, and understanding them makes you a stronger developer.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is a Closure?
&lt;/h2&gt;

&lt;p&gt;A closure is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A function that remembers and can access variables from its outer function, even after that outer function has finished running.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Think of it like a function carrying a backpack of variables wherever it goes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closures Explained With an ATM Example
&lt;/h2&gt;

&lt;p&gt;This is one of the easiest ways to understand closures:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;createBankAccount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialBalance&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;balance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;initialBalance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// private money in the "vault"&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ATM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;withdrawalAmount&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="nx"&gt;withdrawalAmount&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;balance&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;balance&lt;/span&gt; &lt;span class="o"&gt;-=&lt;/span&gt; &lt;span class="nx"&gt;withdrawalAmount&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="s2"&gt;`Withdrawn: $&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;withdrawalAmount&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;. Remaining: $&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;balance&lt;/span&gt;&lt;span class="p"&gt;}&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="nx"&gt;withdrawalAmount&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="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="s2"&gt;Insufficient funds!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;0&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myATM&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createBankAccount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;myATM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Withdrawn: $100. Remaining: $900&lt;/span&gt;
&lt;span class="nf"&gt;myATM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Withdrawn: $500. Remaining: $400&lt;/span&gt;
&lt;span class="nf"&gt;myATM&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;450&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Insufficient funds!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What’s happening here?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;createBankAccount(1000)&lt;/code&gt; sets up the vault (&lt;code&gt;balance&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;The returned &lt;code&gt;ATM()&lt;/code&gt; function remembers &lt;code&gt;balance&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Even when the outer function is done, &lt;code&gt;ATM()&lt;/code&gt; still has access to it&lt;/li&gt;
&lt;li&gt;That “memory” is the closure in action&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  How Closures Work
&lt;/h2&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%2Fuu1zj3oaz5dk08v7gms5.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%2Fuu1zj3oaz5dk08v7gms5.jpg" alt="How Closures Work" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The outer function creates some variables&lt;br&gt;&lt;br&gt;
The inner function uses them&lt;br&gt;&lt;br&gt;
When the outer function finishes, the variables normally disappear&lt;br&gt;&lt;br&gt;
But if the inner function still needs them, they stay alive&lt;br&gt;&lt;br&gt;
This “saved scope” is called a closure&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Closures give a function memory.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  Why Closures Are Useful?
&lt;/h2&gt;

&lt;p&gt;Closures appear everywhere in JavaScript. Here are three common uses:&lt;/p&gt;
&lt;h3&gt;
  
  
  1. Private Variables (Data Privacy)
&lt;/h3&gt;

&lt;p&gt;Closures let you hide data so no one can access it directly.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;createCounter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&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="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;decrement&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;getValue&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;count&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;counter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createCounter&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="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getValue&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// 0&lt;/span&gt;
&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;increment&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="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getValue&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt; &lt;span class="c1"&gt;// 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The variable &lt;code&gt;count&lt;/code&gt; cannot be changed from outside — it's protected.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Function Factories (Preset Functions)
&lt;/h3&gt;

&lt;p&gt;You can create functions that remember preset values.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;createMultiplier&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;multiplyBy&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="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&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="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;multiplyBy&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;const&lt;/span&gt; &lt;span class="nx"&gt;double&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createMultiplier&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;triple&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createMultiplier&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="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="nf"&gt;double&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="c1"&gt;// 10&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="nf"&gt;triple&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="c1"&gt;// 15&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each multiplier function remembers its own value.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Event Handlers (UI Programming)
&lt;/h3&gt;

&lt;p&gt;Each function remembers its loop index or state.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;setupButtons&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;buttons&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="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;button&lt;/span&gt;&lt;span class="dl"&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="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&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="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;buttons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&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="nx"&gt;buttons&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&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="p"&gt;()&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;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="s2"&gt;`Button &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&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="s2"&gt; clicked!`&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each click handler remembers its own &lt;code&gt;i&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closures in One Sentence
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;A closure is a function that keeps access to variables from the outer scope, even after that outer scope has finished.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Final Summary
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Closures let functions remember values
&lt;/li&gt;
&lt;li&gt;They keep variables alive &amp;amp; protected
&lt;/li&gt;
&lt;li&gt;They are used in counters, event handlers, callbacks, modules, and more
&lt;/li&gt;
&lt;li&gt;Closures are everywhere in JavaScript once you start noticing them
&lt;/li&gt;
&lt;li&gt;They are essential for writing clean, powerful, and modern JavaScript&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
    </item>
  </channel>
</rss>
