<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Frank</title>
    <description>The latest articles on Forem by Frank (@dev_frank).</description>
    <link>https://forem.com/dev_frank</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%2F1836496%2Ff5642188-1d16-49c2-aedb-597b09e28e8f.jpg</url>
      <title>Forem: Frank</title>
      <link>https://forem.com/dev_frank</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/dev_frank"/>
    <language>en</language>
    <item>
      <title>Hey, This is Why Your Vibe-Coded App Will Fail</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Fri, 22 Aug 2025 10:25:17 +0000</pubDate>
      <link>https://forem.com/dev_frank/hey-this-is-why-your-vibe-coded-app-will-fail-25d3</link>
      <guid>https://forem.com/dev_frank/hey-this-is-why-your-vibe-coded-app-will-fail-25d3</guid>
      <description>&lt;p&gt;&lt;em&gt;I built a $1M App in 5 hours&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I just shipped [cool app]! That was built in 3 hours with AI&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I make $250k/month from 20 apps.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You must have come across videos or tweets like this these days. Your 14-year-old neighbor’s son is probably shipping one as we speak.&lt;/p&gt;

&lt;p&gt;When building gets this easy, you stop asking if you should build something. You just build it.&lt;/p&gt;

&lt;p&gt;I’ve been there. Three years into my software development journey, and I’ve fallen into this trap more times than I’d like to admit. I’m the guy who always comes up with ideas. I’m visual, so anytime something pops into my head, I open up Lovable or Bolt, write in some prompts, and boom—three hours later my idea is a working app.&lt;/p&gt;

&lt;p&gt;These apps aren’t bad apps. Some actually solve real problems. The issue is deeper than that.&lt;/p&gt;

&lt;p&gt;Let me tell you why your vibe-coded app will fail, and it’s not for the reason you think.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Real Problem: You Don’t Control Your Own Code
&lt;/h2&gt;

&lt;p&gt;Everyone talks about vibe-coded apps failing because they solve the wrong problems. That’s part of it. But the real killer is that &lt;strong&gt;you don’t control your codebase. The AI does.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I had an idea that I was convinced would solve a real problem. And it would have—the concept was solid. So I vibe-coded my way through it using AI. The app looked great and worked perfectly, and I was feeling good about myself.&lt;/p&gt;

&lt;p&gt;I started getting a lot of users. And that’s when everything went south.&lt;/p&gt;

&lt;p&gt;The app started breaking constantly due to security vulnerabilities I didn’t even know existed. The tech stack the AI chose wasn’t something I was familiar with then, so when there were critical issues, I was always stuck. I was just sitting there watching my app fall apart, waiting for the AI to understand my problem and fix it.&lt;/p&gt;

&lt;p&gt;Sometimes it couldn’t.&lt;/p&gt;

&lt;p&gt;I realized I had built something I couldn’t maintain.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Four Ways AI Will Kill Your App
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. You’re Stuck With Whatever the AI Thinks
&lt;/h3&gt;

&lt;p&gt;When something breaks in your app in a frustrating way, you’re stuck waiting for the AI to understand your problem through natural language. Good luck explaining complex technical issues in plain English.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Customization are Limited
&lt;/h3&gt;

&lt;p&gt;Your customization options are limited to what the AI is capable of. Do you want to add a specific feature that requires deep technical knowledge? I hope you can explain advanced algorithms in simple terms.&lt;/p&gt;

&lt;p&gt;There are developers out there spending hours trying to get AI to implement something that would take 30 minutes if they just wrote it themselves.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Hidden Security Vulnerabilities Kill Your App Silently
&lt;/h3&gt;

&lt;p&gt;AI generates code that works, not code that’s secure. You wouldn’t know of any vulnerabilities until someone exploits them. And when that happens, you run back to the AI, hoping the AI understands cybersecurity principles.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Technical Debt Piles up Behind the Scenes
&lt;/h3&gt;

&lt;p&gt;When it comes to functional codes, AI does that perfectly these days. But is it maintainable? I don’t think so. Your app might handle 100 users effectively, but when it gets to 1000+ users, it starts breaking.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why This is Especially Dangerous for Beginner Developers
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;If you’re just starting your web development journey, vibe coding with AI is like learning to drive in a self-driving car. You might get to your destination, but you have no idea how you got there.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When technical issues occur that need actual technical solutions, not natural language prompts, you’ll end up frustrated and stuck.&lt;/p&gt;

&lt;p&gt;AI should be a tool for tasks you CAN do but would take too long. If you’re a beginner using AI to build apps, you better be familiar with the tech stack the AI chooses. How else will you debug issues the AI can’t fix?&lt;/p&gt;

&lt;p&gt;My advice to junior developers: if you’re using VS Code, disable GitHub Copilot for now. You honestly don’t need code completions at the moment. Learn programming the right way first. Copilot should guide you when you know what you’re doing but can’t remember the syntax—not think for you when you don’t know what to think.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem With User Feedback
&lt;/h2&gt;

&lt;p&gt;If you’ve built a prototype or an app already, and you’re seeking validation from a target audience, be careful. Most of the time you hear advice like “just listen to your users.”&lt;/p&gt;

&lt;p&gt;Yes, users can tell you what’s broken, but they can’t tell you what to build next.&lt;/p&gt;

&lt;p&gt;Some developers build exactly what users request, then wonder why their app has a lot of features nobody really wants.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Users asked for faster horses, not cars. They asked for better candles, not light bulbs.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I’ve come to notice a pattern about successful builders, which is that they listen to the problems users describe, not the solutions they suggest. They identify patterns across complaints. They always have a vision and say no to most feature requests.&lt;/p&gt;

&lt;p&gt;Steve Jobs didn’t build Apple by asking users what they wanted. He built it by understanding what they needed, even when they couldn’t articulate it.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Money-Making Fantasy
&lt;/h2&gt;

&lt;p&gt;Most vibe coders think they’re building profitable businesses fast. But what happens after you make some profit and start having issues that require technical knowledge? Or when security vulnerabilities arise?&lt;/p&gt;

&lt;p&gt;They kill the app and move on to the next shiny idea, or hire developers to fix the issues, which costs a lot.&lt;/p&gt;

&lt;p&gt;That’s not a business model. That’s just jumping from project to project.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Right Way to Use AI (It’s Not Your Destination)
&lt;/h2&gt;

&lt;p&gt;Don’t get me wrong, AI has come to stay, and we should embrace it. But AI shouldn’t be your destination. It should be a bus stop.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Validate → Prototype → Customize&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;If you have an idea that’s been validated by your target audience and you’re sure it’s a solution to a problem, not a solution looking for a problem, then absolutely use AI to prototype quickly. Don’t waste time wireframing when you could have a working version.&lt;/p&gt;

&lt;p&gt;But then you customize. You take control.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You should always be able to add features that require technical knowledge.&lt;/li&gt;
&lt;li&gt;You should be able to handle security vulnerabilities like SQL injections.&lt;/li&gt;
&lt;li&gt;Your app might handle 100 users perfectly, but what about 1,000+ users when it starts breaking?
Don’t you think you should be in control of that?&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  What Programmers Should Actually Do
&lt;/h2&gt;

&lt;p&gt;AI makes you more powerful as a developer.&lt;/p&gt;

&lt;p&gt;Use AI to handle the boring stuff like boilerplate code, basic CRUD operations, and UI components that you might have built before. Save your brain for the interesting problems like architecture decisions, performance optimization, and complex business logic. These are what AIs struggle with.&lt;/p&gt;

&lt;p&gt;Focus your human brain on what humans do best. Things like thinking strategically, understanding context, and so much more.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Hard Truth
&lt;/h2&gt;

&lt;p&gt;Building the first version was never the hard part. Any decent AI can build together a working prototype in hours. The hard part is what comes after:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Scaling under real load&lt;/li&gt;
&lt;li&gt;Handling edge cases users find&lt;/li&gt;
&lt;li&gt;Maintaining code quality as features multiply&lt;/li&gt;
&lt;li&gt;Debugging complex production issues&lt;/li&gt;
&lt;li&gt;Making architectural decisions that support growth
These problems require understanding, not just code generation.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  What You Should Actually Do
&lt;/h2&gt;

&lt;p&gt;If you’re going to vibe code (and honestly, you probably should for rapid prototyping), do it right:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Validate and use AI to prototype quickly:&lt;/strong&gt; — this is where it shines&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learn the tech stack your AI uses:&lt;/strong&gt; — you should be able to speak its language when things break&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Transition to manual control before scaling:&lt;/strong&gt; — rewrite critical parts in code you understand&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Focus on problems, not solutions:&lt;/strong&gt;— listen to user pain points, not feature requests&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Plan for maintenance from day one :&lt;/strong&gt;— your prototype needs to become a product&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Quick prototyping is valuable. But mistaking a prototype for a product is where things go wrong.&lt;/p&gt;

&lt;p&gt;So validate your idea. Vibe code your prototype. Then take control of your codebase before you scale.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Because the moment you can’t fix your own app is the moment it stops being your app.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;&lt;em&gt;Keep learning, keep building, keep asking questions. That’s how you turn curiosity into mastery.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;What’s your worst coding mistake? Share it below, trust me, you’re not alone.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>saas</category>
      <category>ai</category>
      <category>vibecoding</category>
      <category>beginners</category>
    </item>
    <item>
      <title>The 2 Best Coding Tips I Ever Learnt</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Thu, 14 Aug 2025 17:22:24 +0000</pubDate>
      <link>https://forem.com/dev_frank/the-2-best-coding-tips-i-ever-learnt-3i5b</link>
      <guid>https://forem.com/dev_frank/the-2-best-coding-tips-i-ever-learnt-3i5b</guid>
      <description>&lt;p&gt;You shouldn’t be scared of writing “bad code.” When you plan every variable name, overthink every function, and have to know/research the “perfect” way to solve problems before even writing a single line. You get frustrated and end up wasting time with barely any progress.&lt;/p&gt;

&lt;p&gt;In my three years and counting in my software engineering journey, I’ve consumed lots of information and read books from experts in the software development world. Two tips changed how I approach every programming challenge and also changed my programming journey.&lt;/p&gt;




&lt;h2&gt;
  
  
  # TIP 1: FIRST MAKE IT WORK, THEN REFACTOR.
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Phase 1: Make It Work
&lt;/h3&gt;

&lt;p&gt;Here your only goal is functionality. Don’t worry about elegant solutions, perfect naming conventions, or optimization. Write code that solves the task, even if it’s messy, repetitive, or inefficient.&lt;/p&gt;

&lt;p&gt;The benefits are immediate:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Build Momentum: You see progress quickly, which keeps you motivated.&lt;/li&gt;
&lt;li&gt;Provides Feedback: Working code tells you if your approach is viable.&lt;/li&gt;
&lt;li&gt;Creates a foundation:- You will have something tangible to build upon.&lt;/li&gt;
&lt;li&gt;Reduces Anxiety: The pressure to be perfect is removed.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Phase 2: Refactor and Improve:
&lt;/h3&gt;

&lt;p&gt;Once you have working code, now you can make it better. This is where you:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Clean up the structure and improve readability.&lt;/li&gt;
&lt;li&gt;Optimize performance where needed.&lt;/li&gt;
&lt;li&gt;Add proper error handling.&lt;/li&gt;
&lt;li&gt;Improve naming conventions.
The beauty of this approach is that you can experiment with improvements knowing you can always fall back to the version that works.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let’s look as an example&lt;br&gt;
Let’s say you’re building a simple calculator. In phase 1, you might write:&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%2F4pqnu0jqputz45ml3m2t.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%2F4pqnu0jqputz45ml3m2t.png" alt="Code examples 1" width="720" height="712"&gt;&lt;/a&gt;&lt;br&gt;
It works. Now in Phase 2, you might refactor to&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%2F7age8l1dn2yfvn81vrek.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%2F7age8l1dn2yfvn81vrek.png" alt="Code examples 2" width="720" height="553"&gt;&lt;/a&gt;&lt;br&gt;
Phase 2 has the same functionality as Phase 1, but it has a cleaner implementation and better error handling.&lt;/p&gt;




&lt;h2&gt;
  
  
  # TIP 2: READ CODE MORE THAN YOU WRITE
&lt;/h2&gt;

&lt;p&gt;As a developer, you’ll spend more time reading code than writing it. Whether you’re debugging, adding features to existing projects, or trying to understand a new codebase, reading comprehension should be your most valuable skill.&lt;/p&gt;

&lt;p&gt;The benefit of reading code is writing better code. It’s like learning a new language. You don’t become fluent by only practicing speaking—you need to read books, listen to native speakers, and immerse yourself in well-crafted examples of the language in action.&lt;/p&gt;

&lt;h3&gt;
  
  
  How To Read Code Effectively
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Study Open Source Projects:&lt;/strong&gt; Pick popular projects in your preferred language or framework. Start with smaller and well-maintained repositories. And please don’t try to understand everything at once; focus on files or functions that solve problems similar to what you’re looking for.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Analyze Code You Admire:&lt;/strong&gt; Find developers whose work you respect and study their code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Read Your Own Old Code:&lt;/strong&gt; It might be stressful, I know, but it’s incredibly valuable. Compare code you wrote six months ago to what you’d write today. You’ll be amazed at how much you’ve improved.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Participate in Code Reviews:&lt;/strong&gt;- Whether giving or receiving feedback, code reviews are goldmines for learning. You’ll see different approaches to solving the same problems and learn from your teammates’ expertise.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  WHAT TO LOOK FOR
&lt;/h3&gt;

&lt;p&gt;When reading code, pay attention to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;How experienced developers structure their files and organize their logic.&lt;/li&gt;
&lt;li&gt;Common patterns and naming conventions in your field.&lt;/li&gt;
&lt;li&gt;How they handle errors and edge cases.&lt;/li&gt;
&lt;li&gt;How they break complex problems into smaller, manageable pieces.&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;These two tips create a powerful feedback loop.&lt;/p&gt;

&lt;p&gt;The cycle works like this:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Write working code → Read quality code → Improve your code → Repeat&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Each iteration makes you better, and the process becomes increasingly natural and enjoyable.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you enjoyed this, like it, comment on it, and share it with a friend.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
      <category>softwaredevelopment</category>
    </item>
    <item>
      <title>You Shouldn't Be A Developer If ...</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Wed, 06 Aug 2025 08:09:37 +0000</pubDate>
      <link>https://forem.com/dev_frank/you-shouldnt-be-a-developer-if--2b8f</link>
      <guid>https://forem.com/dev_frank/you-shouldnt-be-a-developer-if--2b8f</guid>
      <description>&lt;p&gt;I’m about to tell you something most coding bootcamps and YouTube tutorials won’t: &lt;strong&gt;programming isn’t for everyone, and that’s perfectly okay.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I know this sounds harsh, especially when the internet is flooded with “anyone can code” messages and success stories of people landing six-figure jobs after three months of learning (yeah, 3 months). Too many people waste months or even years chasing a career that was never right for them.&lt;/p&gt;

&lt;p&gt;This isn’t about crushing dreams. It’s about helping you make an honest assessment before you invest your time, money, and emotional energy into something that might not be the right fit.&lt;/p&gt;

&lt;p&gt;Imagine it like a reality check from someone who genuinely wants to see you succeed, whether that’s in programming or somewhere else entirely.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. You’re Only Chasing the Money
&lt;/h2&gt;

&lt;p&gt;Let’s address the BIG GUY in the room first, MONEY. Yes, developers can earn good money. But if dollar signs are your primary motivation, you’re setting yourself up for disappointment.&lt;/p&gt;

&lt;p&gt;This is what the “learn to code and get rich quick” crowd won’t tell you: those six-figure salaries everyone talks about? They’re not handed out to beginners.&lt;/p&gt;

&lt;p&gt;As I write this in late 2025, Entry-level job postings in the U.S. overall dwindled by about 35% since January 2023, they are increasingly competitive because of AI. It is coming for entry-level jobs, even &lt;a href="https://fortune.com/2025/08/04/ai-is-coming-for-entry-level-jobs-bill-gates-says-gen-z-may-not-be-safe-no-matter-how-well-they-learn-to-use-it/" rel="noopener noreferrer"&gt;Bill Gates said&lt;/a&gt; &lt;em&gt;“Gen Z may not be safe no matter how well they learn to use it”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;And many markets are saturated with junior developers who learned the basics of programming but lack the depth to solve real problems.&lt;/p&gt;

&lt;p&gt;More importantly, &lt;strong&gt;if you’re only motivated by money, you’ll quit the moment things get difficult&lt;/strong&gt; — and trust me, they will get very difficult. Programming requires patience and independence, you constantly need to push through frustrating bugs, spend hours debugging issues that seem impossible, you should also be patient and research without asking people for help, and constantly learn new technologies just to stay relevant.&lt;/p&gt;

&lt;p&gt;I’ve seen it happen countless times: someone starts learning JavaScript because they heard about a friend who got a $100k job, then gives up after a few weeks when they realize how much effort it actually takes. Meanwhile, people who genuinely enjoy the problem-solving aspect of coding push through those same challenges because they find the process rewarding.&lt;/p&gt;

&lt;p&gt;If your main goal is financial security with less intellectual demand, consider sales, skilled trades, or other careers with clearer paths to good income. There’s absolutely no shame in choosing a more straightforward route to financial stability.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. You Hate Puzzles and Problem-Solving
&lt;/h2&gt;

&lt;p&gt;Here’s something that might surprise you: &lt;strong&gt;most of programming isn’t actually writing new code.&lt;/strong&gt; It’s debugging existing code, figuring out why something isn’t working, and breaking down complex problems into manageable pieces.&lt;/p&gt;

&lt;p&gt;If you’re the type of person who gets frustrated with puzzles, avoids escape rooms, or gives up quickly when technology doesn’t work as expected, programming might feel like torture. Every single day as a developer involves systematic problem-solving, logical thinking, and working through issues step by step.&lt;/p&gt;

&lt;p&gt;Before you commit to learning programming, try this simple test:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Pick up a logic puzzle book or try some basic coding challenges online.&lt;/li&gt;
&lt;li&gt;Pay attention to your emotional response.&lt;/li&gt;
&lt;li&gt;Do you feel excited when you solve a tricky problem, or do you feel relieved that it’s over?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That difference matters more than you think.&lt;/p&gt;

&lt;p&gt;Programming attracts people who find satisfaction in the process of figuring things out, not just in having figured something out. If you’re naturally curious about how things work and enjoy the work of finding solutions, you might have the right mindset. If problem-solving feels like a necessary evil, you might want to reconsider.&lt;/p&gt;




&lt;h2&gt;
  
  
  3. You Need Everything to Make Sense Immediately
&lt;/h2&gt;

&lt;p&gt;Programming has a learning curve unlike most other skills. You’ll often need to use concepts before you fully understand them, work with tools that seem overly complicated, and accept that confusion is part of the process.&lt;/p&gt;

&lt;p&gt;I’ve noticed that people who struggle most with programming are those who need to understand everything completely before moving forward. They get stuck on the “why” behind every syntax rule or spend weeks trying to fully grasp a concept before writing any code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Successful programmers are comfortable with ambiguity.&lt;/strong&gt; They’re okay with using a library they don’t completely understand, following tutorials that skip over some details, and gradually building understanding through practice rather than perfect understanding.&lt;/p&gt;

&lt;p&gt;If you’re someone who needs clear, linear explanations for everything and gets frustrated when things don’t make immediate sense, the messy, iterative nature of learning programming might drive you crazy. Some people learn better through structured, predictable processes — and that’s totally valid. It just might mean programming isn’t the best fit.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. You’re Looking for Stability and Routine
&lt;/h2&gt;

&lt;p&gt;One of the most challenging aspects of a programming career is that &lt;strong&gt;the learning never stops.&lt;/strong&gt; The JavaScript framework you spend months mastering this year might be considered outdated in two years. The database technology your company uses today might be replaced by something completely different next year.&lt;/p&gt;

&lt;p&gt;This constant change excites some people and exhausts others. If you’re someone who wants to learn a skill once and use it for decades without major updates, programming will feel overwhelming. The technology landscape moves incredibly fast, and staying relevant requires continuous learning throughout your entire career.&lt;/p&gt;

&lt;p&gt;There are developers who’ve been coding for 20+ years, and they’re still learning new technologies, adapting to new methodologies, and occasionally feeling like beginners again. That’s a feature of the industry.&lt;/p&gt;

&lt;p&gt;I need you to ask yourself honestly:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Does the idea of constantly learning new things energize you or stress you out?&lt;/li&gt;
&lt;li&gt;Are you excited by change, or do you prefer mastering one thing deeply and sticking with it?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Neither answer is wrong, but they point toward very different career paths.&lt;/p&gt;




&lt;h2&gt;
  
  
  5. You Avoid Details and Precision
&lt;/h2&gt;

&lt;p&gt;When it comes to details, programming is unforgiving. A single misplaced character can break an entire application. A small logic error can cause hours of debugging. Inconsistent formatting can make code impossible for others to understand.&lt;/p&gt;

&lt;p&gt;If you’re naturally detail-oriented. I mean, the type of person who notices typos in emails, gets bothered by inconsistent formatting, or naturally organizes things systematically — you already have a significant advantage in programming.&lt;/p&gt;

&lt;p&gt;But if you’re more of a big-picture person who prefers to leave the details to others, programming might feel frustrating. &lt;strong&gt;You can’t delegate precision in code.&lt;/strong&gt; The computer does exactly what you tell it to do, not what you meant to tell it to do.&lt;/p&gt;

&lt;p&gt;This doesn’t mean you need to be obsessive about every tiny detail in your personal life, but you do need to be able to shift into a detail-focused mindset when working with code. Some people find this shift natural and even relaxing. Others find it mentally exhausting.&lt;/p&gt;




&lt;h2&gt;
  
  
  6. You Prefer Working Alone Always
&lt;/h2&gt;

&lt;p&gt;There’s a persistent saying that programming is a one-man activity — just you, your computer, and endless lines of code. The reality is quite different. Modern software development is highly collaborative.&lt;/p&gt;

&lt;p&gt;You’ll spend significant time in meetings discussing project requirements, reviewing other people’s code, explaining your solutions to teammates, and working together to solve complex problems. You’ll need to write documentation that others can understand, communicate with designers and product managers, and sometimes even present your work to clients or stakeholders.&lt;/p&gt;

&lt;p&gt;This doesn’t mean you need to be an extrovert or love constant social interaction. Many successful developers are introverts who recharge through solo work. But you do need to be comfortable collaborating, receiving feedback on your code, and explaining your technical decisions to others.&lt;/p&gt;

&lt;p&gt;If the idea of having your code reviewed by colleagues makes you anxious, or if you strongly prefer working independently without input from others, the collaborative nature of most development teams might be challenging.&lt;/p&gt;




&lt;h2&gt;
  
  
  7. You Can’t Handle Constant Failure
&lt;/h2&gt;

&lt;p&gt;An uncomfortable truth about programming, and that’s: &lt;strong&gt;your code will break constantly, and most of the time it will be your fault.&lt;/strong&gt; You’ll introduce bugs while fixing other bugs. You’ll spend entire days debugging issues that turn out to be caused by a single typo. You’ll build features that get scrapped before anyone uses them.&lt;/p&gt;

&lt;p&gt;Failure isn’t occasional in programming — it’s a daily part of programming. The difference between successful and unsuccessful developers isn’t that successful ones fail less; it’s that they’ve learned to fail productively and are comfortable with it.&lt;/p&gt;

&lt;p&gt;This means bouncing back quickly from setbacks, learning from mistakes without taking them personally, and maintaining motivation even when progress feels slow.&lt;/p&gt;

&lt;p&gt;If you’re someone who gets discouraged easily by failure or takes mistakes as personal criticism, the constant problem-solving nature of programming might be emotionally draining.&lt;/p&gt;

&lt;p&gt;Programming requires a specific type of resilience: the ability to stay curious and motivated even when things aren’t working. Some people find this challenge motivating. Others find it exhausting.&lt;/p&gt;




&lt;h2&gt;
  
  
  On the other hand: You Might Love Programming If…
&lt;/h2&gt;

&lt;p&gt;Before you think I’m trying to scare everyone away from programming, let me share some positive signs that development might be perfect for you:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You actually enjoy troubleshooting problems, whether it’s figuring out why your WiFi isn’t working or solving a complex puzzle.&lt;/li&gt;
&lt;li&gt;You’re naturally curious about how things work and don’t mind diving deep into details when something interests you.&lt;/li&gt;
&lt;li&gt;You find satisfaction in building things that other people can use and appreciate.&lt;/li&gt;
&lt;li&gt;You’re comfortable being wrong and learning from mistakes.&lt;/li&gt;
&lt;li&gt;You don’t mind starting over when your first approach doesn’t work.&lt;/li&gt;
&lt;li&gt;You enjoy learning new things and see change as an opportunity rather than a threat.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If any of these resonate with you, programming might be an excellent fit, regardless of your educational background or previous experience.&lt;/p&gt;




&lt;p&gt;Here’s how to honestly assess whether programming is right for you:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Try coding for 30 days straight.&lt;/strong&gt; Not just watching tutorials, but actually writing code and solving problems.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pay attention to your emotional responses to.&lt;/li&gt;
&lt;li&gt;Do you feel energized by solving coding challenges, or do you feel relieved when you’re done?&lt;/li&gt;
&lt;li&gt;Do you find yourself thinking about coding problems outside of study time, or do you forget about it the moment you close your laptop?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Work on a complete project from start to finish.&lt;/strong&gt; Build something simple but functional — maybe a basic calculator or a simple website. Experience the full cycle of planning, coding, debugging, and completing a project. This will give you a taste of what actual development work feels like.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Be brutally honest about your reactions.&lt;/strong&gt; If you find yourself procrastinating on coding tasks, feeling overwhelmed by the learning curve, or losing interest after the initial excitement wears off, those are important signals to consider.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. It’s Okay to Choose a Different Path&lt;/strong&gt;&lt;br&gt;
If you’ve read this far and realized that programming might not be the right fit for you, that’s not a failure — it’s valuable self-awareness. If you don’t have the attributes stated above, you’re not going to make it.&lt;/p&gt;

&lt;p&gt;Instead of wasting your time on programming, do something you’re really passionate about. Chase your dreams. Do what you’re really passionate about. Don’t do something because others are doing.&lt;/p&gt;

&lt;p&gt;The tech industry offers many opportunities beyond programming:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;UX/UI design for visual creativity,&lt;/li&gt;
&lt;li&gt;Product management for strategic thinking,&lt;/li&gt;
&lt;li&gt;Technical writing for communication skills, or&lt;/li&gt;
&lt;li&gt;Project management for organizational abilities.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There’s no shame in discovering that programming isn’t your calling. In fact, it’s much better to realize this early than to spend months or years struggling with something that doesn’t align with your natural strengths and interests.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Be honest with yourself about your motivations, strengths, and preferences.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The most important thing is making an informed decision based on your realistic expectations rather than social media success stories or salary headlines. Your future self will thank you for taking the time to really consider whether this path is right for you.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Would you rather be a world-class fashion designer or an average programmer?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Whatever you decide, choose it deliberately and with full awareness of what you’re getting into. That’s the first step toward building any successful career.&lt;/p&gt;

&lt;p&gt;Happy decision making!&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you enjoyed this, like it, comment on it, and share it with a friend.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Are You a Nigerian Looking for a Profitable Side Business — &lt;a href="https://wa.me/2348028608476?text=Hi+I%27m+interested+in+the+business+opportunity+you+mentioned" rel="noopener noreferrer"&gt;Yes?&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>softwaredevelopment</category>
      <category>career</category>
    </item>
    <item>
      <title>Important Programming Concept Every Self-Taught Developer Must Know</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Wed, 30 Jul 2025 18:24:04 +0000</pubDate>
      <link>https://forem.com/dev_frank/important-programming-concept-every-self-taught-developer-must-know-2enp</link>
      <guid>https://forem.com/dev_frank/important-programming-concept-every-self-taught-developer-must-know-2enp</guid>
      <description>&lt;p&gt;Let’s be honest, you don’t need to memorize every Python library or JavaScript framework out there. Those CSS styles and animation tricks can easily be googled in seconds and used. What you can’t afford to skip are the core programming concepts that form the backbone of every language you’ll ever touch, irrespective of the language. Knowing most of them will really help you in your programming journey as a self-taught developer, but most importantly, it will help you pick up new programming languages faster than you ever thought possible.&lt;/p&gt;

&lt;p&gt;I get asked questions like, “So Frank, what should I learn as a self-taught developer?” constantly. Well, if you’re teaching yourself to code, you’re not alone, and you’re definitely not at a disadvantage. But there are some foundational concepts that can make or break your journey in tech.&lt;/p&gt;

&lt;p&gt;I’ll be breaking down the important concepts you need to master, split into two clear paths based on where you are in your journey.&lt;/p&gt;




&lt;h2&gt;
  
  
  If you’re a Beginner: Building Your Foundation
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Version Control
&lt;/h3&gt;

&lt;p&gt;Git and GitHub aren’t optional—they’re essential. Think of version control as your coding safety room. You’ll use it for managing your code changes, collaborating with other developers, and yes, impressing potential employers who check your GitHub profile.&lt;/p&gt;

&lt;p&gt;Start with the basics: &lt;a href="https://medium.com/gitconnected/good-commit-vs-bad-commit-a-quick-guide-51e4cd6bd653" rel="noopener noreferrer"&gt;commits&lt;/a&gt;, &lt;a href="https://medium.com/@Dev_Frank/git-github-c5518aed1681" rel="noopener noreferrer"&gt;branches&lt;/a&gt;, and &lt;a href="https://medium.com/@Dev_Frank/git-github-c5518aed1681" rel="noopener noreferrer"&gt;merges&lt;/a&gt;. Trust me, your future self will thank you when you need to go back to that “quick fix” that broke everything.&lt;/p&gt;




&lt;h3&gt;
  
  
  2. Master One Language, Understand Others
&lt;/h3&gt;

&lt;p&gt;Here’s my advice: pick one language and get really good at it first. Whether it’s JavaScript, Python, or Java, go deep before you go wide. But once you’re comfortable, peek at other languages. Understanding the basic syntax and concepts of multiple languages will make you a more well-rounded developer and help you choose the right tool for each job.&lt;/p&gt;




&lt;h3&gt;
  
  
  3. &lt;a href="https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/" rel="noopener noreferrer"&gt;Data Structures and Algorithms&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;I know, everyone talks about these all the time, and they can seem intimidating. But here’s why they matter: they’re your problem-solving toolkit.&lt;/p&gt;

&lt;p&gt;Start with &lt;strong&gt;Big O notation&lt;/strong&gt; to understand performance, then tackle the essential data structures: &lt;strong&gt;arrays, linked lists, stacks, queues, hash tables, trees, and graphs&lt;/strong&gt;. Add in searching and sorting algorithms, and you’ll have the foundation for writing efficient, scalable code.&lt;/p&gt;




&lt;h3&gt;
  
  
  4. Programming Paradigms—Different Ways of Thinking
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Code isn’t just about syntax—it’s about thinking&lt;/strong&gt;. Learn the differences between procedural, object-oriented (OOP), and functional programming (FP). Each paradigm offers different approaches to solving problems. OOP is great for modeling real-world entities, functional programming excels at data transformations, and procedural programming keeps things straightforward for simple tasks.&lt;/p&gt;




&lt;h3&gt;
  
  
  5. Debugging and Testing
&lt;/h3&gt;

&lt;p&gt;There’s no way of escaping bugs—they’re inevitable, but staying stuck on them isn’t. Learn to use debugging tools in your IDE and browser. More importantly, write tests from the beginning. &lt;a href="https://www.geeksforgeeks.org/software-engineering/difference-between-unit-testing-and-integration-testing/" rel="noopener noreferrer"&gt;Unit tests and integration tests&lt;/a&gt;—they’re not just for “big companies.” They’re your insurance policy against breaking your own code.&lt;/p&gt;




&lt;h3&gt;
  
  
  6. Command Line
&lt;/h3&gt;

&lt;p&gt;Get comfortable navigating directories, managing files, and running commands. You’ll use it for version control, package management, and countless development tasks. It might feel intimidating at first, but it’s incredibly powerful once you understand it.&lt;/p&gt;




&lt;h3&gt;
  
  
  7. Code Refactoring
&lt;/h3&gt;

&lt;p&gt;Writing code is one thing; writing clean, maintainable code is another. Learn to refactor your code, improving its structure without changing its functionality. Clean code isn’t just prettier; it’s easier to debug, extend, and collaborate on.&lt;/p&gt;




&lt;h2&gt;
  
  
  For More Advanced Learners
&lt;/h2&gt;

&lt;h3&gt;
  
  
  8. Database Management—Where Your Data Lives
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Every application needs to store data somewhere.&lt;/strong&gt; Learn SQL for relational databases — it’s been around for decades and isn’t going anywhere. Also get familiar with NoSQL basics for when you need more flexibility or scale.&lt;/p&gt;




&lt;h3&gt;
  
  
  9. Gang of Four Design Patterns
&lt;/h3&gt;

&lt;p&gt;The GoF design patterns are time-tested solutions to common software design problems. Singleton, Factory, Observer, and Strategy—these patterns will help you write more maintainable and scalable applications.&lt;/p&gt;




&lt;h3&gt;
  
  
  10. Software Design Principles
&lt;/h3&gt;

&lt;p&gt;Master DRY (Don’t Repeat Yourself), KISS (Keep It Simple, Stupid), and the SOLID principles. They’re not just academic concepts—they’re practical guidelines that separate good code from great code.&lt;/p&gt;




&lt;h3&gt;
  
  
  11. Security Best Practices—Protecting Your Users
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Security isn’t someone else’s job—it’s everyone’s responsibility&lt;/strong&gt;. Learn the fundamentals: input validation, authentication vs. authorization, and basic encryption concepts. Understanding common vulnerabilities like SQL injection and XSS will make you a more valuable developer.&lt;/p&gt;




&lt;h3&gt;
  
  
  12. Continuous Integration/Continuous Deployment (CI/CD)
&lt;/h3&gt;

&lt;p&gt;Understand Continuous Integration and Continuous Deployment. Learn how automated testing and deployment pipelines make software delivery more efficient and reliable. Your future team will appreciate that you understand these concepts.&lt;/p&gt;




&lt;h2&gt;
  
  
  Your Learning Path Forward
&lt;/h2&gt;

&lt;p&gt;Remember, you don’t need to master everything at once. Pick the concepts that align with your current projects and career goals. Build small projects that incorporate these concepts. The key is consistent practice and gradual improvement.&lt;/p&gt;

&lt;p&gt;The beauty of being self-taught is that you get to customize your learning journey. Use this roadmap as your guide, but don’t feel pressured to check every box immediately. Focus on building a strong foundation first, then expand your skills as you grow.&lt;/p&gt;

&lt;p&gt;Keep coding, keep learning, and remember—some of the best developers I know are self-taught. You’ve got this.&lt;/p&gt;

&lt;p&gt;Happy coding!&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you enjoyed this, like it, comment on it, and share with a developer friend.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
      <category>softwaredevelopment</category>
    </item>
    <item>
      <title>The Challenges of Self-Learning Programming (and How to Overcome Them)</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Fri, 25 Jul 2025 08:50:41 +0000</pubDate>
      <link>https://forem.com/dev_frank/the-challenges-of-self-learning-programming-and-how-to-overcome-them-119f</link>
      <guid>https://forem.com/dev_frank/the-challenges-of-self-learning-programming-and-how-to-overcome-them-119f</guid>
      <description>&lt;p&gt;Most of my friends knew what they wanted to be in high school. I didn’t.&lt;/p&gt;

&lt;p&gt;Well, I thought I did. I wanted to become a petrochemical engineer because they were earning a lot of money, or so I thought. The problem was, I didn’t like chemistry. Failed it twice. I still thought this was my path because, you know, the money.&lt;/p&gt;

&lt;p&gt;That was my plan for a while, until a tutor came to the tutorial center where I was preparing for college one day and said, “&lt;strong&gt;&lt;em&gt;Most students study courses they don’t like. They do it for money, or because their parents want them to, or because companies pay well. Go home and think about what you actually love doing.&lt;/em&gt;&lt;/strong&gt;”&lt;/p&gt;

&lt;p&gt;I went home and thought hard. Chemistry was out—obviously not happening. But I’d always loved web applications—in fact, tech as a whole. After school, I’d hang out in the I.C.T. lab with my friends. I wanted to know how websites worked. How did people build apps? What happened behind the scenes?&lt;/p&gt;

&lt;p&gt;Tech is huge. I needed to pick a niche. So I chose software development and decided to teach myself programming before going to college.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Self-Learning Actually Looks Like
&lt;/h2&gt;

&lt;p&gt;Learning to code by yourself sounds great.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;You go at your own pace.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You pick what to learn.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s also really tough.&lt;/p&gt;

&lt;p&gt;I made countless mistakes. Got stuck more times than I can count. Almost gave up more than once. But I figured out what works and what doesn’t.&lt;/p&gt;

&lt;p&gt;If you’re thinking about learning programming on your own, here’s what I wish someone had told me.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Don’t Try to Use Every Resources Out There
&lt;/h2&gt;

&lt;p&gt;When I started, I thought more resources meant faster learning. I was wrong.&lt;/p&gt;

&lt;p&gt;I had YouTube tutorials, Udemy courses, books, blogs, documentation, and forums all open at once. One night I counted 47 browser tabs.&lt;/p&gt;

&lt;p&gt;Instead of learning faster, I learned nothing.&lt;/p&gt;

&lt;p&gt;Then I discovered &lt;a href="https://www.roadmap.sh" rel="noopener noreferrer"&gt;roadmap.sh&lt;/a&gt;. It gives you a clear path to follow. No more guessing what to learn next.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I made a rule: one main resource, two backup ones. That’s it.&lt;br&gt;
Pick a course or book as your main guide. Then use two other sources only when you’re confused. This will stop the endless switching and actually let you focus.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  2. Stop Collecting Courses and Start Building
&lt;/h2&gt;

&lt;p&gt;You know what’s worse than too many resources? Collecting them without using them.&lt;/p&gt;

&lt;p&gt;Here’s what nobody warns you about: you can watch tutorials forever and still not know how to code.&lt;/p&gt;

&lt;p&gt;I’d finish a 10-hour JavaScript course, feel smart, and then immediately start a React course. I never built anything with JavaScript. I just kept consuming.&lt;/p&gt;

&lt;p&gt;I stopped watching and started building.&lt;/p&gt;

&lt;p&gt;Every time I learned something new, I had to build something with it. Even something tiny.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;When I learned about functions, I built a calculator.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;I learned about arrays and built a to-do list.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The projects were small, but they were mine. That made all the difference.&lt;/p&gt;




&lt;h2&gt;
  
  
  3. You Need People, Not Just Tutorials
&lt;/h2&gt;

&lt;p&gt;The first weeks were amazing. I was coding, and I was learning.&lt;/p&gt;

&lt;p&gt;There was no professors breathing down my neck. I didn’t have classmates to compete with. No grades to chase. No deadlines that mattered.&lt;/p&gt;

&lt;p&gt;I’d set goals and miss them, nothing happened. I’d skip days, then weeks. Procrastination became my biggest enemy. Some days I wondered if I was meant for this.&lt;/p&gt;

&lt;p&gt;I found my community online. The web developer community, Build In Public, and Software Engineering community on twitter, became my classroom. Twitter gave me coding mates.&lt;/p&gt;

&lt;p&gt;The idea was coding every single day. Even if just for 30 minutes. Small daily progress beats coding 5 hours, two days in a week.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. Get Feedback Early and Often
&lt;/h2&gt;

&lt;p&gt;I could write code that worked, but i had no idea if it was good code.&lt;/p&gt;

&lt;p&gt;I built my first web app, my gosh i felt proud. Later I discovered it was terrible, from security holes everywhere to spaghetti code. The code was really messy.&lt;/p&gt;

&lt;p&gt;I had nobody to tell me “&lt;em&gt;Hey, maybe don’t do it that way.&lt;/em&gt;”&lt;/p&gt;

&lt;p&gt;I started asking friends of mine who were experienced dev, if there was better ways i could write a particular code. I seldomly post my code on my socials for feedback (I’m working on it doing better though). The feedbacks might be harsh but will be incredibly helpful.&lt;/p&gt;

&lt;p&gt;You can find mentors on social media just by asking. Most people will be happy to help.&lt;/p&gt;




&lt;h2&gt;
  
  
  5. Embrace Not Knowing Things
&lt;/h2&gt;

&lt;p&gt;To be honest, confidence is dangerous when you’re self-taught dev. You think you know something, then you hit a wall and realized you don’t actually know much.&lt;/p&gt;

&lt;p&gt;This is where imposter syndrome comes in. You feel like a fraud who’s about to get exxposed.&lt;/p&gt;

&lt;p&gt;I stopped being ashamed of not knowing things. Instead, I got curious. I usually keep a “things I don’t understand” list. it helps me spot patterns and plan what to tackle next.&lt;/p&gt;

&lt;p&gt;I started comparing myself to my past self, not to other people online. That simple shift helped my confidence more than anything else.&lt;/p&gt;




&lt;h2&gt;
  
  
  6. The Real Education Happens in The Struggle
&lt;/h2&gt;

&lt;p&gt;These challenges weren’t just obstacles I needed to overcome, it taught me things no classroom could.&lt;/p&gt;

&lt;p&gt;Yes, I learned to code. But I also learned how to learn anything, self-discipline, research skills, and problem solving under pressure.&lt;/p&gt;

&lt;p&gt;Now when I see new technologies, I don’t panic, I know I can figure them out. That’s true confidence if you ask me. You can’t get it from a traditional classroom.&lt;/p&gt;




&lt;h2&gt;
  
  
  My Self-Learning Hack
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Use roadmap.sh for a clear learning path.&lt;/li&gt;
&lt;li&gt;Set small goals and deadlines you can actually hit.&lt;/li&gt;
&lt;li&gt;Join Learning Communities on Twitter, Reddit, and Stack Overflow.&lt;/li&gt;
&lt;li&gt;Share your code and ask for feedback.&lt;/li&gt;
&lt;li&gt;Find mentors online/offline who can help you.&lt;/li&gt;
&lt;li&gt;Build real projects with everything you learn.&lt;/li&gt;
&lt;li&gt;Code every day even if it’s just 30 minutes.&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Self-learning programming is hard. But you can do it.&lt;/p&gt;

&lt;p&gt;What’s your biggest challenge right now? Share it in the comments, we’d love to help you.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Go build something amazing.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you enjoyed reading this, like it, comment on it, and share it with a friend.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
      <category>softwaredevelopment</category>
    </item>
    <item>
      <title>This is Why Good Enough Software is Better Than Perfect</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Mon, 21 Jul 2025 15:46:47 +0000</pubDate>
      <link>https://forem.com/dev_frank/this-is-why-good-enough-software-is-better-than-perfect-4ae2</link>
      <guid>https://forem.com/dev_frank/this-is-why-good-enough-software-is-better-than-perfect-4ae2</guid>
      <description>&lt;p&gt;I used to lie awake at night thinking about my code.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;Was that function elegant enough?&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Could I refactor that module one more time?&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Should I rebuild the entire architecture with the latest framework?&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For a long time, I was trapped in perfectionism, something that so many developers today struggle with. We’ve been conditioned to believe that our code needs to be flawless, with zero bugs, clean architecture, and the newest technology stack. It’s a dangerous belief that can weaken progress and kill innovation.&lt;/p&gt;

&lt;p&gt;The truth hit me during a particularly intense code review session. A senior architect, someone whose work I deeply respected, made a confession that changed everything. He said, “I’ve never written perfect code. Neither has anyone else in this room. That’s exactly why we’re successful.”&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Beautiful code exists only on blog posts. ~&lt;a href="https://codewithmosh.com/" rel="noopener noreferrer"&gt;Mosh Hamedani&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I realized that perfectionism isn’t a virtue in software development—it’s a trap that keeps you from delivering real value to real people.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Real Software Actually Looks Like
&lt;/h2&gt;

&lt;p&gt;Software development is messier than the polished blog posts and conference talks would have you believe. That elegant code you admire in tutorials? It doesn’t exist in production. Real software is built by humans, under pressure, with changing requirements, evolving technologies, and tight deadlines.&lt;/p&gt;

&lt;p&gt;Legacy code accumulates in some big IT firms codebases. Technical debt builds up faster. Different engineers, with different styles and skill levels, leave their fingerprints all over the codebase. This often results in software that works, that serves millions of users, that generates billions in revenue—but looks nothing like those examples you’ll probably see in your computer science textbooks.&lt;/p&gt;

&lt;p&gt;This isn’t a failure of the industry. It’s just how software works in the real world. Once you accept this reality, you can start focusing on what actually matters.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Exactly Is A “Good Enough” Software?
&lt;/h2&gt;

&lt;p&gt;Many developers misunderstand what I mean by “good enough” software. I’m not talking about poorly written code or you trying to cut corners. I’m talking about strategic excellence — you knowing where to invest your perfectionist energy and where to embrace pragmatic solutions.&lt;/p&gt;

&lt;p&gt;Good enough software is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Functional&lt;/strong&gt;: It solves the problem it was designed to solve&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Maintainable&lt;/strong&gt;: Future developers (including yourself) can understand and modify it&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reliable&lt;/strong&gt;: It performs consistently under normal conditions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Valuable&lt;/strong&gt;: It delivers real benefits to users&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Good enough software is NOT:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Sloppy&lt;/strong&gt;: Rushed code with no thought to consequences&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Untested&lt;/strong&gt;: Software without proper validation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Undocumented&lt;/strong&gt;: Code that only its creator understands&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Unmaintainable&lt;/strong&gt;: Solutions that create more problems than they solve&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Why Timing Beats Perfection
&lt;/h2&gt;

&lt;p&gt;In the real world, software is a race against time, competition, and changing user needs.&lt;/p&gt;

&lt;p&gt;While you’re fine-tuning the perfect solution, someone else is already shipping something that works. While you’re debating the “right” architecture, they’re learning from actual users. While you’re writing tests for edge cases that may never happen, they’re iterating in real time.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Take a look back at the smartphone wars. BlackBerry had better features on paper, superior email, physical keyboards, and more control. But while they were focused on perfecting what already worked, Apple shipped the iPhone with big limitations: no copy-paste, no third-party apps, and no 3G. And still, it changed everything. Why? Because it solved a problem users didn’t even know they had, and it kept evolving.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://d3.harvard.edu/platform-digit/submission/the-rise-and-fall-and-rise-again-of-blackberry/?utm_source=chatgpt.com&amp;amp;amp%3Bsource=post_page-----513d57816d3b---------------------------------------" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fd3.harvard.edu%2Fplatform-digit%2Fwp-content%2Fuploads%2Fsites%2F2%2F2018%2F01%2F1-BB-Logo.png" height="auto" class="m-0"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://d3.harvard.edu/platform-digit/submission/the-rise-and-fall-and-rise-again-of-blackberry/?utm_source=chatgpt.com&amp;amp;amp%3Bsource=post_page-----513d57816d3b---------------------------------------" rel="noopener noreferrer" class="c-link"&gt;
            The Rise and Fall (and Rise Again?) of BlackBerry - Digital Innovation and Transformation
          &lt;/a&gt;
        &lt;/h2&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fd3.harvard.edu%2Fplatform-digit%2Fwp-content%2Fuploads%2Fsites%2F2%2F2015%2F10%2Fcropped-hvs-favico-32x32.png"&gt;
          d3.harvard.edu
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;The magic of shipping early and iterating fast isn’t just in speed; it’s in learning. Each version brings insights. Each mistake teaches. That learning stacks up fast. And that compounding knowledge beats perfect-but-late every single time.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Really Matters to People
&lt;/h2&gt;

&lt;p&gt;Users don’t care about your code. They care about their problems being solved. They care about getting their job done, connecting with friends, or being entertained. Your nice and clean algorithm and architecture are invisible to them—and that’s exactly how it should be.&lt;/p&gt;

&lt;p&gt;Real users are tolerant of imperfections when the core functionality works. They’ll forgive slow loading times if the app helps them accomplish their goals. They’ll overlook UI quirks if the software saves them time. They’ll even report bugs with patience if they believe in the product’s value.&lt;/p&gt;

&lt;p&gt;But they won’t forgive delayed launches, missing features, or solutions that never ship because they’re “&lt;strong&gt;not ready yet.&lt;/strong&gt;”&lt;/p&gt;




&lt;h2&gt;
  
  
  Learning from Winners
&lt;/h2&gt;

&lt;p&gt;The most successful software products in history were all imperfect when they launched. Windows, iPhone, Facebook, etc.&lt;/p&gt;

&lt;p&gt;These products succeeded not because of their imperfections, but because their creators knew that getting real software into real hands beats polishing something no one can use. They learned, adapted, and improved after launch.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Continuous Improvement Mindset
&lt;/h2&gt;

&lt;p&gt;You don’t need to get it right the first time. You just need to get it working, then make it better.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Instead of stressing over every edge case, you focus on what most users actually do.&lt;/li&gt;
&lt;li&gt;Instead of guessing at performance, you let real-world data guide your optimizations.&lt;/li&gt;
&lt;li&gt;Instead of chasing perfection, you design with room to grow.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Every version you ship brings you closer to what your users really need. Every bug, every tweak, every bit of feedback—it’s all part of the process. Progress, not perfection. That’s how great software gets built.&lt;/p&gt;

&lt;p&gt;To break free from perfectionism. Start with these practical strategies:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Identify Your Core Value:&lt;/strong&gt; Figure out the one thing your software has to get right, no compromises. That’s where your perfectionist energy should go. Everything else is secondary.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Set “Good Enough.”&lt;/strong&gt; Criteria: Know what done looks like, what users actually need, and what can wait. Not everything needs to be polished to shine.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time-box Your Perfectionism:&lt;/strong&gt; Give yourself a fixed amount of time to polish and optimize. When the timer runs out, ship what you have.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Embrace Technical Debt:&lt;/strong&gt; Not all debt is bad. It’s okay to take shortcuts when you need to move fast, as long as you’re honest about it and plan to clean things up later.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Create Feedback Loops:&lt;/strong&gt; Build simple ways to get feedback early and often, whether it’s a quick user test or real-world usage. The sooner you hear what’s working (or not), the better you can adjust.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;Try not to add features unless they’re requested by users.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;The software industry needs more developers who understand that perfect is the enemy of good. We need builders who can ship functional solutions, gather feedback, learn from it, improve, and iterate rapidly. We need developers who understand that “good enough” isn’t laziness—it’s momentum.&lt;/p&gt;

&lt;p&gt;Start today. Look at your current project: What part of it is already good enough to help someone? What is that tiny obsession that is slowing you down? Let it go. Ship the thing. Learn fast. Iterate smarter.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Your users are waiting.&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you enjoyed reading this, like it, comment on it, and share it with a friend.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>softwaredevelopment</category>
      <category>startup</category>
      <category>software</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How To Think Like a Programmer</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Mon, 21 Jul 2025 15:18:56 +0000</pubDate>
      <link>https://forem.com/dev_frank/how-to-think-like-a-programmer-29a8</link>
      <guid>https://forem.com/dev_frank/how-to-think-like-a-programmer-29a8</guid>
      <description>&lt;p&gt;Yeah, that’s right. I said that.&lt;/p&gt;

&lt;p&gt;You’re probably wondering why I’d make such a bold statement, especially when every programming tutorial tells you the opposite. Stay with me, and you’ll see exactly why this mindset shift changes everything.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The biggest mistake I see new programmers make is focusing on learning syntax instead of learning how to solve problems.&lt;br&gt;
 — &lt;a href="https://vantonspraul.com/wp/" rel="noopener noreferrer"&gt;V. Anton Spraul&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;




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

&lt;p&gt;We all have problems. Big and small. Financial struggles, relationship issues, career decisions, that weird noise your car makes, or figuring out why your code crashes every time you run it.&lt;/p&gt;

&lt;p&gt;How we deal with these problems is often random. Most of us tackle these challenges using what I call the “&lt;strong&gt;spray and pray&lt;/strong&gt;” method:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Try something, anything&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When it fails, you try something else.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You keep throwing solutions at the problem until it works.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This approach is really common. I’ve been there. When I started coding, I’d randomly try different syntax combinations, hoping something would magically work. Sometimes I would get lucky, but it was a big waste of time and very frustrating.&lt;/p&gt;

&lt;p&gt;The truth is, &lt;strong&gt;Problem-solving is the foundational skill&lt;/strong&gt;. It’s the skill that makes all other skills more effective. Maybe you’re debugging code, planning a budget, or trying to fix a relationship; the same fundamental principles apply.&lt;/p&gt;




&lt;h2&gt;
  
  
  What It Means to Think Like a Problem-Solver
&lt;/h2&gt;

&lt;p&gt;A problem-solver doesn’t just come up with random solutions and hope that one of them works. They have a systematic approach, a way of tackling problems no matter what the problem is&lt;/p&gt;

&lt;p&gt;When you think like a problem-solver, you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Break down complex problems into smaller problems.&lt;/li&gt;
&lt;li&gt;Approach challenges with curiosity instead of feeling annoyed&lt;/li&gt;
&lt;li&gt;Build solutions step by step&lt;/li&gt;
&lt;li&gt;Learn from every attempt, whether it works out or not&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is why the best programmers aren’t necessarily the ones who know the most syntax — they’re the ones who can systematically work through any problem they encounter.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem-Solver’s Step
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Step 1: Understand the Problem
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;“If you can’t explain something in simple terms, you don’t understand it.”&lt;br&gt;
 — &lt;a href="https://medium.com/gitconnected/how-to-more-learn-through-teaching-feynman-learning-technique-d73cab80e0e9" rel="noopener noreferrer"&gt;Richard Feynman&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most hard problems are hard because we don’t truly understand them. This is why understanding comes first, before any solution attempts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to know when you understand a problem:&lt;/strong&gt; When you can explain it in plain English to someone else (or even to yourself out loud).&lt;/p&gt;

&lt;p&gt;I can’t count how many times I’ve been stuck on a coding problem, started explaining it to a friend, and halfway through my explanation, the solution became obvious. This phenomenon is so common that programmers have a term for it: &lt;a href="https://rubberduckdebugging.com/" rel="noopener noreferrer"&gt;rubber duck debugging&lt;/a&gt; — explaining your problem to an inanimate object&lt;/p&gt;

&lt;p&gt;Let’s say you’re trying to build a login system. Instead of immediately jumping into code, first understand what you’re really building:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Users need to provide their email and password.&lt;/li&gt;
&lt;li&gt;I need to check if those credentials match what’s in my database.&lt;/li&gt;
&lt;li&gt;If they match, I need to let them access the protected content.&lt;/li&gt;
&lt;li&gt;If they don’t match, I need to show an error message.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;See how breaking it down in simple terms makes it easier and clearer?&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Next time you face any problem (not just coding), try explaining it out loud. Talk through what you’re trying to achieve, what obstacles you’re facing, and what a successful outcome would look like.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  Step 2: Plan Your Approach
&lt;/h3&gt;

&lt;p&gt;You shouldn’t jump right into solving without a plan. I know it’s tempting; when you’re excited about a solution, you want to jump in immediately. But planning saves time in the long run.&lt;/p&gt;

&lt;p&gt;Let’s continue with our login system example:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Create a form with email and password fields&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When user submits, capture the form data&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Send that data to the server&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;On the server, search the database for a user with that email&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If found, compare the submitted password with the stored password&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If passwords match, create a session and redirect to the dashboard.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If not, send back an error message&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This might seem straightforward, but writing it down forces you to think through each step. You’ll often discover edge cases or missing pieces during this planning phase.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Pro tip:&lt;/strong&gt; &lt;em&gt;In programming, use comments to outline your plan before writing code. In life, use a notebook or document to outline your approach before taking action.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  Step 3: Break Problems Down (The Reduction Technique)
&lt;/h3&gt;

&lt;p&gt;Pay attention; this is the most important step of all.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do not try to solve one big problem.&lt;/strong&gt; You will get overwhelmed, frustrated, and likely give up.&lt;/p&gt;

&lt;p&gt;Instead, break it into smaller problems. These smaller problems are much easier to solve. Then solve each smaller problem one by one, starting with the simplest.&lt;/p&gt;

&lt;p&gt;What makes a smaller problem “simplest”?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You know the solution (or are closer to knowing it)&lt;/li&gt;
&lt;li&gt;Solving it doesn’t depend on other smaller problems being solved first&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;“If I could teach every beginning programmer one problem-solving skill, it would be the ‘reduce the problem technique.’ For example, suppose you’re asked to write a program that reads ten numbers and figures out which number is the third highest. For a brand-new programmer, that can be tough. If you’re stuck, reduce the problem to something simpler. Instead of the third-highest number, what about finding the highest overall? Still too tough? What about finding the largest of just three numbers? Or the larger of two? Reduce the problem to the point where you know how to solve it and write the solution. Then expand the problem slightly and rewrite the solution to match, and keep going until you are back where you started.” — &lt;a href="https://vantonspraul.com/wp/" rel="noopener noreferrer"&gt;V. Anton Spraul&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  Step 4: When You’re Stuck—The Three-Step Recovery
&lt;/h3&gt;

&lt;p&gt;When you hit a wall (and you will), you have three powerful strategies:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Debug&lt;/strong&gt;&lt;br&gt;
Go step by step through your solution, trying to find where things went wrong. In programming, this means using a debugger or adding print statements to see what’s happening at each step.&lt;/p&gt;

&lt;p&gt;In life, this means retracing your actions. Imagine you’re following a recipe and your cake didn’t turn out right. Debug by going through each step:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Did you measure ingredients correctly?&lt;/li&gt;
&lt;li&gt;Was your oven at the right temperature?&lt;/li&gt;
&lt;li&gt;Did you mix for the right amount of time?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Reassess&lt;/strong&gt;&lt;br&gt;
Sometimes we get so lost in the details that we miss a simpler approach. Take a step back and ask, “Is there a completely different way to approach this?”&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pro tip:&lt;/strong&gt; &lt;em&gt;Sometimes the best reassessment is starting over completely. Delete everything and begin again with fresh eyes. This might sound extreme, but it’s often the fastest way to a better solution.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Research:&lt;/strong&gt;&lt;br&gt;
No matter what problem you’re facing, someone has probably encountered something similar. Find that person or solution.&lt;/p&gt;

&lt;p&gt;You shouldn’t be looking for a solution to your entire big problem. Only look for solutions to sub-problems. Because unless you struggle (even a little bit), you won’t learn anything. If you don’t learn anything, you’ve wasted your time.&lt;/p&gt;

&lt;p&gt;For our login system example, you might research:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to validate email addresses&lt;/li&gt;
&lt;li&gt;How to securely hash passwords&lt;/li&gt;
&lt;li&gt;How to implement sessions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But don’t just copy someone else’s complete login system—you’ll miss the learning opportunity.&lt;/p&gt;




&lt;h3&gt;
  
  
  Step 5: Learn and Practice
&lt;/h3&gt;

&lt;p&gt;Don’t expect to become a great problem-solver overnight. Like any skill, it requires deliberate practice.&lt;/p&gt;

&lt;p&gt;All problems share similar patterns. The more problems you solve, the more patterns you’ll recognize, and the faster you’ll become at solving new problems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to practice:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;For programming:&lt;/strong&gt; Try coding challenges on platforms like &lt;a href="https://coderbyte.com/" rel="noopener noreferrer"&gt;Coderbyte&lt;/a&gt;, &lt;a href="https://leetcode.com/" rel="noopener noreferrer"&gt;LeetCode&lt;/a&gt;, or &lt;a href="https://www.hackerrank.com/" rel="noopener noreferrer"&gt;HackerRank&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;For general problem-solving:&lt;/strong&gt; Chess puzzles, Sudoku, escape rooms, strategy games&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;For real-world skills:&lt;/strong&gt; Take on small projects outside your comfort zone&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I solve at least one coding challenge every day, not because I enjoy the challenge itself, but because it trains my problem-solving muscles. Each problem teaches me a new pattern or reinforces an existing one.&lt;/p&gt;

&lt;p&gt;The goal isn’t to memorize solutions; it’s to make the problem-solving process a part of you.&lt;/p&gt;




&lt;h3&gt;
  
  
  Step 6: Get Help (After You’ve Exhausted Other Options)
&lt;/h3&gt;

&lt;p&gt;Try the other five steps first. There’s immense value in struggling through a problem yourself, even if you don’t solve it completely.&lt;/p&gt;

&lt;p&gt;When you do ask for help:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Explain what you’ve tried so far&lt;/li&gt;
&lt;li&gt;Show your current approach&lt;/li&gt;
&lt;li&gt;Ask specific questions rather than “How do I solve this?”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example, instead of&lt;br&gt;
“&lt;em&gt;How do I build a login system?&lt;/em&gt;”&lt;/p&gt;

&lt;p&gt;Try:&lt;/p&gt;

&lt;p&gt;“&lt;em&gt;I’m building a login system and I’ve got the form working, but I’m stuck on how to securely compare passwords. I’ve tried using &lt;strong&gt;===&lt;/strong&gt; but I read that’s not secure. What approach should I research?&lt;/em&gt; ”&lt;/p&gt;

&lt;p&gt;This shows you’ve done the work and helps others give you more targeted assistance.&lt;/p&gt;




&lt;p&gt;After all the explanation in this article, I think you already know why I said earlier why you shouldn’t think like a programmer; instead, think like a problem solver. If you still don’t know, and it’s okay, just know this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Not every programmer is a problem solver, but every problem solver can become a great programmer.&lt;/li&gt;
&lt;li&gt;Problem-solving skills transfer to every area of life; programming syntax only works in code.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The programming languages you learn will become outdated. The frameworks you master will be replaced. But the ability to break down problems, think systematically, and persist through challenges is forever.&lt;/p&gt;




&lt;p&gt;I hope you encounter many problems. That’s right.&lt;/p&gt;

&lt;p&gt;At least now you know how to solve them. Plus, you’ll discover that with every solution, you improve.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Your Next Steps&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Start small&lt;/strong&gt;: Pick a minor problem you’re facing today and apply this framework&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Practice daily&lt;/strong&gt;: Solve one small problem every day using these steps&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Teach others&lt;/strong&gt;: Explain your problem-solving process to someone else&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Document your patterns&lt;/strong&gt;: Keep notes on the types of problems you encounter and how you solve them&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Stay curious&lt;/strong&gt;: When you encounter bugs, errors, or obstacles, approach them with curiosity rather than frustration&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Programming is just one application of problem-solving skills. Learn and practice the art of systematic problem-solving, and you’ll not only become a better programmer—you’ll become better at life.&lt;/p&gt;

</description>
      <category>softwareengineering</category>
      <category>programming</category>
      <category>problemsolvin</category>
      <category>beginners</category>
    </item>
    <item>
      <title>I'm a programmer, I have no life</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Mon, 21 Jul 2025 14:42:14 +0000</pubDate>
      <link>https://forem.com/dev_frank/im-a-programmer-i-have-no-life-36b9</link>
      <guid>https://forem.com/dev_frank/im-a-programmer-i-have-no-life-36b9</guid>
      <description>&lt;p&gt;&lt;strong&gt;Working programmers&lt;/strong&gt;, after work they start on their personal side project and don’t quit until it’s time to go to bed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Self-employed programmers&lt;/strong&gt; are constantly juggling client work, business development, and staying competitive — basically working around the clock. These guys probably have it even harder in some ways — no guaranteed income but still need to work those crazy hours.&lt;/p&gt;

&lt;p&gt;The ones who don’t have a job yet mostly spend their time learning new technologies or frameworks intensively. Some might also juggle it with some personal side projects or building a &lt;a href="https://en.wikipedia.org/wiki/Startup_company" rel="noopener noreferrer"&gt;startup/SaaS&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And then you have the &lt;strong&gt;college programmers&lt;/strong&gt; — we face multiple pressures that can completely consume our existence. We deal with demanding pressures simultaneously, like academic grind, skill race, job market anxiety, and social sacrifice, among others.&lt;/p&gt;

&lt;p&gt;The brutal part is that unlike working programmers who at least get paid for their long hours, we’re paying tuition for the privilege of being overwhelmed. We often survive on caffeine/energy drinks, minimal sleep, and whatever food we can grab while watching our friends have what looks like a normal college experience.&lt;/p&gt;

&lt;p&gt;There are similarities between these programmers. Most of us spend extremely long hours coding, working weekends, or being so mentally absorbed in solving technical problems that we neglect everything else, like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Skipping meals or eating poorly while glued to their computer&lt;/li&gt;
&lt;li&gt;Zero social life or dating.&lt;/li&gt;
&lt;li&gt;No hobbies, exercise, or relaxation&lt;/li&gt;
&lt;li&gt;Losing touch with family&lt;/li&gt;
&lt;li&gt;Sleep schedule completely destroyed by coding marathons&lt;/li&gt;
&lt;li&gt;Thinking about code problems 24/7&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;“&lt;strong&gt;I have no life&lt;/strong&gt;” has become our badge of honor in programmer culture —it’s a mix of dark humor and genuine complaint about how intense this gets.&lt;/p&gt;

&lt;p&gt;Let me walk you through my life as a college programmer schooling in Nigeria.&lt;/p&gt;




&lt;p&gt;It’s 2:37 AM, and I’m sitting in engineering’s faculty building with my laptop, two empty Fearless bottles next to me, and my &lt;a href="https://www.t-test.net/" rel="noopener noreferrer"&gt;Digital Assessment Platform&lt;/a&gt; still giving me headaches. This is my life now.&lt;/p&gt;

&lt;p&gt;If you know anything about Nigerian federal universities, you’ll know we programmers aren’t welcome in the campus library. You want to code? You either do it in your room when &lt;a href="https://en.wikipedia.org/wiki/Power_Holding_Company_of_Nigeria" rel="noopener noreferrer"&gt;NEPA&lt;/a&gt; (they are responsible for the electricity generation and transmission in Nigeria) decides to bless you with light or pay for some workspace with stable power and WiFi — which some might not afford. So what do we do? After lectures, by 10pm we’re sneaking into faculty buildings hunting for any socket that works, coding till 4AM.&lt;/p&gt;

&lt;p&gt;This is my reality as an undergraduate programmer in Nigeria. The phrase “&lt;strong&gt;&lt;em&gt;I’m a programmer, I have no life&lt;/em&gt;&lt;/strong&gt;” isn’t just some joke anymore — it’s literally what my existence looks like right now.&lt;/p&gt;




&lt;h3&gt;
  
  
  How I Even Got Into This Mess
&lt;/h3&gt;

&lt;h4&gt;
  
  
  I Didn’t Start Early Like Everyone Else
&lt;/h4&gt;

&lt;p&gt;Let me be honest — I wasn’t one of those kids who started coding at 8 years old. I didn’t even know what programming was when I was young. But I was always curious about tech stuff. Like, how do websites actually work? How can I make my own app? Could I create another Subway Surfers like the one I used to play on my mom’s phone?&lt;/p&gt;

&lt;p&gt;That curiosity led me to join tech communities online, and they all kept saying the same thing: “It’s not about your credentials but your potential.” Build a portfolio. Do personal projects. Contribute to open source. Build what matters.&lt;/p&gt;

&lt;p&gt;So that’s what I did.&lt;/p&gt;




&lt;h3&gt;
  
  
  My Typical Day (Or Should I Say Night?)
&lt;/h3&gt;

&lt;p&gt;Here’s what my life actually looks like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;6:00 AM: Wake up, go jogging, hit the gym (gotta stay healthy somehow)&lt;/li&gt;
&lt;li&gt;8:00 AM: First lecture — Software Engineering, Data Structures, Operating Systems, whatever&lt;/li&gt;
&lt;li&gt;10:00 AM—2:00 PM: More lectures I actually have to attend&lt;/li&gt;
&lt;li&gt;3:00 PM—6:00 PM: If there’s coursework due, I’ll do it. If not, I rest up for the all-nighter ahead&lt;/li&gt;
&lt;li&gt;7:00 PM—10:00 PM: Try to work on personal projects (if there’s light in my room; else i head to school )&lt;/li&gt;
&lt;li&gt;10:00 PM—3:00 AM: Still coding with/without my energy drinks&lt;/li&gt;
&lt;/ul&gt;




&lt;h4&gt;
  
  
  Why I Don’t Like School
&lt;/h4&gt;

&lt;p&gt;Let me be straight with you — I hate school. Not learning, but school specifically. Our curriculum is stuck in the past. Most of what they’re teaching me, I already learned from &lt;a href="https://www.googleadservices.com/pagead/aclk?sa=L&amp;amp;ai=DChcSEwif_ZrG57aNAxXMp4MHHSN-IgEYABABGgJlZg&amp;amp;co=1&amp;amp;gclid=Cj0KCQjwlrvBBhDnARIsAHEQgORLI5IJn9VjSqUv3YyRKYk-NMv2iFewqPqPQRedwh2PFQAbMnknFKQaAvr2EALw_wcB&amp;amp;ohost=www.google.com&amp;amp;cid=CAESVeD2DF_UXZCzYJL89j_fOZbS0Wc2SpsCfduszhs5TEaypiFlml7aDHbb5NOs-L06YSNwc3ZZZ8T0j3W9ovm31bN07NrxVw5H3Dx3BvtP3q-uuyhMAW0&amp;amp;category=acrcp_v1_0&amp;amp;sig=AOD64_2tUZzJnc4k_xvSPBE5cjIrwT_F3A&amp;amp;q=&amp;amp;adurl=&amp;amp;ved=2ahUKEwjIjZXG57aNAxV-gf0HHdTOGfkQ0Qx6BAgGEAE" rel="noopener noreferrer"&gt;ALX SE&lt;/a&gt; way back. It’s frustrating sitting in classes hearing outdated stuff when I could be building something that actually matters.&lt;/p&gt;

&lt;p&gt;That’s why I only attend lectures where attendance is compulsory. The rest of the time? I’m working on my Digital Assessment Platform — a project I started because I saw how messed up our test-taking and assessment systems are. I knew I could fix it with code.&lt;/p&gt;




&lt;h4&gt;
  
  
  The Real Struggle
&lt;/h4&gt;

&lt;p&gt;You guys in other countries probably can’t imagine this, but here’s our daily reality: power outages aren’t occasional —they’re guaranteed. Internet isn’t a given — it’s a luxury. When you’re trying to debug some code and NEPA takes the light for 12 hours straight, you’ll understand why we get creative.&lt;/p&gt;

&lt;p&gt;I’ve mastered the art of downloading documentation when there’s internet, keeping everything offline-ready, and somehow predicting when power will go off so I can plan around it.&lt;/p&gt;

&lt;p&gt;During the day, I’m submitting assignments using whatever outdated programming languages my lecturers want, just to get grades. At night, I’m building real stuff with modern tech stacks that actually matter in the industry.&lt;/p&gt;

&lt;p&gt;My Digital Assessment Platform isn’t some school project — it’s my solution to a problem I see every semester. Bad testing systems, inefficient assessments. I decided to do something about it instead of just complaining.&lt;/p&gt;




&lt;h4&gt;
  
  
  How I Survive This
&lt;/h4&gt;

&lt;p&gt;I’ve figured out which lectures I can skip and which ones I can’t. It’s not about being lazy — it’s about recognizing that some classes won’t teach me anything I don’t already know, and I’d rather use that time building my portfolio.&lt;/p&gt;

&lt;p&gt;Those late-night coding sessions in faculty buildings have become my routine. It’s quiet, no distractions, and somehow I get my best work done between midnight and 4AM. Fearless and Predator energy drinks have become my best friends.&lt;/p&gt;




&lt;h4&gt;
  
  
  Community Support
&lt;/h4&gt;

&lt;p&gt;We Nigerian student programmers stick together. We share intel about which buildings have the most reliable power, which online resources work offline, and what skills are actually getting people jobs. We help each other survive this system.&lt;/p&gt;




&lt;h4&gt;
  
  
  The Truth About This Life
&lt;/h4&gt;

&lt;p&gt;Look, I’m not going to sugarcoat it — this life is hard. “I’m a programmer, I have no life” sounds dramatic, but it’s pretty accurate for where I am right now.&lt;/p&gt;

&lt;p&gt;But here’s the thing —I’m not sacrificing my life for nothing. I’m building toward something bigger. Every late night in those faculty buildings, every energy drink, every skipped social event — it’s all investment in being able to solve real problems with code.&lt;/p&gt;

&lt;p&gt;My Digital Assessment Platform might not impress my lecturers, but it’s solving actual problems I see around me. And that matters more to me than any grade.&lt;/p&gt;

&lt;p&gt;The 2:37 AM coding sessions will continue. The energy drinks will probably keep piling up. But I’m not just surviving this —I’m building something that matters, whether the system recognizes it or not.&lt;/p&gt;

&lt;p&gt;That’s what being a Nigerian undergraduate programmer really looks like.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;&lt;em&gt;If you enjoyed reading this, like it, comment on it, and share it with a friend&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>productivity</category>
      <category>beginners</category>
      <category>learning</category>
    </item>
    <item>
      <title>JavaScript ES6+ Features Every Developer Should Know</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Mon, 21 Jul 2025 14:17:23 +0000</pubDate>
      <link>https://forem.com/dev_frank/javascript-es6-features-every-developer-should-know-1phk</link>
      <guid>https://forem.com/dev_frank/javascript-es6-features-every-developer-should-know-1phk</guid>
      <description>&lt;p&gt;JavaScript has evolved massively since ES6 dropped in 2015. Are you still writing JavaScript like it’s 2010? You’re making your life harder than it needs to be. These features actually solve the annoying problems you deal with every day.&lt;/p&gt;

&lt;p&gt;React, Vue, Angular — they all lean heavily on ES6+ features. You can’t really avoid learning them anymore. Plus, they help you write less code, introduce fewer bugs, and actually maintain your projects without frustration kicking in.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Variable Declarations and Scoping
&lt;/h2&gt;

&lt;h3&gt;
  
  
  let and const Replace var
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;let&lt;/strong&gt; and &lt;strong&gt;const&lt;/strong&gt; are new ways to declare variables that were introduced in ES6 to replace var. They provide better scoping rules and help prevent common JavaScript. The old var keyword creates confusing behavior. Variables declared with var are function-scoped and get “hoisted,” which leads to unexpected results.&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%2Fgteqa3ap2pev49xzlbun.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%2Fgteqa3ap2pev49xzlbun.png" alt="code snippet explaining var" width="720" height="704"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here’s how you fix it:&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%2Fey5585lcgen5r10or9o3.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%2Fey5585lcgen5r10or9o3.png" alt="let and const Replace var" width="720" height="1040"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Simple rule&lt;/strong&gt;: Use const by default, let when you need to reassign, and avoid var completely.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  2. Template Literals
&lt;/h2&gt;

&lt;p&gt;Concatenating strings with + is painful to read and write. Template literals use backticks and let you embed expressions directly in strings.&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%2Fab4veg79p00kmgarbyh3.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fab4veg79p00kmgarbyh3.webp" alt="Template Literals code snippet" width="720" height="1011"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  3. Destructuring
&lt;/h2&gt;

&lt;p&gt;Instead of writing &lt;strong&gt;&lt;em&gt;object.property&lt;/em&gt;&lt;/strong&gt; five times in a row, destructuring lets you extract multiple values at once.&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%2Flq02d2md4lgk9goyxi0m.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flq02d2md4lgk9goyxi0m.webp" alt="Code snippet explaining destructuring" width="720" height="1341"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  4. Arrow Functions
&lt;/h2&gt;

&lt;p&gt;Arrow functions use =&amp;gt; syntax and are perfect for short functions and callbacks.&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%2Fskyw0apn93bv3bynaaj0.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fskyw0apn93bv3bynaaj0.webp" alt="code snippet explaining arrow functions" width="720" height="1145"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Arrow functions also handle “this” differently, which solves common JavaScript problems:&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%2Frvfv4ikabqoyfdhnxzfo.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frvfv4ikabqoyfdhnxzfo.webp" alt="code snippet explaining arrow function" width="720" height="894"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  5. Default Parameters
&lt;/h2&gt;

&lt;p&gt;Default parameters allow you to set default values for function parameters that will be used if no argument is provided or if undefined is passed.&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%2Fp7bly9on3gc6sjodxt96.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7bly9on3gc6sjodxt96.webp" alt="code snippet explaining default parameters" width="720" height="753"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;ol&gt;
&lt;li&gt;Rest and Spread Operators
The … operator works in two ways depending on context.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Rest — collecting multiple elements into an array:
&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%2F7gn1phdmnyi97burtvvj.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7gn1phdmnyi97burtvvj.webp" alt="code snippet explaining rest operator" width="720" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Spread — expanding arrays or objects:
&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%2Fhgc6mdfkdbergvuwxuf7.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhgc6mdfkdbergvuwxuf7.webp" alt="code snippet explaining spread operator" width="720" height="540"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  7. Classes
&lt;/h2&gt;

&lt;p&gt;Classes provide a much cleaner syntax than the old prototype approach. They are template for creating objects with shared properties and methods.&lt;/p&gt;

&lt;p&gt;The old prototype way was confusing&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%2Fpv9ignwi4ezgw8le4h6p.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpv9ignwi4ezgw8le4h6p.webp" alt="code snippet explaining classes" width="720" height="323"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Classes are so much clearer&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%2Frbgwyeboldffuhuwxdcd.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frbgwyeboldffuhuwxdcd.webp" alt="code snippet explaining classes" width="720" height="875"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  8. Enhanced Object Literals
&lt;/h2&gt;

&lt;p&gt;When your property name matches your variable name, you can skip the repetition.&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%2Fk5zlu6zptcjr942zjzvf.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk5zlu6zptcjr942zjzvf.webp" alt="code snippet explaining object literals" width="720" height="362"&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%2Fbpmd83lgvmj5rb0w7m7y.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbpmd83lgvmj5rb0w7m7y.webp" alt="code snippet explaining object literals" width="720" height="481"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  9. Asynchronous Programming
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Promises: Handle Async Operations Better
&lt;/h3&gt;

&lt;p&gt;Promises give you a way to handle asynchronous operations without repetitive callbacks.&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%2Fftu3ln87fxy16gf2gn7i.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fftu3ln87fxy16gf2gn7i.webp" alt="code snippet explaining promises" width="720" height="934"&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%2Fzry4rm5fe11o7xcsjtht.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzry4rm5fe11o7xcsjtht.webp" alt="code snippet explaining promises" width="720" height="342"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Async/Await: Write Async That Looks Synchronous
&lt;/h3&gt;

&lt;p&gt;This is possible with these keywords called async and await. They make working with promises easier by allowing you to write asynchronous code that behaves like asynchronous code.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;async before a function means it returns a Promise&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;await pauses the function until the Promise resolves&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can use try/catch for error handling&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyd8aoc8f3s76dbpoplco.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyd8aoc8f3s76dbpoplco.webp" alt="code snippet explaining async/await" width="720" height="382"&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%2F8syvbv4ccezbyqrk7m24.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8syvbv4ccezbyqrk7m24.webp" alt="code snippet explaining async/await" width="720" height="440"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  10. Maps and Sets: Better Data Collections
&lt;/h2&gt;

&lt;p&gt;Maps are like objects but can use any type as keys, not just strings.&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%2Fsryxq76gc0g7zxgxnwi3.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsryxq76gc0g7zxgxnwi3.webp" alt="code snippet explaining maps" width="720" height="559"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sets&lt;/strong&gt; store unique values and automatically prevent duplicates.&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%2Fahru6dusyr72ombu0q1f.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fahru6dusyr72ombu0q1f.webp" alt="code snippet explaining sets" width="720" height="638"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  11. ES6 Modules: Organize Your Code
&lt;/h2&gt;

&lt;p&gt;Split your code into separate files and share functionality between them using import and export statements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Creating and exporting from a module (math.js):&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%2Frmzsjnv9jwkly7blovgk.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frmzsjnv9jwkly7blovgk.webp" alt="code snippet explaining creating and exporting a module" width="720" height="401"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Importing and using the module (main.js):&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%2Fnpd458r7sw1waewnmlxf.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnpd458r7sw1waewnmlxf.webp" alt="code snippet explaining the importation of a module" width="720" height="362"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  12. Optional Chaining: Safe Property Access
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;&lt;em&gt;?.&lt;/em&gt;&lt;/strong&gt; operator lets you safely access nested properties without worrying about null or undefined values.&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%2F1hdnhpiq06mddy36d9fm.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1hdnhpiq06mddy36d9fm.webp" alt="code snippet explaining optional chaining" width="720" height="440"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  13. Nullish Coalescing: Better Default Values
&lt;/h2&gt;

&lt;p&gt;The nullish operator works similarly like theOR operator (&lt;strong&gt;||&lt;/strong&gt;). The &lt;strong&gt;??&lt;/strong&gt; operator provides a default value only when the left hand side is null or undefined (not for other falsy values like 0, ‘’, or false)&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%2Faa7w4r4niyslvigtizx8.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faa7w4r4niyslvigtizx8.webp" alt="code snippet explaining nullish coalescing" width="720" height="520"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  14. BigInt: Handle Very Large Numbers
&lt;/h2&gt;

&lt;p&gt;JavaScript’s regular numbers break down beyond Number.MAX_SAFE_INTEGER. BigInt handles arbitrarily large integers.&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%2Fui6r8utcbvktyelk10z7.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fui6r8utcbvktyelk10z7.webp" alt="code snippet explaining bigInt" width="720" height="618"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Don’t try to learn everything at once. Pick a couple of these features and start using them:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Replace all your var declarations with const and let&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use template literals instead of string concatenation&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Try destructuring in your function parameters&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Convert some callbacks to arrow functions&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use async/await for your Promise-based code&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;These features will make your JavaScript more readable and maintainable. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Start with the basics and gradually work your way up to the more advanced features.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If you enjoyed reading this, like it, comment on it, and share it with your developer friend.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>es6</category>
      <category>programming</category>
    </item>
    <item>
      <title>DATATYPES IN C (double, long double, void, bool)</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Mon, 28 Oct 2024 11:59:11 +0000</pubDate>
      <link>https://forem.com/dev_frank/datatypes-in-c-double-long-double-void-bool-4bh9</link>
      <guid>https://forem.com/dev_frank/datatypes-in-c-double-long-double-void-bool-4bh9</guid>
      <description>&lt;p&gt;In the previous story, we talked about some datatypes like &lt;a href="https://dev.to/dev_frank/datatypes-in-c-3dc2"&gt;int, char, and float&lt;/a&gt;. We are going to see more datatypes in this article.&lt;/p&gt;




&lt;h2&gt;
  
  
  double —
&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%2Fppfqg8oktgyv135avh4m.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%2Fppfqg8oktgyv135avh4m.png" alt="Image showing the text double" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Size:&lt;/strong&gt;&lt;br&gt;
The &lt;code&gt;double&lt;/code&gt;data type typically requires 8 bytes of memory on most systems, providing more precision compared to the float data type.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Declaration:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;double_variable&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;pi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;14159265359&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Initialization:&lt;/strong&gt;
You can initialize a &lt;code&gt;double&lt;/code&gt;variable when declaring it.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;temperature&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;98&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Operations:&lt;/strong&gt;
&lt;code&gt;double&lt;/code&gt;supports standard arithmetic operations, like addition, subtraction, multiplication, and division:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// result is now 2.0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Output Formatting:&lt;/strong&gt;
When printing or displaying the value of a double, weuse the &lt;code&gt;%lf&lt;/code&gt; format specifier in functions like &lt;code&gt;printf&lt;/code&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"The value of pi is %lf&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;pi&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scientific Notation:&lt;/strong&gt;
Numbers can be expressed in scientific notation, using the e or E character to represent the exponent.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;scientific_number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;1.23e-4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// Equivalent to 0.000123&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Precision:&lt;br&gt;
&lt;code&gt;double&lt;/code&gt;provides double-precision floating-point numbers, offering a larger range and higher precision than the float data type.&lt;br&gt;
It is suitable for applications where higher precision is required, such as scientific and engineering computations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Limits:&lt;/strong&gt;&lt;br&gt;
The &lt;code&gt;&amp;lt;float.h&amp;gt;&lt;/code&gt; header file provides constants that represent the limits of various floating-point data types. For double, you can use &lt;code&gt;DBL_MIN&lt;/code&gt; and &lt;code&gt;DBL_MAX&lt;/code&gt; to get the minimum and maximum representable values.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;float.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Minimum value of double: %e&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;DBL_MIN&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Maximum value of double: %e&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;DBL_MAX&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  long double —
&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%2Fya9ipycdsqw4j4fpq9b0.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%2Fya9ipycdsqw4j4fpq9b0.png" alt="Image showing the text long double" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The long double data type represents extended-precision floating-point numbers.&lt;/p&gt;

&lt;p&gt;It offers extended-precision floating-point numbers, depending on the platform.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Size:&lt;/strong&gt;&lt;br&gt;
The size of a long double variable is platform-dependent and is typically larger than that of double. It can vary, but it’s often 8 bytes or more.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Declaration:&lt;/strong&gt;&lt;br&gt;
To declare a long double variable, you use the following syntax:&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;long_double_variable&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;pi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;14159265358979323846&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Initialization:&lt;/strong&gt;
Similar to &lt;code&gt;double&lt;/code&gt;, you can initialize &lt;code&gt;long double&lt;/code&gt; at the time of declaration:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;large_number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;12345678901234567890&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;1234567890&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Operations:&lt;/strong&gt;
&lt;code&gt;long double&lt;/code&gt; variables support standard arithmetic operations.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// result is now 2.0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Output Formatting:&lt;/strong&gt;
When printing or displaying the value of a long double, we use the &lt;code&gt;%Lf&lt;/code&gt; format specifier in functions like &lt;code&gt;printf&lt;/code&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"The value of pi is %Lf&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;pi&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scientific Notation:&lt;/strong&gt;
As with &lt;code&gt;double&lt;/code&gt;, &lt;code&gt;long double&lt;/code&gt; supports scientific notation:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;long&lt;/span&gt; &lt;span class="kt"&gt;double&lt;/span&gt; &lt;span class="n"&gt;scientific_number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;1.23e-4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// Equivalent to 0.000123&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Precision:&lt;/strong&gt;&lt;br&gt;
long double provides the highest precision among floating-point data types in C. It is commonly used in applications that demand extremely high accuracy, such as scientific research and complex simulations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Limits:&lt;/strong&gt;&lt;br&gt;
The &lt;code&gt;&amp;lt;float.h&amp;gt;&lt;/code&gt; header file provides constants that represent the limits of various floating-point data types. For &lt;code&gt;long double&lt;/code&gt;, you can use &lt;code&gt;LDBL_MIN&lt;/code&gt; and &lt;code&gt;LDBL_MAX&lt;/code&gt; to get the minimum and maximum representable values.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;float.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Minimum value of long double: %Le&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;LDBL_MIN&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Maximum value of long double: %Le&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;LDBL_MAX&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  void —
&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%2F5vg354jyucyspgaocsy2.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%2F5vg354jyucyspgaocsy2.png" alt="Image showing the text void" width="800" height="800"&gt;&lt;/a&gt;&lt;br&gt;
void data type is a special data type that is used to indicate the absence of a specific type.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;No Value:&lt;/strong&gt;
Use void for functions that don’t return a value.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;myFunction&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Function does not return any value&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;No Arguments:&lt;/strong&gt;
When used as a function parameter, &lt;code&gt;void&lt;/code&gt;indicates that the function does not expect any arguments.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;printMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Hello, World!&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Pointer to void (Generic Pointer):&lt;/strong&gt;
A pointer of type void* (generic pointer) can point to objects of any data type. It is often used in functions that need to handle various data types.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;printValue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;ptr&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Function to print values of different types using a generic pointer&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Incomplete Type:&lt;/strong&gt;
&lt;code&gt;void&lt;/code&gt;can be used as an incomplete type when declaring pointers.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;ptr&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Return Type in Functions:&lt;/strong&gt;
In function declarations, void indicates that the function does not return a value.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;myFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Dynamic Memory:&lt;/strong&gt;
&lt;code&gt;void*&lt;/code&gt; is commonly used for allocating memory dynamically (with &lt;code&gt;malloc&lt;/code&gt;, &lt;code&gt;calloc&lt;/code&gt;, etc.) because it can be cast to any pointer type.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;ptr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;malloc&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;sizeof&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Generic Programming:&lt;/strong&gt;
In some programming paradigms, void is used in generic programming where functions or data structures can work with multiple data types.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  bool —
&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%2Fosfsy6xis627rrsh82h3.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%2Fosfsy6xis627rrsh82h3.png" alt="Image showing the text bool" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The bool type was introduced in &lt;a href="https://en.wikipedia.org/wiki/C99" rel="noopener noreferrer"&gt;C99&lt;/a&gt;. Before that, C did not have a native boolean type. However, starting with the C99 standard, a header  was introduced that includes a boolean type and boolean constants.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Header Inclusion:&lt;/strong&gt;
To use &lt;code&gt;bool&lt;/code&gt;in C, include the &lt;code&gt;&amp;lt;stdbool.h&amp;gt;&lt;/code&gt; header.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;stdbool.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Boolean Type:&lt;/strong&gt;
The bool type can take values &lt;code&gt;true&lt;/code&gt;or &lt;code&gt;false&lt;/code&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="n"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;isReady&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;isValid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Boolean Constants:&lt;/strong&gt;
The header defines two constants: &lt;code&gt;true&lt;/code&gt; and &lt;code&gt;false&lt;/code&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;stdbool.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;isReady&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;isValid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Operations:&lt;/strong&gt;
The &lt;code&gt;bool&lt;/code&gt;type is often used in conditions and logical expressions.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;stdbool.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;isReady&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;isReady&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Code executed if isReady is true&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Functions Returning bool:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;stdbool.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;bool&lt;/span&gt; &lt;span class="nf"&gt;isEven&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;number&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Compatibility:&lt;/strong&gt;&lt;br&gt;
While C99 and later standards have native support for bool, some older compilers or projects might not fully support it. In such cases, you -  boolean variables represented using &lt;code&gt;int&lt;/code&gt;, where 0 is equivalent to &lt;code&gt;false&lt;/code&gt;and non-zero to &lt;code&gt;true&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Conditional Expressions:&lt;/strong&gt;&lt;br&gt;
&lt;code&gt;bool&lt;/code&gt;is commonly used in conditional expressions to improve code readability.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;stdbool.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;bool&lt;/span&gt; &lt;span class="nf"&gt;isPositive&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;number&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Understanding the different data types in C, like &lt;code&gt;double&lt;/code&gt;, &lt;code&gt;long double&lt;/code&gt;, &lt;code&gt;void&lt;/code&gt;, and &lt;code&gt;bool&lt;/code&gt;, is crucial for writing efficient and accurate code. Each datatype has its unique properties and is suited for specific tasks—whether it's handling precise calculations with &lt;code&gt;double&lt;/code&gt; and &lt;code&gt;long double&lt;/code&gt;, defining functions with no return type using &lt;code&gt;void&lt;/code&gt;, or managing logic with &lt;code&gt;bool&lt;/code&gt;. Mastering these concepts will allow you to build more robust and flexible programs, especially as you tackle more complex problems in scientific computing, system programming, or everyday application development.&lt;/p&gt;




&lt;h3&gt;
  
  
  Further Resources
&lt;/h3&gt;

&lt;p&gt;To continue your journey in mastering C and its data types, here are some valuable resources:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Books:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://www.cimat.mx/ciencia_para_jovenes/bachillerato/libros/%5BKernighan-Ritchie%5DThe_C_Programming_Language.pdf" rel="noopener noreferrer"&gt;The C Programming Language by Brian W. Kernighan and Dennis M. Ritchie (also known as K&amp;amp;R)&lt;/a&gt; — A classic text that introduces C with clarity and depth.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Online Tutorials:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://www.learn-c.org/" rel="noopener noreferrer"&gt;Learn-C.org&lt;/a&gt; — An interactive platform to practice C programming.&lt;br&gt;
Video Resources:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;YouTube Channel:&lt;/strong&gt; &lt;a href="https://youtu.be/KJgsSFOSQv0?si=OSI-NEhthjcCKfEW" rel="noopener noreferrer"&gt;freeCodeCamp&lt;/a&gt; — Provides free tutorials on C programming, among many other languages.&lt;/p&gt;




&lt;p&gt;By diving into these resources, you’ll deepen your understanding of C and strengthen your programming skills. Keep experimenting and coding!&lt;/p&gt;

</description>
      <category>softwareengineering</category>
      <category>computerscience</category>
      <category>c</category>
      <category>programming</category>
    </item>
    <item>
      <title>DATATYPES IN C</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Fri, 11 Oct 2024 13:05:06 +0000</pubDate>
      <link>https://forem.com/dev_frank/datatypes-in-c-3dc2</link>
      <guid>https://forem.com/dev_frank/datatypes-in-c-3dc2</guid>
      <description>&lt;p&gt;In C, data types form the structural backbone of any program. Understanding them is critical because they dictate how the compiler allocates memory, interprets data, and determines what operations are valid. In a way, selecting the right data type in C can be compared to choosing the right building material for a structure—it influences efficiency, reliability, and robustness. &lt;br&gt;
Data types define the types of data that a variable can hold. They specify the amount of memory space required and the operations that can be performed on the data. C provides a rich set of built-in data types to handle different types of data.&lt;/p&gt;



&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Types Of Datatypes In C&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;int&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How To Know How Many Bits Your Machine Can Store&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;char&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;float&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;


&lt;h3&gt;
  
  
  Types Of Datatypes In C
&lt;/h3&gt;

&lt;p&gt;Data types specify the type of data that can be stored in a variable. They help in defining the variable's memory requirements and the operations that can be performed on the data.&lt;/p&gt;
&lt;h4&gt;
  
  
  Primary Datatypes
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;int&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;char&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;float&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;double&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;void&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;bool&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  Derived Datatypes
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Array&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Structure&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Union&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pointer&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  User-defined Datatypes
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;typedef&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Enum&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  int-
&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%2Fysbansvfk5cg04vnkf8g.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%2Fysbansvfk5cg04vnkf8g.png" alt="Image of an int datatype" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The int (integer) data type is used to represent whole numbers. It is one of the fundamental and most commonly used data types in C.&lt;/p&gt;

&lt;p&gt;This can also be categorized as&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.javatpoint.com/what-is-short-int-in-c" rel="noopener noreferrer"&gt;short int&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.geeksforgeeks.org/c-long/" rel="noopener noreferrer"&gt;long int&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;NB: This are size modifiers&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.geeksforgeeks.org/difference-between-unsigned-int-and-signed-int-in-c/" rel="noopener noreferrer"&gt;signed int&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.geeksforgeeks.org/difference-between-unsigned-int-and-signed-int-in-c/" rel="noopener noreferrer"&gt;unsigned int&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;NB: This are sign modifiers&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;“int”&lt;/strong&gt; stands for INTEGER, in this datatype you can store integer values. Examples 1, 123, 10, etc.&lt;/p&gt;

&lt;p&gt;Here are the key characteristics and considerations regarding the int data type:&lt;/p&gt;
&lt;h3&gt;
  
  
  Size and Range
&lt;/h3&gt;

&lt;p&gt;The size of an int variable is platform-dependent, meaning it can vary based on the system architecture. Commonly, an int is 4 bytes on most modern systems.&lt;br&gt;
The range of values that an int can represent is determined by the number of bits allocated to it. It is from &lt;strong&gt;-32768&lt;/strong&gt; to &lt;strong&gt;32767&lt;/strong&gt; For a 32-bit int, the range is typically from &lt;strong&gt;-2,147,483,648&lt;/strong&gt; to &lt;strong&gt;2,147,483,647&lt;/strong&gt;. This range is for &lt;strong&gt;signed int&lt;/strong&gt;, by default int means signed integer, because it permits +ve and -ve signs. But for &lt;strong&gt;unsigned int&lt;/strong&gt; you have to specify it in your program.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unsigned int&lt;/strong&gt; permits only +ve sign . So the range is from &lt;strong&gt;0&lt;/strong&gt; to &lt;strong&gt;65535&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The memory taken by an int datatype is&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;2 bytes on a 16 bit machine.&lt;/li&gt;
&lt;li&gt;4 bytes on a 32 bit machine.&lt;/li&gt;
&lt;li&gt;4 bytes on a 64 bit machine.
If you want to find out what machine you are working on you can write this code snippet &lt;code&gt;printf(“%lu”, sizeof(int))&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;NB: %lu is a format specifier for long integer&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Short int&lt;/strong&gt; —&lt;/p&gt;

&lt;p&gt;Suppose you want to store a number like 1, 2, 3, 8, 7, 63 etc. the space allocated will be smaller than that of long int. The space allocated in memory for a short int value is &lt;strong&gt;1 byte&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Long int&lt;/strong&gt; —&lt;/p&gt;

&lt;p&gt;In this case the space allocated will be more than that of short int, because with values like 53782, 1234567, 88107, etc. we will need enough space to store the values in memory. The space allocated in memory for long int is &lt;strong&gt;2 bytes&lt;/strong&gt;.&lt;/p&gt;
&lt;h4&gt;
  
  
  How To Know How Many Bits Your Machine Can Store
&lt;/h4&gt;

&lt;p&gt;Suppose your machine is a 2gb RAM machine. To know how many bits your machine can store you can do this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;2 &lt;span class="err"&gt;*&lt;/span&gt; 1024MB
2 &lt;span class="ge"&gt;* 1024 *&lt;/span&gt; 1024KB
2 &lt;span class="ge"&gt;* 1024 *&lt;/span&gt; 1024 &lt;span class="err"&gt;*&lt;/span&gt; 1024bytes
2 &lt;span class="ge"&gt;* 1024 *&lt;/span&gt; 1024 &lt;span class="ge"&gt;* 1024 *&lt;/span&gt; 8bits

 On a 2gb RAM machine you can only store 17,179,869,184 bits
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Declaration
&lt;/h3&gt;

&lt;p&gt;To declare an int variable, you use the following syntax:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;variable_name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Initialization
&lt;/h3&gt;

&lt;p&gt;You can initialize an int variable at the time of declaration by using the assignment operator ( = ):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Operations
&lt;/h3&gt;

&lt;p&gt;int variables support standard arithmetic operations like addition, subtraction, multiplication, and division.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// sum is now 8&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Formatting for Output
&lt;/h3&gt;

&lt;p&gt;When printing or displaying the value of an int, you can use the &lt;code&gt;%d&lt;/code&gt; format specifier in functions like &lt;code&gt;printf&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"The value of x is %d&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Limits
&lt;/h3&gt;

&lt;p&gt;The  header file provides constants that represent the limits of various data types. For int, you can use &lt;code&gt;INT_MIN&lt;/code&gt; and &lt;code&gt;INT_MAX&lt;/code&gt; to get the minimum and maximum values an int can hold.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;limits.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Minimum value of int: %d&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;INT_MIN&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Maximum value of int: %d&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;INT_MAX&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Modulus Operator
&lt;/h3&gt;

&lt;p&gt;The modulus operator &lt;strong&gt;%&lt;/strong&gt; can be used with &lt;strong&gt;int&lt;/strong&gt; to find the remainder of a division operation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;remainder&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// remainder is 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  char-
&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%2F5v8lkizrc8jof6407ted.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%2F5v8lkizrc8jof6407ted.png" alt="Image of a char datatype" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
The char data type is used to represent individual characters. It is one of the fundamental data types and is commonly employed for storing and manipulating characters, such as letters, digits, and special symbols.&lt;/p&gt;

&lt;p&gt;Here are the key characteristics and considerations regarding the char data type:&lt;/p&gt;
&lt;h3&gt;
  
  
  Size
&lt;/h3&gt;

&lt;p&gt;The size of a char variable is always 1 byte / 8bits be it &lt;a href="https://developer.arm.com/documentation/den0013/d/Porting/Miscellaneous-C-porting-issues/unsigned-char-and-signed-char" rel="noopener noreferrer"&gt;signed char&lt;/a&gt; or &lt;a href="https://www.geeksforgeeks.org/unsigned-char-in-c-with-examples/" rel="noopener noreferrer"&gt;unsigned char&lt;/a&gt; .&lt;/p&gt;

&lt;p&gt;By default char is still the same as signed char. This range of signed char is from &lt;strong&gt;-128&lt;/strong&gt; to &lt;strong&gt;127&lt;/strong&gt;. The range of unsigned char is from &lt;strong&gt;0&lt;/strong&gt; to &lt;strong&gt;255&lt;/strong&gt;.&lt;br&gt;
The char data type is designed to store a single character from the ASCII character set.&lt;/p&gt;
&lt;h3&gt;
  
  
  Declaration
&lt;/h3&gt;

&lt;p&gt;To declare a char variable, you use the following syntax:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;character_name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;grade&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Initialization
&lt;/h3&gt;

&lt;p&gt;You can initialize a char variable at the time of declaration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;first_initial&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sc"&gt;'A'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that character literals are enclosed in single quotes.&lt;/p&gt;

&lt;h3&gt;
  
  
  ASCII Representation
&lt;/h3&gt;

&lt;p&gt;Each char variable holds a numeric ASCII (American Standard Code for Information Interchange) value that corresponds to a specific character.&lt;/p&gt;

&lt;p&gt;For example, the ASCII value for ‘A’ is 65.&lt;/p&gt;

&lt;h3&gt;
  
  
  Operations
&lt;/h3&gt;

&lt;p&gt;char variables can be used in various operations, including assignment, comparison, and arithmetic operations.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;first_char&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sc"&gt;'A'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;second_char&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;first_char&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// second_char now holds the ASCII value of 'B'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Formatting for Output
&lt;/h3&gt;

&lt;p&gt;When printing or displaying the value of a char, you can use the &lt;code&gt;%c&lt;/code&gt; format specifier in functions like &lt;code&gt;printf&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"The first initial is %c&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;first_initial&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Character Arrays (Strings)
&lt;/h3&gt;

&lt;p&gt;A sequence of char variables can be used to represent strings (arrays of characters).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;greeting&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Hello"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Strings are terminated with a null character (‘\0’), and functions like &lt;code&gt;printf&lt;/code&gt; and &lt;code&gt;scanf&lt;/code&gt; interpret them accordingly.&lt;/p&gt;

&lt;h3&gt;
  
  
  Escape Sequences
&lt;/h3&gt;

&lt;p&gt;Special characters, called escape sequences, can be represented using the backslash (). For example, &lt;code&gt;\n&lt;/code&gt; represents a newline character.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;char&lt;/span&gt; &lt;span class="n"&gt;newline&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sc"&gt;'\n'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  float-
&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%2F0ngh2qieepult0ttdj0q.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%2F0ngh2qieepult0ttdj0q.png" alt="Image of a float datatype" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;float data type is used to represent floating-point numbers. Floating-point numbers are numbers that have a decimal point or are expressed in exponential (scientific) notation.&lt;/p&gt;

&lt;p&gt;Here are the key characteristics and considerations regarding the float data type:&lt;/p&gt;

&lt;h3&gt;
  
  
  Size
&lt;/h3&gt;

&lt;p&gt;The size of a float variable is typically 4 bytes on most systems. It may vary depending on the compiler and platform.&lt;/p&gt;

&lt;p&gt;The range of a floating number is &lt;strong&gt;-3.4e38&lt;/strong&gt; to &lt;strong&gt;3.4e38&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Declaration
&lt;/h3&gt;

&lt;p&gt;To declare a float variable, you use the following syntax:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;floating_point_variable&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;pi&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Initialization
&lt;/h3&gt;

&lt;p&gt;You can initialize a float variable at the time of declaration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;pi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;14159&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Operations
&lt;/h3&gt;

&lt;p&gt;float variables support standard arithmetic operations, including addition, subtraction, multiplication, and division.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// result is now 2.0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Formatting for Output
&lt;/h3&gt;

&lt;p&gt;When printing or displaying the value of a float, you can use the %f format specifier in functions like &lt;code&gt;printf&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"The value of pi is %f&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;pi&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Precision
&lt;/h3&gt;

&lt;p&gt;float provides single-precision floating-point numbers. Datatype float takes six digits of precisions. It is suitable for a wide range of applications but may have limited precision, especially for very large or very small numbers.&lt;br&gt;
If higher precision is needed, the double data type can be used, which typically provides double-precision floating-point numbers.&lt;/p&gt;

&lt;p&gt;float is categorized into&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;double → 8 bytes&lt;/li&gt;
&lt;li&gt;long double → 10 bytes&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Scientific Notation
&lt;/h3&gt;

&lt;p&gt;float numbers can be expressed in scientific notation, using the e or E character to represent the exponent.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="kt"&gt;float&lt;/span&gt; &lt;span class="n"&gt;scientific_number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;1.23e-4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// Equivalent to 0.000123&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Limits
&lt;/h3&gt;

&lt;p&gt;The  header file provides constants that represent the limits of various floating-point data types. For float, you can use &lt;code&gt;FLT_MIN&lt;/code&gt; and &lt;code&gt;FLT_MAX&lt;/code&gt; to get the minimum and maximum representable values.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;&amp;lt;float.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Minimum value of float: %e&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;FLT_MIN&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="n"&gt;printf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Maximum value of float: %e&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;FLT_MAX&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;When you code in C, every choice of a data type affects the performance, portability, and correctness of your program. As a software engineer, one of the most powerful tools in your arsenal is a deep understanding of these types and how they interact with the hardware underneath.&lt;/p&gt;

&lt;p&gt;If you enjoyed this journey and would like to show your support, here’s how you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="//buymeacoffee.com/rzGORS0kAA"&gt;Buy me a coffee&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Follow me on &lt;a href="https://medium.com/@frankokey469" rel="noopener noreferrer"&gt;Medium &lt;/a&gt;for more insightful content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Connect with me on &lt;a href="https://twitter.com/enehfranklyn8" rel="noopener noreferrer"&gt;X&lt;/a&gt;, &lt;a href="https://www.linkedin.com/in/frank-okey-61a70025a/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;, and &lt;a href="https://github.com/Phrank08" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;, where I consistently share valuable programming resources for free.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>c</category>
      <category>computerscience</category>
      <category>softwareengineering</category>
      <category>beginners</category>
    </item>
    <item>
      <title>What’s a Progressive Web App (PWA), Anyway?</title>
      <dc:creator>Frank</dc:creator>
      <pubDate>Sat, 28 Sep 2024 03:01:26 +0000</pubDate>
      <link>https://forem.com/dev_frank/whats-a-progressive-web-app-pwa-anyway-1pnl</link>
      <guid>https://forem.com/dev_frank/whats-a-progressive-web-app-pwa-anyway-1pnl</guid>
      <description>&lt;p&gt;Imagine you love using apps on your phone because they’re fast, easy to access, and work even if you lose internet for a while. But then there are websites that sometimes feel slow, clunky, and don’t work without a connection. What if you could have the best of both worlds? That’s where Progressive Web Apps (PWAs) come in.&lt;/p&gt;

&lt;p&gt;A PWA is basically a website that behaves like a mobile app. It's still a website, but it feels faster, can work offline, and even lets you install it on your phone like an app. No need to go through an app store—just open the website, and if it's a PWA, you can save it to your home screen.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Should You Care?&lt;/strong&gt;&lt;br&gt;
Let’s say you’re using a restaurant's website to place an order. Normally, you’d need a good internet connection, and you’d have to wait for pages to load. But with a PWA, the site could load instantly because it’s been cached on your phone. Even if your connection is slow or drops for a bit, you can still browse and use the site!&lt;/p&gt;



&lt;p&gt;Alright, let's dive into building a basic Progressive Web App (PWA) from the ground up.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Building Blocks of PWAs: Essential Tools and Technologies&lt;/li&gt;
&lt;li&gt;Creating Your Installable Web App&lt;/li&gt;
&lt;li&gt;Ensuring Your PWA Works, Even When Offline&lt;/li&gt;
&lt;li&gt;How to analyze web performance, accessibility, SEO, etc.&lt;/li&gt;
&lt;li&gt;Tips for Boosting App Performance and User Experience&lt;/li&gt;
&lt;/ol&gt;



&lt;p&gt;Most of us might have come across PWAs without knowing it . Common examples of some PWAs are &lt;a href="https://www.pinterest.com/" rel="noopener noreferrer"&gt;Pinterest&lt;/a&gt; and &lt;a href="https://www.google.com/maps/@40.756568,-74.172666,11.02z?authuser=0&amp;amp;entry=ttu&amp;amp;g_ep=EgoyMDI0MDkyNC4wIKXMDSoASAFQAw%3D%3D" rel="noopener noreferrer"&gt;Google Map&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%2F0d0n5gr1oht9sbxqg2qg.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%2F0d0n5gr1oht9sbxqg2qg.jpg" alt="Pinterest" width="800" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Websites that displays a computer icon with a downward arrow indicates the site is a PWA, allowing installation for offline access and native app functionality.&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%2Fhpn63jzl7m80uc45hggq.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%2Fhpn63jzl7m80uc45hggq.jpg" alt="Google Map" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Building Blocks of PWAs: Essential Tools and Technologies
&lt;/h2&gt;

&lt;p&gt;To get started with a PWA, you don’t need a fancy toolkit or complex setup—just a few things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;HTML: The structure of your website.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;CSS: To make your website look good.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;JavaScript: To add interactivity and offline features.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Service Worker: A script that runs in the background, helping with offline functionality.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Manifest File: This is what makes your web app installable.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Creating Your Installable Web App
&lt;/h2&gt;

&lt;p&gt;A PWA lets users install your website on their home screen, so it feels just like an app. The trick? We need to add something called a Web App Manifest.&lt;/p&gt;

&lt;p&gt;Step-by-Step Example:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Start with a Basic HTML Page&lt;/strong&gt;:&lt;br&gt;
    This is our website's structure: (&lt;code&gt;index.html&lt;/code&gt;):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"theme-color"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"#f5a623"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Burger Hut&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"style.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"manifest"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"manifest.json"&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"apple-touch-icon"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"images/iconlogo192.png"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;


&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;header&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"logo"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"images/iconlogo.png"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;nav&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;ul&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"nav-links"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#home"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Home&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#menu"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Menu&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#order"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Order&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#locations"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Locations&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#about"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;About Us&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;li&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#contact"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Contact&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/nav&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#order"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"cta-button"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Order Online&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;


    &lt;span class="c"&gt;&amp;lt;!-- Hero Section --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;section&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"hero"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"hero-content"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;The Juiciest Burgers in Town!&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Crafted with fresh ingredients, served with love.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"hero-buttons"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#order"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn-primary"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Order Now&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
              &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#menu"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn-secondary"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;See Menu&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/section&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"script.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Create a Manifest File (&lt;code&gt;manifest.json&lt;/code&gt;)&lt;/strong&gt;: This file gives your PWA its metadata like name, icon, and more:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Burger Hut App"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"short_name"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Burger Hut"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"start_url"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"./"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"background_color"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"black"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"theme_color"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"#f5a623"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"display"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"standalone"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"icons"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"src"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"images/iconlogo192.png"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"sizes"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"192x192"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"image/png"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;

      &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"src"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"images/iconlogo512.png"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"sizes"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"512x512"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"image/png"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;CSS Styles&lt;/strong&gt; (&lt;code&gt;styles.css&lt;/code&gt;): Now let’s add some simple CSS to give our app a clean and professional look.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;box-sizing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;border-box&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/* Global styles */&lt;/span&gt;
&lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;'Arial'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;sans-serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#0a0a0a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f4f4f4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;header&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;space-between&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;align-items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#0a0a0a&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;box-shadow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="m"&gt;2px&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt; &lt;span class="n"&gt;rgba&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.logo&lt;/span&gt; &lt;span class="nt"&gt;img&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;80px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;nav&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;flex-grow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;margin-left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.nav-links&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;list-style&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;space-evenly&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.nav-links&lt;/span&gt; &lt;span class="nt"&gt;li&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;margin-left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.nav-links&lt;/span&gt; &lt;span class="nt"&gt;a&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;text-decoration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f4f4f4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;18px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt; &lt;span class="m"&gt;0.3s&lt;/span&gt; &lt;span class="n"&gt;ease&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.nav-links&lt;/span&gt; &lt;span class="nt"&gt;a&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f5a623&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.cta-button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f5a623&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#181818&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;text-decoration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;25px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;font-weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bold&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;background-color&lt;/span&gt; &lt;span class="m"&gt;0.3s&lt;/span&gt; &lt;span class="n"&gt;ease&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.cta-button&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#ffbf47&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;span class="c"&gt;/* Hero Section */&lt;/span&gt;
&lt;span class="nc"&gt;.hero&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100vh&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sx"&gt;url('images/hero-background1.jpg')&lt;/span&gt; &lt;span class="nb"&gt;no-repeat&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;/&lt;/span&gt;&lt;span class="n"&gt;cover&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;relative&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;justify-content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;space-between&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;align-items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;padding-left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;45px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="c"&gt;/*text-align: center;*/&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.hero&lt;/span&gt;&lt;span class="nd"&gt;::before&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;top&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;right&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;bottom&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;rgba&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;0.6&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c"&gt;/* Dark overlay */&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.hero-content&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;max-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;650px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;relative&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;z-index&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f4f4f4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.hero&lt;/span&gt; &lt;span class="nt"&gt;h1&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;font-weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bold&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f5a623&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;text-transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;uppercase&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;letter-spacing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;2px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.hero&lt;/span&gt; &lt;span class="nt"&gt;p&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20px&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f4f4f4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.hero-buttons&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;margin-top&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;30px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.hero-buttons&lt;/span&gt; &lt;span class="nt"&gt;a&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;15px&lt;/span&gt; &lt;span class="m"&gt;30px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;30px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;text-decoration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;font-weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bold&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;text-transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;uppercase&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;background-color&lt;/span&gt; &lt;span class="m"&gt;0.3s&lt;/span&gt; &lt;span class="n"&gt;ease&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/* Primary button */&lt;/span&gt;
&lt;span class="nc"&gt;.btn-primary&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f5a623&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#181818&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.btn-primary&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#ffbf47&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;/* Secondary button */&lt;/span&gt;
&lt;span class="nc"&gt;.btn-secondary&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;transparent&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;2px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="m"&gt;#f5a623&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f5a623&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.btn-secondary&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#f5a623&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#181818&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

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

&lt;/div&gt;






&lt;h2&gt;
  
  
  Ensuring Your PWA Works, Even When Offline
&lt;/h2&gt;

&lt;h3&gt;
  
  
  How to Implement Offline Functionality in PWAs**
&lt;/h3&gt;

&lt;p&gt;Now, let’s make sure our app works even if the user is offline. We’ll add a Service Worker. It’s a little JavaScript file that tells the browser to cache assets (HTML, CSS, JS, etc.), so when there’s no internet, the site still loads.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Service Worker&lt;/strong&gt;:&lt;/p&gt;

&lt;h4&gt;
  
  
  JavaScript for Registering the Service Worker (&lt;code&gt;script.js&lt;/code&gt;):
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;serviceWorker&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nb"&gt;navigator&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;  &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nb"&gt;navigator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;serviceWorker&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;register&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sw.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;registration&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;SW Registered!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;registration&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}).&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;SW Registration Failed!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Service Worker Script (&lt;code&gt;sw.js&lt;/code&gt;):
&lt;/h4&gt;

&lt;p&gt;This script caches files and serves them when the user is offline:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;install&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;waitUntil&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nx"&gt;caches&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;open&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;static&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cache&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addAll&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;style.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;images/iconlogo192.png&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fetch&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;respondWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nx"&gt;caches&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;request&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;request&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&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%2Fr4i4cvcsykhgxjvwfnmi.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%2Fr4i4cvcsykhgxjvwfnmi.jpg" alt="A PWA Homepage" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Incredible 👏, you did it, you've turned your website to a progressive web app. &lt;br&gt;
Go ahead and click the install icon and then &lt;strong&gt;install&lt;/strong&gt;. You should see something like this 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%2Fqw4u984312ag30plaxd5.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%2Fqw4u984312ag30plaxd5.jpg" alt="Onclick Install" width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now our web app is installed on our computer and can be accessed offline, you can also pin it to the taskbar if you want.&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%2F0j3l2d2bvr7rx3cd75dq.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%2F0j3l2d2bvr7rx3cd75dq.jpg" alt="Installed Web App" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The service worker handles file caching and offline functionality you can check this on the web browser using the inspect tool.&lt;/p&gt;

&lt;h2&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%2Fdg9pceuw3r5o68vx4xxz.jpg" alt="Application on Dev Tool" width="800" height="426"&gt;
&lt;/h2&gt;

&lt;h2&gt;
  
  
  How to analyze web performance, accessibility, SEO, etc.
&lt;/h2&gt;

&lt;p&gt;Once your app is running, it’s important to check if it’s fast, accessible, and SEO-friendly. The easiest way to do this is by using &lt;a href="https://developer.chrome.com/docs/lighthouse/overview" rel="noopener noreferrer"&gt;Lighthouse&lt;/a&gt;, a tool built into Chrome.&lt;/p&gt;

&lt;p&gt;How to Run Lighthouse:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open your site in Chrome.&lt;/li&gt;
&lt;li&gt;Right-click, choose Inspect, and go to the Lighthouse tab.&lt;/li&gt;
&lt;li&gt;Click “Generate Report.” It’ll give you insights on performance, accessibility, SEO, and more.&lt;/li&gt;
&lt;/ol&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%2Fbchl2sro4xqlfzhwwv3o.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%2Fbchl2sro4xqlfzhwwv3o.jpg" alt="Lighthouse" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Tips for Boosting App Performance And User Experience
&lt;/h2&gt;

&lt;p&gt;To make sure your PWA is fast and feels like a native app, follow these tips:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Minify your CSS and JavaScript: Use tools like &lt;a href="https://www.npmjs.com/package/uglify-js" rel="noopener noreferrer"&gt;UglifyJS &lt;/a&gt;for JavaScript and &lt;a href="https://www.npmjs.com/package/cssnano" rel="noopener noreferrer"&gt;CSSNano&lt;/a&gt; for CSS to remove unnecessary code and reduce file sizes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Optimize Images: Compress images using tools like &lt;a href="https://tinypng.com/" rel="noopener noreferrer"&gt;TinyPNG&lt;/a&gt;. This reduces load time, especially on mobile networks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Lazy Loading: Only load images or content when they’re visible on the screen. This speeds up the initial load.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cache Important Assets: Use the service worker to cache JavaScript, CSS, and images so that the app loads quickly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Responsive Design: Make sure your app looks good on all screen sizes using media queries in CSS.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;You’ve made it to the end and gotten smarter by learning about PWAs. Now, try practicing what you’ve learned. Good luck!&lt;/p&gt;

&lt;p&gt;If you enjoyed this journey and would like to show your support, here’s how you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="//buymeacoffee.com/rzGORS0kAA"&gt;Buy me a coffee&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Follow me on &lt;a href="https://medium.com/@frankokey469" rel="noopener noreferrer"&gt;Medium &lt;/a&gt;for more insightful content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Connect with me on &lt;a href="https://twitter.com/enehfranklyn8" rel="noopener noreferrer"&gt;X&lt;/a&gt;, &lt;a href="https://www.linkedin.com/in/frank-okey-61a70025a/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;, and &lt;a href="https://github.com/Phrank08" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;, where I consistently share valuable programming resources for free.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
