<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Fortune Nabhel Harmony</title>
    <description>The latest articles on DEV Community by Fortune Nabhel Harmony (@nabhel).</description>
    <link>https://dev.to/nabhel</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%2F2177163%2F0bbe63ab-2bab-4d46-a7b4-c7bb9c342d8a.jpg</url>
      <title>DEV Community: Fortune Nabhel Harmony</title>
      <link>https://dev.to/nabhel</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nabhel"/>
    <language>en</language>
    <item>
      <title>Yo! I Built My First Figma Plugin</title>
      <dc:creator>Fortune Nabhel Harmony</dc:creator>
      <pubDate>Wed, 20 Nov 2024 08:42:03 +0000</pubDate>
      <link>https://dev.to/nabhel/yo-i-built-my-first-figma-plugin-3a54</link>
      <guid>https://dev.to/nabhel/yo-i-built-my-first-figma-plugin-3a54</guid>
      <description>&lt;p&gt;It’s still a bit surreal to me — like, I never actually thought I’d create a Figma plugin. Let me tell you how this whole thing started. So there I was, just scrolling through Twitter, when this tweet caught my eye.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Some guy was going on about how he’d only hire designers who could code. Sigh — Not this debate again! I’ve seen this argument pop up like a million times before.&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%2F9uglu6i57m1p2ef1wz53.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9uglu6i57m1p2ef1wz53.gif" alt="Tired gif" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So I quoted that tweet with my thoughts. Like, honestly? I think it’s such an outdated question, especially now that we’ve got all these AI tools making it easier for creators to actually build stuff. These tools are literally bridging the gap, letting designers do way more than just push pixels.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Man, you wouldn’t believe what happened next! My quote BLEW UP. Comments started flooding in from both sides of the argument.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I tried explaining my point to people — I’m just saying AI and new tools are helping designers build more without needing to be hardcore coders, you know? But nah, people started twisting my words real quick. They thought I was out here saying designers should never code, which wasn’t my point AT ALL!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Then came that one person, you know, the one that gets under your skin? They challenged me — “Have you ever actually built anything using AI?”.&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%2F7cfab0g9qwlekezja18k.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cfab0g9qwlekezja18k.gif" alt="Here we go again GIF" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, I’m not usually one to do Twitter banters cause I don’t give a f*ck, but something about that comment just hit different. Not because I needed to prove anything to some random internet stranger, but because deep down, I’d always wanted to build something useful for the community outside of client works and I guess this was the push I needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Deciding what plugin to build 🤔&lt;/strong&gt;&lt;br&gt;
Coming up with what plugin to build? That part was actually pretty easy. I had this whole list of things I wanted to build to help with my personal design workflows. But check this — while I was browsing through Figma’s community looking for some resources, I found this plugin that was getting dragged in the comments. Users were going off about bugs, lack of updates, and it was a paid tool too! That’s when it hit me: why not create something similar but make it way better, with more functionality? That’s how Text Bender was born — a tool that lets you curve or bend text however 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%2Fgtz1zidm5783ayssa3zx.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%2Fgtz1zidm5783ayssa3zx.png" alt="Text Bender private repo on my github" width="800" height="373"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The building adventure begins 🚀&lt;/strong&gt;&lt;br&gt;
The actual building part? Whew, that taught me so much about perseverance and the straight-up excitement of creating something from scratch. I started with the design first (obviously), sketching out exactly what I wanted the plugin’s interface to look like — preview area, space for the logo, sliders to control the radius and angle of the curve. I even tried adding some extra features like flipping text vertically or horizontally. But real talk? That flip functionality was being super buggy and complex. Had to strip it back and focus on making the core features actually work first.&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%2F9bq3g2m3oodr5tgcvqqi.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%2F9bq3g2m3oodr5tgcvqqi.png" alt="Text Bender design in figma" width="800" height="433"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once I got the design locked in, I open VS Code and got to work. I had my AI assistants, Claude and ChatGPT, by my side, plus my engineering background.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you didn’t know, I’m a first-class Computer Science graduate with solid coding experience 👩🏽‍💻. Yes baby, I will flex that BSc degree cause I worked super hard for it 😏 . On top of that, I also earned a distinction in my MBA, but let’s get back to the story.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Even though it sounds simple in writing, it was low-key super frustrating building this plugin. Like, my CSS would look PERFECT in my browser, but the moment I copied it into Figma’s plugin setup? Everything started breaking! 🫠 . Instead of having a separate file for my CSS I ended up just throwing everything in the HTML file cause honestly? I don’t like stress. The BIGGEST headache? Getting that text to curve right in Figma.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;My preview would be looking clean, but hit that “apply” button to paste it in the Figma editor? Text would come out looking all kinds of wrong — skewed, facing backwards, doing everything except what it was supposed to do.&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%2Ffd1hyk307nlosdg49hpc.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffd1hyk307nlosdg49hpc.gif" alt="Emotional Damage GIF" width="360" height="245"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I spent three days just debugging this one thing. But each time something failed, I learned something new (even if I wanted to throw my laptop out the window). When I finally got it working? THE RELIEF!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Launch Day Jitters 🥶&lt;/strong&gt;&lt;br&gt;
I ran like 14 different tests just to make sure everything was solid. Checked the curve, the placement, what happened if someone hit cancel — everything. It wasn’t 100% perfect, but you know what? I told myself: “We’re shipping this!”. Submitting the plugin to Figma for review had me NERVOUS. Like, what if they don’t approve it? Made a Twitter post about it too, just putting it out there that I was waiting.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1853490092880617487-136" src="https://platform.twitter.com/embed/Tweet.html?id=1853490092880617487"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1853490092880617487-136');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1853490092880617487&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Then, less than 24 hours later — IT GOT APPROVED!🎉&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1853842535212536300-577" src="https://platform.twitter.com/embed/Tweet.html?id=1853842535212536300"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1853842535212536300-577');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1853842535212536300&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Being the perfectionist I am, I immediately went to test it live and found some tiny bugs. That little voice in my head started screaming “FIX IT NOW!” but I reminded myself that this was just V1. Rome wasn’t built in a day. I can keep improving it over time. Had to take a deep breath, celebrate the Win, and share my plugin on Twitter.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.figma.com/community/plugin/1432714659139308535/text-bender" rel="noopener noreferrer"&gt;Link to the plugin in figma community&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I also created a Youtube Tutorial on how to use the figma plugin.👇&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/iDsS9Fje6_Q"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Takeaway 🤗&lt;/strong&gt;&lt;br&gt;
Building this whole thing taught me that I can do anything I put my mind to. Looking back, I can say sometimes — Twitter drama can lead to actual growth (who knew?). Now I’m super pumped to build more tools and keep learning along the way. That’s the story of how Text Bender came to be, and trust me, this is just the beginning!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;And to that person who asked if I’d ever built anything with AI? Thanks for the motivation, I guess! 😏&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I know you’re itching for the twitter drama, catch all the highlights &lt;a href="https://x.com/Nabhel_/status/1841899948524322886" rel="noopener noreferrer"&gt;here&lt;/a&gt;. Make sure to use the plugin and tag me to your creations. 😉&lt;/p&gt;

&lt;p&gt;XOXO Nabhel 🖤&lt;/p&gt;

</description>
      <category>figma</category>
      <category>learning</category>
      <category>design</category>
      <category>ai</category>
    </item>
    <item>
      <title>How to Create Custom Plans with “plan.md” in Goose</title>
      <dc:creator>Fortune Nabhel Harmony</dc:creator>
      <pubDate>Tue, 19 Nov 2024 23:14:54 +0000</pubDate>
      <link>https://dev.to/nabhel/how-to-create-custom-plans-with-planmd-in-goose-25lk</link>
      <guid>https://dev.to/nabhel/how-to-create-custom-plans-with-planmd-in-goose-25lk</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is Goose?&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://block.github.io/goose/index.html" rel="noopener noreferrer"&gt;Goose&lt;/a&gt; is a developer agent that enhances software development by automating coding tasks within your terminal or IDE. Guided by your input, it intelligently analyzes your project’s needs, generates the necessary code, and implements changes autonomously. When working with Goose, having a structured way to guide its execution toward specific goals is essential. This is where the &lt;code&gt;plan.md&lt;/code&gt; file comes in. A &lt;code&gt;plan.md&lt;/code&gt; file allows you to define a customized plan for Goose, using flexible text formatting and the power of Jinja templating to create dynamic, reusable, and goal-oriented plans.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to Set Up Goose&lt;/strong&gt;&lt;br&gt;
Before creating your custom &lt;code&gt;plan.md&lt;/code&gt; file, you need to set up &lt;a href="https://github.com/block/goose?tab=readme-ov-file" rel="noopener noreferrer"&gt;Goose&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step1:&lt;/strong&gt; Fork the &lt;a href="https://github.com/block/goose" rel="noopener noreferrer"&gt;Goose&lt;/a&gt; and &lt;a href="https://github.com/block-open-source/goose-plugins" rel="noopener noreferrer"&gt;Goose Plugin&lt;/a&gt; repositories on GitHub and clone them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step2:&lt;/strong&gt; Install Homebrew — Visit &lt;a href="https://brew.sh/" rel="noopener noreferrer"&gt;brew.sh&lt;/a&gt; and follow the installation steps, or run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step3:&lt;/strong&gt; To install Goose, use &lt;code&gt;pipx&lt;/code&gt;. First ensure &lt;a href="https://github.com/pypa/pipx?tab=readme-ov-file#install-pipx" rel="noopener noreferrer"&gt;pipx&lt;/a&gt; is installed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brew install pipx
pipx ensurepath
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step4:&lt;/strong&gt; Then install Goose:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pipx install goose-ai
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 5:&lt;/strong&gt; Start a session — From your terminal, navigate to the directory you’d like to start from and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;goose session start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Goose works with your preferred &lt;a href="https://block.github.io/goose/plugins/providers.html" rel="noopener noreferrer"&gt;LLM&lt;/a&gt;. By default, it uses &lt;code&gt;openai&lt;/code&gt; as the LLM provider. You'll be prompted to set an &lt;a href="https://platform.openai.com/api-keys" rel="noopener noreferrer"&gt;API key&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What Are &lt;code&gt;“plan.md”&lt;/code&gt;Files?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;plan.md&lt;/code&gt; file is a text file that serves as a blueprint for Goose to follow. It consists of two essential components:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;A kickoff message that sets the context and overall goal
A structured list of tasks for Goose to execute.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Why Use &lt;code&gt;plan.md&lt;/code&gt; file?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Customization:&lt;/strong&gt;&lt;br&gt;
You can tailor Goose’s actions for specific tasks or projects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reusability:&lt;/strong&gt;&lt;br&gt;
Templates make it easy to reuse and modify plans for similar goals.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Clarity:&lt;/strong&gt;&lt;br&gt;
Outlining goals and steps ensures better control and predictability.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Creating Your First &lt;code&gt;plan.md&lt;/code&gt; File&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let’s say you want Goose to help set up a new design system. Here’s an example of how your plan.md might look:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Your goal is to set up a fresh design system for our app's redesign.

- Create folders for design components (buttons, forms, colors)
- Set up color palette based on brand guidelines
- Create typography styles for headings and body text
- Design basic button components with all states
- Create form elements (inputs, dropdowns)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;See those dashes (-) at the start of each line in the tasks? Super important! Goose looks for these to understand what steps it needs to take. To run Goose with this plan:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;goose session start --plan plan.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Using Jinja Templating in Plans&lt;/strong&gt;&lt;br&gt;
Jinja is a templating engine that allows you to embed variables, loops, and conditionals directly in your text files. With Jinja, you can make plan.md files dynamic and adaptable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Jinja Syntax&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Variables:&lt;/strong&gt; &lt;code&gt;{{ variable }}&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Loops:&lt;/strong&gt; &lt;code&gt;{% for item in list %}&lt;/code&gt;...&lt;code&gt;{% endfor %}&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Conditionals:&lt;/strong&gt; &lt;code&gt;{% if condition %}&lt;/code&gt;...&lt;code&gt;{% endif %}&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Remember our &lt;code&gt;plan.md&lt;/code&gt; file, here’s what an enhanced version using jinja templating would look like.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Design System Setup Plan for {{ brand_name }}

## Goal
Set up a fresh design system for the {{ project_name }} app's redesign.

---

## Steps to Follow

### 1. Create Folders
Organize design components into well-structured folders:
- **Buttons:** Include all button components and their states (default, hover, active, disabled).
- **Forms:** Include inputs, dropdowns, checkboxes, and radio buttons.
- **Colors:** Store primary, secondary, and accent color palettes.

### 2. Set Up Color Palette
Define a consistent color palette adhering to the brand guidelines:
- **Primary Color:** {{ primary_color }} 
- **Secondary Color:** {{ secondary_color }}
- **Accent Colors:** {{ accent_colors | join(", ") }}
- **Neutral Colors:** Add greys, whites, and blacks for backgrounds and borders.
- **Accessibility:** Ensure color contrast meets accessibility standards (WCAG).

### 3. Create Typography Styles
Define text styles for the app:
- **Headings:** {{ heading_styles | join(", ") }} 
- **Body Text:** Include base styles, captions, and links.
- **Font Guidelines:** Use {{ font_family }} with font sizes ranging from {{ font_sizes | join(", ") }}.

### 4. Design Button Components
Design the following button states:
- Default
- Hover
- Active
- Disabled

Ensure all buttons are:
- **Responsive:** Scalable across device sizes.
- **Accessible:** Incorporate clear focus states for keyboard navigation.

### 5. Create Form Elements
Design essential form components:
- Input Fields (default, focused, error)
- Dropdowns (expanded, collapsed)
- Checkboxes and Radio Buttons (checked, unchecked, disabled)
- Submit Buttons (loading, error)

---

## Additional Notes
- Test designs for usability and accessibility before finalizing.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Passing Arguments to Plan&lt;/strong&gt;&lt;br&gt;
Arguments can be passed into a &lt;code&gt;plan.md&lt;/code&gt; file during execution. For example, to make our design system setup plan dynamic and reusable, we use Jinja templating, which allows us to pass arguments that customize the content based on specific projects, brands, or design requirements. By passing different sets of arguments, we can easily generate personalized plans for any redesign or product.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example: Passing Arguments with Jinja&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Define the Data:&lt;/strong&gt; The first step is to prepare the data you want to pass into the template. This includes values like the brand name, colors, typography styles, and other design-specific details.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "brand_name": "AwesomeApp",
    "project_name": "AwesomeApp Redesign",
    "primary_color": "#3498db",
    "secondary_color": "#2ecc71",
    "accent_colors": ["#e74c3c", "#9b59b6", "#f1c40f"],
    "heading_styles": ["H1 (32px)", "H2 (24px)", "H3 (20px)"],
    "font_family": "Roboto, sans-serif",
    "font_sizes": ["12px", "14px", "16px", "18px", "24px", "32px"],
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To run Goose with this plan and arguments, you would run the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;goose session start --plan plan.md --args brand_name=AwesomeApp,project_name="AwesomeApp Redesign",primary_color="#3498db",secondary_color="#2ecc71",accent_colors="#e74c3c,#9b59b6,#f1c40f",heading_styles="H1 (32px),H2 (24px),H3 (20px)",font_family="Roboto, sans-serif",font_sizes="12px,14px,16px,18px,24px,32px"

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

&lt;/div&gt;



&lt;p&gt;Goose will populate the placeholders in plan.md with these values.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Design System Setup Plan for AwesomeApp

## Goal
Set up a fresh design system for the AwesomeApp Redesign app's redesign.

---

## Steps to Follow

### 1. Create Folders
Organize design components into well-structured folders:
- **Buttons:** Include all button components and their states (default, hover, active, disabled).
- **Forms:** Include inputs, dropdowns, checkboxes, and radio buttons.
- **Colors:** Store primary, secondary, and accent color palettes.

### 2. Set Up Color Palette
Define a consistent color palette adhering to the brand guidelines:
- **Primary Color:** #3498db
- **Secondary Color:** #2ecc71
- **Accent Colors:** #e74c3c, #9b59b6, #f1c40f
- **Neutral Colors:** Add greys, whites, and blacks for backgrounds and borders.
- **Accessibility:** Ensure color contrast meets accessibility standards (WCAG).

### 3. Create Typography Styles
Define text styles for the app:
- **Headings:** 
  - H1 (32px)
  - H2 (24px)
  - H3 (20px)
- **Font Family:** Roboto, sans-serif
- **Font Sizes:** 
  - 12px
  - 14px
  - 16px
  - 18px
  - 24px
  - 32px

### 4. Design Button Components
Design the following button states:
- Default
- Hover
- Active
- Disabled

Ensure all buttons are:
- **Responsive:** Scalable across device sizes.
- **Accessible:** Incorporate clear focus states for keyboard navigation.

### 5. Create Form Elements
Design essential form components:
- Input Fields (default, focused, error)
- Dropdowns (expanded, collapsed)
- Checkboxes and Radio Buttons (checked, unchecked, disabled)
- Submit Buttons (loading, error)

---

## Additional Notes
- Test designs for usability and accessibility before finalizing.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Best Practices and Tips&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Define Clear Goals: Ensure each plan starts with a clear objective.&lt;/li&gt;
&lt;li&gt;Use Reusable Templates: Create general templates that can be customized for different projects.&lt;/li&gt;
&lt;li&gt;Document Assumptions: Add comments or notes to explain placeholders and structure.&lt;/li&gt;
&lt;li&gt;Test Small Changes: Validate each change in the plan.md file to ensure correct rendering.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
The &lt;code&gt;plan.md&lt;/code&gt; file is a versatile tool for guiding Goose's execution in achieving your goals. By combining clear objectives, structured steps, and dynamic Jinja templating, you can create reusable and highly customizable plans. Whether you're improving a mobile app's UX or tackling a complex project, &lt;code&gt;plan.md&lt;/code&gt; empowers you to provide clarity, adaptability, and precision to Goose.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>beginners</category>
      <category>goose</category>
      <category>python</category>
    </item>
    <item>
      <title>My Hacktoberfest Experience Contributing to TBD</title>
      <dc:creator>Fortune Nabhel Harmony</dc:creator>
      <pubDate>Sat, 26 Oct 2024 13:08:31 +0000</pubDate>
      <link>https://dev.to/nabhel/my-hacktoberfest-experience-contributing-to-tbd-3i6f</link>
      <guid>https://dev.to/nabhel/my-hacktoberfest-experience-contributing-to-tbd-3i6f</guid>
      <description>&lt;p&gt;You know that feeling when something seems completely out of reach?. That's exactly how I felt about open source for the longest time. Every time someone mentioned "open source contributions," my mind would immediately jump to scenes of developers hunched over their keyboards, typing away in different programming languages. I use to think, "Open source is mainly for developers" - because let's face it, contributing to open source as a designer isn't clear cut as it is for a developer 🫠.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Day I Decided to Jump In 🤾‍♂️
&lt;/h2&gt;

&lt;p&gt;Here's the thing about comfort zones - they're comfortable until they start feeling like cages. One day, I found myself thinking, "What if?" What if I could contribute to open source as a designer? Instead of just wondering, I decided to do something about 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%2Fvzpv2n2jr4nmy5w66aes.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvzpv2n2jr4nmy5w66aes.gif" alt="Funny GIF" width="375" height="396"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I opened GitHub (feeling a bit like a tourist in a tech city) and typed in probably the most straightforward search term ever: "designer needed." 🤣&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Little did I know that this simple search would lead me down such an interesting path. As I was scrolling through the results (and trying to make sense of all the technical jargon), I spotted something that caught my eye - a tag labeled "Hacktoberfest." I'll be honest, my first thought was, "Is this some kind of tech-themed Halloween party?". A quick Google search later, and I found myself on the &lt;a href="https://hacktoberfest.com/" rel="noopener noreferrer"&gt;Hacktoberfest website&lt;/a&gt;, absolutely intrigued by what I was seeing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Discovering TBD 👀
&lt;/h2&gt;

&lt;p&gt;After signing up for Hacktoberfest and linking my GitHub account (feeling pretty tech-savvy at this point), I went back to searching, this time with a bit more purpose and using the hacktoberfest tag. While I was initially hunting for design-related issues - you know, my comfort zone - I stumbled upon an opened issue on &lt;a href="https://github.com/TBD54566975" rel="noopener noreferrer"&gt;TBD&lt;/a&gt; with the following tags: &lt;strong&gt;good-first-issue,  hacktoberfest, no-code, small&lt;/strong&gt;. This piqued my curiosity, so I clicked to learn more.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I discovered this incredibly well-documented issue on TBD. Sure, it was about fixing some typos  - not exactly the design work I had imagined - but something about the way they had laid out their documentation made me think, "Hey, I could actually do this!". 😏&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;From the moment I opened their repository, it was clear that this team had put serious thought into making newcomers feel welcomed. Their documentation wasn't just good; it was like having a friendly guide holding your hand through every step of the process.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Technical Adventure Begins 👩🏽‍💻
&lt;/h2&gt;

&lt;p&gt;Now, this is where things got real. The &lt;a href="https://github.com/TBD54566975/developer.tbd.website?tab=readme-ov-file" rel="noopener noreferrer"&gt;project guidelines&lt;/a&gt; mentioned installing things like Node.js and pnpm - words that honestly sounded more like keyboard smashes than actual tools at first 🙁. But here's what I've learned, sometimes the best way to grow is to embrace feeling completely out of your depth.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;When I hit a wall trying to install pnpm, I swallowed my pride of always wanting to figure out things myself and reached out to my friend who is a front-end developer.&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%2Fnhq29e68rf2d46gr2ppo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhq29e68rf2d46gr2ppo.gif" alt="Help Me GIF" width="400" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You should have seen me trying to explain what I was doing - "So, there's this thing called Hacktoberfest, and I'm trying to fix a typo, but first I need to install something that sounds like it's missing some vowels…🤦‍♀️" Thankfully, he was patient enough to guide me through the terminal commands, explaining each step as we went along.&lt;/p&gt;

&lt;h2&gt;
  
  
  My First Pull Request 🤭
&lt;/h2&gt;

&lt;p&gt;Imagine designing in Figma with everyone in the company you work at, including your boss, watching your every move. That's exactly the level of nervousness I felt.&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%2Fn44kg30rs37fcyd7bik3.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%2Fn44kg30rs37fcyd7bik3.png" alt="A meme" width="620" height="463"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I must have triple-checked every step: creating a new branch (which felt like starting a new design project, but with VS code), making my edits (finally, something familiar!), and documenting my changes. I Submitted my request but forgot to fill out the description 😥.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;But here's the beautiful part of this story - the TBD team. They weren't just nice; they were incredibly supportive in a way that made me feel like I belonged there.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;They'd send messages that felt less like technical feedback and more like friendly guidance. It was like having a team of mentors who genuinely wanted to see me succeed.&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%2Fgagnqp1blim0muwd3zp9.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%2Fgagnqp1blim0muwd3zp9.png" alt="Message from Rizel Scarlett, Dev at TBD" width="800" height="249"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What started as a simple typo fix turned into a genuine connection with the TBD project. After my first pull request was merged, I found myself coming back to their repository, looking for more ways to contribute. The confidence I gained from that first experience led me to take on more issues.&lt;/p&gt;

&lt;h2&gt;
  
  
  The TBD Community 💛
&lt;/h2&gt;

&lt;p&gt;There was this moment that really stuck with me. Another contributor tried to take on the issue I was working on. I felt a flutter of panic when I checked their profile and saw they were an experienced developer with a solid track record in open source contributions.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You know, the "oh no, someone more experienced is going to do this task" kind of feeling😞. Instead of letting it become awkward, the community manager stepped in with such grace to help clarify everything.&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%2F1c7lf31fscrwkhkerlm0.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%2F1c7lf31fscrwkhkerlm0.png" alt="Comment from Tania - Community Manager at TBD" width="800" height="238"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It wasn't just about managing contributions; it was about making sure everyone, especially newcomers like me, had a fair shot at participating. Additionally, the TBD maintainers made every contribution feel valuable. It wasn't just about the fixes; it was about making people feel seen and appreciated for their efforts.&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%2F5ecjllg8xytvrgjc2984.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%2F5ecjllg8xytvrgjc2984.png" alt="Rizel Scarlett comment to Nabhel" width="800" height="334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;No matter how small, they didn't just merge pull requests; they took the time to thank contributors and even offer to help guide you if you're stuck or have questions.&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%2Frknqp0vq2a3r2cgr6v09.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%2Frknqp0vq2a3r2cgr6v09.png" alt="Ebony Louis comment to Nabhel" width="800" height="182"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Hacktoberfest Badges 🎖️
&lt;/h2&gt;

&lt;p&gt;Contributing to Hacktoberfest 2024 had five unique &lt;a href="https://www.holopin.io/@nabhel#" rel="noopener noreferrer"&gt;holopin badges&lt;/a&gt;, each awarded for registering and successfully merging 4 pull request. I proudly collected all five, adding them to my &lt;a href="https://github.com/Nabhel" rel="noopener noreferrer"&gt;Github&lt;/a&gt; profile. Each one represents a significant milestone in my journey - from my initial nervous pull request to confidently submitting my fourth contribution.&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%2F7q9cemgpmhjypd1xy937.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%2F7q9cemgpmhjypd1xy937.png" alt="Nabhel's github profile" width="800" height="373"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, as I look at my complete collection, I feel a profound sense of pride. These badges aren't mere participation trophies; they are symbols of real contributions, valuable lessons learned, and personal growth.&lt;/p&gt;

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

&lt;p&gt;What started as an attempt to contribute design work to open source ended up teaching me so much more. Yes, I'm still a designer at heart - my UX/UI skills aren't going anywhere. But now I have this whole new set of skills and knowledge that makes me feel like I'm part of something bigger.&lt;/p&gt;

&lt;p&gt;While I've tried contributing to other open-source projects since then, my experience with TBD holds a special place in my heart. It's like that first great teacher you had in school who made you believe you could do anything - they didn't just teach me about contributing to open source and Web5; they showed me that the tech world has room for everyone, including designers who are just crazy enough to try something new.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;To the TBD team - "Saranghae", thank you for making my Hacktoberfest experience unforgettable 🫶🏽.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To all the designers out there who think open source is not for them - trust me, I've been there. Sometimes the best design contributions come from simply being brave enough to step into unfamiliar territory. Who knows? You might just find yourself loving the command line (okay, maybe "loving" is a strong word, but you'll definitely stop fearing it) 😉.&lt;/p&gt;

&lt;p&gt;And remember, every expert was once a beginner who was just curious enough to try something new. Even if that something new involves occasionally having to ask what "pnpm" stands for 😁.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/hacktoberfest"&gt;2024 Hacktoberfest Writing challenge&lt;/a&gt;: Contributor Experience&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>hacktoberfest</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Understanding Web5: Your Guide to the Decentralized Web</title>
      <dc:creator>Fortune Nabhel Harmony</dc:creator>
      <pubDate>Sun, 13 Oct 2024 14:30:19 +0000</pubDate>
      <link>https://dev.to/nabhel/understanding-web5-your-guide-to-the-decentralized-web-49m2</link>
      <guid>https://dev.to/nabhel/understanding-web5-your-guide-to-the-decentralized-web-49m2</guid>
      <description>&lt;h2&gt;
  
  
  Evolution of the Web
&lt;/h2&gt;

&lt;p&gt;The way by which people interact with digital content is very different in each of the phases of web evolution.&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%2F04g40u8wk9r4wry5agfh.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%2F04g40u8wk9r4wry5agfh.png" alt="Evolution of the web from web1 to web3" width="800" height="427"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://websitebuilders.com/how-to/glossary/web1/" rel="noopener noreferrer"&gt;Web 1.0&lt;/a&gt;&lt;/strong&gt; - also known as the Static Web started in the early 1990s. When web 1.0 was in the fold, it involved static HTML pages with very little interactivity - users were not participating on a large scale; they could only engage passively by viewing content but interacted less. Older platforms like Geocities and directory services such as &lt;a href="https://www.webdesignmuseum.org/gallery/geocities-1999" rel="noopener noreferrer"&gt;Yahoo!&lt;/a&gt; are key examples of the web 1.0 era which offered very simple websites with basic navigation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://en.wikipedia.org/wiki/Web_2.0" rel="noopener noreferrer"&gt;Web 2.0&lt;/a&gt;&lt;/strong&gt; - also called the Social Web was introduced 2004; propelled the concept of consumer-generated content and interactive websites with social media sites such as Facebook, YouTube &amp;amp; Twitter as the pioneers. This time heralded a move toward an ownership-driven digital culture that valued personal creation and online socializing with the advent of new models for human connection, sharing information, or collaborating on creative projects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://en.wikipedia.org/wiki/Web3" rel="noopener noreferrer"&gt;Web 3.0&lt;/a&gt;&lt;/strong&gt;  - also referred to as the decentralized web began in the early 2020s. Leveraging blockchain technology, web3 allows peer to peer interactions and reduces the need for intermediaries. The shift in paradigm has given rise to decentralized finance (DeFi) applications, where &lt;a href="https://ethereum.org/en/whitepaper/" rel="noopener noreferrer"&gt;Ethereum-based&lt;/a&gt; platforms conduct a range of financial transactions removing the need for intermediaries so users can benefit from superior control and transparency over their digital assets.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Web5?
&lt;/h2&gt;

&lt;p&gt;Web5 is a decentralized platform and was built by &lt;a href="https://tbd.website/blog/tbd-unveils-tech-preview-of-web5" rel="noopener noreferrer"&gt;TBD&lt;/a&gt;, a Bitcoin arm of &lt;a href="https://block.xyz/" rel="noopener noreferrer"&gt;Block&lt;/a&gt; (formerly Square) under &lt;a href="https://dev.to/nabhel/understanding-web5-your-guide-to-the-decentralized-web-1ob5-temp-slug-1570749/edit"&gt;Jack Dorsey's&lt;/a&gt; leadership. Web5 aims to address concerns related to privacy and data ownership. &lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/KgZYtsj9-V0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Web5 is considered a combination of the centralized web where applications are owned by companies (Web 2.0 ) and the decentralized web built based on blockchain (web 3.0).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Key Components of Web5
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Decentralized Identifiers (DIDs)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3.org/TR/did-core/" rel="noopener noreferrer"&gt;Decentralized Identifiers (DIDs)&lt;/a&gt; are a new type of identifier that enables verifiable, self-sovereign digital identity. Unlike regular IDs like email addresses or social media accounts that are created and maintained by third-parties like government bodies or tech companies, DIDs belong entirely to the user. The decentralized nature of DIDs not only increases privacy, security and control but also grants individuals the power to take charge of their identity across services without ceding that authority to a single entity. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Beneifts of Dencentralized Identifiers (DIDs)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;User Control:&lt;/strong&gt; DIDs eliminate the need for multiple logins or accounts by giving users the ability to manage their identity across various platforms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Privacy and Security:&lt;/strong&gt; DIDs do not require central databases to manage them, users can maintain their privacy and lower the risk of identity theft and data breaches.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Interoperability:&lt;/strong&gt; DIDs can be used across various applications and services, making it easier for users to interact online without being tied to a single provider.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Decentralized Web Nodes (DWNs)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A &lt;a href="https://developer.tbd.website/docs/web5/decentralized-web-nodes/what-are-dwns/" rel="noopener noreferrer"&gt;Decentralized Web Node (DWN)&lt;/a&gt; is a robust data storage and message relay system. It enables entities to efficiently access public and private permissioned data linked to a specific Decentralized Identifier (DID). DWNs facilitate safe and smooth user-application communication by employing a decentralized architecture. This guarantees accurate data retrieval that is pertinent to the context. DWNs also improve data interoperability between different platforms, giving users more control over their data and promoting a more robust, user-focused digital ecosystem.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Significance of Decentralized Web Nodes (DWNs)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Sovereignty:&lt;/strong&gt; Users retain complete control over their data, determining who can access it, thereby ensuring robust privacy and security.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced Risk of Data Loss:&lt;/strong&gt; With data distributed across multiple sources, the risk of loss from server failures or cyberattacks is significantly reduced.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Verifiable Credentials&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3.org/TR/vc-data-model/" rel="noopener noreferrer"&gt;Verifiable Credentials (VCs)&lt;/a&gt; are secure, digital statements issued by one party about another, which can be verified using cryptographic techniques. They enable trusted claims, such as confirming a person's identity or qualifications. For instance, a university could issue a VC to a graduate certifying their degree, and this credential can be instantly validated by others without needing intermediaries. VCs offer a more reliable and efficient way to verify information, providing stronger security and privacy compared to traditional credentials like paper certificates.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Improtance of Verifiable Credentials (VCs)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Trust and Authenticity:&lt;/strong&gt; Verifiable credentials enable users to authenticate their identity or qualifications without disclosing sensitive information.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced Fraud:&lt;/strong&gt; The use of cryptographic verification makes it difficult to forge credentials, effectively minimizing identity fraud and enhancing trust in online interactions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;4. Self-Sovereign Identity (SSI)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://seon.io/resources/dictionary/self-sovereign-identity/" rel="noopener noreferrer"&gt;Self-Sovereign Identity (SSI)&lt;/a&gt; is a decentralized system of digital identity management that enables the users to control their own personal data rather than depending on an intermediary (like Facebook, Google etc). This approach removes the requirement for third-party validation systems, allowing individuals to control and provide their personal accreditation directly using blockchains or distributed ledger technology.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Benefits of Self-Sovereign Identity (SSI)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Empowerment:&lt;/strong&gt; Users have full ownership of their personal data, choosing what to share and with whom, significantly reducing dependence on external parties for trust.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Accessibility:&lt;/strong&gt; Self-sovereign identities simplify authentication across platforms, enabling seamless access to services without the complexity of handling multiple credentials.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why is Web5 Important?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Empowering Users with Data Ownership:&lt;/strong&gt; Instead of big tech companies controlling and owning user data (as it is today in the web 2.0 world) Web5 intends to give users full control to store their data in what is known as "Decentralized Web Nodes". This in turn provides independence from third-parties that own, trade and make malicious use of data over which a user will have full rights to controlling it's usage for his/her privacy.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Self-Sovereign Identity:&lt;/strong&gt; One key feature of Web5 is its emphasis on self-sovereign identity, allowing users to maintain a single identity across multiple applications. This also eliminates having to log in separately on various applications, providing a consistent experience across devices. By removing the dependency on third-party services like Facebook or Google for authentication, web5 not only makes it much more secure but also gives the control back to you the user. Imagine your own decentralized passport, a mobile ID that is accepted wherever you go on the web and where no one takes custody of your credentials for staying online.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Decentralized and Private Applications:&lt;/strong&gt; Web5 aims to change the role of user data in applications by doing away with centralized servers entirely. Because of the decentralized architecture of this model and the distributed ownership of the data across a network, every user has complete autonomy over their own personal data. Instead of apps accessing or storing data automatically, users ensure that their privacy is always protected by granting permission to apps only when needed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reducing Reliance on Intermediaries:&lt;/strong&gt; The modern Internet is dominated by intermediaries such as social media platforms, cloud providers and technology giants that act as gatekeepers to data and identity. Web5 is aiming to shake up this industry, bypassing these middlemen so users can take more control over their personal data and actions online. This system is decentralized, which increases individuals' sovereignty in the digital sphere and enhances privacy while also making censorship more difficult.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Use cases of Web5&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Web5 drives several use-cases including digital identity management, facilitating secured peer-to-peer transactions, enabling decentralized applications (dApps), reinforcing data privacy and ownership whilst simplifying online interactions across platforms.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Digital Wallets:&lt;/strong&gt; Web5 can enable users to control their digital wallet, which securely stores all of an individual's decentralized identifiers and personal data. Users are given full control over their identity and other information using this digital wallet, making it possible for seamless transactions between various platforms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Privacy:&lt;/strong&gt; Applications in the Web5 framework can request specific access to users decentralized data stores rather than relying on central servers. In doing so, this method guarantees the user protection of private data and control over their personal information thereby reducing dependencies that can lead to potential data breaches or misuse.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Simplified Logins:&lt;/strong&gt; Web5 facilitates simplified login processes by allowing users to authenticate themselves with their decentralized identity (DID). This eliminates the need for traditional sign-up methods, such as email or social media logins, streamlining access to applications while enhancing security and user experience.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Web5 marks a giant leap in the evolution of the internet, focusing on decentralization and user empowerment to revolutionize digital interactions through owning data with self-sovereign identity &amp;amp; privacy. Web5 allows users to re-establish control over their digital identities, promoting an environment that is both safe and transparent for all while user-centric features such as self-sovereign identity becomes possible. Yet the adoption of Web5 faces a future that combines promise with uncertainty: how far and when it will be embraced by society is difficult to forecast, given challenges in terms of regulatory frameworks (laws), popular awareness,and infrastructure readiness. Its course will be decided by the education of users, and how much old-tech heavyweights react to what is possible digitally now - in that sense it could reshape everyone's interactions on web or mobile with profound impact upon digital freedom for end-users.&lt;/p&gt;

</description>
      <category>web5</category>
      <category>web3</category>
      <category>blockchain</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
