<?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: Michael N.</title>
    <description>The latest articles on DEV Community by Michael N. (@m13ha).</description>
    <link>https://dev.to/m13ha</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F790662%2F6ba34c8f-f0fc-4932-a7c5-97e25a1544b1.jpeg</url>
      <title>DEV Community: Michael N.</title>
      <link>https://dev.to/m13ha</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/m13ha"/>
    <language>en</language>
    <item>
      <title>Secrets and Keys: The History of Encryption</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Sat, 27 Sep 2025 08:00:00 +0000</pubDate>
      <link>https://dev.to/m13ha/secrets-and-keys-the-history-of-encryption-2cn0</link>
      <guid>https://dev.to/m13ha/secrets-and-keys-the-history-of-encryption-2cn0</guid>
      <description>&lt;p&gt;Encryption has been with us for thousands of years. That sounds dramatic, but it’s true. Long before we had computers, Wi-Fi, or even electricity, humans were trying to keep secrets safe. Kings, generals, traders, and even lovers wanted ways to pass messages that no outsider could understand.&lt;/p&gt;

&lt;p&gt;When we talk about encryption today, people often imagine algorithms with names like AES, RSA, or elliptic curves. But those are just the latest steps in a very long story. The story goes from leather straps in ancient Greece, to mechanical boxes in the Second World War, to the kind of code running invisibly on your phone right now, and maybe soon into the world of quantum computing.&lt;/p&gt;

&lt;p&gt;In this piece, I don’t just want to “explain encryption” in the technical sense. I want to walk through its history, its purpose, and its future in a way that feels less like a lecture and more like a discussion. Along the way, I’ll use one of my own side projects, &lt;em&gt;QR Crypt&lt;/em&gt;, which I built using Google’s AI Studio as a small example of how old ideas can find new forms.&lt;/p&gt;

&lt;p&gt;So let’s start at the beginning.&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%2F10na5z8m66msph1yfvyh.gif" 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%2F10na5z8m66msph1yfvyh.gif" alt="cartoons talking" width="253" height="216"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Early Attempts at Hiding Messages
&lt;/h2&gt;

&lt;p&gt;If you roll history all the way back, you’ll find people coming up with surprisingly clever tricks. One of the earliest examples comes from ancient Greece: the &lt;strong&gt;scytale cypher&lt;/strong&gt;. It was just a leather strap wound around a stick. A general would write a message along the strap, then unwind it. Once unwound, the letters looked scrambled. Only someone with a stick of the same diameter could wrap the leather back up and read the original message.&lt;/p&gt;

&lt;p&gt;Simple? Yes. Effective for its time? Also yes.&lt;/p&gt;

&lt;p&gt;Fast forward a bit, and you’ll find &lt;strong&gt;Julius Caesar’s cypher&lt;/strong&gt;, which is almost legendary now. Caesar would shift letters by a fixed number, maybe 3 places forward, so that “HELLO” would become “KHOOR.” Anyone intercepting it without knowing the rule would see gibberish.&lt;/p&gt;

&lt;p&gt;From there, more sophisticated systems appeared, like the &lt;strong&gt;Vigenère cypher&lt;/strong&gt; in the 1500s, which used repeating keys and felt “unbreakable” for a couple of centuries. (Spoiler: eventually, mathematicians figured it out.)&lt;/p&gt;

&lt;p&gt;What’s worth noticing here is that these early systems weren’t “mathematically perfect.” They were clever enough to last until someone smarter or more determined came along. That theme repeats over and over in the history of encryption: it’s always an arms race.&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%2Fgf3cu6q5bp9wscon2mwa.gif" 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%2Fgf3cu6q5bp9wscon2mwa.gif" alt="Enigma machine" width="498" height="234"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Enigma and Friends
&lt;/h2&gt;

&lt;p&gt;Now, let’s jump to the 20th century. Wars tend to accelerate technology, and World War II pushed cryptography forward in dramatic ways.&lt;/p&gt;

&lt;p&gt;The most famous device from that era is the &lt;strong&gt;Enigma machine&lt;/strong&gt;, used by Nazi Germany. It looked like a typewriter but had rotors inside that scrambled messages in complex ways. Each keypress would pass through multiple electrical paths, shifting with every press, making the output look random.&lt;/p&gt;

&lt;p&gt;The brilliance of Enigma was its complexity. The flaw was that complexity still had patterns, and the Allies, with help from brilliant people like Alan Turing, eventually cracked it. That wasn’t just a victory of math; it was a victory that shortened the war.&lt;/p&gt;

&lt;p&gt;The mechanical era showed that encryption wasn’t just an intellectual exercise. It was life and death, nations against nations, with machines and people racing to outsmart one another.&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%2Fo76h7as3adpu4tgmxsaj.gif" 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%2Fo76h7as3adpu4tgmxsaj.gif" alt="old computer" width="640" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Digital Revolution: From Cyphers to Code
&lt;/h2&gt;

&lt;p&gt;Once computers entered the scene, encryption leapt into the digital realm. Instead of mechanical rotors, we now had algorithmic instructions that computers could follow at incredible speeds.&lt;/p&gt;

&lt;p&gt;One of the early milestones here was &lt;strong&gt;RSA&lt;/strong&gt;, created in the 1970s. Before RSA, most encryption was &lt;em&gt;symmetric&lt;/em&gt;: the same key was used to both lock and unlock the message. That worked fine in small groups, but it was impractical on a global scale. How do you securely share the key in the first place?&lt;/p&gt;

&lt;p&gt;RSA solved this with &lt;em&gt;asymmetric encryption&lt;/em&gt;. It gave you two keys: a public key (which anyone can see and use to encrypt a message for you) and a private key (which only you hold and can use to decrypt). That single idea, two keys, mathematically linked but impossible to derive from one another, changed the world. It made online banking possible, digital signatures possible, and eventually the secure web as we know it.&lt;/p&gt;

&lt;p&gt;Other algorithms followed. &lt;strong&gt;AES (Advanced Encryption Standard)&lt;/strong&gt; became the backbone of symmetric encryption. Elliptic curve cryptography (ECC) offered efficiency with shorter keys. Each step forward made things harder to break and more practical to deploy.&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%2Fvz1ljhmemq19nlqrcj9p.gif" 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%2Fvz1ljhmemq19nlqrcj9p.gif" alt="hacker" width="498" height="280"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes Encryption “Unbreakable”?
&lt;/h2&gt;

&lt;p&gt;At its core, encryption relies on math problems that are hard to solve.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;RSA relies on the difficulty of factoring very large numbers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;ECC relies on the difficulty of solving certain problems on elliptic curves.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;AES relies on transformations that resist all known shortcuts.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;“Unbreakable” in practice doesn’t mean impossible forever. It means: impossible &lt;em&gt;with the computing power and math knowledge we currently have&lt;/em&gt;. Every breakthrough in math or hardware shifts the balance.&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%2F81d3fxr65qomr8ltigqf.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%2F81d3fxr65qomr8ltigqf.png" alt="Secret Image" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  QR Crypt: A Personal Example
&lt;/h2&gt;

&lt;p&gt;When I was tinkering with &lt;strong&gt;Google’s AI Studio&lt;/strong&gt;, I ended up building a small project called &lt;em&gt;QR Crypt&lt;/em&gt;. The idea was simple: take a secret message, encrypt it with an XOR cypher and a key, and then turn it into a QR code.&lt;/p&gt;

&lt;p&gt;Why a QR code? Because it’s an easy way to move data visually. You can print it, send it as an image, or even scrawl it on a napkin if you want. The catch: the QR code on its own is useless without the right key.&lt;/p&gt;

&lt;p&gt;The fun part of building QR Crypt wasn’t “inventing” a new cypher (XOR has been around forever). It was combining:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A very old technique (XOR encryption).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A modern format (QR codes).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A no-server, privacy-first approach (everything happens in the browser).&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It was also a great learning exercise. Working with AI Studio sped up the process, generating some boilerplate, suggesting improvements, and generally keeping the development flow light. But the important part for me wasn’t just building the tool; it was realising how encryption ideas echo through time.&lt;/p&gt;

&lt;p&gt;From Caesar’s simple shifts to my little web app, the spirit is the same: how do you keep a message safe, and how do you control who gets to read it?  &lt;/p&gt;

&lt;p&gt;The above QR Code contains a secret message. Here is the key:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;=aW5B(.:@!_tf!A&amp;gt;KUT*$R5o;,v!zdg^[ncl[bpsi]qq}Hxf-_WSG]q885Ra
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://qrcrypt.netlify.app/" rel="noopener noreferrer"&gt;Decrypt It Here!&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Encryption in Everyday Life
&lt;/h2&gt;

&lt;p&gt;Sometimes people treat encryption like it’s this shadowy thing only hackers or spies care about. In reality, you use it every single day, often without realising it.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;When you see “&lt;a href="https://%E2%80%9D" rel="noopener noreferrer"&gt;https://”&lt;/a&gt; in your browser, that’s encryption at work (TLS, which uses asymmetric + symmetric algorithms together).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When you send a message on WhatsApp or Signal, it’s encrypted end-to-end.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When your phone unlocks with Face ID or a PIN, the stored biometric data is encrypted.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without encryption, most of the modern internet would collapse. Passwords would leak, bank transfers would be unsafe, and private chats would be public.&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%2Fwgwbhzannsb75zn3etf5.gif" 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%2Fwgwbhzannsb75zn3etf5.gif" alt="trippy shirt" width="498" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Quantum Storms on the Horizon
&lt;/h2&gt;

&lt;p&gt;Now let’s look ahead. What happens when quantum computers mature?&lt;/p&gt;

&lt;p&gt;Quantum computing threatens many current encryption schemes. Why? Because certain problems that are “hard” for classical computers (like factoring large numbers for RSA) could become much easier with quantum algorithms like Shor’s.&lt;/p&gt;

&lt;p&gt;That doesn’t mean the world is about to fall apart. Researchers are already working on &lt;strong&gt;post-quantum cryptography&lt;/strong&gt;, designing algorithms resistant to both classical and quantum attacks. NIST (the U.S. National Institute of Standards and Technology) has even been running competitions to standardise new methods.&lt;/p&gt;

&lt;p&gt;The shift to quantum-safe encryption will probably be slow but steady, like past upgrades. But it underscores the same point as always: encryption is never finished. It’s a living field, constantly adapting to new realities.&lt;/p&gt;




&lt;p&gt;From leather straps in ancient Greece to AI-assisted side projects like QR Crypt, the thread is clear: humans have always cared about protecting information. Encryption evolves with us. It mirrors our fears, our creativity, and our technology.&lt;/p&gt;

&lt;p&gt;I think what excites me most is that encryption isn’t just about secrecy. It’s about trust. It’s the thing that lets you type your credit card into a website, or whisper something to a friend over the internet, and feel confident that the message won’t be hijacked along the way.&lt;/p&gt;

&lt;p&gt;And sometimes, encryption is just fun. Hiding a birthday wish inside a QR code. Building a browser toy to see how XOR feels in practice. Using Google’s AI Studio, not because you had to, but because it made exploration faster.&lt;/p&gt;

&lt;p&gt;Encryption is serious business, yes. But it’s also a playground. And if history tells us anything, it’s that the playground will keep changing from Caesar’s alphabet shifts, to Enigma’s rotors, to RSA’s prime numbers, and one day, to post-quantum math we haven’t even dreamed up yet.&lt;/p&gt;

&lt;p&gt;That’s the real magic of encryption: it’s both ancient and unfinished.  &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%2Fiqihcsc9zedbx7queyl7.gif" 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%2Fiqihcsc9zedbx7queyl7.gif" alt="bye" width="200" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>ai</category>
      <category>beginners</category>
    </item>
    <item>
      <title>BedTales: AI-Powered Bedtime Storytelling for Families</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Mon, 15 Sep 2025 05:07:57 +0000</pubDate>
      <link>https://dev.to/m13ha/bedtales-ai-powered-bedtime-storytelling-for-families-56c1</link>
      <guid>https://dev.to/m13ha/bedtales-ai-powered-bedtime-storytelling-for-families-56c1</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/google-ai-studio-2025-09-03"&gt;Google AI Studio Multimodal Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  BedTales: AI-Powered Bedtime Storytelling for Families
&lt;/h1&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built &lt;strong&gt;BedTales&lt;/strong&gt;, a storytelling applet that brings back the tradition of bedtime stories with the power of AI.&lt;/p&gt;

&lt;p&gt;For thousands of years, storytelling has been how parents pass wisdom, morals, and imagination to their children. BedTales reimagines this timeless tradition by helping parents and kids co-create magical bedtime stories — complete with illustrations, voices, and saved characters — in just a few taps or even by speaking out loud.&lt;/p&gt;

&lt;p&gt;BedTales isn’t just about reading stories; it’s about sparking imagination, encouraging creativity, and making bedtime an experience families look forward to.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI Story Generation&lt;/strong&gt;: Unique stories crafted from user prompts (character, setting, plot, concept).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Illustration&lt;/strong&gt;: Each paragraph gets its own matching AI-generated artwork.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Character Creation&lt;/strong&gt;: Save custom characters with portraits and reuse them across stories.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Voice-to-Prompt&lt;/strong&gt;: Speak a story idea, and the AI structures it automatically.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Library &amp;amp; History&lt;/strong&gt;: Save stories, track history, and revisit favorite tales.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Customization&lt;/strong&gt;: Choose fonts, themes, and layouts to make the reading experience personal.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Data Portability&lt;/strong&gt;: Export and share stories or entire libraries as JSON files.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The result is an offline-first Progressive Web App (PWA) that runs seamlessly on mobile, tablet, or desktop.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;👉 [Deployed Applet Link]: Pending Due to Cloud Run Card Verification Issues&lt;br&gt;
👉 [Ai Studio Link]: &lt;a href="https://ai.studio/apps/drive/1kbom6wMNcX9viSeW3RBlTvYH-lnQGuuo" rel="noopener noreferrer"&gt;https://ai.studio/apps/drive/1kbom6wMNcX9viSeW3RBlTvYH-lnQGuuo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;📸 Screenshots:&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%2Fz68ty259d7ncieresedp.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%2Fz68ty259d7ncieresedp.png" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;br&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%2F26pl9y2s0z62g4cdi9c1.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%2F26pl9y2s0z62g4cdi9c1.png" alt=" " width="800" height="416"&gt;&lt;/a&gt;&lt;br&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%2F69h0sweky9ba5rvaxb86.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%2F69h0sweky9ba5rvaxb86.png" alt=" " width="375" height="609"&gt;&lt;/a&gt;&lt;br&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%2F80wa3rw8sxtdb6x35luu.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%2F80wa3rw8sxtdb6x35luu.png" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;br&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%2F3vk7ci98j563c8sq1ra8.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%2F3vk7ci98j563c8sq1ra8.png" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;br&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%2Fzsv1o9bm8et0uorodsfe.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%2Fzsv1o9bm8et0uorodsfe.png" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;br&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%2Fo1c53lsgtq9u2qhflaky.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%2Fo1c53lsgtq9u2qhflaky.png" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  How I Used Google AI Studio
&lt;/h2&gt;

&lt;p&gt;BedTales is powered by &lt;strong&gt;Google Gemini models&lt;/strong&gt; inside Google AI Studio. Each core feature of the app is mapped to a specific multimodal capability:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Gemini 2.5 Flash&lt;/strong&gt; → Generates story text, titles, structured prompts, and transcribes audio inputs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Imagen&lt;/strong&gt; → Creates unique illustrations for each story paragraph and character portrait.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Gemini Flash + Audio Input&lt;/strong&gt; → Converts voice into structured prompts for characters or full story ideas.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All services are orchestrated in &lt;code&gt;geminiService.ts&lt;/code&gt; and deployed with Cloud Run for scalability and simplicity.&lt;/p&gt;




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

&lt;p&gt;The app combines &lt;strong&gt;text, audio, and images&lt;/strong&gt; in a way that enhances storytelling:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Voice-to-Story&lt;/strong&gt;: Kids or parents can simply speak an idea, and BedTales turns it into a structured bedtime story.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Text + Image Pairing&lt;/strong&gt;: Each paragraph comes with a tailored illustration, turning reading into an immersive experience.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Character Consistency&lt;/strong&gt;: Reference images are supported, so characters look the same across multiple stories.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This blend of modalities transforms storytelling from static text into a dynamic, visual, and auditory adventure — keeping children engaged and making family time more memorable.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>googleaichallenge</category>
      <category>ai</category>
      <category>gemini</category>
    </item>
    <item>
      <title>The Discreet Lives of Apps</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Thu, 04 Sep 2025 21:37:07 +0000</pubDate>
      <link>https://dev.to/m13ha/the-discreet-lives-of-apps-3mld</link>
      <guid>https://dev.to/m13ha/the-discreet-lives-of-apps-3mld</guid>
      <description>&lt;p&gt;Ever wonder how your phone streams Netflix, checks email, refreshes social media, and syncs your weather app—all at the same time—without mixing everything up? It feels like magic. But under the hood, your operating system is quietly running a well-organized show with something called &lt;strong&gt;ports&lt;/strong&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%2F5i1a0q5wl4ju6mr13b73.gif" 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%2F5i1a0q5wl4ju6mr13b73.gif" alt="Spy hamster" width="289" height="498"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Think of apps like secret agents living in the same embassy (your phone). Every time they “phone home” across the internet, they need a unique badge number that proves who they are. That badge number? It’s the port.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. The Secret Identities of Your Apps
&lt;/h2&gt;

&lt;p&gt;When an app sends data out into the internet, it doesn’t just say, “Hey, I’m Instagram!” Instead, it uses a port number, like &lt;strong&gt;80&lt;/strong&gt; or &lt;strong&gt;443&lt;/strong&gt;, to signal how the data should be handled.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Port 80&lt;/strong&gt;: the old-school door for unencrypted web traffic (HTTP).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Port 443&lt;/strong&gt;: the secure, encrypted door for HTTPS traffic.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without ports, it would be like a hundred spies all whispering in the same room—pure chaos. With ports, everyone knows whose message is whose.&lt;/p&gt;

&lt;p&gt;📌 &lt;strong&gt;Fun Facts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Port &lt;strong&gt;443&lt;/strong&gt; handles over &lt;strong&gt;80% of all web traffic today&lt;/strong&gt;—that’s like being the busiest checkout lane in a store that never closes.&lt;/li&gt;
&lt;li&gt;Tech culture nicknames ports too: &lt;strong&gt;Port 666&lt;/strong&gt; is sometimes called &lt;em&gt;“doom”&lt;/em&gt; (after the video game), and &lt;strong&gt;1337&lt;/strong&gt; spells &lt;em&gt;leet&lt;/em&gt; in hacker speak.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  2. The OS: Master Connection Handler
&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%2F5ygxuywc3tt077n6iz78.gif" 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%2F5ygxuywc3tt077n6iz78.gif" alt="Master spy johnny english" width="498" height="498"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Behind the curtain, your &lt;strong&gt;operating system (OS)&lt;/strong&gt; is the spymaster. It hands out ports, tracks who’s using what, and makes sure your Netflix stream doesn’t collide with your WhatsApp call.&lt;/p&gt;

&lt;p&gt;This coordination happens through &lt;strong&gt;sockets&lt;/strong&gt;—temporary pipelines that connect apps to the network.&lt;/p&gt;

&lt;p&gt;Imagine the OS as a phone operator in the 1950s, manually plugging cables into switchboards. Only today, the switchboard is digital, lightning-fast, and juggling thousands of lines at once.&lt;/p&gt;

&lt;p&gt;📌 &lt;strong&gt;Fun Facts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your phone can theoretically handle &lt;strong&gt;65,000+ simultaneous connections&lt;/strong&gt;—basically, holding a conversation with an entire stadium of people.&lt;/li&gt;
&lt;li&gt;Even in normal use, your phone might juggle &lt;strong&gt;50–100 ports&lt;/strong&gt; just for background refreshes, social media, and emails.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  3. Why Port 443 Took Over the Internet
&lt;/h2&gt;

&lt;p&gt;Port 443 isn’t just another door; it’s the &lt;strong&gt;secure door&lt;/strong&gt;. It became popular because it supports &lt;strong&gt;SSL/TLS encryption&lt;/strong&gt;, the tech behind HTTPS.&lt;/p&gt;

&lt;p&gt;Why does that matter? Well, the difference between browsing over Port 80 (HTTP) and Port 443 (HTTPS) is like whispering your bank password loudly in public versus using a sealed envelope with your name on it.&lt;/p&gt;

&lt;p&gt;📌 &lt;strong&gt;Fun Facts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The “s” in &lt;strong&gt;https://&lt;/strong&gt; was such a game-changer that Google actually ranks HTTPS sites higher in search results.&lt;/li&gt;
&lt;li&gt;Today, &lt;strong&gt;Netflix alone probably generates more 443 traffic in a day than the entire internet did in 1995.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  4. Ephemeral Ports: The Mall Parking Spaces
&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%2Fh80ywuf4m0z5wm97izma.gif" 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%2Fh80ywuf4m0z5wm97izma.gif" alt="Ghost Hamster" width="640" height="636"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here’s where things get clever. Your phone doesn’t just use ports like 80 and 443. It also creates &lt;strong&gt;temporary ports&lt;/strong&gt;, called &lt;strong&gt;ephemeral ports&lt;/strong&gt;, to handle unique conversations.&lt;/p&gt;

&lt;p&gt;Think of them as parking spots in a busy shopping mall. You drive in, park for a while, leave, and the spot becomes available for someone else.&lt;/p&gt;

&lt;p&gt;So when your browser connects to &lt;code&gt;https://example.com&lt;/code&gt; on port 443, your OS might assign your app a temporary local port (say, 49152). The site knows you by this parking spot, while the OS ensures you don’t collide with another app’s connection.&lt;/p&gt;

&lt;p&gt;📌 &lt;strong&gt;Fun Facts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your computer can create and destroy &lt;strong&gt;thousands of ephemeral ports per minute&lt;/strong&gt; without you noticing.&lt;/li&gt;
&lt;li&gt;It’s one of the quietest but most important juggling acts your device performs.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  5. Local vs. Internet Ports: What’s the Difference?
&lt;/h2&gt;

&lt;p&gt;Not all ports are global superstars like 80 and 443. Some are &lt;strong&gt;local ports&lt;/strong&gt;, used by developers and apps running just on your machine.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;8080&lt;/strong&gt;: A common “backup” web port, often used for local testing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;5555&lt;/strong&gt;: Frequently used by Android devices for debugging.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;25565&lt;/strong&gt;: Used by Minecraft servers so friends can connect.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These local ports are like service entrances in a building—different from the front doors (like 80 and 443) that face the internet. They help apps communicate internally or set up test servers without colliding with the main network highways.&lt;/p&gt;

&lt;p&gt;📌 &lt;strong&gt;Fun Facts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Port &lt;strong&gt;8080&lt;/strong&gt; is so common it’s basically the internet’s “Plan B” when 80 is busy.&lt;/li&gt;
&lt;li&gt;Gamers literally “open ports” to create digital doorways for friends to join matches.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  6. Why All This Matters
&lt;/h2&gt;

&lt;p&gt;From your perspective, it’s seamless. You just tap Instagram, join a Zoom call, or watch Netflix, and it all “just works.” But under the hood, your OS is running a high-stakes logistics game: handing out ports, securing them, and reusing them efficiently.&lt;/p&gt;

&lt;p&gt;And while it feels invisible, understanding ports is the first step to understanding how the internet truly works—and why security and efficiency go hand in hand.&lt;/p&gt;

&lt;p&gt;📌 &lt;strong&gt;Bonus Fun Facts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Hackers often scan for open ports like burglars checking for unlocked windows—that’s why firewalls are critical.&lt;/li&gt;
&lt;li&gt;If Port 443 traffic were a highway, it would need about &lt;strong&gt;50 lanes&lt;/strong&gt; to handle rush-hour internet traffic.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Want to Learn More?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml" rel="noopener noreferrer"&gt;IANA Port Number Registry&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.cloudflare.com/learning/ssl/what-is-https/" rel="noopener noreferrer"&gt;How HTTPS Works (Cloudflare)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://inl.info.ucl.ac.be/CNP3" rel="noopener noreferrer"&gt;Computer Networking: Principles, Protocols and Practice (Free Textbook)&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>programming</category>
      <category>learning</category>
      <category>security</category>
      <category>mobile</category>
    </item>
    <item>
      <title>The Chadstrum: Rethinking Compiled vs Interpreted Languages</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Sun, 31 Aug 2025 21:44:15 +0000</pubDate>
      <link>https://dev.to/m13ha/the-chadstrum-rethinking-compiled-vs-interpreted-languages-43ha</link>
      <guid>https://dev.to/m13ha/the-chadstrum-rethinking-compiled-vs-interpreted-languages-43ha</guid>
      <description>&lt;h2&gt;
  
  
  Our Obsession With Making Code “Understandable”
&lt;/h2&gt;

&lt;p&gt;Humans have always struggled with translation. From carving symbols into clay to inventing alphabets, we’ve needed bridges between ideas and expression. Computers are no different. They only “speak” in binary: 1s and 0s. But since nobody wants to write &lt;code&gt;01101000 01101001&lt;/code&gt; every time they mean &lt;em&gt;“hi”&lt;/em&gt;, we invented programming languages.&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%2F62delk8tlagz89bs857g.gif" 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%2F62delk8tlagz89bs857g.gif" alt="pam translate scene from the office" width="498" height="277"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Compilers and interpreters became the translators, standing between human-friendly languages and machine code. Just like a translator at the UN, they can either prepare a full translated speech in advance (compiled) or whisper line by line into the listener’s ear (interpreted). Both approaches have tradeoffs.&lt;/p&gt;




&lt;h2&gt;
  
  
  Where Did This Classification Even Come From?
&lt;/h2&gt;

&lt;p&gt;The distinction between compiled and interpreted didn’t come out of thin air. In the 1950s, &lt;strong&gt;FORTRAN&lt;/strong&gt; (Formula Translation) popularised the compiled model: code written once, translated into efficient machine instructions, then executed quickly. It was perfect for scientific calculations where speed mattered.&lt;/p&gt;

&lt;p&gt;On the other side, &lt;strong&gt;Lisp&lt;/strong&gt; and other early languages leaned more toward interpretation. They allowed programmers to test code interactively, line by line — a revolutionary idea at the time. Debugging became less of a nightmare because you didn’t need to recompile an entire program to try something new.&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%2Fjql6b9un3iaei6rfdjjf.gif" 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%2Fjql6b9un3iaei6rfdjjf.gif" alt="Old Computer with hands typing" width="376" height="244"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Back then, this divide mattered. Hardware was expensive, memory was scarce, and efficiency could make or break a project. Today, though, with more powerful machines and better tooling, the sharpness of this classification has blurred.&lt;/p&gt;




&lt;h2&gt;
  
  
  What We Mean by “Compiled”
&lt;/h2&gt;

&lt;p&gt;When we call a language “compiled,” we mean that the source code is &lt;strong&gt;fully translated into machine code ahead of time&lt;/strong&gt;. This produces an executable that runs directly on the CPU without needing the original source or an interpreter.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance:&lt;/strong&gt; Fast execution, because all translation work is already done.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Error Checking:&lt;/strong&gt; Many bugs surface during compilation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Portability:&lt;/strong&gt; Limited, since the binary only works on the target system.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Examples: &lt;strong&gt;C, C++, Rust, Go.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What We Mean by “Interpreted”
&lt;/h2&gt;

&lt;p&gt;An interpreted language, on the other hand, &lt;strong&gt;reads and executes code line by line&lt;/strong&gt; at runtime. The interpreter acts like a middleman every time the program runs.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance:&lt;/strong&gt; Slower, because translation happens on the fly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Error Checking:&lt;/strong&gt; Bugs only appear at runtime.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Portability:&lt;/strong&gt; High, since the same source can run anywhere with the right interpreter.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Examples: &lt;strong&gt;Python, JavaScript, Ruby, PHP&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Enter the Grey Zone
&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%2F80hje5vg9a0u89xe2phe.gif" 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%2F80hje5vg9a0u89xe2phe.gif" alt="Robert downey jr explaining the gray area peter is allowed to operate in" width="480" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Most modern languages don’t live in either extreme. They combine approaches:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Bytecode + VM:&lt;/strong&gt; Java compiles source into portable bytecode, then executes it with the JVM.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;JIT (Just-in-Time):&lt;/strong&gt; JavaScript engines like V8 start interpreting but compile hot code into machine instructions on the fly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AOT (Ahead-of-Time):&lt;/strong&gt; Some environments pre-compile bytecode to native binaries for faster startup.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, when we casually say “Python is interpreted” or “C is compiled,” we’re simplifying a much messier reality.&lt;/p&gt;




&lt;h2&gt;
  
  
  Introducing the Chadstrum
&lt;/h2&gt;

&lt;p&gt;To make sense of this, I started thinking of it as a &lt;strong&gt;spectrum&lt;/strong&gt; instead of a binary. I jokingly call it the &lt;strong&gt;Chadstrum&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;On the far &lt;strong&gt;interpreted&lt;/strong&gt; end, you’ve got languages like &lt;strong&gt;Bash&lt;/strong&gt; or early &lt;strong&gt;Perl&lt;/strong&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the &lt;strong&gt;middle&lt;/strong&gt;, there’s &lt;strong&gt;Java&lt;/strong&gt;, &lt;strong&gt;C#&lt;/strong&gt;, and &lt;strong&gt;modern JavaScript&lt;/strong&gt;, which use VMs and JIT compilers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;On the far &lt;strong&gt;compiled&lt;/strong&gt; end, you’ll find &lt;strong&gt;C, C++, Rust&lt;/strong&gt; — where code is turned straight into machine instructions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The point? Whether you’re coding in Bash scripts or writing kernel modules in C, you’re still a Chad. Both ends of the spectrum require skill, and both lead to powerful software.&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%2F8h1oucxgmhw7l8s109k8.gif" 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%2F8h1oucxgmhw7l8s109k8.gif" alt="We are Chad" width="298" height="498"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Why This Still Matters Today
&lt;/h2&gt;

&lt;p&gt;The compiled vs interpreted discussion may seem outdated, but it affects how we build and use software:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance:&lt;/strong&gt; High-frequency trading software? Compiled. A quick automation script? Interpreted.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Portability:&lt;/strong&gt; Java’s “write once, run anywhere” VM model vs. compiled binaries tied to a specific OS.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Developer Convenience:&lt;/strong&gt; Interpreted languages let you prototype and experiment fast. Compiled ones catch errors early and scale better for performance-critical tasks.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But the bigger lesson? You don’t need to join language wars. The Chadstrum shows it’s not about being “better” — it’s about choosing the right tool for the job. At the end of the day, whether your code is compiled, interpreted, or something in between, it’s still getting the job done.&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%2F01fx86fov6be3f7taht2.gif" 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%2F01fx86fov6be3f7taht2.gif" alt="Thumbs Up" width="640" height="480"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;The world of programming languages isn’t black and white. It’s a messy, fascinating spectrum shaped by decades of history, performance needs, and human creativity.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>productivity</category>
      <category>discuss</category>
      <category>programming</category>
    </item>
    <item>
      <title>The Bird that Wrote an Algorithm.</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Mon, 25 Aug 2025 15:30:00 +0000</pubDate>
      <link>https://dev.to/m13ha/the-bird-that-wrote-an-algorithm-69e</link>
      <guid>https://dev.to/m13ha/the-bird-that-wrote-an-algorithm-69e</guid>
      <description>&lt;p&gt;Ever heard of a bird inspiring a computer science algorithm? Yep, you read that right. Today we’re diving into &lt;strong&gt;Cuckoo Hashing&lt;/strong&gt;, a powerful hashing technique that takes its inspiration straight from nature.&lt;/p&gt;

&lt;h2&gt;
  
  
  🐣 A Quick Story About Cuckoo Birds
&lt;/h2&gt;

&lt;p&gt;Cuckoo birds are… jerks. Instead of building their own nests, they sneak their eggs into other birds’ nests. When the chick hatches, it kicks the others out and claims the nest all to itself. Bold move, right?&lt;/p&gt;

&lt;p&gt;That same “move in and push the other out” trick is exactly how &lt;strong&gt;cuckoo hashing&lt;/strong&gt; handles collisions in hash tables. It’s nature + computer science = genius.&lt;/p&gt;




&lt;h2&gt;
  
  
  📦 First, What’s a Hash Table Again?
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;hash table&lt;/strong&gt; is like a super-fast digital filing cabinet where you drop data in and retrieve it in almost constant time. If you’re new to hash tables, check out my earlier breakdown 👉 &lt;a href="https://dev.to/m13ha/data-structures-graphs-i-3hi0"&gt;What is a Hash Table?&lt;/a&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%2Ft6a93572jwe094pidn33.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%2Ft6a93572jwe094pidn33.png" alt="HashTable Diagram" width="800" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hash tables are amazing, but they have one problem: &lt;strong&gt;collisions&lt;/strong&gt;. That’s when two keys end up mapped to the same slot. Normally, we fix this with chaining or linear probing… but those methods can get messy.&lt;/p&gt;

&lt;p&gt;Enter &lt;strong&gt;cuckoo hashing&lt;/strong&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%2Fv1gqqja3dfn77siwkq47.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%2Fv1gqqja3dfn77siwkq47.png" alt="Cuckoo Hashing Diagram" width="800" height="208"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🐦💥 What Makes Cuckoo Hashing So Special?
&lt;/h2&gt;

&lt;p&gt;Instead of giving each key &lt;strong&gt;just one slot&lt;/strong&gt;, cuckoo hashing uses &lt;strong&gt;two different hash functions&lt;/strong&gt;. That means each key has &lt;em&gt;two possible homes&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Here’s the magic:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If one spot is full, the new key boots out the old resident (just like a cuckoo chick).&lt;/li&gt;
&lt;li&gt;The displaced key then moves to its &lt;em&gt;other possible home&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;If that’s also full, the cycle repeats until everything finds a nest.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 Want to see cuckoo hashing in action? Play around with this awesome app, I made using AI &lt;a href="https://claude.ai/public/artifacts/b7d4ff30-5f5a-4824-bd92-67b6eed4593f" rel="noopener noreferrer"&gt;Cuckoo Hashing Visualizer&lt;/a&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧑‍💻 Pseudo Code: Cuckoo Hashing in Action
&lt;/h2&gt;

&lt;p&gt;Here’s a simple version of the insert logic, written in easy-to-read pseudo code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Insert a key into the cuckoo hash table
function insert(key):
    for i = 1 to MaxAttempts:
        // Try first home
        if table1[h1(key)] is empty:
            place key in table1[h1(key)]
            return success

        // If not empty, evict the old resident
        swap key with table1[h1(key)]

        // Try second home
        if table2[h2(key)] is empty:
            place key in table2[h2(key)]
            return success

        // If not empty, evict the old resident again
        swap key with table2[h2(key)]
        // and repeat the loop with the evicted key

    // If we’ve tried too many times, the table is probably too full
    resize_and_rehash()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔑 Key things to notice:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Each key has &lt;strong&gt;two homes&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;If both are busy, the current resident gets &lt;strong&gt;kicked out&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;After too many kicks, the table needs to &lt;strong&gt;resize and rehashed&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This simple loop is the heart of cuckoo hashing.&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%2Fp3mlttp89152m1dgl8e3.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%2Fp3mlttp89152m1dgl8e3.png" alt="Time Complexity" width="800" height="204"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ⏱️ Time Complexity: How Fast Is It Really?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Lookup&lt;/strong&gt; → O(1). You only check up to 2 spots.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Insert&lt;/strong&gt; → O(1) on average, though sometimes you shuffle a few items.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Delete&lt;/strong&gt; → O(1). Just clear the spot.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Worst case? A cycle forms (items keep kicking each other around endlessly). That’s when you resize and rehash the whole table.&lt;/p&gt;




&lt;h2&gt;
  
  
  📜 A Little History: The Creators of Cuckoo Hashing
&lt;/h2&gt;

&lt;p&gt;Cuckoo hashing was introduced in &lt;strong&gt;2001&lt;/strong&gt; by Rasmus Pagh and Flemming Friche Rodler. Their goal? A hash table with &lt;strong&gt;constant-time lookups&lt;/strong&gt; and &lt;strong&gt;clean structure&lt;/strong&gt; — no messy chains or long probing sequences.&lt;/p&gt;




&lt;p&gt;Whenever you need &lt;strong&gt;predictable O(1) lookups&lt;/strong&gt; and can afford a little shuffle during insertions, cuckoo hashing is your friend.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>algorithms</category>
      <category>datastructures</category>
      <category>beginners</category>
    </item>
    <item>
      <title>The Art of Mocking in Backend Tests</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Mon, 04 Aug 2025 09:00:00 +0000</pubDate>
      <link>https://dev.to/m13ha/the-art-of-mocking-in-backend-tests-ljm</link>
      <guid>https://dev.to/m13ha/the-art-of-mocking-in-backend-tests-ljm</guid>
      <description>&lt;p&gt;One thing that hits you fast when you're building anything beyond to-do apps is this: &lt;strong&gt;testing matters&lt;/strong&gt;. That “everything works on my machine” feeling? Doesn’t mean a thing in production.&lt;/p&gt;

&lt;p&gt;But here's the thing... testing &lt;strong&gt;real dependencies&lt;/strong&gt; in every test? That’s a pain. Slow tests. External services failing. APIs rate-limiting you. And now your tests are flaky, annoying, and worst of all, &lt;strong&gt;unreliable&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That’s where mocks come in like the chill friend that helps you focus on your actual code without worrying about the rest of the world blowing up.&lt;/p&gt;




&lt;h3&gt;
  
  
  💡 What’s Testing Without Mocks Like?
&lt;/h3&gt;

&lt;p&gt;Let’s paint the scene.&lt;/p&gt;

&lt;p&gt;You’ve got a service that pulls data from an external API or database. You write a test, and it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sends a real HTTP request ☁️&lt;/li&gt;
&lt;li&gt;Connects to a real database 🧱&lt;/li&gt;
&lt;li&gt;Waits... ⏳&lt;/li&gt;
&lt;li&gt;Sometimes fails because the API is down 😮‍💨&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now imagine you’re running this test 50 times across different components. That’s not just fragile; it’s slow, noisy, and way too close to production for comfort.&lt;/p&gt;




&lt;h3&gt;
  
  
  🤝 Enter Mocks: Your Test Double
&lt;/h3&gt;

&lt;p&gt;Mocks let you fake the parts of your system that don’t need to run for real in a test. Whether it’s an external API, a DB call, or even a complex function you &lt;strong&gt;mock&lt;/strong&gt; it so your test can focus on the logic it’s &lt;em&gt;actually&lt;/em&gt; meant to test.&lt;/p&gt;

&lt;p&gt;Think of it like this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You’re not trying to see if your third-party email API sends an actual email.&lt;br&gt;
You’re just checking: &lt;strong&gt;did my app call the "SendEmail()" function with the right args?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  🔧 So How Do Mocks Actually Work?
&lt;/h3&gt;

&lt;p&gt;Behind the scenes, a mock replaces a real dependency with a controlled fake version that you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pre-program to return specific values&lt;/li&gt;
&lt;li&gt;Track: was it called? how many times?&lt;/li&gt;
&lt;li&gt;Control: simulate errors, slow responses, etc.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some mock tools even auto-generate mock code for your interfaces. It's vibes.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧰 Mock Libraries You Should Know
&lt;/h3&gt;

&lt;h4&gt;
  
  
  📦 &lt;strong&gt;Node.js (JavaScript/TypeScript)&lt;/strong&gt;
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Jest&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Built-in mocking support: &lt;code&gt;jest.fn()&lt;/code&gt;, &lt;code&gt;jest.mock()&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Track function calls, set return values, simulate errors.&lt;/li&gt;
&lt;li&gt;Docs: &lt;a href="https://jestjs.io/docs/mock-functions" rel="noopener noreferrer"&gt;https://jestjs.io/docs/mock-functions&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sendEmail&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;jest&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
   &lt;span class="nx"&gt;sendEmail&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;mockReturnValue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sendEmail&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toHaveBeenCalled&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Sinon&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Great for stubbing, spying, and mocking external dependencies.&lt;/li&gt;
&lt;li&gt;Docs: &lt;a href="https://sinonjs.org/releases/latest/mocks/" rel="noopener noreferrer"&gt;https://sinonjs.org/releases/latest/mocks/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mock&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sinon&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;mock&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myService&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="nx"&gt;mock&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;expects&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;getUser&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;once&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;returns&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mike&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;h4&gt;
  
  
  🐹 &lt;strong&gt;GoLang&lt;/strong&gt;
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Testify (Mock Package)&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Lets you generate mocks for interfaces&lt;/li&gt;
&lt;li&gt;Powerful assertions and control over mock behavior&lt;/li&gt;
&lt;li&gt;Docs: &lt;a href="https://pkg.go.dev/github.com/stretchr/testify/mock" rel="noopener noreferrer"&gt;https://pkg.go.dev/github.com/stretchr/testify/mock&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;   &lt;span class="k"&gt;type&lt;/span&gt; &lt;span class="n"&gt;MockEmailService&lt;/span&gt; &lt;span class="k"&gt;struct&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="n"&gt;mock&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Mock&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;

   &lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;m&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;MockEmailService&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;Send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;to&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;body&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kt"&gt;error&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="n"&gt;args&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;m&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Called&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;to&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;body&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
       &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;args&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;

   &lt;span class="n"&gt;emailMock&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="nb"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;MockEmailService&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
   &lt;span class="n"&gt;emailMock&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;On&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Send"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"user@example.com"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Hi"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Return&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="no"&gt;nil&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;GoMock (Google’s Official Mocking Framework)&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Slightly more setup-heavy but works beautifully with interfaces&lt;/li&gt;
&lt;li&gt;Generates mocks via &lt;code&gt;mockgen&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Docs: &lt;a href="https://github.com/golang/mock" rel="noopener noreferrer"&gt;https://github.com/golang/mock&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  🧪 Real World Example: Testing a Signup Flow
&lt;/h3&gt;

&lt;p&gt;Let’s say you’ve got a &lt;code&gt;signupUser&lt;/code&gt; function that does the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Saves the user to DB&lt;/li&gt;
&lt;li&gt;Sends a welcome email&lt;/li&gt;
&lt;li&gt;Logs a signup event&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;You don’t want your test to:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Actually save to the DB&lt;/li&gt;
&lt;li&gt;Actually send an email&lt;/li&gt;
&lt;li&gt;Actually log events to a service&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You want to &lt;strong&gt;mock those services&lt;/strong&gt; and just check:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Hey, did they get called when I expected them to?”&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  🚀 Benefits of Using Mocks
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;✅ Faster tests (no real network calls)&lt;/li&gt;
&lt;li&gt;✅ More reliable (no flaky external failures)&lt;/li&gt;
&lt;li&gt;✅ Easier to isolate logic&lt;/li&gt;
&lt;li&gt;✅ Lets you simulate edge cases &amp;amp; errors easily&lt;/li&gt;
&lt;li&gt;✅ Clean architecture (forces you to use interfaces 👀)&lt;/li&gt;
&lt;/ul&gt;




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

&lt;p&gt;Mocking is one of those testing tools that once you get it, you &lt;strong&gt;never stop using it&lt;/strong&gt;. It's not about skipping real tests—those still matter. It’s about giving your core logic a safe, fast sandbox to play in.&lt;/p&gt;

&lt;p&gt;If you're serious about backend dev, mocking should absolutely be in your toolbox.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧵 TL;DR:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Don’t test real dependencies every time.&lt;/li&gt;
&lt;li&gt;Mock services you don’t control or don’t need to verify deeply.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;jest&lt;/code&gt;, &lt;code&gt;sinon&lt;/code&gt;, &lt;code&gt;testify/mock&lt;/code&gt;, or &lt;code&gt;gomock&lt;/code&gt; depending on your stack.&lt;/li&gt;
&lt;li&gt;Write tests that are focused, fast, and less flaky.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>The Layers of the Backend</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Sat, 26 Jul 2025 21:51:32 +0000</pubDate>
      <link>https://dev.to/m13ha/the-layers-of-the-backend-15ko</link>
      <guid>https://dev.to/m13ha/the-layers-of-the-backend-15ko</guid>
      <description>&lt;p&gt;One of the perks of working as a Software Developer at my current job is that I’ve gotten to see software development from a bunch of different angles. I’ve built stuff, shipped stuff, watched stuff break, and fixed it again. I’ve seen how infrastructure, while often behind the scenes, quietly shapes the cost and design of everything we build. But the part I’ve probably enjoyed the most? Learning how to structure large-scale backend systems. And that’s exactly what this piece is about.&lt;/p&gt;

&lt;h3&gt;
  
  
  So… What’s a “Layer”?
&lt;/h3&gt;

&lt;p&gt;Let’s back up a bit.&lt;/p&gt;

&lt;p&gt;Think of software like an onion. Not because it makes you cry (although… sometimes 👀), but because it has layers. Frontend, backend, database, infrastructure—all stacked together. But even within those broad categories, there are &lt;em&gt;more&lt;/em&gt; layers hiding inside.&lt;/p&gt;

&lt;p&gt;I used to think the backend was just APIs and a database. Request comes in, we fetch some stuff, maybe save some stuff, return a response—done. But over time, I realized there’s a better way to break things up. Just like the frontend has things like components or MVC (model-view-controller), the backend also benefits from a layered structure.&lt;/p&gt;

&lt;p&gt;Here’s the version that’s stuck with me the most: &lt;strong&gt;API → Service → Repository&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Let’s peel each one open.&lt;/p&gt;




&lt;h3&gt;
  
  
  🛣️ API Layer
&lt;/h3&gt;

&lt;p&gt;This is what talks directly to the outside world—your routes, your endpoints. It's where the frontend (or any external tool) makes a request. The API layer’s job is simple:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Handle routing&lt;/li&gt;
&lt;li&gt;Authenticate the request&lt;/li&gt;
&lt;li&gt;Validate input&lt;/li&gt;
&lt;li&gt;Pass things along to the &lt;strong&gt;Service Layer&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This layer should stay clean. No business logic here. Just making sure things are secure, valid, and sent to the right place.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧠 Service Layer
&lt;/h3&gt;

&lt;p&gt;This is where your app's brain lives.&lt;/p&gt;

&lt;p&gt;All the business logic, the transformations, the “what should happen when X is true and Y is false” rules go here. You want to update a user’s profile picture? This is where the magic happens.&lt;/p&gt;

&lt;p&gt;Need to call multiple repositories? Talk to an external service? Fire off an event? All that happens here.&lt;/p&gt;

&lt;p&gt;And if you need to save or fetch anything, you call...&lt;/p&gt;




&lt;h3&gt;
  
  
  💾 Repository Layer
&lt;/h3&gt;

&lt;p&gt;This layer handles all things database. No fancy logic. Just pure CRUD:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Save data&lt;/li&gt;
&lt;li&gt;Fetch data&lt;/li&gt;
&lt;li&gt;Update data&lt;/li&gt;
&lt;li&gt;Delete data&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Keeping it separate makes things easier to test and reuse. It’s like your backend’s personal librarian—knows where everything is, doesn’t mess with it.&lt;/p&gt;




&lt;h3&gt;
  
  
  📜 A Real-ish Example
&lt;/h3&gt;

&lt;p&gt;Here’s what this looks like in a less structured setup. Imagine this all inside one giant API function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;UpdateUsernameHandler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt; &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;ResponseWriter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c"&gt;// Auth check&lt;/span&gt;
    &lt;span class="n"&gt;userID&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Header&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"X-User-ID"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;userID&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Unauthorized"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;StatusUnauthorized&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="c"&gt;// Parse request&lt;/span&gt;
    &lt;span class="k"&gt;var&lt;/span&gt; &lt;span class="n"&gt;req&lt;/span&gt; &lt;span class="k"&gt;struct&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;Username&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="s"&gt;`json:"username"`&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;NewDecoder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Body&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;req&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="n"&gt;req&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Username&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Invalid request"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;StatusBadRequest&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="c"&gt;// Update DB&lt;/span&gt;
    &lt;span class="n"&gt;db&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Exec&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"UPDATE users SET username = ? WHERE id = ?"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;req&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;userID&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c"&gt;// Return response&lt;/span&gt;
    &lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;WriteHeader&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;StatusOK&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Write&lt;/span&gt;&lt;span class="p"&gt;([]&lt;/span&gt;&lt;span class="kt"&gt;byte&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Username updated"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, this &lt;em&gt;works&lt;/em&gt;, but imagine repeating that for every route. It becomes this spaghetti mess of auth checks, validation, business logic, and DB stuff all mashed together.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧼 Cleaner Version (With Layers)
&lt;/h3&gt;

&lt;p&gt;Let’s split it up.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;API Layer:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;UpdateUsernameHandler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt; &lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;ResponseWriter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;userID&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;GetUserIDFromHeader&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;userID&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;respondUnauthorized&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&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="n"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;ParseAndValidateUsernameRequest&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;respondBadRequest&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;err&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="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;userService&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;UpdateUsername&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;userID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;req&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Username&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;respondServerError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;err&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="n"&gt;respondSuccess&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"Username updated"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Service Layer:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;s&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;UserService&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;UpdateUsername&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;userID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;newUsername&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kt"&gt;error&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nb"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;newUsername&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="m"&gt;3&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;errors&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;New&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"username too short"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c"&gt;// Optional: check if username already taken&lt;/span&gt;
    &lt;span class="n"&gt;exists&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;DoesUsernameExist&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;newUsername&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;exists&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;errors&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;New&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"username already exists"&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="n"&gt;s&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;repo&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;UpdateUsername&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;userID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;newUsername&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Repository Layer:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;UserRepo&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;UpdateUsername&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;userID&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;newUsername&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kt"&gt;error&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;_&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;db&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Exec&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"UPDATE users SET username = ? WHERE id = ?"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;newUsername&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;userID&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;UserRepo&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;DoesUsernameExist&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;username&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;bool&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;var&lt;/span&gt; &lt;span class="n"&gt;count&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt;
    &lt;span class="n"&gt;err&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;db&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;QueryRow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"SELECT COUNT(*) FROM users WHERE username = ?"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;username&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Scan&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;count&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;count&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;err&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Why Bother?
&lt;/h3&gt;

&lt;p&gt;This way of writing code is called &lt;strong&gt;Separation of Concerns&lt;/strong&gt;, and once it clicks, it’s hard to go back.&lt;/p&gt;

&lt;p&gt;Breaking things into layers helps you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reuse code (validation, auth, DB access)&lt;/li&gt;
&lt;li&gt;Write smaller, focused functions&lt;/li&gt;
&lt;li&gt;Test easily (mock a service, test a repo)&lt;/li&gt;
&lt;li&gt;Onboard teammates without overwhelming them&lt;/li&gt;
&lt;li&gt;Debug faster&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each layer has its own job. No one’s stepping on anyone else’s toes. You can evolve and scale your app without turning it into an unmaintainable nightmare.&lt;/p&gt;




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

&lt;p&gt;This isn’t some strict rule. But once you start building bigger apps with more moving parts, splitting your code into layers will save your sanity. Just like onions add flavour to food (and tears to your eyes), backend layers add structure to your code (and prevent future crying during refactors 😅).&lt;/p&gt;

&lt;p&gt;If you’ve ever struggled to keep things clean in your backend or found your functions growing out of control, give layering a shot.&lt;/p&gt;

&lt;p&gt;Your future self will thank you.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Riding the AI Coding Wave Without Drowning Your Skills</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Sat, 12 Jul 2025 22:57:50 +0000</pubDate>
      <link>https://dev.to/m13ha/riding-the-ai-coding-wave-without-drowning-your-skills-386f</link>
      <guid>https://dev.to/m13ha/riding-the-ai-coding-wave-without-drowning-your-skills-386f</guid>
      <description>&lt;p&gt;AI has become a &lt;strong&gt;huge part of my development workflow&lt;/strong&gt; from frontend to backend, all the way to DevOps. It’s fast, efficient, and lets me focus on the big-picture stuff. But recently, I caught myself just... &lt;strong&gt;vibing&lt;/strong&gt; copy-pasting my way through the day. 😅&lt;/p&gt;

&lt;p&gt;And while that can be tempting (especially on tight deadlines), I realised I needed to put some &lt;strong&gt;guardrails in place&lt;/strong&gt; to keep learning, keep thinking, and not let my skills go soft.&lt;/p&gt;

&lt;p&gt;So here are my &lt;strong&gt;5 go-to rules&lt;/strong&gt; to ride the AI coding wave like a pro &lt;em&gt;without becoming over-reliant&lt;/em&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  1. 🧠 Understand Before You Build
&lt;/h3&gt;

&lt;p&gt;This is my remix of that classic line:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"Measure 20 times, cut once. Sharpen 1000 times... cut once."&lt;/em&gt; (okay, maybe too many cutting metaphors 😅)&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The idea? &lt;strong&gt;Don’t dive in blind.&lt;/strong&gt;.&lt;br&gt;
Before I write any code, whether it’s AI-assisted or not, I try to &lt;strong&gt;visualise the structure&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What’s the goal?&lt;/li&gt;
&lt;li&gt;What are the components?&lt;/li&gt;
&lt;li&gt;How will each part talk to the other?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Having a mental blueprint makes it easier to prompt AI &lt;em&gt;intentionally&lt;/em&gt;, and helps keep my thinking sharp.&lt;/p&gt;




&lt;h3&gt;
  
  
  2. ✍️ Write What You Can
&lt;/h3&gt;

&lt;p&gt;Writing code is how you &lt;strong&gt;really learn&lt;/strong&gt;.&lt;br&gt;
So I make a conscious effort to &lt;strong&gt;write as much of the code as I can myself&lt;/strong&gt; especially logic-heavy parts, tricky loops, or things I want to get better at.&lt;/p&gt;

&lt;p&gt;I might still ask AI for ideas, examples, or edge cases, but I don’t outsource the whole process.&lt;br&gt;
That would be like going to the gym and making the weights lift themselves.&lt;/p&gt;




&lt;h3&gt;
  
  
  3. 🔍 Review, Review, Review
&lt;/h3&gt;

&lt;p&gt;Never just copy-paste blindly.&lt;br&gt;
Every time AI gives me code, I go into &lt;strong&gt;review mode&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Can this be cleaner?&lt;/li&gt;
&lt;li&gt;Can I split this into smaller functions?&lt;/li&gt;
&lt;li&gt;Do I understand what each line does?&lt;/li&gt;
&lt;li&gt;Is there a better pattern to use?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ironically, AI has made me &lt;strong&gt;better at code reviewing&lt;/strong&gt;, which is a superpower in team environments.&lt;/p&gt;




&lt;h3&gt;
  
  
  4. 🧪 Test Everything
&lt;/h3&gt;

&lt;p&gt;You guessed it: &lt;strong&gt;Test. Test. Test.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;AI makes assumptions. Sometimes it gets edge cases wrong.&lt;br&gt;
Sometimes &lt;em&gt;you&lt;/em&gt; forget to mention a critical detail in your prompt. Either way, if you don’t test, you’re flying blind.&lt;/p&gt;

&lt;p&gt;So yeah, I test AI code like I wrote it myself. Because if it breaks, that’s on me.&lt;/p&gt;




&lt;h3&gt;
  
  
  5. ☀️ Enjoy the Process
&lt;/h3&gt;

&lt;p&gt;This one’s underrated.&lt;br&gt;
Whether it’s debugging a stubborn bug or tweaking a layout for the 100th time, &lt;strong&gt;coding with AI should still feel creative and fun&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It’s easy to feel like AI is doing all the work, but when you’re intentional with your prompts, thinking deeply, and making decisions &lt;em&gt;you’re still in the driver’s seat&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Enjoy it. Learn from it. Grow with it.&lt;/p&gt;




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

&lt;p&gt;AI isn’t here to replace us; it’s here to amplify us.&lt;br&gt;
But only if we stay &lt;strong&gt;sharp&lt;/strong&gt;, &lt;strong&gt;curious&lt;/strong&gt;, and &lt;strong&gt;engaged&lt;/strong&gt;. These 5 rules help me code faster &lt;em&gt;and&lt;/em&gt; better, without losing that developer edge.&lt;/p&gt;

&lt;p&gt;So the next time you feel like you’re just vibing through your code, pause and check:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Are you building... or are you just pasting?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let’s ride the AI wave &lt;strong&gt;with skill&lt;/strong&gt;, not just speed. 🏄‍♂️💻&lt;/p&gt;




&lt;p&gt;🧡 If you found this helpful, let’s connect.&lt;br&gt;
Drop your favourite “AI + Dev” tips in the comments. I’m always down to learn more.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>ai</category>
      <category>beginners</category>
    </item>
    <item>
      <title>AI Is Dumb — And You Should Be Too (Here’s Why)</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Sun, 29 Jun 2025 20:45:28 +0000</pubDate>
      <link>https://dev.to/m13ha/ai-is-dumb-and-you-should-be-too-heres-why-4e15</link>
      <guid>https://dev.to/m13ha/ai-is-dumb-and-you-should-be-too-heres-why-4e15</guid>
      <description>&lt;p&gt;In a world where AI is becoming more prevalent, it’s more necessary than ever for us as junior developers to ensure we’re using AI responsibly. One key approach to achieving this is by understanding and applying core clean code principles — not just in our coding, but also in how we &lt;em&gt;communicate&lt;/em&gt; with AI tools.&lt;/p&gt;

&lt;p&gt;Why? Because writing great prompts is a lot like writing clean, maintainable code. Whether you're using ChatGPT, GitHub Copilot, or any other AI assistant, the way you ask matters. Prompts are the new code comments. They direct behaviour, define logic, and determine results.&lt;/p&gt;

&lt;p&gt;Here are &lt;strong&gt;5 essential clean code principles&lt;/strong&gt; you can apply to your prompting style and AI usage — they’ll help you get better, more useful responses and cleaner, more maintainable code.&lt;/p&gt;




&lt;h3&gt;
  
  
  1. 🧠 &lt;strong&gt;KISS – Keep It Simple, Stupid&lt;/strong&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"Complex prompts confuse both AI and humans."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When prompting AI, avoid long-winded or overly complex instructions. Break big questions into smaller ones. This mirrors how you'd break a large function into smaller, more manageable pieces.&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;Example Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Write a function in Go to check if a number is prime. Use a loop.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;❌ &lt;strong&gt;Avoid:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Write a fully optimised algorithm that determines prime status using multiple approaches and benchmark them with edge cases for performance analysis in Go.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Simple wins. Start small, build up.&lt;/p&gt;




&lt;h3&gt;
  
  
  2. 🧱 &lt;strong&gt;SRP – Single Responsibility Principle&lt;/strong&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"A prompt should do one thing well."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Just like functions shouldn’t do multiple unrelated tasks, prompts should focus on &lt;strong&gt;one clear request at a time&lt;/strong&gt;. This reduces ambiguity and improves the quality of the AI’s response.&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;Example Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Explain how to use Tailwind CSS to create a responsive navbar.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you also want to add dark mode, &lt;strong&gt;ask that as a separate prompt&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  3. ✂️ &lt;strong&gt;YAGNI – You Aren’t Gonna Need It&lt;/strong&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"Don’t overprompt for things you don’t need yet."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sometimes we’re tempted to ask for all possible use cases, error handling, and optimisation at once. But just like in coding, this leads to bloated, harder-to-read output.&lt;/p&gt;

&lt;p&gt;✅ Prompt only what you &lt;em&gt;need now&lt;/em&gt;. You can always refine it later.&lt;br&gt;
This also keeps your output manageable, especially when you're learning.&lt;/p&gt;




&lt;h3&gt;
  
  
  4. 🧪 &lt;strong&gt;Write Testable Code (or Prompts!)&lt;/strong&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"Prompt in a way that allows you to validate and understand the output."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A good prompt should generate output you can test, tweak, and reuse. Ask for small code chunks or explanations with comments so you can follow along and &lt;em&gt;learn&lt;/em&gt;, not just copy-paste.&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;Better Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Can you add inline comments to explain what this function is doing?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This makes debugging and learning easier a win for responsible AI use.&lt;/p&gt;




&lt;h3&gt;
  
  
  5. 📦 &lt;strong&gt;Prefer Composition Over Inheritance&lt;/strong&gt;
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"Build complex prompts from simple, reusable parts."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;AI thrives when you build prompts step-by-step. Instead of asking for an entire app or full module, ask for small building blocks (like reusable components or services), then &lt;strong&gt;compose&lt;/strong&gt; them.&lt;/p&gt;

&lt;p&gt;✅ Example Flow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Ask for a login form UI&lt;/li&gt;
&lt;li&gt;Then ask for a function to handle login&lt;/li&gt;
&lt;li&gt;Then ask how to connect that logic to an API&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This mirrors good development practices — modular, maintainable, understandable.&lt;/p&gt;




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

&lt;p&gt;AI isn’t a magic wand. It’s a tool and like every tool, its value depends on how you use it. As junior developers, it’s not just about &lt;em&gt;getting the job done&lt;/em&gt; with AI, it’s about &lt;em&gt;learning how to do the job better&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;By applying these clean code principles to your prompting, you’ll write better code, understand your tools more deeply, and develop habits that will future-proof your career, even in an AI-driven world.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Let’s build with intention, not just speed. AI is powerful but clean, thoughtful input is still king. 👑&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>ai</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How Network Communication Actually Works</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Sun, 02 Feb 2025 18:35:00 +0000</pubDate>
      <link>https://dev.to/m13ha/how-network-communication-actually-works-en5</link>
      <guid>https://dev.to/m13ha/how-network-communication-actually-works-en5</guid>
      <description>&lt;p&gt;Recently I went down a bit of a rabbit hole while working on some backend stuff. Coming from frontend development, I never really thought about &lt;em&gt;how&lt;/em&gt; data moves around behind the scenes I just sent API requests and got responses, wham and done. But once I started digging into network communication, I realized there's a whole structure to it, and it’s kind of fascinating.&lt;/p&gt;

&lt;p&gt;Turns out, when devices talk to each other, they don’t all communicate in the same way. There are three main modes: &lt;strong&gt;simplex, half-duplex, and full-duplex&lt;/strong&gt;. And yeah, I had heard the terms before, but I never actually &lt;em&gt;thought&lt;/em&gt; about what they meant. Now that I get it, I’m seeing them everywhere.&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%2Fpco6bxntb7ots4691a35.gif" 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%2Fpco6bxntb7ots4691a35.gif" alt=" " width="760" height="427"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Simplex Communication: The One-Way Street&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;This one’s easy to understand. Imagine a one-way street: cars (or data) only go in &lt;em&gt;one&lt;/em&gt; direction. That’s simplex. There’s no back-and-forth, just a continuous flow from sender to receiver.&lt;/p&gt;

&lt;p&gt;🚦 &lt;strong&gt;Where this shows up in real life:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;TV and radio broadcasts&lt;/strong&gt; – The station sends out a signal, and we just receive it. No way to "talk back" to the station.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Keyboards&lt;/strong&gt; – When you type, the data goes to the computer, but the keyboard itself isn’t receiving any data back.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Simplex is fine when you just need a steady stream of data going out, but obviously, it’s not great when two-way communication is needed.&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%2Fwzb3na1vcabqyj8rzy25.gif" 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%2Fwzb3na1vcabqyj8rzy25.gif" alt=" " width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Half-Duplex: The Walkie-Talkie System&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Half-duplex is when two devices can talk to each other, but &lt;em&gt;not at the same time&lt;/em&gt;. It’s like using a walkie-talkie only one person can speak at a time, and they have to wait for the other to finish before responding.&lt;/p&gt;

&lt;p&gt;🎤 &lt;strong&gt;Where half-duplex is used:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Old Ethernet networks&lt;/strong&gt; – Back in the day, Ethernet networks had to take turns sending and receiving data.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Two-way radios&lt;/strong&gt; – Classic example. You say "Over," and then the other person replies.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It works, but it’s not the fastest or most efficient system. Still, it’s useful when bandwidth is limited, and devices need to share a communication channel.&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%2F7y6vo22yoabwsv9z8yot.gif" 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%2F7y6vo22yoabwsv9z8yot.gif" alt=" " width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Full-Duplex: The Smooth Conversation&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Now, this is the good stuff. Full-duplex means data flows &lt;em&gt;both&lt;/em&gt; ways at the same time just like a normal conversation. You don’t have to wait your turn; both sides can send and receive data simultaneously.&lt;/p&gt;

&lt;p&gt;⚡ &lt;strong&gt;Where full-duplex shines:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Modern Ethernet&lt;/strong&gt; – Most networks today use full-duplex, meaning devices can upload and download data at the same time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;TCP/IP (Internet communication)&lt;/strong&gt; – The internet as we know it wouldn’t work well without full-duplex communication.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Phone calls&lt;/strong&gt; – Imagine if you had to take turns speaking like a walkie-talkie. That would be weird.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is obviously the best mode when speed and real-time interaction are important like video calls, gaming, or any kind of live communication.&lt;/p&gt;

&lt;p&gt;I’ve never thought about this stuff before, but now I can’t unsee it. These communication modes are everywhere, affecting everything from how websites load to how streaming services work. And if you’re working on backend systems, understanding &lt;em&gt;how&lt;/em&gt; data moves around helps make better decisions about performance, scalability, and protocol choices.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;About the Author&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Michael Nwaokocha is a software developer from Lagos, Nigeria. He enjoys building web apps with tools like JavaScript, React, Node.js, and Go. With a BSc Degree in Entrepreneurship, He likes solving problems and creating things that are easy to use. In his free time, he is usually learning or working on personal projects.&lt;/p&gt;

&lt;p&gt;You can connect with him on &lt;a href="https://www.linkedin.com/in/m13ha/" rel="noopener noreferrer"&gt;&lt;strong&gt;LinkedIn&lt;/strong&gt;&lt;/a&gt;, check out his projects on &lt;a href="https://github.com/m13ha" rel="noopener noreferrer"&gt;&lt;strong&gt;GitHub&lt;/strong&gt;&lt;/a&gt;, or visit his &lt;a href="https://m13ha.hashnode.dev/" rel="noopener noreferrer"&gt;&lt;strong&gt;blog&lt;/strong&gt;&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>backend</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Leveraging CSS Units for Responsive Web Design: A Detailed Study of Rem, Px, and Em</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Sat, 03 Feb 2024 17:07:41 +0000</pubDate>
      <link>https://dev.to/m13ha/leveraging-css-units-for-responsive-web-design-a-detailed-study-of-rem-px-and-em-n9n</link>
      <guid>https://dev.to/m13ha/leveraging-css-units-for-responsive-web-design-a-detailed-study-of-rem-px-and-em-n9n</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;When it comes to web development, CSS units play a crucial role in defining the size and spacing of elements on a page. Three commonly used units are &lt;code&gt;rem&lt;/code&gt;, &lt;code&gt;px&lt;/code&gt;, and &lt;code&gt;em&lt;/code&gt;. Each has its own unique characteristics and use cases, and understanding their differences can empower developers to create more flexible and maintainable designs.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Rem (Root Em)
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Rem&lt;/code&gt;, short for "root em," is a relative unit that is based on the root element's font size. Unlike &lt;code&gt;em&lt;/code&gt;, which is relative to the parent element's font size, &lt;code&gt;rem&lt;/code&gt; always refers to the font size of the root element (usually the HTML element). This makes &lt;code&gt;rem&lt;/code&gt; a powerful and predictable unit for maintaining consistency across the entire page.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use Cases for Rem:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Global Sizing&lt;/strong&gt;: &lt;code&gt;Rem&lt;/code&gt; is ideal for setting global font sizes, ensuring a consistent and scalable typography system across the entire website.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Responsive Layouts&lt;/strong&gt;: When defining margins, padding, or any other spacing-related properties, &lt;code&gt;rem&lt;/code&gt; allows for easy adjustments across different screen sizes, making your design responsive without the need for complex calculations.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  2. Px (Pixels)
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Px&lt;/code&gt;, or pixels, is an absolute unit that provides a fixed-size reference. Unlike relative units, &lt;code&gt;px&lt;/code&gt; does not scale with the browser's default font size or the parent element's font size. Pixels are a precise unit of measurement, making them suitable for situations where exact control over the size of an element is essential.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use Cases for Px:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pixel-Perfect Designs&lt;/strong&gt;: When you need precise control over the size of elements, such as images or fixed-width containers, &lt;code&gt;px&lt;/code&gt; is the go-to unit for achieving pixel-perfect designs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Print Stylesheets&lt;/strong&gt;: In scenarios where print stylesheets are essential, using &lt;code&gt;px&lt;/code&gt; ensures that the printed output retains the intended size and layout, as it is not affected by the user's browser settings.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. Em (Relative to Parent)
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Em&lt;/code&gt; is a relative unit that is based on the font size of the parent element. This makes &lt;code&gt;em&lt;/code&gt; a flexible unit for defining sizes in a way that adapts to the surrounding context. Keep in mind that nesting &lt;code&gt;em&lt;/code&gt; units can result in compounding effects, making it important to understand the hierarchy of your elements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use Cases for Em:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalable Typography&lt;/strong&gt;: &lt;code&gt;Em&lt;/code&gt; is commonly used for defining font sizes within specific elements. It allows for scalable typography that adapts to changes in the parent element's font size.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Flexible Layouts&lt;/strong&gt;: When specifying margins, padding, or any other size-related properties, &lt;code&gt;em&lt;/code&gt; is useful for creating layouts that respond to changes in the font size of the parent element.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;In the world of web development, choosing the right CSS unit is essential for creating flexible, responsive, and maintainable designs. &lt;code&gt;Rem&lt;/code&gt;, &lt;code&gt;px&lt;/code&gt;, and &lt;code&gt;em&lt;/code&gt; each have their own strengths and use cases, allowing developers to craft websites that not only look great but also adapt seamlessly to various screen sizes and user preferences. By mastering these units, you'll be better equipped to create a web experience that caters to the diverse needs of your audience.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>frontend</category>
      <category>css</category>
    </item>
    <item>
      <title>Algorithms: Bubble Sort</title>
      <dc:creator>Michael N.</dc:creator>
      <pubDate>Wed, 28 Sep 2022 17:05:52 +0000</pubDate>
      <link>https://dev.to/m13ha/algorithms-bubble-sort-k0</link>
      <guid>https://dev.to/m13ha/algorithms-bubble-sort-k0</guid>
      <description>&lt;h3&gt;
  
  
  Introduction
&lt;/h3&gt;

&lt;p&gt;Bubble sort, also known as sinking sort, is a sorting algorithm that works by looping through an array or list of elements, comparing two elements at a time and swapping them if necessary. It does this until all elements are properly ordered. Let's look at an example of this in action.&lt;/p&gt;

&lt;h3&gt;
  
  
  Visualization
&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%2F2ota8hv6h0oibuv69e8z.gif" 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%2F2ota8hv6h0oibuv69e8z.gif" alt="Bubble sort animation" width="1440" height="810"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The algorithm starts at the first card &lt;strong&gt;[8]&lt;/strong&gt; and compares it to the adjacent card &lt;strong&gt;[3]&lt;/strong&gt;, since &lt;strong&gt;[8]&lt;/strong&gt; is greater than &lt;strong&gt;[3]&lt;/strong&gt; so they swap positions, this is the core concept of bubble sort. &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%2F0jt0dqtvrogo73c1m257.gif" 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%2F0jt0dqtvrogo73c1m257.gif" alt="bubble sort animation" width="600" height="338"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The algorithm moves through the list checking two elements at a time until each element is in its proper position.&lt;/p&gt;

&lt;h3&gt;
  
  
  Implementation
&lt;/h3&gt;

&lt;p&gt;Let's break down this algorithm into steps before writing it out in code, so we understand how it works.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Loop through the array or list.&lt;/li&gt;
&lt;li&gt;As we loop check if the current element is less than or greater than the next element.&lt;/li&gt;
&lt;li&gt;If the current element is greater, then swap the position of the elements, otherwise move to the next element.&lt;/li&gt;
&lt;li&gt;Repeat until no swapping occurs.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The above steps look like this in javascript code&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;bubbleSort&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&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;var&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;array&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="c1"&gt;// loop&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;array&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="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;array&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="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;array&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="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;array&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="p"&gt;{&lt;/span&gt; &lt;span class="c1"&gt;//comprare&lt;/span&gt;
       &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;currentIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&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="nx"&gt;array&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="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&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="c1"&gt;// swap&lt;/span&gt;
       &lt;span class="nx"&gt;array&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="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;currentIndex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// swap&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;array&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There's a problem with the above code, it will only loop through the array once, we need a way to keep the loop going until all elements in the array are sorted and then exit the loop, for this we use a boolean to represent the current state of the array and a while loop to keep the loop going until the state of the array is sorted. In javascript code, the algorithm looks like this.&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;bubbleSort&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&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;unsorted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;unsorted&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt; 
    &lt;span class="nx"&gt;unsorted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&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;var&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;array&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="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&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="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;array&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="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;array&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="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;array&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="p"&gt;{&lt;/span&gt;
       &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;currentIndex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&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="nx"&gt;array&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="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;array&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="nx"&gt;array&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="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;currentIndex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
       &lt;span class="nx"&gt;unsorted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&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="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above function, we initialize a variable called unsorted and set the value to &lt;strong&gt;&lt;em&gt;true&lt;/em&gt;&lt;/strong&gt;, while unsorted remains &lt;strong&gt;&lt;em&gt;true&lt;/em&gt;&lt;/strong&gt; we shall keep looping through the array, when we enter the while loop we assume that we will find the array sorted so we set unsorted to &lt;strong&gt;&lt;em&gt;false&lt;/em&gt;&lt;/strong&gt; if the array is not sorted, which we will know when a swap occurs we set unsorted to true and loop through the array again. Only when a swap does not occur and unsorted remains false till the end of the for loop do we end the function because that means the array is sorted.&lt;/p&gt;

&lt;h3&gt;
  
  
  Time Complexity of Bubble Sort
&lt;/h3&gt;

&lt;p&gt;Bubble sort has a worst and average complexity of &lt;strong&gt;O(n&lt;sup&gt;2&lt;/sup&gt;)&lt;/strong&gt;, compared to other sorting algorithms, bubble sort ranks very low in efficiency and it is recommended that programmers do not use it when solving real-world problems.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion.
&lt;/h3&gt;

&lt;p&gt;Bubble sort is meant to be an educational tool to introduce newbie programmers to the concept of algorithms as it is easy to understand and implement.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>codenewbie</category>
      <category>algorithms</category>
      <category>computerscience</category>
    </item>
  </channel>
</rss>
