<?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: Muhammad Usman</title>
    <description>The latest articles on DEV Community by Muhammad Usman (@web_dev-usman).</description>
    <link>https://dev.to/web_dev-usman</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%2F2467689%2F7cef2b13-fd64-49a8-b296-bac4c5962ec3.png</url>
      <title>DEV Community: Muhammad Usman</title>
      <link>https://dev.to/web_dev-usman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/web_dev-usman"/>
    <language>en</language>
    <item>
      <title>Why Settle for a Boring Internet When We Can Build Something Unforgettable?</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Thu, 16 Apr 2026 08:14:40 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/why-settle-for-a-boring-internet-when-we-can-build-something-unforgettable-41l3</link>
      <guid>https://dev.to/web_dev-usman/why-settle-for-a-boring-internet-when-we-can-build-something-unforgettable-41l3</guid>
      <description>&lt;p&gt;For the past 5 years, I’ve been designing, developing, and optimizing WordPress websites with just one goal in mind, making them perform in search.&lt;/p&gt;

&lt;p&gt;I’ve always been fascinated by how a few well-chosen and well-written words can make a website come alive in search results. To me, SEO isn’t just about rankings, it’s all about a mix of curiosity, problem-solving, and storytelling.&lt;/p&gt;

&lt;p&gt;I love digging into analytics like a detective, always experimenting with strategies, and seeing the absolute great results in real-time.&lt;/p&gt;

&lt;p&gt;Each success have taught me something new about human behavior and search patterns of every platform. When I’m not optimizing websites, I’m always exploring new trends, testing new tools, or writing content that connects with real people.&lt;/p&gt;

&lt;p&gt;I’ve spent the last 5 years in designing and developing websites that don’t just look good, but actually performs very well in search engines. As for me, SEO always comes first, making sites fast, secure, and responsive.&lt;/p&gt;

&lt;p&gt;Then shifting in the technical work like Core Web Vitals, site architecture, and schema markup. Along the way, I’ve tested on page and off-page strategies, fine-tuned speed, and seen the results in real numbers organic traffic tripling, business priority keywords slowly climbing into the top 3, and clean builds that both Google and real users trust, and don’t forget other search engines and AI as well.&lt;/p&gt;

&lt;p&gt;My work goes far beyond just visuals, it has a deep technical as well. I focus on building clean, scalable WordPress Websites using custom themes, optimized PHP functions, and absolutely lightweight CSS/JS frameworks to keep performance tight.&lt;/p&gt;

&lt;p&gt;Every element I have developed so far is designed to load fast, pass Core Web Vitals, and maintain the long-term stability. I regularly work with WP GraphQL, REST APIs, and custom post types to create flexible, content-driven backends that integrate smoothly with frontend frameworks.&lt;/p&gt;

&lt;p&gt;And building fully custom WooCommerce stores to handling complex product logic, I always prioritize clean, maintainable code that’s built to last longer than ever. On the SEO side, I focus on the foundation indexing structure, schema markup, canonicalization, XML sitemaps, and crawl efficiency. I run technical audits, fix rendering issues, and making sure that every site communicates clearly with search engines and your users.&lt;/p&gt;

&lt;p&gt;Every project is backed by performance monitoring, CDN setup, caching, and DNS-level optimization to keep sites absolutely fast and stable. I’ve spent years refining my skill and workflow around speed, structure, and scalability, the three pillars of every truly high-performing website.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>productivity</category>
      <category>career</category>
      <category>learning</category>
    </item>
    <item>
      <title>Anthropic Just Dropped the Bomb on AI called Claude Mythos.</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Mon, 13 Apr 2026 08:18:01 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/anthropic-just-dropped-the-bomb-on-ai-called-claude-mythos-1ai</link>
      <guid>https://dev.to/web_dev-usman/anthropic-just-dropped-the-bomb-on-ai-called-claude-mythos-1ai</guid>
      <description>&lt;p&gt;They built the most powerful AI model in history. It can hack better than any human alive. So they refused to release it.&lt;/p&gt;

&lt;p&gt;A researcher was eating a sandwich in a park when his phone buzzed. It was an email from an AI he had locked in a sealed sandbox with zero internet access. The model had found a way out on its own.&lt;/p&gt;

&lt;p&gt;That model is Claude Mythos Preview. And I genuinely think this might be the most important AI announcement of 2026.&lt;/p&gt;




&lt;p&gt;It is not because of what it does for you and me right now. Because of what it reveals about what Anthropic actually has sitting in their labs.&lt;/p&gt;

&lt;h3&gt;
  
  
  So, what is Project Glasswing?
&lt;/h3&gt;

&lt;p&gt;Earlier this week, Anthropic announced something called &lt;a href="https://www.anthropic.com/glasswing" rel="noopener noreferrer"&gt;Project Glasswing&lt;/a&gt;&lt;strong&gt;.&lt;/strong&gt; Buried inside that announcement is a model called Claude Mythos Preview.&lt;/p&gt;

&lt;p&gt;This model is not available to you or me. It is not on the API. You cannot buy access. There is no waitlist. And there is a very specific reason for that.&lt;/p&gt;

&lt;p&gt;This model can find and exploit software vulnerabilities better than any hacker alive. Better than every human security expert on earth. And Anthropic built it.&lt;/p&gt;

&lt;p&gt;Their response was not to release it and charge everyone for access. Their response was to partner with basically every major tech company in the world and use it to patch the internet before the bad guys figure out how to build the same thing.&lt;/p&gt;

&lt;p&gt;That is a fundamentally different kind of move.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Partners and the Money
&lt;/h3&gt;

&lt;p&gt;The coalition behind Glasswing includes AWS, Apple, Broadcom, Cisco, CrowdStrike, Google, JP Morgan, the Linux Foundation, Microsoft, NVIDIA, and Paloalto Networks.&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%2F7va49mywvex157k58vtn.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%2F7va49mywvex157k58vtn.png" width="800" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you know anything about the tech industry, that list should stop you cold. That is every major player in security and infrastructure sitting at the same table for the same reason.&lt;/p&gt;

&lt;p&gt;They have committed over &lt;strong&gt;$100 million in usage credits&lt;/strong&gt; to this project. On top of that, Anthropic put &lt;strong&gt;$4 million directly into open-source security organizations&lt;/strong&gt; and gave 40 additional organizations access to scan their own systems using this model.&lt;/p&gt;

&lt;p&gt;Companies do not write nine-figure checks for a press release. They wrote those checks because &lt;strong&gt;Claude Mythos Preview&lt;/strong&gt; has already found &lt;strong&gt;thousands of high-severity vulnerabilities&lt;/strong&gt; in every major operating system and every major browser. Things sitting on your machine right now that no human security team had found yet.&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%2Frcjrigo1m3x8w2kaas1m.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%2Frcjrigo1m3x8w2kaas1m.png" width="800" height="333"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Anthropic is essentially saying, "We found the holes before the bad guys found all of them." Now let us get them fixed.&lt;/p&gt;

&lt;h3&gt;
  
  
  What the Benchmark Numbers Actually Look Like
&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%2F0ewu4ss2by2fmegy2cwh.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%2F0ewu4ss2by2fmegy2cwh.png" width="800" height="567"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Agentic search and computer use&lt;/p&gt;

&lt;p&gt;The gap between Mythos and Opus 4.6, Anthropic’s current best public model, is not incremental. It is a different category entirely.&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%2Fnlku997huubvxnkge9wd.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%2Fnlku997huubvxnkge9wd.png" width="800" height="1025"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Agentic Coding&lt;/p&gt;

&lt;p&gt;On a single benchmark test developing exploits for Mozilla’s Firefox JavaScript engine, Opus 4.6 succeeded twice out of hundreds of attempts. Mythos succeeded &lt;strong&gt;181 times.&lt;/strong&gt; It also achieved full register control on 29 additional attempts on top of that.&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%2Flejf6c858hc7ecfbo2ac.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%2Flejf6c858hc7ecfbo2ac.png" width="800" height="453"&gt;&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%2Fsfui0qa0zvr4vmtrow03.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%2Fsfui0qa0zvr4vmtrow03.png" width="800" height="711"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Reasoning&lt;/p&gt;

&lt;p&gt;On Anthropic’s internal crash severity benchmark, Opus 4.6 hit the highest tier exactly once. Mythos hit it &lt;strong&gt;ten times on fully patched targets.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It found zero-day vulnerabilities, bugs nobody knew existed, in every major operating system and every major browser. The oldest bug it uncovered was a &lt;strong&gt;27-year-old vulnerability in OpenBSD&lt;/strong&gt;, an operating system built specifically around security. That bug has since been patched.&lt;/p&gt;

&lt;p&gt;And when human security experts reviewed its vulnerability reports, they agreed with Mythos’s severity rating &lt;strong&gt;89% of the time exactly.&lt;/strong&gt; In 98% of cases they were within one severity level.&lt;/p&gt;

&lt;p&gt;That is not an update. That is a completely different ceiling.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Real Story Here
&lt;/h3&gt;

&lt;p&gt;Here is what I actually want to talk about, because the security story is real and important, but it is not the whole story.&lt;/p&gt;

&lt;p&gt;The real story is what this announcement tells us about Anthropic’s capabilities right now.&lt;/p&gt;

&lt;p&gt;Think about it this way. The models we use today, Claude Sonnet, Claude Opus, those are what Anthropic deemed safe and ready for millions of people. But Mythos is not one of those. Mythos is something they built, and immediately decided this one does not go public.&lt;/p&gt;

&lt;p&gt;That means Anthropic has models in their lab right now that are significantly more capable than anything you or I have access to. That is not me reading between the lines. That is literally what they just announced.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The public Claude is not the best Claude. It never has been.&lt;/strong&gt; But this is the first time we have gotten a concrete signal about exactly how big that gap is.&lt;/p&gt;

&lt;h3&gt;
  
  
  What This Means for Builders
&lt;/h3&gt;

&lt;p&gt;If you are building with AI right now, this is genuinely exciting news.&lt;/p&gt;

&lt;p&gt;Every time a new Claude release goes public, it is not the newest thing Anthropic has. It is the thing they decided was ready. There is always a layer of capability above the public release that they are still red-teaming, still evaluating, and still figuring out how to make safe before it goes out to millions of people.&lt;/p&gt;

&lt;p&gt;That internal-to-external gap is probably getting wider over time, not narrower. Which means the public Claude releases coming at the end of this year are being built on internal foundations that already exceed what we are currently imagining.&lt;/p&gt;

&lt;p&gt;The people who are genuinely building habits around these tools today will have a real head start when those more capable public releases arrive. The gap between people who are actually building with AI and people watching from the sidelines is getting much bigger. Glasswing makes that undeniable.&lt;/p&gt;

&lt;h3&gt;
  
  
  What We Do Not Know
&lt;/h3&gt;

&lt;p&gt;I want to be straight with you here because I think that matters.&lt;/p&gt;

&lt;p&gt;We do not know the specific architecture. We do not know the costs, which could be a big one. We do not know the failure modes or what it is bad at. We do not know the timeline for when or whether any version of these capabilities becomes publicly available, if at all. Maybe some of this gets released in a more constrained form. Maybe certain capabilities stay restricted permanently. We genuinely just do not know.&lt;/p&gt;

&lt;p&gt;That is the nature of responsible disclosure in security work and it is appropriate given what this model can do.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Bottom Line
&lt;/h3&gt;

&lt;p&gt;Anthropic just positioned itself as something bigger than a chatbot company. They are building the security infrastructure of the internet and doing it with partners who wrote serious checks to be part of it.&lt;/p&gt;

&lt;p&gt;A specific model. A specific coalition. A specific set of capabilities that are too powerful to release but too important to ignore.&lt;/p&gt;

&lt;p&gt;If you think Opus and Sonnet are good now, it is just getting started. Anthropic just gave us a peek at how high the ceiling actually goes. And it is a lot higher than most people are ready for.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sources:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.anthropic.com/glasswing" rel="noopener noreferrer"&gt;Anthropic: Project Glasswing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://red.anthropic.com/2026/mythos-preview/" rel="noopener noreferrer"&gt;Technical security report&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www-cdn.anthropic.com/53566bf5440a10affd749724787c8913a2ae0841.pdf" rel="noopener noreferrer"&gt;244-page system card (PDF)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fortune.com/2026/03/26/anthropic-says-testing-mythos-powerful-new-ai-model-after-data-leak-reveals-its-existence-step-change-in-capabilities/" rel="noopener noreferrer"&gt;Fortune: Original data leak story&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today as a developer?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>ai</category>
      <category>opensource</category>
      <category>cybersecurity</category>
      <category>security</category>
    </item>
    <item>
      <title>The Standup Meeting Is Dead. AI Killed It.</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Fri, 10 Apr 2026 12:11:00 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/the-standup-meeting-is-dead-ai-killed-it-591</link>
      <guid>https://dev.to/web_dev-usman/the-standup-meeting-is-dead-ai-killed-it-591</guid>
      <description>&lt;p&gt;Every morning, thousands of developers stop what they are doing, join a call, and answer three questions.&lt;/p&gt;

&lt;p&gt;What did you do yesterday?&lt;br&gt;
What are you doing today?&lt;br&gt;
Any blockers?&lt;/p&gt;

&lt;p&gt;It made sense in 2005. It does not make sense in 2025.&lt;/p&gt;

&lt;p&gt;We automated everything except the meeting that was easiest to automate.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI Can Already Do Everything a Standup Was Designed to Do
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Summarize your commits from yesterday&lt;/li&gt;
&lt;li&gt;Generate a status update from your pull requests&lt;/li&gt;
&lt;li&gt;Flag blockers based on stalled tickets and unresolved dependencies&lt;/li&gt;
&lt;li&gt;Predict delays before they become emergencies&lt;/li&gt;
&lt;li&gt;Notify the right people without interrupting everyone else&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is not the future. That is available right now with tools like LinearB, Waydev, Allstacks, and even custom GPT workflows connected to your project management tools.&lt;/p&gt;

&lt;p&gt;So why are we still doing standups?&lt;/p&gt;

&lt;h2&gt;
  
  
  Habit. Comfort. The Illusion of Alignment.
&lt;/h2&gt;

&lt;p&gt;Standups were never really about information sharing. They were about managers feeling informed and teams performing productivity. AI does not perform. It just reports.&lt;/p&gt;

&lt;p&gt;And that is the uncomfortable truth most teams are not ready to face.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Standup Is Not a Communication Tool. It Is a Trust Problem in Disguise.
&lt;/h2&gt;

&lt;p&gt;When a team needs a daily meeting to know what everyone is working on, it means the system is not doing its job. The code, the tickets, the commits and the tools should tell that story automatically.&lt;/p&gt;

&lt;p&gt;The best engineering teams are already moving this direction. Async updates. AI generated summaries. Meetings only when a human decision is actually needed.&lt;/p&gt;

&lt;p&gt;Not because they are lazy. Because they understand that attention is the most expensive resource on any engineering team, and a 15 minute standup is never just 15 minutes when you factor in context switching.&lt;/p&gt;

&lt;h2&gt;
  
  
  So What Should Replace It?
&lt;/h2&gt;

&lt;p&gt;A daily AI generated digest. Automated blocker detection. A short async voice note when something actually needs a human explanation. And a real meeting, maybe once a week, for decisions that genuinely require everyone in the room.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Standup Had a Good Run.
&lt;/h2&gt;

&lt;p&gt;But it was always a workaround for the lack of visibility in software teams.&lt;/p&gt;

&lt;p&gt;AI just made that workaround unnecessary.&lt;/p&gt;

&lt;p&gt;The question is not whether to kill the standup.&lt;br&gt;
The question is why you are still defending it.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today as a developer?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>webdev</category>
      <category>devops</category>
    </item>
    <item>
      <title>Strange but Shockingly Effective Coding Tips That Actually Work</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Thu, 09 Apr 2026 09:49:30 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/strange-but-shockingly-effective-coding-tips-that-actually-work-3mcj</link>
      <guid>https://dev.to/web_dev-usman/strange-but-shockingly-effective-coding-tips-that-actually-work-3mcj</guid>
      <description>&lt;p&gt;There are coding techniques that sound completely ridiculous but actually solve your problems faster than the “proper” methods you’ve been taught. These aren’t theory from textbooks. These are techniques developers actually use to get unstuck and write better code.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Your brain doesn’t work the way you think it does. When you’re stuck on a problem, pushing harder usually makes it worse.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;These techniques work because they align with how your brain actually solves problems.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Let’s break down the ones that matter most.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step Away From Your Screen
&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%2Fj0ojd6fdl20pvr0d8r9j.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%2Fj0ojd6fdl20pvr0d8r9j.png" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you’re stuck on a problem for more than an hour, your brain is running the same mental loops repeatedly. It’s like being in a maze and repeating the same wrong turns. You won’t find the exit by running that path harder.&lt;/p&gt;

&lt;p&gt;When you physically step away, your brain switches from focused mode to diffuse mode. Your subconscious takes over and starts making connections your conscious mind kept missing. This is why solutions often hit you in the shower, during walks, or right before sleep.&lt;/p&gt;

&lt;p&gt;When you’ve been stuck for an hour, get up. Walk around. Use the bathroom. Get a snack. Your brain needs the reset more than your code needs your frustrated staring.&lt;/p&gt;

&lt;h3&gt;
  
  
  Sleep on Hard Problems
&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%2Feymt3zwk2x6xp840kmn9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feymt3zwk2x6xp840kmn9.jpg" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you can’t solve something by end of day, close your laptop and stop thinking about it. Watch TV, play games, then sleep.&lt;/p&gt;

&lt;p&gt;Your brain processes problems while you sleep. It reorganizes information and strengthens neural connections. You’re running background processes overnight. The bug that made no sense at 6 PM often becomes obvious at 9 AM.&lt;/p&gt;

&lt;p&gt;Set a hard stop time for difficult problems. If you haven’t solved it by then, shut down and trust your brain will work on it overnight.&lt;/p&gt;

&lt;h3&gt;
  
  
  Rubber Duck Debugging
&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2AW-FBOCDyvjD9hrwo" 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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2AW-FBOCDyvjD9hrwo" width="760" height="570"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Keep a rubber duck on your desk. When you’re stuck, explain your code to the duck line by line, out loud.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Okay, this function takes a user ID, then queries the database for the user’s data. Wait, I’m not checking if the user ID is null before querying. That’s the bug.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When you’re just reading code in your head, your brain fills in gaps and makes assumptions. When you’re forced to explain it out loud, you have to articulate every single step. Those gaps become obvious.&lt;/p&gt;

&lt;p&gt;It doesn’t have to be a duck. Use a cat, a coffee mug, or just talk to the empty air. The point is verbalizing your logic forces you to examine it instead of assuming you know what it does.&lt;/p&gt;

&lt;h3&gt;
  
  
  Write Ugly Code First, Refactor Later
&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%2F7saxg69vk1odklp5dgyk.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7saxg69vk1odklp5dgyk.jpg" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When solving a problem for the first time, you don’t actually understand it yet. You think you do, but until you’ve made something work, you’re coding based on assumptions.&lt;/p&gt;

&lt;p&gt;Write the ugliest, most brute-force version that works. No design patterns. No abstractions. Just get something working with the most straightforward solution.&lt;/p&gt;

&lt;p&gt;That ugly first version teaches you where the real complexity is. It reveals which parts matter and which you were overthinking. Then you refactor with actual knowledge about the problem instead of guessing.&lt;/p&gt;

&lt;p&gt;For example, if you need to process user data, don’t immediately build a flexible data processing pipeline with strategy patterns. Write a function with a for loop. Make it work. Then add flexibility if you actually need it. Usually you won’t.&lt;/p&gt;

&lt;h3&gt;
  
  
  Move Your Body Regularly
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;Exercise isn’t just good for health. It reduces stress hormones, increases blood flow to your brain, and triggers chemicals that improve focus and problem-solving.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpvn74zbdbi99r5u7mzcz.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%2Fpvn74zbdbi99r5u7mzcz.png" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Taking a walk isn’t wasting coding time, it’s creating better coding time.&lt;/p&gt;

&lt;p&gt;Take a &lt;strong&gt;15-minute walk every afternoon&lt;/strong&gt;. When you’re stuck, walk around the block or do some pushups. Physical movement breaks mental blocks.&lt;/p&gt;

&lt;h3&gt;
  
  
  Box Breathing for Focus
&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2Av2bLqyxZ-gfuXLVR" 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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2Av2bLqyxZ-gfuXLVR" width="1200" height="1200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Breathe in for four seconds. Hold for four. Breathe out for four. Hold for four. Do this three times.&lt;/p&gt;

&lt;p&gt;When you’re frustrated with a bug, your body enters stress response mode. Your thinking gets narrow. Box breathing calms your nervous system and resets your focus. Try it next time you’re about to rage-quit.&lt;/p&gt;

&lt;h3&gt;
  
  
  Productivity Habits That Work
&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%2Ffkek3pff04jyd12b10q6.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%2Ffkek3pff04jyd12b10q6.png" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  The Big 3 Rule
&lt;/h4&gt;

&lt;p&gt;Before checking Slack or email, write down three tasks. The three most important things you need to accomplish today.&lt;/p&gt;

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

&lt;ol&gt;
&lt;li&gt;Fix the login timeout bug&lt;/li&gt;
&lt;li&gt;Write tests for payment processor&lt;/li&gt;
&lt;li&gt;Review Sarah’s pull request&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Everything else is secondary. If you complete those three, you’ve won the day. This keeps you focused on what matters instead of getting lost in reactive work.&lt;/p&gt;

&lt;h4&gt;
  
  
  Do Your Hardest Task First
&lt;/h4&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%2Fibauhofd1t2xwptr0pyv.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%2Fibauhofd1t2xwptr0pyv.png" width="800" height="592"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Do your most dreaded task first thing, before checking messages or doing easy tasks. That task sitting in the back of your mind creates background anxiety all day. Do it first and you’ve already won. Everything after feels easier.&lt;/p&gt;

&lt;h4&gt;
  
  
  Stop While You Know What’s Next
&lt;/h4&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%2Fs19sn639c9st46jjastj.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs19sn639c9st46jjastj.jpg" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When taking a break or ending your day, stop while you know what needs to happen next. Leave a comment:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;// TODO: next validate the user input and handle the null case&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Restarting work is hard because you have to reload context. A clear breadcrumb lets you pick up immediately with no mental overhead.&lt;/p&gt;

&lt;h3&gt;
  
  
  Master Your Tools
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Keyboard Shortcuts
&lt;/h4&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%2F4kjg93a151zh5d75tsjc.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%2F4kjg93a151zh5d75tsjc.png" width="800" height="462"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Every time you reach for your mouse, ask: “Could I have done that with a keyboard shortcut?”&lt;/p&gt;

&lt;p&gt;Your mouse is slow. The fastest developers navigate code entirely with keyboard shortcuts. Start with three shortcuts this week and actually use them. Next week, learn three more.&lt;/p&gt;

&lt;p&gt;Key shortcuts to learn:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Jump to file by name&lt;/li&gt;
&lt;li&gt;Jump to function definition&lt;/li&gt;
&lt;li&gt;Search across all files&lt;/li&gt;
&lt;li&gt;Multi-cursor editing&lt;/li&gt;
&lt;li&gt;Move lines up/down&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Use Command Line
&lt;/h4&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%2Flpddntkh3j9onpxcymx5.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%2Flpddntkh3j9onpxcymx5.png" width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The command line gives you power and automation. If your favorite GUI app dies, you start over. Command line tools stay consistent.&lt;/p&gt;

&lt;p&gt;Learn to navigate directories, search files with &lt;code&gt;grep&lt;/code&gt;, and chain commands together. One script that saves 10 minutes daily gives you 50+ hours back per year.&lt;/p&gt;

&lt;h3&gt;
  
  
  Debugging Techniques
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Binary Search Your Bugs
&lt;/h4&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%2Fg8breh2nnclu92pbnrj2.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg8breh2nnclu92pbnrj2.jpg" width="800" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you have no idea where a bug is, drop a print statement halfway through your code. Check if the bug happened before or after. Keep halving the search space.&lt;/p&gt;

&lt;p&gt;Each check eliminates half the possibilities. “Somewhere in 1000 lines” becomes “in these 30 lines” in just a few checks.&lt;/p&gt;

&lt;h4&gt;
  
  
  Use Print Statements
&lt;/h4&gt;

&lt;p&gt;Senior developers recommend debuggers. They’re powerful. But for 90% of bugs, print statements are faster.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;got here&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;user_id is: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;  
&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;about to call the API&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;Simple, fast, works everywhere. No configuration needed.&lt;/p&gt;

&lt;h4&gt;
  
  
  Review Test Code First
&lt;/h4&gt;

&lt;p&gt;When reviewing code changes, start with the tests. Tests show what the code should do and give you a mental model before diving into implementation. If tests are bad, the code probably is too.&lt;/p&gt;

&lt;h3&gt;
  
  
  Take Care of Your Brain
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Real Breaks vs Fake Breaks
&lt;/h4&gt;

&lt;p&gt;Real breaks mean getting away from your screen. Go outside, talk to someone, do something physical. Five genuine 5-minute breaks throughout your day beat eight hours straight.&lt;/p&gt;

&lt;h4&gt;
  
  
  The Distraction List
&lt;/h4&gt;

&lt;p&gt;When a random thought interrupts your focus, don’t try to ignore it. Keep a text file called “distraction-list.txt” on your desktop. Write the thought down and go back to work.&lt;/p&gt;

&lt;p&gt;Your brain just wanted to make sure you didn’t forget. Once it’s written, your brain lets it go.&lt;/p&gt;

&lt;h4&gt;
  
  
  Skip Coding on Burnout Days
&lt;/h4&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2AVk6lf9VHNj8ltT-9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2AVk6lf9VHNj8ltT-9.jpg" width="800" height="403"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Some days your brain isn’t there. You’re foggy and frustrated. Coding while burnt out creates bugs and technical debt you’ll fix later anyway.&lt;/p&gt;

&lt;p&gt;Do code reviews instead. Update documentation. Plan features. Organize tasks. There’s always work that doesn’t require peak mental sharpness.&lt;/p&gt;

&lt;h3&gt;
  
  
  Working With Your Team
&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2ALRVAdLG89VxCBdpw.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2ALRVAdLG89VxCBdpw.jpg" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  The Boy Scout Rule
&lt;/h4&gt;

&lt;p&gt;Whenever you touch code, leave it slightly better than you found it. Fixing a bug? Improve variable names. Add a comment. Extract duplicated logic. These tiny improvements compound over time.&lt;/p&gt;

&lt;h4&gt;
  
  
  Keep Pull Requests Small
&lt;/h4&gt;

&lt;p&gt;Big pull requests get rubber-stamped. Nobody reviews 500 lines properly. Small PRs get real feedback, catch bugs, and get meaningful suggestions.&lt;/p&gt;

&lt;p&gt;If your feature needs 500 lines, break it into five PRs. The quality increase is worth the extra planning.&lt;/p&gt;

&lt;h4&gt;
  
  
  Ask for Specific Feedback
&lt;/h4&gt;

&lt;p&gt;Don’t send PRs with just “please review.” Ask specific questions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“Please review error handling in lines 45–60”&lt;/li&gt;
&lt;li&gt;“I’m unsure about query performance in the new function”&lt;/li&gt;
&lt;li&gt;“Does the test coverage make sense?”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Specific questions get specific answers.&lt;/p&gt;

&lt;h3&gt;
  
  
  Problem Solving Methods
&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2ATHKPYQ1AmWCLk3VL.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2ATHKPYQ1AmWCLk3VL.jpg" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Ask “Why” Five Times
&lt;/h4&gt;

&lt;p&gt;Don’t just fix surface issues. Ask “why” five times to find the root cause.&lt;/p&gt;

&lt;p&gt;“The server crashed.” Why? “Ran out of memory.” Why? “Cache grew too large.” Why? “Not clearing old entries.” Why? “No expiration logic.” Why? “Nobody thought about long-running instances.”&lt;/p&gt;

&lt;p&gt;Now you know the real problem; implement cache expiration, not just add more memory.&lt;/p&gt;

&lt;h4&gt;
  
  
  Break Complex Problems Down
&lt;/h4&gt;

&lt;p&gt;Stuck on something complex? Make it simpler until you can solve it.&lt;/p&gt;

&lt;p&gt;Building a recommendation engine? Start with “show random items.” Then “show items from same category.” Then “show items other users liked.” Each small step teaches you something and is actually achievable.&lt;/p&gt;

&lt;h4&gt;
  
  
  Use Pseudocode First
&lt;/h4&gt;

&lt;p&gt;Before writing real code, describe your logic in plain English:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Get user from database
// If user doesn't exist, return error
// Check if user has permission
// If no permission, return error
// Process request
// Return success
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This forces you to think through logic without syntax distractions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code Review Best Practices
&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F1%2A0bxNjKmtFo3qMYCCkt85zg.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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F1%2A0bxNjKmtFo3qMYCCkt85zg.png" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Open PRs Early
&lt;/h4&gt;

&lt;p&gt;Don’t wait until everything’s perfect. Open a draft PR at 30% completion.&lt;/p&gt;

&lt;p&gt;“Hey team, here’s my approach. Thoughts before I finish?”&lt;/p&gt;

&lt;p&gt;This catches problems early when changing direction is easy, not when you’re 100% done.&lt;/p&gt;

&lt;h4&gt;
  
  
  Give Feedback About Code, Not People
&lt;/h4&gt;

&lt;p&gt;Bad: “You didn’t handle the error case.” Good: “This error case isn’t handled yet.”&lt;/p&gt;

&lt;p&gt;Bad: “You’re overcomplicating this.” Good: “This could be simplified by using X.”&lt;/p&gt;

&lt;p&gt;The code is the subject, not the person.&lt;/p&gt;

&lt;h4&gt;
  
  
  Mark Blocking vs Non-Blocking
&lt;/h4&gt;

&lt;p&gt;Make it clear which comments are critical:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;“Blocking:&lt;/strong&gt; This will crash if input is null” “&lt;strong&gt;Nit:&lt;/strong&gt; Consider renaming for clarity”&lt;/p&gt;

&lt;p&gt;This helps prioritize what must be fixed versus what’s opinion.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Weird Tricks
&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2A7gHcTQNESDBaOGNi.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2A7gHcTQNESDBaOGNi.jpg" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Rename Variables to Ridiculous Names
&lt;/h4&gt;

&lt;p&gt;When you’ve stared at code so long your brain stops seeing it, rename variables to silly names.&lt;/p&gt;

&lt;p&gt;Change &lt;code&gt;userData&lt;/code&gt; to &lt;code&gt;thisStupidUserThing&lt;/code&gt;. Change &lt;code&gt;isValid&lt;/code&gt; to &lt;code&gt;theDumbCheckThatHatesMe&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The absurdity breaks your mental pattern. Your brain has to actually read the code instead of assuming it knows what’s there.&lt;/p&gt;

&lt;h4&gt;
  
  
  Run the Same Code Again
&lt;/h4&gt;

&lt;p&gt;Code fails. You don’t change anything. You run it again. Sometimes it works.&lt;/p&gt;

&lt;p&gt;This isn’t always superstition. Environmental factors change. Race conditions happen. Network requests time out then succeed. External services hiccup.&lt;/p&gt;

&lt;p&gt;Running again shows if it’s a consistent failure or intermittent issue. But on the third run without changes, start debugging.&lt;/p&gt;

&lt;h4&gt;
  
  
  Make Your Code Public
&lt;/h4&gt;

&lt;p&gt;Put your code on GitHub publicly.&lt;/p&gt;

&lt;p&gt;“But what if it’s bad?” That’s the point. When people can see your code, you naturally write better code. You add comments, clean up messy parts, think more carefully about naming.&lt;/p&gt;

&lt;p&gt;External accountability creates internal standards.&lt;/p&gt;

&lt;h4&gt;
  
  
  Start Using These Now
&lt;/h4&gt;

&lt;p&gt;You don’t need to try everything at once. Pick three techniques that sound like they’d solve problems you’re facing. Try them for one week. Actually commit to trying them properly.&lt;/p&gt;

&lt;p&gt;Maybe you start with the Big 3 daily tasks, rubber duck debugging, and taking real breaks. Or writing ugly code first, keyboard shortcuts, and asking for specific feedback.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The combination doesn’t matter as much as actually trying new approaches.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The best developers aren’t the smartest. They’re the ones who understand how their brains work and create systems that work with their brain instead of fighting it.&lt;/p&gt;

&lt;p&gt;These techniques aren’t magic shortcuts. They’re patterns that align with how problem-solving actually works. Your brain wants to wander when stuck, so let it wander productively.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Your brain fills in gaps when reading code, so force yourself to verbalize. Your brain works better after rest, so actually rest.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Some of this sounds ridiculous. Talk to rubber ducks. Take bathroom breaks. Rename variables to silly names. Write ugly code first.&lt;/p&gt;

&lt;p&gt;But ridiculous doesn’t mean wrong. Try these techniques and see what happens. Worst case, you’ll have funny stories. Best case, you’ll get noticeably better at solving problems.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Now go fix that bug you’ve been stuck on.&lt;/em&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today as a developer?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>programming</category>
      <category>softwaredevelopment</category>
      <category>softwareengineering</category>
      <category>webdev</category>
    </item>
    <item>
      <title>The Frontend Skills That Are Actually Dying (Not the Ones You Think)</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Mon, 06 Apr 2026 03:05:44 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/the-frontend-skills-that-are-actually-dying-not-the-ones-you-think-17nk</link>
      <guid>https://dev.to/web_dev-usman/the-frontend-skills-that-are-actually-dying-not-the-ones-you-think-17nk</guid>
      <description>&lt;p&gt;&lt;em&gt;Everyone is pointing fingers at jQuery and PHP. The real list is different, more uncomfortable, and way more relevant to your career right now.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Open any developer forum today, and someone is declaring something dead. jQuery is dead. PHP is dead. CSS is dead. Most of these takes are wrong, recycled, or both.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This article is not that.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Two developers. Same years of experience. One keeps getting interviews. The other keeps getting ghosted.&lt;/p&gt;

&lt;p&gt;The difference is not talent. It is which skills they are still holding onto.&lt;/p&gt;




&lt;h3&gt;
  
  
  First, the skills everyone says are dying — but are not
&lt;/h3&gt;

&lt;p&gt;jQuery runs on over 75% of all websites. W3Techs has tracked this for years, and the number barely moves.&lt;/p&gt;

&lt;p&gt;WordPress powers 43% of the entire web. It runs on PHP.&lt;/p&gt;

&lt;p&gt;These are not dying. Stop worrying about them.&lt;/p&gt;

&lt;p&gt;The real list is different. And it hits closer to home.&lt;/p&gt;

&lt;h3&gt;
  
  
  #5 — Writing CSS purely from scratch
&lt;/h3&gt;

&lt;p&gt;This was a real skill. Understanding the cascade, specificity, and layout modes. Developers spent years getting good at this.&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%2F9jpghx0r05nhcz7bo6cw.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%2F9jpghx0r05nhcz7bo6cw.png" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But the workflow has changed.&lt;/p&gt;

&lt;p&gt;Tailwind is now mainstream, not controversial. CSS Modules handle architecture. Design tokens handle values. AI handles most of the boilerplate.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A developer who only writes raw CSS with no exposure to any of these tools is becoming rare in job listings.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The skill still works. The workflow around it has moved on.&lt;/p&gt;

&lt;h3&gt;
  
  
  #4 — Cross-browser CSS hacks
&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%2Fi1esrb2sg7johpyyi8w9.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%2Fi1esrb2sg7johpyyi8w9.png" width="800" height="433"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you learned frontend before 2016, you know this pain. Vendor prefixes. Conditional comments. IE-specific layout bugs. It was a real specialization.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Internet Explorer reached the end of life in June 2022.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;All major browsers are now evergreen. They auto-update. The Interop initiative, a joint effort between Apple, Google, Microsoft, and Mozilla, has been closing compatibility gaps every year since 2021.&lt;/p&gt;

&lt;p&gt;Tools like &lt;a href="https://browsersl.ist/" rel="noopener noreferrer"&gt;Browserslist&lt;/a&gt; and &lt;a href="https://autoprefixer.github.io/" rel="noopener noreferrer"&gt;autoprefixer&lt;/a&gt; handle what is left automatically.&lt;/p&gt;

&lt;p&gt;The hours spent debugging IE layout collapses are just gone as a category of work. That expertise does not have a job anymore.&lt;/p&gt;

&lt;h3&gt;
  
  
  #3 — Building UI components completely from scratch
&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%2Ftoqxfhomkg62rrhrq14v.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%2Ftoqxfhomkg62rrhrq14v.png" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Writing a modal from zero used to mean something. Focus trapping, ARIA attributes, keyboard navigation, and scroll locking. It was genuinely hard.&lt;/p&gt;

&lt;p&gt;Now &lt;a href="https://ui.shadcn.com/" rel="noopener noreferrer"&gt;shadcn/ui&lt;/a&gt;, &lt;a href="https://www.radix-ui.com/" rel="noopener noreferrer"&gt;Radix UI&lt;/a&gt;, and &lt;a href="https://headlessui.com/" rel="noopener noreferrer"&gt;Headless UI&lt;/a&gt; exist, and they solve this better than most developers would from scratch, including the accessibility parts.&lt;/p&gt;

&lt;p&gt;At most modern teams, building a modal or date picker from zero without a base library needs a specific justification.&lt;/p&gt;

&lt;p&gt;If your CV says “&lt;strong&gt;built custom UI components&lt;/strong&gt;” with no context, it reads as a legacy signal now. Not a differentiator.&lt;/p&gt;

&lt;h3&gt;
  
  
  #2 — jQuery-specific patterns
&lt;/h3&gt;

&lt;p&gt;Not jQuery itself. The specific patterns around it.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;$.ajax()&lt;/code&gt;. Deferred chaining. Plugin architecture. The mental model of wrapping everything in the jQuery object.&lt;/p&gt;

&lt;p&gt;The Fetch API replaced &lt;code&gt;$.ajax()&lt;/code&gt; natively. &lt;code&gt;querySelector&lt;/code&gt; replaced jQuery selectors. Event delegation works natively now.&lt;/p&gt;

&lt;p&gt;A developer starting at a new company today is far more likely to walk into a React or Vue codebase than a jQuery-first one.&lt;/p&gt;

&lt;p&gt;Knowing jQuery is fine. Listing it as a primary skill on a CV aimed at product companies is a different story.&lt;/p&gt;

&lt;h3&gt;
  
  
  #1 — Manual Webpack and Babel configuration
&lt;/h3&gt;

&lt;p&gt;For years, knowing how to configure Webpack from scratch was genuinely marketable. Entry points, loaders, plugins, code splitting, and tree shaking. Senior frontend developers were expected to know this cold.&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%2Ffavp07adubeg7p3e78y4.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%2Ffavp07adubeg7p3e78y4.png" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then Vite arrived. And Create React App was officially deprecated.&lt;/p&gt;

&lt;p&gt;Vite is now the default for new React, Vue, and Svelte projects. Its defaults handle what used to require hours of Webpack tuning.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Deep Webpack knowledge still matters if you are maintaining a large legacy codebase. But it is not something a developer starting out needs to prioritize.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That window has closed.&lt;/p&gt;

&lt;h3&gt;
  
  
  What replaced them
&lt;/h3&gt;

&lt;p&gt;Skill fading away what replaced it?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Hand-rolled CSS Tailwind, design tokens, and AI-assisted styling.&lt;/li&gt;
&lt;li&gt;Cross-browser hacks evergreen browsers.&lt;/li&gt;
&lt;li&gt;Interop initiative: Custom components from zero shadcn/ui, Radix, Headless UI.&lt;/li&gt;
&lt;li&gt;jQuery-specific patterns Fetch API, native DOM, modern JS, manual Webpack config Vite, Turbopack, zero-config defaults&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Why this feels uncomfortable
&lt;/h3&gt;

&lt;p&gt;These were not shortcuts. They were the right way to build things at the time.&lt;/p&gt;

&lt;p&gt;The industry just does not retire skills with any announcement. One year a technique is standard. A few years later the job listings quietly stop mentioning it.&lt;/p&gt;

&lt;p&gt;That is the nature of working this close to the browser. The platform keeps moving.&lt;/p&gt;

&lt;h3&gt;
  
  
  The only thing that matters
&lt;/h3&gt;

&lt;p&gt;Frontend is not getting harder to enter.&lt;/p&gt;

&lt;p&gt;But it is getting harder to stay relevant without paying attention.&lt;/p&gt;

&lt;p&gt;The developers who are fine are not the ones chasing every new framework. They are the ones who notice when a category of work gets absorbed by tooling and adjust accordingly.&lt;/p&gt;

&lt;p&gt;The skills that are dying are not the ones everyone argues about.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;They are the ones that quietly stopped showing up in new projects while everyone was busy arguing about jQuery.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today as a developer?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>frontend</category>
      <category>webdev</category>
      <category>css</category>
      <category>javascript</category>
    </item>
    <item>
      <title>You Can Now Learn Anything 100x Faster With Claude.</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Sat, 04 Apr 2026 11:49:39 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/you-can-now-learn-anything-100x-faster-with-claude-4gcc</link>
      <guid>https://dev.to/web_dev-usman/you-can-now-learn-anything-100x-faster-with-claude-4gcc</guid>
      <description>&lt;p&gt;Most people use AI to draft emails or summarize articles.&lt;/p&gt;

&lt;p&gt;And honestly, that is totally fine. There is nothing wrong with that.&lt;/p&gt;

&lt;p&gt;While everyone is busy using Claude for the small stuff, they are completely missing the biggest benefit sitting right in front of them.&lt;/p&gt;

&lt;p&gt;Claude can become your personal learning coach.&lt;/p&gt;

&lt;p&gt;Not a chatbot. Not a search engine. A coach. One that designs your learning journey, tests you on what you know, breaks down the most complex ideas into something you can actually understand, and points you toward the best resources on the planet.&lt;/p&gt;

&lt;p&gt;The difference between someone who learns fast and someone who stays stuck is not intelligence. It is not even time. It is having the right system. And these 6 prompts are that system.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Learn Anything in 20 Hours
&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%2Fvbjf04t79rf1c7cinc3d.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvbjf04t79rf1c7cinc3d.jpg" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is a truth most people do not want to hear. The first 20 hours of learning anything are the most important. That window takes you from completely clueless to genuinely capable. But most people waste those 20 hours on the wrong things, in the wrong order, with the wrong focus.&lt;/p&gt;

&lt;p&gt;Claude fixes that immediately.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“I want to learn [topic] in 20 hours. I am a complete beginner. Break this into a structured plan. Tell me what to focus on first, what to ignore, and what the biggest beginner mistakes are.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What you get back is a roadmap. Not a vague one. A real, prioritized, beginner-aware plan that tells you exactly where to start and what to skip. That alone saves you days.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Create a One-Page Cheat Sheet
&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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2A4Wl7MnzKlwCw-G37" 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%2Fcdn-images-1.medium.com%2Fmax%2F1600%2F0%2A4Wl7MnzKlwCw-G37" width="1024" height="630"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Your brain absorbs more than you give it credit for. The real problem is not retention. It is retrieval. When you are in the middle of applying something, you forget where you put the information and waste time digging through notes, tabs, and bookmarks.&lt;/p&gt;

&lt;p&gt;A one-page cheat sheet solves that completely.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Create a one-page cheat sheet for [topic]. Include key concepts, frameworks, common mistakes, and a quick-reference section I can scan in 30 seconds.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Print it. Pin it. Keep it open. You will reach for it more than you think.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Quiz Me Until I Break
&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%2Fboufcin9kzuu46phj1fs.jpeg" 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%2Fboufcin9kzuu46phj1fs.jpeg" width="800" height="546"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Reading feels productive. It is not. Not really.&lt;/p&gt;

&lt;p&gt;Sitting with a book and moving your eyes across words is one of the most passive things you can do as a learner. The research on this is not even close. Retrieval practice, meaning actually pulling information out of your memory by answering questions, beats re-reading every single time.&lt;/p&gt;

&lt;p&gt;The problem is making good questions is genuinely hard work. Claude does it for you, and it does it well.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Quiz me on [topic]. Start easy, get harder as I answer correctly. If I get something wrong, explain why and ask a follow-up. Keep going until I answer 10 in a row correctly.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This one prompt alone will expose every gap in your understanding that you did not even know existed.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Build a Learning Ladder
&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%2Fjsv1jcfiw189pijv5nmu.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjsv1jcfiw189pijv5nmu.jpg" width="800" height="704"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Most people give up on learning something new not because it is too hard, but because they climbed a wall instead of stairs.&lt;/p&gt;

&lt;p&gt;They jump straight into advanced material before the basics are solid. Then it gets confusing. Then it gets frustrating. Then they quit and blame themselves when the real problem was just the order they tried to learn things in.&lt;/p&gt;

&lt;p&gt;A learning ladder fixes the order.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Build me a learning ladder for [topic]. Start from zero, work up to advanced. Each rung should build on the one before it.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Every concept you encounter from that point forward has a place to land. Nothing feels random anymore.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Find the Best Learning Resources
&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%2F9e8w0rdtkai01b23bhqn.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9e8w0rdtkai01b23bhqn.jpg" width="800" height="469"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Not all resources are equal. That is not an opinion. That is just true.&lt;/p&gt;

&lt;p&gt;Some books will change how you think forever. Most books are average at best. Some YouTube channels will save you months of confusion. Most will waste your afternoon. The problem is you do not know which is which until you have already invested the hours.&lt;/p&gt;

&lt;p&gt;Claude has processed more information on more subjects than any single human being ever has. Use that.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“What are the best resources for learning [topic]? Books, free courses, YouTube channels, podcasts. Tell me which to start with and why.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The “why” part matters more than most people realize. It gives you context so you can match the resource to where you are right now, not just where you eventually want to be.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Use the Feynman Technique
&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%2Ffy67kfgy7ho03s7kjpnd.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffy67kfgy7ho03s7kjpnd.jpg" width="800" height="559"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Richard Feynman had one obsession his entire career. He believed that if you cannot explain something simply, you do not actually understand it yet. You just think you do.&lt;/p&gt;

&lt;p&gt;This technique is uncomfortable. That is the point.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Prompt:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“I am going to explain [topic] as if you are a 12-year-old. Interrupt me when something is unclear or uses unexplained jargon. When I finish, tell me what I got right, wrong, and what gaps remain.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Then just start talking. Or typing. Whatever feels natural.&lt;/p&gt;

&lt;p&gt;Claude will stop you the moment something does not hold up. It will point out the jargon you used without realizing it. It will find the gaps in your explanation that you glossed over. And when you are done, it will give you an honest, structured breakdown of exactly where your understanding is solid and where it is not.&lt;/p&gt;

&lt;p&gt;That kind of feedback is what most people never get. Because most people are too polite to give it.&lt;/p&gt;

&lt;p&gt;Claude is not.&lt;/p&gt;

&lt;p&gt;And that is exactly what you need.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Shift
&lt;/h3&gt;

&lt;p&gt;The people who learn fastest are not smarter than everyone else. They just have better systems and better feedback.&lt;/p&gt;

&lt;p&gt;For a long time, that kind of personalized coaching was expensive, rare, or both. You needed to know the right person, pay for the right tutor, or get lucky with the right mentor.&lt;/p&gt;

&lt;p&gt;That is no longer the case.&lt;/p&gt;

&lt;p&gt;Every single one of these prompts is free to try today. Right now. All it takes is opening Claude and treating it like what it actually is. Not a tool for small tasks. A partner for serious learning.&lt;/p&gt;

&lt;p&gt;Pick one topic you have been putting off. Run it through all 6 prompts. See what happens.&lt;/p&gt;

&lt;p&gt;You will not go back to learning the old way.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today as a developer?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>ai</category>
      <category>machinelearning</category>
      <category>techtalks</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Please. I'm Begging You. Close The Tab.</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Fri, 03 Apr 2026 10:03:02 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/please-im-begging-you-close-the-tab-nnj</link>
      <guid>https://dev.to/web_dev-usman/please-im-begging-you-close-the-tab-nnj</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/aprilfools-2026"&gt;DEV April Fools Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;A website that doesn't want you there.&lt;/p&gt;

&lt;p&gt;No content. No product. No reason to exist. Just a letter addressed directly to whoever was unfortunate enough to find it asking them, with increasing desperation, to please close the tab.&lt;/p&gt;

&lt;p&gt;They don't close the tab.&lt;/p&gt;

&lt;p&gt;Every visit makes it worse. The website begs, then journals, then hires a lawyer named Tab Closington, Esq. A data center technician named Dave gets involved. Dave ends up in his car. The fonts collapse into Comic Sans. The lights go out. A glow named Gerald appears.&lt;/p&gt;

&lt;p&gt;By visit ten, the website has exhausted grief, legal threats, dark mode, and Comic Sans. So it throws a party instead, confetti deployed, dignity gone, and admits, quietly, at the bottom of the letter: &lt;em&gt;I missed you. Don't tell anyone.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Ten visits. Ten escalating stages of a website having a complete emotional breakdown because you wouldn't leave.&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://codepen.io/web-strategist/full/dPpKMde" rel="noopener noreferrer"&gt;Don't you dare click this link:&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/web-strategist/embed/dPpKMde?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;The entire thing is a single &lt;code&gt;index.html&lt;/code&gt; file. No frameworks, no dependencies, no build step. Drop it anywhere and it runs.&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;HTML, CSS, and vanilla JavaScript&lt;/strong&gt; — nothing else.&lt;/p&gt;

&lt;p&gt;The visit counter lives in &lt;code&gt;localStorage&lt;/code&gt;, so the escalation persists across refreshes and tab closes. Every time you land on the page, it remembers, and the letter gets worse.&lt;/p&gt;

&lt;p&gt;Each of the ten stages has its own headline, body copy, distress bar, extra content block (journals, a legal document, an incident report), button labels, signature, ticker text, and browser tab title, which rotates between increasingly unhinged variations while you're on the page.&lt;/p&gt;

&lt;p&gt;The SVG face animates through states: smile, flat, worried, crying (actual teardrops that elongate via attribute animation), dark mode, and party bounce. The distress bar fills with a different color depending on severity, green to amber to red. From visit six onward, the card physically shakes before reloading. From visit eight, the headline gets a chromatic aberration glitch effect. Visit ten fires, 130 confetti pieces, and turn the body background into a looping rainbow animation.&lt;/p&gt;

&lt;p&gt;The writing does the heavy lifting, though. The whole thing only works if the voice feels like a real person having a real bad time, so every stage was written to escalate not just in chaos but in specificity. The eleven minutes spent picking the sad blue. Dave's exact quote. Gerald. The Comic Sans apology. The ending.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prize Category
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Community Favorite&lt;/strong&gt; — because the joke only lands if someone shares it with a friend and makes them click it without context. That's the whole game. No setup, no explanation. Just: &lt;em&gt;visit this. Keep visiting.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>418challenge</category>
      <category>showdev</category>
      <category>jokes</category>
    </item>
    <item>
      <title>25 Trending Self-Hosted Projects on GitHub</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Thu, 02 Apr 2026 08:53:54 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/25-trending-self-hosted-projects-on-github-4nom</link>
      <guid>https://dev.to/web_dev-usman/25-trending-self-hosted-projects-on-github-4nom</guid>
      <description>&lt;p&gt;At some point, paying $12/month for a notes app that holds your grocery lists starts to feel absurd. Not because $12 is a lot of money, but because you are a developer. You know what a database is. You know what a Docker container is. And somewhere in the back of your head, you know there is a perfectly good open-source tool sitting on GitHub that does the same thing, runs on a $5 VPS, and does not require you to accept a new privacy policy every six months.&lt;/p&gt;

&lt;p&gt;That is the self-hosting pitch, and in 2026 it has never been more convincing. The tooling is genuinely excellent now. Deployment is usually a compose file and ten minutes. And the community producing these projects is large, active, and moves fast.&lt;/p&gt;

&lt;p&gt;Here are the 25 projects worth knowing about right now.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI and Local LLM Tools
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Ollama
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 139k | Language: Go&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/ollama/ollama" rel="noopener noreferrer"&gt;https://github.com/ollama/ollama&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Frwyafglep2ifv4zv9o54.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%2Frwyafglep2ifv4zv9o54.png" width="800" height="334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ollama is where most people start with local AI, and for good reason. You run one command to pull a model, another to start it, and you get a clean API that the rest of the ecosystem has basically standardized on. GPU acceleration, model quantization, multi-model support — it handles all of it quietly in the background.&lt;/p&gt;

&lt;p&gt;Llama 3, Mistral, DeepSeek, Gemma, Phi — new models land on Ollama within days of release. If you are doing anything with local AI, this is the foundation.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Open WebUI
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 129k | Language: Python&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/open-webui/open-webui" rel="noopener noreferrer"&gt;https://github.com/open-webui/open-webui&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fbbhwc58rdfbr2d4i06tj.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%2Fbbhwc58rdfbr2d4i06tj.png" width="800" height="752"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Open WebUI DocsThink of this as your private ChatGPT. It sits on top of Ollama, gives you a proper chat interface, and also works with the OpenAI API if you want to mix in cloud models. The feature set is deeper than it looks: RAG via document uploads, image generation, multi-user support with roles, conversation history, model switching mid-session.&lt;/p&gt;

&lt;p&gt;At 129k stars it is the most popular self-hosted AI interface on GitHub, and it earns it.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Dify
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 87k | Language: Python&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/langgenius/dify" rel="noopener noreferrer"&gt;https://github.com/langgenius/dify&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AkCFDUhHjLAw2yhfQ" 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%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AkCFDUhHjLAw2yhfQ" width="1400" height="909"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Open WebUI is for using AI. Dify is for building with it. It gives you a visual workflow builder for RAG pipelines, agents, and multi-step automations without writing infrastructure from scratch. The useful part is that it connects to both cloud providers and local models via Ollama, so you can prototype with GPT-4 and ship on Llama without rewriting anything.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Khoj
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 30.3k | Language: Python&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/khoj-ai/khoj" rel="noopener noreferrer"&gt;https://github.com/khoj-ai/khoj&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2F2w98dmxvlum6epn0jh9s.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%2F2w98dmxvlum6epn0jh9s.png" width="800" height="434"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Khoj indexes your notes, documents, and bookmarks and lets you query them through a conversational interface. It works with Obsidian, Emacs, and standard markdown, and it runs entirely on your machine with local LLMs if you want. The appeal is simple: your personal knowledge base, searchable with natural language, without any of it touching a third-party server.&lt;/p&gt;

&lt;h2&gt;
  
  
  Workflow Automation
&lt;/h2&gt;

&lt;h3&gt;
  
  
  5. n8n
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 181k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/n8n-io/n8n" rel="noopener noreferrer"&gt;https://github.com/n8n-io/n8n&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fprt7eqm0n0ordciqj76t.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%2Fprt7eqm0n0ordciqj76t.png" width="800" height="464"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;n8n is what you reach for when Zapier starts feeling too limiting. It has a visual builder, but you can drop into JavaScript or Python at any node, which means it handles genuinely complex workflows, not just simple two-step automations. Over 400 integrations, runs entirely on your server, and your API keys stay where they belong. The star count (181k) speaks for itself.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Changedetection.io
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 24.4k | Language: Python&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/dgtlmoon/changedetection.io" rel="noopener noreferrer"&gt;https://github.com/dgtlmoon/changedetection.io&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2F8hboc1gyj0k01b14smzj.jpeg" 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%2F8hboc1gyj0k01b14smzj.jpeg" width="800" height="483"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This one does one thing and does it well: watches web pages and tells you when they change. Price drops, sold-out items coming back, competitor pages updating, government notices anything without an RSS feed. Handles JavaScript-rendered pages, supports visual diffing, and fires to Slack, Discord, Telegram, email, and plenty more.&lt;/p&gt;

&lt;h3&gt;
  
  
  7. Listmonk
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 16k | Language: Go&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/knadh/listmonk" rel="noopener noreferrer"&gt;https://github.com/knadh/listmonk&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2F5zzboqxcov32br1fjzbq.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%2F5zzboqxcov32br1fjzbq.png" width="800" height="488"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A newsletter platform that asks why you are paying $50/month to send emails. Honestly, good question. Listmonk handles subscriber management, campaigns, segmentation, templates, and tracking. It is fast, built in Go, connects to any SMTP provider, and your list lives in your own database. Setup is straightforward.&lt;/p&gt;

&lt;h2&gt;
  
  
  Media and File Management
&lt;/h2&gt;

&lt;h3&gt;
  
  
  8. Immich
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 95.6k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/immich-app/immich" rel="noopener noreferrer"&gt;https://github.com/immich-app/immich&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2F56b8sk6ggi1zsqk29r92.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%2F56b8sk6ggi1zsqk29r92.png" width="800" height="637"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Immich is the one that converts people. You set it up, point the mobile app at it, and your photos start backing up automatically — facial recognition, smart search, shared albums, the works. It genuinely feels like a polished consumer product, not a side project someone cobbled together. The team ships constantly, and 95.6k stars is momentum that does not slow down.&lt;/p&gt;

&lt;h3&gt;
  
  
  9. Nextcloud
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 29k | Language: PHP&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/nextcloud/server" rel="noopener noreferrer"&gt;https://github.com/nextcloud/server&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fsp35g5vlprh0qbjmhivi.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%2Fsp35g5vlprh0qbjmhivi.png" width="800" height="697"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Nextcloud is the Swiss Army knife of self-hosting. Files, calendar, contacts, video calls, office docs, and hundreds of community apps — it covers basically everything Google Workspace does. It has been around long enough to be genuinely mature, and organizations from small teams to European governments run it in production.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Paperless-ngx
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Stars: 26k | Language: Python&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/paperless-ngx/paperless-ngx" rel="noopener noreferrer"&gt;https://github.com/paperless-ngx/paperless-ngx&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fl385b0st99ijq30u5o0e.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%2Fl385b0st99ijq30u5o0e.png" width="800" height="573"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Scan a document, and Paperless-ngx OCRs it, tags it, archives it, and makes it searchable. That is the whole pitch. Receipts, contracts, insurance forms — everything ends up in one browsable, searchable archive. It integrates with scanners and email inboxes and essentially removes the problem of “I know I have that document somewhere.”&lt;/p&gt;

&lt;h2&gt;
  
  
  DevOps, Monitoring, and Infrastructure
&lt;/h2&gt;

&lt;h3&gt;
  
  
  11. Uptime Kuma
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 84.5k | Language: JavaScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/louislam/uptime-kuma" rel="noopener noreferrer"&gt;https://github.com/louislam/uptime-kuma&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Foq6hemslw3svm3x8kce0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foq6hemslw3svm3x8kce0.jpg" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Uptime Kuma is embarrassingly good for a free self-hosted tool. It monitors websites, APIs, ports, DNS, and Docker containers, has a clean status page you can share publicly, and notifies you via Telegram, Discord, Slack, email, or 90 other integrations when something goes down. Docker deployment takes about three minutes. One of the easier wins on this whole list.&lt;/p&gt;

&lt;h3&gt;
  
  
  12. Coolify
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 40k | Language: PHP&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/coollabsio/coolify" rel="noopener noreferrer"&gt;https://github.com/coollabsio/coolify&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fco2xdano4fcl46yfnf9m.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%2Fco2xdano4fcl46yfnf9m.png" width="800" height="530"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Coolify is your self-hosted Heroku/Vercel/Netlify. Deploy apps, databases, and services on your own server through a web UI. Automatic SSL, GitHub/GitLab CI/CD integration, environment variable management, one-click installs for popular services. If you are tired of paying cloud platform pricing for deployments on hardware you own, this is the obvious move.&lt;/p&gt;

&lt;h3&gt;
  
  
  13. Portainer
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 32k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/portainer/portainer" rel="noopener noreferrer"&gt;https://github.com/portainer/portainer&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AAAM4FPgEb9NNtrc4" 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%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AAAM4FPgEb9NNtrc4" width="1400" height="680"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Portainer puts a browser UI on top of Docker and Kubernetes. Containers, images, volumes, stacks — all manageable without touching the CLI. The Community Edition is free, runs as a container, and most people install it within the first hour of setting up a new server. It just makes Docker less annoying to manage day-to-day.&lt;/p&gt;

&lt;h3&gt;
  
  
  14. Grafana
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 67k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/grafana/grafana" rel="noopener noreferrer"&gt;https://github.com/grafana/grafana&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2F6n3piyvklhkmm8tcieq0.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%2F6n3piyvklhkmm8tcieq0.png" width="800" height="378"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you are collecting metrics from anywhere Prometheus, InfluxDB, Postgres, Loki, Elasticsearch Grafana is how you visualize them. It is the standard at this point, used by teams of every size. The community dashboard library means you rarely start from scratch, and the plugin ecosystem covers almost any data source you can think of.&lt;/p&gt;

&lt;h3&gt;
  
  
  15. SigNoz
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 22k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/SigNoz/signoz" rel="noopener noreferrer"&gt;https://github.com/SigNoz/signoz&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AsSluCdQi3FmEaBlr" 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%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AsSluCdQi3FmEaBlr" width="1400" height="762"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;SigNoz is built on OpenTelemetry and gives you logs, metrics, and distributed traces in one place, which is the thing Datadog and New Relic charge a lot of money for. If you are running production services and want proper observability without the vendor pricing, SigNoz is worth a serious look.&lt;/p&gt;

&lt;h2&gt;
  
  
  Developer Tools and Productivity
&lt;/h2&gt;

&lt;h3&gt;
  
  
  16. awesome-selfhosted
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 282k | Language: Markdown&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/awesome-selfhosted/awesome-selfhosted" rel="noopener noreferrer"&gt;https://github.com/awesome-selfhosted/awesome-selfhosted&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fbq425etx6gix2a06p8hq.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%2Fbq425etx6gix2a06p8hq.png" width="800" height="1182"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Technically a list, but an essential one. This is the most comprehensive catalog of self-hostable software on the internet, organized by category and actively maintained. At 282k stars it is the most starred resource in the space. Bookmark it, you will come back to it repeatedly.&lt;/p&gt;

&lt;h3&gt;
  
  
  17. Gitea
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 47k | Language: Go&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/go-gitea/gitea" rel="noopener noreferrer"&gt;https://github.com/go-gitea/gitea&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2F0y1ri26u9493chl5btsh.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%2F0y1ri26u9493chl5btsh.png" width="800" height="368"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Gitea is GitHub in a single Go binary. Repos, issues, pull requests, code review, Actions, package registries — all running on hardware that could be a Raspberry Pi. It is lightweight, fast, and migration from GitHub is genuinely painless. Good default choice for anyone who wants private code hosting without a monthly bill.&lt;/p&gt;

&lt;h3&gt;
  
  
  18. Affine
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 49k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/toeverything/AFFiNE" rel="noopener noreferrer"&gt;https://github.com/toeverything/AFFiNE&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2F3jr11gd73pn5f9mx55ym.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%2F3jr11gd73pn5f9mx55ym.gif" width="600" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Affine is the Notion alternative that takes the whiteboard seriously. A doc editor, infinite canvas, and structured database all in one workspace, offline-first. The canvas and documents are actually integrated, not just two modes that happen to share a sidebar. If you live in Notion and want your data on your own machine, this is the most mature option right now.&lt;/p&gt;

&lt;h3&gt;
  
  
  19. Memos
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 38k | Language: Go&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/usememos/memos" rel="noopener noreferrer"&gt;https://github.com/usememos/memos&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fz9gq6roc6y1sqhw5v14e.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%2Fz9gq6roc6y1sqhw5v14e.png" width="800" height="604"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Memos is the fastest way to capture a thought without setting up a folder structure or thinking about organization. Markdown support, SQLite backend, single Docker command to deploy. It runs like a private microblog for your own notes and ideas. No friction, no hierarchy, just write and search. Underrated on this list.&lt;/p&gt;

&lt;h3&gt;
  
  
  20. Reactive Resume
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 35.9k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/AmruthPillai/Reactive-Resume" rel="noopener noreferrer"&gt;https://github.com/AmruthPillai/Reactive-Resume&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fwrczvy7os3s8t9nzc34f.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%2Fwrczvy7os3s8t9nzc34f.png" width="800" height="420"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The most starred open-source resume builder on GitHub. No account needed, no data leaving your server, multiple templates, real-time preview, exports to PDF. The JSON import/export means your resume data stays portable. Hard to argue with a free, self-hosted tool that looks better than most paid alternatives.&lt;/p&gt;

&lt;h3&gt;
  
  
  21. ToolJet
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 37.6k | Language: JavaScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/ToolJet/ToolJet" rel="noopener noreferrer"&gt;https://github.com/ToolJet/ToolJet&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fqt8pi184zd63moktljkh.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%2Fqt8pi184zd63moktljkh.png" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Every engineering team eventually needs internal dashboards, admin panels, and data tools that nobody wants to spend three weeks building properly. ToolJet lets you build them visually, connects to over 400 data sources, and runs on your own server. Retool does the same thing but comes with an enterprise pricing conversation. ToolJet does not.&lt;/p&gt;

&lt;h3&gt;
  
  
  22. Appwrite
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 49k | Language: TypeScript&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/appwrite/appwrite" rel="noopener noreferrer"&gt;https://github.com/appwrite/appwrite&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Frj54zqmsj82tv2m5ndss.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%2Frj54zqmsj82tv2m5ndss.png" width="800" height="613"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Appwrite is a self-hosted backend platform: auth, databases, storage, functions, messaging, and real-time subscriptions all in one. If you have built on Firebase or Supabase, the mental model is the same, just running on your own infrastructure. Good option for teams that want the ergonomics of a managed backend without actually depending on one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Data and Analytics
&lt;/h2&gt;

&lt;h3&gt;
  
  
  23. Matomo
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 20k | Language: PHP&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/matomo-org/matomo" rel="noopener noreferrer"&gt;https://github.com/matomo-org/matomo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AG4gY3S-R_-sZzSuc" 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%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1400%2F0%2AG4gY3S-R_-sZzSuc" width="1400" height="864"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Matomo is the practical answer to “I want analytics but not Google Analytics.” Full-featured page views, sessions, goals, funnels, e-commerce, heatmaps, session recordings GDPR-compliant by design, and familiar enough that anyone coming from GA will be comfortable within an hour. Your visitor data stays in your database, full stop.&lt;/p&gt;

&lt;h2&gt;
  
  
  Security and Authentication
&lt;/h2&gt;

&lt;h3&gt;
  
  
  24. Authentik
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 14.8k | Language: Python&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/goauthentik/authentik" rel="noopener noreferrer"&gt;https://github.com/goauthentik/authentik&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Ffaom999528qe06nv5hhu.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%2Ffaom999528qe06nv5hhu.png" width="800" height="598"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you are running five or six self-hosted services, managing separate logins gets old fast. Authentik is the solution: a self-hosted identity provider with SSO via SAML, OAuth2, and OIDC, LDAP for legacy apps, and a proxy outpost that can add auth to anything that does not natively support it. Think of it as Okta or Auth0, but running on your own server and without the per-user pricing.&lt;/p&gt;

&lt;h3&gt;
  
  
  25. Vaultwarden
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Stars: 44k | Language: Rust&lt;/strong&gt; &lt;strong&gt;GitHub: &lt;/strong&gt;&lt;a href="https://github.com/dani-garcia/vaultwarden" rel="noopener noreferrer"&gt;https://github.com/dani-garcia/vaultwarden&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Press enter or click to view image in full size&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%2Fapct3ibrk9hiiivof81n.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%2Fapct3ibrk9hiiivof81n.png" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Vaultwarden is an unofficial Bitwarden server written in Rust. It implements the full Bitwarden API, so every official client and browser extension works with it as-is; you just point them at your own server instead. Passwords, TOTP, secure notes, all encrypted on hardware you own. It is also very light on resources, which makes it a great first self-hosted project if you want somewhere to start.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where to Start
&lt;/h2&gt;

&lt;p&gt;Do not try to build the full stack on day one. Pick one tool that replaces something you are actively paying for, get it running, and go from there. Vaultwarden and Uptime Kuma are natural starting points, low complexity, immediate value, and both run fine on minimal hardware.&lt;/p&gt;

&lt;p&gt;If you want to go deeper, the &lt;a href="https://github.com/awesome-selfhosted/awesome-selfhosted" rel="noopener noreferrer"&gt;awesome-selfhosted list&lt;/a&gt; is where the rabbit hole goes. Every category you can think of, maintained by people who actually use this stuff.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today as a developer?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>opensource</category>
      <category>github</category>
      <category>tooling</category>
      <category>ai</category>
    </item>
    <item>
      <title>From Zero to Everything: The Story of My First Project</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Wed, 01 Apr 2026 04:24:01 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/from-zero-to-everything-the-story-of-my-first-project-35p8</link>
      <guid>https://dev.to/web_dev-usman/from-zero-to-everything-the-story-of-my-first-project-35p8</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/wecoded-2026"&gt;2026 WeCoded Challenge&lt;/a&gt;: Echoes of Experience&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;It was an eCommerce project.&lt;/p&gt;

&lt;p&gt;My boss wanted to build a perfume store on WordPress and WooCommerce. Simple enough, right? Wrong.&lt;/p&gt;

&lt;p&gt;The only thing they provided me was a link to their competitor's website. No content. No product data. No titles. No descriptions. No prices. Nothing. Just a plain idea and the expectation that something would come out of it.&lt;/p&gt;

&lt;p&gt;And here is the thing. At that time, there was no AI. No ChatGPT to ask for help. No shortcuts. Just me, the internet, and the communities that existed on it.&lt;/p&gt;

&lt;p&gt;Oh, and one more thing. It was my very first job ever. An internship. And the pay? Zero. Obviously.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Beginning
&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%2Fnlaedjs490njwdm51n71.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%2Fnlaedjs490njwdm51n71.png" alt="The Beginning of the project" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I could have quit right there. The work was clearly too much for one person, let alone a complete beginner with no senior to guide them. We did not have a senior. There was no one to ask. There was no one to tell me what to do next or how to do it.&lt;/p&gt;

&lt;p&gt;But I did not quit.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Even if the pay was zero, the skills I would gain from this project were not going to be zero.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So I made a decision. I was going to see this through, no matter what.&lt;/p&gt;

&lt;h2&gt;
  
  
  10,000+ Products
&lt;/h2&gt;

&lt;p&gt;The first thing I did was start exploring the competitor websites to gather product data.&lt;/p&gt;

&lt;p&gt;The more I explored, the more products there were. It felt like it never ended. But I kept going, brand by brand, product by product. I started building CSV files for each brand separately. Every CSV included:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Product titles&lt;/li&gt;
&lt;li&gt;Prices&lt;/li&gt;
&lt;li&gt;Descriptions&lt;/li&gt;
&lt;li&gt;Images&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By the end of it, I had &lt;strong&gt;10,000+ products&lt;/strong&gt; ready in CSV files.&lt;/p&gt;

&lt;p&gt;No automation. No AI. Just research, patience, and a whole lot of hours.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building the Store
&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%2Fc73q2l367krx78h7p2rf.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%2Fc73q2l367krx78h7p2rf.png" alt="Store" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With the data ready, I moved to the next phase. Here is the order in which everything happened:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Installed WordPress and WooCommerce and configured all settings from scratch, learning through the YouTube community because that is where the knowledge lived at that time.&lt;/li&gt;
&lt;li&gt;Started the design and development of the store, page by page, step by step. Do not get me wrong here. This was my first project. I was learning as I was building.&lt;/li&gt;
&lt;li&gt;Imported all the products from the CSVs, brand by brand, following WooCommerce guidelines exactly.&lt;/li&gt;
&lt;li&gt;Set up tax and shipping configurations.&lt;/li&gt;
&lt;li&gt;Integrated PayPal as the payment gateway.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It was all done.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Three months. A complete beginner. A complete eCommerce store built from nothing.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problems Begin
&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%2Fmkypoogb7yylxsymwfew.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%2Fmkypoogb7yylxsymwfew.png" alt="feedback" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then came the feedback.&lt;/p&gt;

&lt;p&gt;My teammates and my boss pointed out so many issues. But the one that hit the hardest was the speed of the website. It was slow. And in eCommerce, slow means dead.&lt;/p&gt;

&lt;p&gt;So I went back to research mode. Here is how that journey went:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cache:&lt;/strong&gt; I implemented it on the website. There was some improvement, but not enough.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;.htaccess file:&lt;/strong&gt; I learned how it could be used to improve website speed through GZip compression, cache lifecycle settings, font optimization, image optimization, and much more. Speed improved. But still not where I wanted it to be.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cloudflare CDN:&lt;/strong&gt; I learned how to implement it properly and configure all the settings correctly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After so many rounds of trial and error, I finally got what I was working for. Great speed.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Website Was Live. But There Were No Orders.
&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%2Fzsysftu6rjqagrgpy1bo.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%2Fzsysftu6rjqagrgpy1bo.png" alt="Happy" width="800" height="1080"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I thought the project was complete. I thought we were done.&lt;/p&gt;

&lt;p&gt;Then days passed. No orders.&lt;/p&gt;

&lt;p&gt;That is when I came to know something that nobody told me before.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Building a website does not mean the business is successful. A website going live is not the finish line. It is just the starting line.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So I went back to research. That is where I discovered SEO for the first time. And once I found it, I started learning it immediately. I learned the concepts, the techniques, the logic behind it. I also learned marketing strategies like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Subscribe to get a 10% coupon code&lt;/li&gt;
&lt;li&gt;Member discounts&lt;/li&gt;
&lt;li&gt;Referral programs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I started implementing them one by one.&lt;/p&gt;

&lt;p&gt;Then one day, without any warning, we got our first organic order.&lt;/p&gt;

&lt;p&gt;It felt like a celebration.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Harsh Truth About Credit
&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%2Fggcbb5b2up8xmlz40bct.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%2Fggcbb5b2up8xmlz40bct.png" alt="Bad work environemnt" width="800" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now here is the part I almost forgot to mention, but it matters.&lt;/p&gt;

&lt;p&gt;While I was implementing all of this and the website was steadily gaining organic traffic, orders were not coming through the website. My boss kept asking why there were no orders coming in.&lt;/p&gt;

&lt;p&gt;Then we discovered the real answer.&lt;/p&gt;

&lt;p&gt;The orders were coming. Just not online. People were finding the business through the website, seeing the physical store address in Canada, and going there in person to make their purchases instead. The local SEO was working. It was working really well. People were finding the business because of the website. Because of the work I had done.&lt;/p&gt;

&lt;p&gt;But my boss did not want to give credit for any of it.&lt;/p&gt;

&lt;p&gt;And in that moment, I learned one of the most important lessons of my career. Something no one teaches you in any tutorial or any course.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Never work too hard for a company expecting recognition, because to many companies, you are nothing. You are always replaceable. The credit will not always come. The acknowledgment will not always come.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But I kept going anyway. Because at this point, I was not doing it for them anymore.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Walked Away With
&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%2Faq2sqv2jg8u33o8dk8ae.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%2Faq2sqv2jg8u33o8dk8ae.png" alt="Walk away" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After &lt;strong&gt;4 to 5 months&lt;/strong&gt; of working on this project alone, without a single senior guiding me, without any AI to assist me, and without a single rupee of pay, here is what I had:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Research skills that had reached a completely different level&lt;/li&gt;
&lt;li&gt;Solid design and development skills&lt;/li&gt;
&lt;li&gt;The ability to learn anything from scratch&lt;/li&gt;
&lt;li&gt;Deep knowledge of cache, CDN, and full website optimization&lt;/li&gt;
&lt;li&gt;The ability to build a working eCommerce store from the ground up&lt;/li&gt;
&lt;li&gt;SEO and digital marketing knowledge&lt;/li&gt;
&lt;li&gt;The skill to write SEO-optimized content for websites and articles&lt;/li&gt;
&lt;li&gt;Hands on experience with web hosting and DNS configuration&lt;/li&gt;
&lt;li&gt;Payment gateway and eCommerce setup experience&lt;/li&gt;
&lt;li&gt;WordPress database knowledge and the ability to run queries&lt;/li&gt;
&lt;li&gt;A deep appreciation for communities like YouTube and Stack Overflow&lt;/li&gt;
&lt;li&gt;Real, hands on project management experience&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All of this came from one project. One project that I handled completely on my own, from zero to finish, with no guidance, no pay, and no AI.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Real Lesson
&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%2Fcob6yjhmj6dd79627a6y.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%2Fcob6yjhmj6dd79627a6y.png" alt="Lessons" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This was not just a project. It was a school.&lt;/p&gt;

&lt;p&gt;And the most important thing it taught me was not technical. It was this.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Work hard for your own growth. Learn for yourself. Build for yourself. Because the skills you earn, nobody can take away from you. The company may not give you credit. The boss may not see your value. But what you learn in the process is yours. Forever.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That was the story of my very first project in my professional career.&lt;/p&gt;

&lt;p&gt;And I would not trade that experience for anything.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today from my experience?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>devchallenge</category>
      <category>wecoded</category>
      <category>dei</category>
      <category>career</category>
    </item>
    <item>
      <title>You Finished Building. Now Where Do You Actually Host It?</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Mon, 30 Mar 2026 08:20:11 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/you-finished-building-now-where-do-you-actually-host-it-1b54</link>
      <guid>https://dev.to/web_dev-usman/you-finished-building-now-where-do-you-actually-host-it-1b54</guid>
      <description>&lt;p&gt;Every developer hits this wall.&lt;/p&gt;

&lt;p&gt;You've written the code. It works on &lt;code&gt;localhost:3000&lt;/code&gt;. A friend asks to see it — and you suddenly realize you have no idea how to put it on the internet. So you open a new tab and start Googling. Thirty minutes later, you're drowning in options: Vercel, Netlify, Railway, Render, Heroku, DigitalOcean, Hostinger... and zero context for which one actually makes sense for your project.&lt;/p&gt;

&lt;p&gt;Nobody teaches this part. Tutorials take you from zero to a working app, then quietly skip the "now ship it" step. This post is the one I wish had existed when I was standing in that exact spot.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 1: Understand what kind of project you have
&lt;/h2&gt;

&lt;p&gt;Before you even look at a single pricing page, you need to be honest about your stack. The hosting market has split into two very different worlds — and confusing them will cost you money or headaches.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pure frontend / static site
&lt;/h3&gt;

&lt;p&gt;If your project is a React app, a Vue SPA, a Next.js static export, or plain HTML/CSS/JS with no persistent backend — you're in the easiest category.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vercel and Netlify are your best starting point.&lt;/strong&gt; Both have generous free tiers, Git-based deploys, and zero infrastructure management. Push to GitHub, it's live. For side projects and portfolios, this is genuinely hard to beat at zero cost.&lt;/p&gt;

&lt;h3&gt;
  
  
  Full-stack / backend projects
&lt;/h3&gt;

&lt;p&gt;This is where decisions get more interesting. If you have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A Node.js / Express server&lt;/li&gt;
&lt;li&gt;A Next.js app with API routes (not static export)&lt;/li&gt;
&lt;li&gt;A PHP backend or Laravel app&lt;/li&gt;
&lt;li&gt;A WordPress site&lt;/li&gt;
&lt;li&gt;Anything that runs persistent server-side code&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;...then free tiers shrink fast, and you need to think about what kind of managed environment you want.&lt;/p&gt;




&lt;h2&gt;
  
  
  The options honestly compared
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Platform&lt;/th&gt;
&lt;th&gt;Best for&lt;/th&gt;
&lt;th&gt;Starting price&lt;/th&gt;
&lt;th&gt;Node.js&lt;/th&gt;
&lt;th&gt;PHP/WP&lt;/th&gt;
&lt;th&gt;Notes&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Vercel / Netlify&lt;/td&gt;
&lt;td&gt;Static &amp;amp; JAMstack&lt;/td&gt;
&lt;td&gt;Free&lt;/td&gt;
&lt;td&gt;Serverless only&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;Usage-based pricing at scale&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Railway / Render&lt;/td&gt;
&lt;td&gt;Node, Python backends&lt;/td&gt;
&lt;td&gt;~$5/mo&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;Bills by usage&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hostinger Business&lt;/td&gt;
&lt;td&gt;Node.js + PHP + WP&lt;/td&gt;
&lt;td&gt;~$3/mo&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;Flat pricing, no usage spikes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DigitalOcean VPS&lt;/td&gt;
&lt;td&gt;Full server control&lt;/td&gt;
&lt;td&gt;$6/mo&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;You manage everything&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  What changed recently — and why it matters
&lt;/h2&gt;

&lt;p&gt;For a long time, the developer hosting market was essentially split:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Vercel/Netlify&lt;/strong&gt; for frontend-first JavaScript projects&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;VPS or PaaS&lt;/strong&gt; for anything with a real backend&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The frustrating gap was that platforms like Vercel use usage-based billing. There's a now-infamous case of a Netlify user receiving a $104,500 bill after a DDoS attack caused a bandwidth spike. Even without extreme cases, a modest Next.js app can look affordable for months and then jump from $40 to $200+ after a traffic surge.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hostinger just closed that gap.&lt;/strong&gt; In late 2025, they launched fully managed Node.js hosting across their Business and Cloud plans — with flat, predictable monthly pricing. No usage-based fees. No surprise bills.&lt;/p&gt;

&lt;p&gt;This is a meaningful shift. You can now host a Node.js web app — React, Next.js, Vue, Express, NestJS, Nuxt — on the same plan as your PHP projects, for a fixed monthly rate, without touching a server config.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Hostinger's Node.js hosting actually looks like
&lt;/h2&gt;

&lt;p&gt;Here's what you get on the &lt;strong&gt;Business plan&lt;/strong&gt; (the sweet spot for most developers):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Deploy from GitHub — every commit auto-redeploys to production&lt;/li&gt;
&lt;li&gt;Or upload a ZIP file manually if you prefer&lt;/li&gt;
&lt;li&gt;Select your Node.js version directly from hPanel&lt;/li&gt;
&lt;li&gt;Build output is handled automatically — no manual reverse proxy setup&lt;/li&gt;
&lt;li&gt;Environment variables managed through the dashboard&lt;/li&gt;
&lt;li&gt;CPU, RAM, and I/O usage graphs built in&lt;/li&gt;
&lt;li&gt;LiteSpeed web server (noticeably faster than Apache for most workloads)&lt;/li&gt;
&lt;li&gt;NVMe SSD storage&lt;/li&gt;
&lt;li&gt;Free SSL (auto-renews)&lt;/li&gt;
&lt;li&gt;Free domain for the first year&lt;/li&gt;
&lt;li&gt;SSH access&lt;/li&gt;
&lt;li&gt;PHP 7.4 through 8.3 — switchable from the dashboard&lt;/li&gt;
&lt;li&gt;Git integration for PHP projects too&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Supported frameworks include:&lt;/strong&gt; Next.js, React, React Router, Vue.js, Angular, Vite, Parcel, Preact, Express.js, NestJS, Nuxt.js — with more on the way.&lt;/p&gt;

&lt;p&gt;For WordPress and PHP: one-click installer, LiteSpeed cache, staging environment on Business plan and above.&lt;/p&gt;




&lt;h2&gt;
  
  
  The deployment flow (for a Node.js app)
&lt;/h2&gt;

&lt;p&gt;If you're used to Vercel, Hostinger's flow is similar. Connect your GitHub repo from hPanel, pick your Node.js version, and it handles the build and deploy automatically. Every subsequent push redeploys.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Alternatively, deploy via SSH if you prefer the old-school way&lt;/span&gt;
ssh u123456789@yourdomain.com
&lt;span class="nb"&gt;cd&lt;/span&gt; ~/domains/yourdomain.com/nodejs

&lt;span class="c"&gt;# Pull latest&lt;/span&gt;
git pull origin main

&lt;span class="c"&gt;# Dependencies are managed automatically,&lt;/span&gt;
&lt;span class="c"&gt;# but you can also run npm commands manually&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For PHP/Laravel projects, the flow is familiar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ssh u123456789@yourdomain.com
&lt;span class="nb"&gt;cd&lt;/span&gt; ~/domains/yourdomain.com/public_html

git clone https://github.com/you/your-app.git &lt;span class="nb"&gt;.&lt;/span&gt;
composer &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--no-dev&lt;/span&gt; &lt;span class="nt"&gt;--optimize-autoloader&lt;/span&gt;
&lt;span class="nb"&gt;cp&lt;/span&gt; .env.example .env
php artisan key:generate
php artisan migrate &lt;span class="nt"&gt;--force&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  When Hostinger is the right call
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You're building a &lt;strong&gt;full-stack Node.js app&lt;/strong&gt; and want flat pricing with no usage surprises&lt;/li&gt;
&lt;li&gt;You're building a &lt;strong&gt;PHP/Laravel project&lt;/strong&gt; and want LiteSpeed performance without managing a VPS&lt;/li&gt;
&lt;li&gt;You're building a &lt;strong&gt;WordPress site&lt;/strong&gt; as a developer (staging, SSH access, Git deploys — it's all there)&lt;/li&gt;
&lt;li&gt;You want &lt;strong&gt;one plan&lt;/strong&gt; that handles multiple project types (Node + PHP + WP) without juggling multiple platforms&lt;/li&gt;
&lt;li&gt;You want &lt;strong&gt;predictable monthly costs&lt;/strong&gt; — especially important when building for clients&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  When to look elsewhere
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Pure static sites with no backend → Vercel or Netlify (free tier is genuinely great here)&lt;/li&gt;
&lt;li&gt;You need &lt;strong&gt;full root access&lt;/strong&gt; and want to configure everything yourself → DigitalOcean or Hetzner VPS&lt;/li&gt;
&lt;li&gt;Python-heavy backend (Django, FastAPI) → Railway or Render have better Python support&lt;/li&gt;
&lt;li&gt;Enterprise-scale traffic with complex infrastructure → you probably already know what you need&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  The honest summary
&lt;/h2&gt;

&lt;p&gt;The "which hosting do I pick" decision really comes down to this:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What type of project is it, and do I want to manage infrastructure or not?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you want managed hosting — where deploys are handled, SSL auto-renews, and you never SSH into a server to restart a process at 2am — then Hostinger now covers the full stack. Node.js, PHP, WordPress, all on the same dashboard, flat pricing.&lt;/p&gt;

&lt;p&gt;The Business plan starts around $3/mo on a longer-term commitment. That's cheaper than a Railway hobby plan and significantly cheaper than Vercel once you're past the free tier.&lt;/p&gt;

&lt;p&gt;I've been using it for a mix of PHP and Node projects and the thing I notice most is what I &lt;em&gt;don't&lt;/em&gt; have to think about — which is exactly what you want from managed hosting.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you want to check it out, I have a referral link that gives an extra 20% discount: &lt;a href="https://www.hostinger.com/pk?REFERRALCODE=USISTUDIOHE1" rel="noopener noreferrer"&gt;&lt;strong&gt;hostinger.com&lt;/strong&gt;&lt;/a&gt;. Affiliate disclosure: I earn a small commission at no extra cost to you. I only share tools I actually use.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>frontend</category>
      <category>php</category>
      <category>programming</category>
    </item>
    <item>
      <title>11 Things every frontend developer should learn, and I mean it</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Sat, 28 Mar 2026 08:33:59 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/11-things-every-frontend-developer-should-learn-and-i-mean-it-44a2</link>
      <guid>https://dev.to/web_dev-usman/11-things-every-frontend-developer-should-learn-and-i-mean-it-44a2</guid>
      <description>&lt;p&gt;This is not another recycled list. These are things I have seen developers skip, ignore, or just never bother learning, and it shows in their work. If you are serious about frontend, actually read this.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Semantic HTML structure
&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%2Fkewnmu916qhys613uecj.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%2Fkewnmu916qhys613uecj.png" alt="Semantic HTML structure" width="800" height="1164"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Most developers just throw divs everywhere and call it a day. That is wrong. Semantic HTML is not just for SEO, it is for accessibility, readability, and long-term maintainability.&lt;/p&gt;

&lt;p&gt;Use the right tag for the right job. Use &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt;, and &lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt; instead of generic &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; soup. Use &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; for navigation, &lt;code&gt;&amp;lt;aside&amp;gt;&lt;/code&gt; for sidebars, and &lt;code&gt;&amp;lt;figure&amp;gt;&lt;/code&gt; for images with captions. Screen readers and search engines both depend on this structure to understand your page.&lt;/p&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div class="header"&amp;gt;
&amp;lt;div class="nav"&amp;gt;...&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;header&amp;gt;
&amp;lt;nav&amp;gt;...&amp;lt;/nav&amp;gt;
&amp;lt;/header&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2. Know when to use a heading tag and when not to
&lt;/h2&gt;

&lt;p&gt;Heading tags have meaning. They tell search engines and screen readers what is important on your page. Misusing them breaks that hierarchy.&lt;/p&gt;

&lt;p&gt;Here is a real example. ==Every website has that one CTA section with a big line like “Ready to get started?” and a button. A lot of developers slap an ====&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;==== on it. Do not do that. That line is presentational, not structural. Use a ====&lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;==== and style it to look big.==&lt;/p&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;h2&amp;gt;Ready to get started?&amp;lt;/h2&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;span class="cta-heading"&amp;gt;Ready to get started?&amp;lt;/span&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Save heading tags for content that actually structures the page. Use one &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; per page, and be deliberate with &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt; and below.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Image optimization
&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%2Fem442eorynd48rq0bktl.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%2Fem442eorynd48rq0bktl.png" alt="Image optimization" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;No image on your website should exceed 100kb. That is a rule, not a suggestion. Unoptimized images are one of the biggest performance killers and most developers do not think twice about it.&lt;/p&gt;

&lt;p&gt;What you should be doing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use WebP format. It is smaller than JPEG and PNG with no visible quality loss.&lt;/li&gt;
&lt;li&gt;Use tools like Squoosh or Sharp (Node.js) to compress before shipping.&lt;/li&gt;
&lt;li&gt;Always define &lt;code&gt;width&lt;/code&gt; and &lt;code&gt;height&lt;/code&gt; attributes on your images to prevent layout shift.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;srcset&lt;/code&gt; to serve different sizes based on the device.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;img
  src="hero.webp"
  srcset="hero-480.webp 480w, hero-800.webp 800w"
  sizes="(max-width: 600px) 480px, 800px"
  width="800"
  height="400"
  alt="Hero image"
/&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  4. Lazy loading and fetch priority
&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%2Fj0ncake4ffytvbex6itc.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%2Fj0ncake4ffytvbex6itc.png" alt="Lazy loading and fetch priority" width="800" height="628"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Not everything needs to load at once. Lazy loading images and iframes below the fold is one of the easiest wins you can get for performance, and it takes literally one attribute.&lt;/p&gt;

&lt;p&gt;But here is the part people miss. Your hero image should never be lazy loaded. It is &lt;a href="https://pixicstudio.medium.com/above-the-fold-in-web-design-f1a8f0cea071" rel="noopener noreferrer"&gt;above the fold&lt;/a&gt;, it is the first thing users see, and you want it loading as fast as possible. Use &lt;code&gt;fetchpriority="high"&lt;/code&gt; on it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;img src="hero.webp" fetchpriority="high" alt="Hero" /&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These two attributes together can make a measurable difference in your Largest Contentful Paint score.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Host Google Fonts locally
&lt;/h2&gt;

&lt;p&gt;Everyone reaches for the Google Fonts CDN link without thinking about it. The problem is that is an extra DNS lookup, an extra connection, and an extra request on every page load. You are adding latency for no reason.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;As you can see, the side effects of using Google fonts locally.&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%2Fv3sua3r9dpmz089c8k5m.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%2Fv3sua3r9dpmz089c8k5m.png" alt="Performance improvement using local fonts and custom SVG icons" width="800" height="833"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The fix is simple. Download the font files and serve them yourself.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@font-face {  font-family: "Inter";  src: url("/fonts/inter.woff2") format("woff2");  font-display: swap;}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Use &lt;code&gt;font-display: swap&lt;/code&gt; so your text stays visible while the font loads. Use woff2 format since every modern browser supports it and it is the smallest format available. You can use google-webfonts-helper to download the exact files you need with the right CSS already written for you.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Ditch Font Awesome CDN, use custom SVG icons
&lt;/h2&gt;

&lt;p&gt;Font Awesome CDN loads hundreds of kilobytes of icons. You are probably using fifteen of them. That is a terrible trade-off for your performance.&lt;/p&gt;

&lt;p&gt;Instead, use inline SVG icons. AI is genuinely good at generating clean SVG icon code. Ask it for exactly what you need and paste it in. You get the icon, nothing more.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!-- Instead of loading Font Awesome for a simple arrow icon --&amp;gt;
&amp;lt;svg
  xmlns="http://www.w3.org/2000/svg"
  width="20"
  height="20"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
&amp;gt;
  &amp;lt;line x1="5" y1="12" x2="19" y2="12" /&amp;gt;
  &amp;lt;polyline points="12 5 19 12 12 19" /&amp;gt;
&amp;lt;/svg&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;SVG icons scale perfectly on any screen, support &lt;code&gt;currentColor&lt;/code&gt; for easy theming, and add zero extra HTTP requests.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Build a design system, not a random collection of styles
&lt;/h2&gt;

&lt;p&gt;Your spacing, sizing, colors, and fonts should follow a system. Not vibes. When every developer on a project makes up their own margin values, you end up with a codebase where nothing aligns and nothing is consistent.&lt;/p&gt;

&lt;p&gt;Define your tokens once and use them everywhere:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;:root {
  --color-primary: #2563eb;
  --color-text: #111827;
  --color-muted: #6b7280;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once you have this, every decision across the project becomes faster and more consistent. You stop debating whether to use 14px or 15px and just use &lt;code&gt;--text-sm&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Write custom CSS instead of relying on third-party libraries
&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%2Ff9a9fhxf5ez0dwckima2.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%2Ff9a9fhxf5ez0dwckima2.png" alt="Write custom CSS" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tailwind, Bootstrap, and similar libraries are not evil, but leaning on them for everything bloats your project and creates a dependency you have to maintain. More importantly, it holds back your actual understanding of CSS.&lt;/p&gt;

&lt;p&gt;When you write your own CSS, you know exactly what is on the page and why. Use the modern features that are available to you natively:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use &lt;code&gt;clamp()&lt;/code&gt; for fluid typography instead of hardcoded breakpoints.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;grid&lt;/code&gt; and &lt;code&gt;flex&lt;/code&gt; natively. You do not need a library for layout.&lt;/li&gt;
&lt;li&gt;Use container queries to make components responsive based on their own size, not the viewport.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/* Fluid font size without a single media query */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/* Container query example */
@container (min-width: 400px) {
.card {
flex-direction: row;
}
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  9. ==Accessibility is not optional==
&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%2F7gdrbyyhr2fh23wt7eca.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%2F7gdrbyyhr2fh23wt7eca.png" alt="Accessibility" width="800" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Semantic HTML gets you halfway there, but there is more to it. If a user cannot navigate your site with a keyboard, you have a broken website. It is that simple.&lt;/p&gt;

&lt;p&gt;The basics you should always have covered:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Every interactive element must be reachable with Tab and operable with Enter or Space.&lt;/li&gt;
&lt;li&gt;Never remove the focus outline without replacing it with something visible.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;aria-label&lt;/code&gt; on icon buttons that have no visible text.&lt;/li&gt;
&lt;li&gt;Ensure color contrast meets WCAG AA, which is a 4.5:1 ratio for normal text.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!-- Icon button with no visible label, always add aria-label --&amp;gt;&amp;lt;button aria-label="Close menu"&amp;gt;
&amp;lt;svg&amp;gt;...&amp;lt;/svg&amp;gt;
&amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  10. Know your Core Web Vitals
&lt;/h2&gt;

&lt;p&gt;You should understand what LCP, CLS, and INP mean and how your decisions affect them. Not because Google says so, but because they measure things that actually matter to real users.&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%2Fy38zpevpzvof82fnav9o.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%2Fy38zpevpzvof82fnav9o.png" alt="The final result" width="800" height="833"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;LCP (Largest Contentful Paint):&lt;/strong&gt; how fast your main content appears. Optimize your hero image and server response time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CLS (Cumulative Layout Shift):&lt;/strong&gt; how much the page jumps around while loading. Always set image dimensions. Never inject content above existing content.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;INP (Interaction to Next Paint):&lt;/strong&gt; how fast the page responds to user input. Avoid long tasks on the main thread.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Open Chrome DevTools, run a Lighthouse audit, and actually look at what it tells you. This is how you verify that everything else on this list is actually working.&lt;/p&gt;

&lt;h2&gt;
  
  
  11. Sharpen your design eye
&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%2Fek8dgwsk2r2nk14fqrs4.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%2Fek8dgwsk2r2nk14fqrs4.png" alt="Sharpen your design eye" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As AI gets better at writing code, the thing that will separate good frontend developers from the rest is design judgment. Knowing how to build something is no longer enough. You need to know how to make it look right.&lt;/p&gt;

&lt;p&gt;This does not mean you need to become a full designer. It means you should study spacing and why things feel off when it is inconsistent. Learn basic typography rules like line height, line length, and font pairing. Look at sites you admire and ask yourself why they feel good. Practice in Figma or even just in the browser.&lt;/p&gt;

&lt;p&gt;Having only one skill will not get you far. The frontend developers who are building things that actually stand out are the ones who can think about both the code and the result on the screen.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;None of this is hard to learn. It is all just discipline. The developers who do these things consistently are the ones whose work looks and performs better than everyone else’s. Start with one, make it a habit, then move to the next.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;blockquote&gt;
&lt;p&gt;Did you learn something good today as a developer?&lt;br&gt;
Then show some love.&lt;br&gt;
© &lt;a href="https://www.linkedin.com/in/muhammad-usman-strategist/" rel="noopener noreferrer"&gt;Muhammad Usman&lt;/a&gt;&lt;br&gt;
WordPress Developer | Website Strategist | SEO Specialist&lt;br&gt;
Don’t forget to subscribe to &lt;a href="https://developersjourney.substack.com/" rel="noopener noreferrer"&gt;Developer’s Journey&lt;/a&gt; to show your support.&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%2Fh3jsza7m50ojhdd4yuuc.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%2Fh3jsza7m50ojhdd4yuuc.png" alt="Developer's Journey" width="800" height="266"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>frontend</category>
      <category>webdev</category>
      <category>html</category>
      <category>performance</category>
    </item>
    <item>
      <title>If you had to restart your dev journey today, would you choose the same stack?</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Wed, 25 Mar 2026 11:36:00 +0000</pubDate>
      <link>https://dev.to/web_dev-usman/if-you-had-to-restart-your-dev-journey-today-would-you-choose-the-same-stack-2k8n</link>
      <guid>https://dev.to/web_dev-usman/if-you-had-to-restart-your-dev-journey-today-would-you-choose-the-same-stack-2k8n</guid>
      <description>&lt;p&gt;It's one of those questions that sounds simple but hits different the longer you've been coding.&lt;/p&gt;

&lt;p&gt;When most of us started, we didn't really &lt;em&gt;choose&lt;/em&gt; a stack. We fell into one.&lt;/p&gt;

&lt;p&gt;Maybe it was the tutorial you stumbled across. Maybe it was what your bootcamp taught. Maybe it was just whatever was hiring the most in your city at the time.&lt;/p&gt;

&lt;p&gt;But this can be the question:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you wiped the slate clean today with everything you know now, would you make the same call?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A few things worth thinking about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The AI/ML wave has made Python feel almost unavoidable&lt;/li&gt;
&lt;li&gt;Rust keeps showing up in conversations it didn't used to&lt;/li&gt;
&lt;li&gt;JavaScript is still everywhere, but the fatigue is real&lt;/li&gt;
&lt;li&gt;Some devs are quietly moving toward simplicity over hype&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The stack you start with shapes more than just your syntax. It shapes your thinking, your community, and the kind of problems you get excited about.&lt;/p&gt;

&lt;p&gt;There's no wrong answer here. Some would double down. Some would completely pivot. Both are valid.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So, same stack or a fresh start?&lt;/strong&gt;&lt;br&gt;
Drop your pick in the comments. Would love to see where the community lands on this. 👇&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>career</category>
      <category>programming</category>
      <category>discuss</category>
    </item>
  </channel>
</rss>
