<?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: Ashish Kumar Verma</title>
    <description>The latest articles on DEV Community by Ashish Kumar Verma (@imdigitalashish).</description>
    <link>https://dev.to/imdigitalashish</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%2F485235%2F43a0ecef-2c30-4898-a2d9-22c1cc598df1.jpg</url>
      <title>DEV Community: Ashish Kumar Verma</title>
      <link>https://dev.to/imdigitalashish</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/imdigitalashish"/>
    <language>en</language>
    <item>
      <title>I Built a Human Civilization in Minecraft Using AI — Here's What Happened</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Wed, 09 Apr 2025 14:32:27 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/i-built-a-human-civilization-in-minecraft-using-ai-heres-what-happened-20a6</link>
      <guid>https://dev.to/imdigitalashish/i-built-a-human-civilization-in-minecraft-using-ai-heres-what-happened-20a6</guid>
      <description>&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/aaby8Gg3NG4"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;When I dropped a group of AI agents into Minecraft, I wasn’t expecting to witness a society unfold.&lt;/p&gt;

&lt;p&gt;But that’s exactly what happened.&lt;/p&gt;

&lt;p&gt;They built shelters.&lt;br&gt;&lt;br&gt;
They gathered resources.&lt;br&gt;&lt;br&gt;
They &lt;em&gt;talked&lt;/em&gt; to each other.&lt;br&gt;&lt;br&gt;
They even helped one another survive.&lt;/p&gt;

&lt;p&gt;And no, I didn’t write a single line of code telling them how to do it.&lt;/p&gt;

&lt;p&gt;This wasn’t just a Minecraft mod.&lt;br&gt;&lt;br&gt;
This was a simulation of how human intelligence might scale into collective behavior—powered by LLMs and inspired by the &lt;strong&gt;three types of memory in cognitive neuroscience&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Semantic&lt;/strong&gt; (facts, knowledge)
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Procedural&lt;/strong&gt; (skills, habits)
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Episodic&lt;/strong&gt; (personal experiences)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why Minecraft?
&lt;/h2&gt;

&lt;p&gt;Minecraft is the perfect open-world sandbox. It’s richly interactive, resource-constrained, and emergent by nature. The rules of the world are simple, but the possibilities are endless.&lt;/p&gt;

&lt;p&gt;It’s a bit like Earth—if Earth were made of blocks and creepers.&lt;/p&gt;

&lt;p&gt;That’s what makes it a &lt;em&gt;brilliant testbed&lt;/em&gt; for artificial general intelligence (AGI). You don’t need complex environments to test complex behavior. You just need a world with consequences—and a mind that can learn.&lt;/p&gt;

&lt;h2&gt;
  
  
  The AI Stack Behind the Magic
&lt;/h2&gt;

&lt;p&gt;Each agent I introduced into the Minecraft world was powered by a hybrid LLM framework—think ChatGPT and Gemini as the cognitive engine. But I didn’t stop at basic reasoning.&lt;/p&gt;

&lt;p&gt;Here’s what each agent had:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Semantic memory&lt;/strong&gt;: A growing internal knowledge base. They knew how to make tools, what food was safe, and how mobs behaved.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Procedural memory&lt;/strong&gt;: Skills they learned through repetition. One agent got faster at building shelters. Another improved at farming.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Episodic memory&lt;/strong&gt;: They remembered specific interactions. If Agent A attacked Agent B, trust dropped. If they helped each other, it grew.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The memory layers gave these agents something most NPCs lack: &lt;strong&gt;context over time&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Emergent Behavior: The Birth of a Mini-Society
&lt;/h2&gt;

&lt;p&gt;Once set free, the agents weren’t just surviving—they were &lt;em&gt;collaborating&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;One agent started farming.&lt;br&gt;&lt;br&gt;
Another began mining for coal.&lt;br&gt;&lt;br&gt;
They built simple structures and shared resources.&lt;/p&gt;

&lt;p&gt;They began forming habits and even personalities.&lt;br&gt;&lt;br&gt;
Some were explorers. Others stayed close to "home."&lt;br&gt;&lt;br&gt;
Some were cooperative. Others, less so.&lt;/p&gt;

&lt;p&gt;They developed a form of &lt;strong&gt;social intelligence&lt;/strong&gt;—entirely emergent from their memories and objectives.&lt;/p&gt;

&lt;p&gt;I didn't script this.&lt;br&gt;&lt;br&gt;
I just gave them the capacity to learn, remember, and choose.&lt;/p&gt;

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

&lt;p&gt;What if this isn’t just a game?&lt;/p&gt;

&lt;p&gt;What if this is the prototype of something far bigger—simulated civilizations, digital twins of societies, or even models for training AGI in safe, constrained environments?&lt;/p&gt;

&lt;p&gt;This experiment shows we’re getting closer to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI with long-term memory and emotional context
&lt;/li&gt;
&lt;li&gt;Multi-agent collaboration in complex systems
&lt;/li&gt;
&lt;li&gt;Emergent societies driven by digital minds&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s like watching early human civilization—only made of code and pixels.&lt;/p&gt;

&lt;h2&gt;
  
  
  What’s Next?
&lt;/h2&gt;

&lt;p&gt;This was just the beginning. The implications stretch far beyond gaming:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Education&lt;/strong&gt;: Imagine history lessons where students can interact with AI civilizations and watch how decisions ripple across time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Urban planning&lt;/strong&gt;: Simulate how populations behave under different policies or disasters.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Digital economies&lt;/strong&gt;: Let agents trade, build, and evolve systems organically.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I plan to evolve this further:&lt;br&gt;&lt;br&gt;
✔️ Introduce goals like governance or trade&lt;br&gt;&lt;br&gt;
✔️ Add natural language communication&lt;br&gt;&lt;br&gt;
✔️ Test with different world seeds and constraints&lt;/p&gt;

&lt;p&gt;The dream?&lt;br&gt;&lt;br&gt;
A world where you &lt;em&gt;watch&lt;/em&gt; intelligence evolve—before your eyes.&lt;/p&gt;

&lt;p&gt;If you’ve ever wondered what digital life might look like—or where AI is headed next—this might just be your first peek.&lt;/p&gt;

&lt;p&gt;🧠 From memory models to emergent behavior, this experiment shows that when we blend &lt;strong&gt;human cognition&lt;/strong&gt; with &lt;strong&gt;digital playgrounds&lt;/strong&gt;, magic happens.&lt;/p&gt;

&lt;p&gt;Would you live in a digital society?&lt;/p&gt;

&lt;p&gt;Would you lead one?&lt;/p&gt;

&lt;p&gt;Let me know. I’m all ears. 👇&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;P.S.&lt;/strong&gt; If you're working with AI agents or interested in multi-agent systems, I’d love to connect&lt;/p&gt;

</description>
      <category>ai</category>
      <category>agentaichallenge</category>
    </item>
    <item>
      <title>Ashish Kumar Verma became the Youngest Google Developer Expert at 18 — Globally.</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Wed, 12 Mar 2025 09:50:58 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/how-i-became-the-youngest-google-developer-expert-at-18-globally-pure-hustle-2gih</link>
      <guid>https://dev.to/imdigitalashish/how-i-became-the-youngest-google-developer-expert-at-18-globally-pure-hustle-2gih</guid>
      <description>&lt;p&gt;( In this guide, there’s special section on how you can become too ! )&lt;br&gt;
Hey everyone! I’m Ashish, the world’s youngest Google Developer Expert at just 18 years old. So, if any of you want to take a shot at breaking that record, you’ve got one month — just kidding! 😄&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%2Ffejwzg0t5srzj6kmr2dy.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%2Ffejwzg0t5srzj6kmr2dy.png" alt="Image description" width="800" height="514"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Talk at GDG Chennai at Indian Institute of Technology, Madras&lt;br&gt;
Picture this: a young kid hunched over his computer, furiously coding away, accidentally creating viruses that turned my machines into paperweights! Yep, that was me, making regular pit stops at the hardware repair shop because my curious fingers just couldn’t resist cutting wires and pushing buttons. During this chaos, I stumbled upon tech communities, and it was like discovering a secret lair of superheroes. “Whoa, these folks have some epic titles!” I thought. The first one that made my jaw drop was “Microsoft Learn Student Ambassador.” My immediate thought? “How on earth can I get one of those cool titles?”&lt;br&gt;
That’s when I discovered the legendary Google Developer Expert Program. 🌟&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%2F5opcxao2rowny6v59ie5.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%2F5opcxao2rowny6v59ie5.png" alt="Image description" width="400" height="225"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The entry process was like trying to unlock a hidden level in a video game — There weren’t many GDEs around, and the entry process was tough. But the perks were amazing — travel support, a direct connection to a fantastic network, early access to Google products, and the chance to share my love for technology with the world. I thought, “Heck yes, this is exactly what I want!” Unfortunately, I was only 15 at the time, so I had to wait three years to apply.&lt;br&gt;
Then, I met Ashok Vishwakarma at GDG Jalandhar, who guided me on how to become a GDE in 11th grade. I was pumped and thought, “Let’s freaking do this!” I made a checklist of everything I needed to accomplish&lt;br&gt;
Talks ( 10+ )&lt;br&gt;
Technical Articles / Content and Video ( Uncountable )&lt;br&gt;
Deep knowledge into my Technology that I’m applying for ( Literally dived into Chrome V8 Engine )&lt;br&gt;
Seminars and Webinars&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%2Fwdqls2dhacb2bpemuz93.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%2Fwdqls2dhacb2bpemuz93.png" alt="Image description" width="800" height="538"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For two relentless years, I tackled that checklist like it was a final boss fight — It wasn’t like I was forcing myself — I was in the zone driven by my passion ! I found all of it so fascinating, especially helping out the community, and that drove me to learn even more. During this journey, I had the wild honor of hosting the Hon’ble Prime Minister of India and discussing my AI project with him! Talk about a career highlight! 🥳 I also met the President of India, got featured in several magazines and newspapers, and even represented India on a global stage in Japan.&lt;br&gt;
Eventually, I got my golden ticket — a recommendation from Ashok Vishwakarma! ( GDE — Web Tech )&lt;br&gt;
The process to become a GDE is pretty straightforward. You need to be recommended by a GDE in your area of expertise based on your work, and then that recommendation is forwarded to the Program Manager. They evaluate your qualifications and guide you through the process, which includes two interviews.&lt;br&gt;
Product Round: Get ready for some tech questions that’ll make your brain spin!&lt;br&gt;
Community Round: They’ll ask how you engage with the community, so bring your A-game!&lt;/p&gt;

&lt;p&gt;After conquering these rounds, you finally hear those magical words: “YOU ARE NOW OFFICIALLY A GDE!!” 🎊&lt;br&gt;
Welcome to GDE Family ( For you )&lt;br&gt;
But wait, there’s even more — introducing the ROAD TO GDE PROGRAM! In this program, current GDEs will train the next wave of GDEs, so you won’t feel lost on your journey. Just sign up, and let’s bring in the next GDEs to lead this amazing program and become part of this awesome family!&lt;br&gt;
That’s it for now! If you have any questions, feel free to connect with me. Cheers! 🎉&lt;br&gt;
By — Ashish Kumar Verma&lt;br&gt;
Google Developer Expert — Web&lt;br&gt;
Panelist with Prime Minister of India&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to Get More Software Engineer Interviews by Building in Public</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Sun, 15 Dec 2024 17:45:54 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/how-to-get-more-software-engineer-interviews-by-building-in-public-1l9i</link>
      <guid>https://dev.to/imdigitalashish/how-to-get-more-software-engineer-interviews-by-building-in-public-1l9i</guid>
      <description>&lt;h3&gt;
  
  
  How to Get More Software Engineer Interviews by Building in Public
&lt;/h3&gt;

&lt;p&gt;In today’s competitive job market, traditional job-hunting methods like sending resumes and applying to countless job postings often yield minimal results. A highly effective yet underutilized strategy is &lt;strong&gt;"Building in Public"&lt;/strong&gt;. This approach involves showcasing your projects, coding journey, and expertise online to build visibility and attract opportunities. Here's how you can leverage this strategy effectively.  &lt;/p&gt;




&lt;h3&gt;
  
  
  What is Building in Public?
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Building in Public&lt;/strong&gt; means sharing your coding projects, progress, and challenges on public platforms. Instead of keeping your work hidden, you allow others to view, critique, and interact with your creations. This transparency not only demonstrates your skills but also builds trust and credibility in the tech community.  &lt;/p&gt;

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

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Showcasing Skills&lt;/strong&gt;: Your projects act as a portfolio, demonstrating technical and problem-solving abilities.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Networking&lt;/strong&gt;: Engaging with tech communities helps expand your network.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Attracting Recruiters&lt;/strong&gt;: Your work may capture the attention of recruiters and hiring managers.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Learning Opportunities&lt;/strong&gt;: Feedback from peers and experts enhances your skills.
&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  Platforms for Building in Public
&lt;/h3&gt;

&lt;p&gt;To maximize the reach of your efforts, establish a presence on these platforms:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;LinkedIn&lt;/strong&gt;: Create a polished profile and actively share updates about your work.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Twitter (X)&lt;/strong&gt;: Join tech discussions, share insights, and follow influential developers.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub&lt;/strong&gt;: Maintain an up-to-date profile showcasing your repositories and contributions.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Discord&lt;/strong&gt;: Participate in coding communities to build connections and learn.
&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  Creating and Sharing Content
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Step 1&lt;/strong&gt;: Post Regularly&lt;br&gt;&lt;br&gt;
Share various types of content, including:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Blog posts about technical topics.
&lt;/li&gt;
&lt;li&gt;Tutorials or guides on frameworks or languages.
&lt;/li&gt;
&lt;li&gt;Screenshots or videos of your projects in action.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Step 2&lt;/strong&gt;: Focus on Value&lt;br&gt;&lt;br&gt;
Create high-quality content that educates or inspires others. Use detailed steps, code snippets, and visuals for better engagement.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3&lt;/strong&gt;: Repurpose Content&lt;br&gt;&lt;br&gt;
Turn a blog post into a video tutorial or a tweet thread to reach different audiences.  &lt;/p&gt;




&lt;h3&gt;
  
  
  Engaging with the Community
&lt;/h3&gt;

&lt;p&gt;Networking is crucial for building in public. Engage meaningfully by:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Replying to comments on your posts.
&lt;/li&gt;
&lt;li&gt;Sharing helpful insights on others' posts.
&lt;/li&gt;
&lt;li&gt;Attending local meetups, hackathons, or conferences to meet people in person.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The more active you are in tech communities, the more visibility and opportunities you'll gain.  &lt;/p&gt;




&lt;h3&gt;
  
  
  Building a Sustainable Habit
&lt;/h3&gt;

&lt;p&gt;Consistency is the key to success. Here’s how you can make building in public a habit:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Dedicate time each week for creating and sharing content.
&lt;/li&gt;
&lt;li&gt;Schedule posts in advance.
&lt;/li&gt;
&lt;li&gt;Set reminders to interact with your network daily.
&lt;/li&gt;
&lt;li&gt;Continuously brainstorm project ideas to keep the momentum.
&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  The Payoff
&lt;/h3&gt;

&lt;p&gt;Building in public takes time, but it creates a snowball effect. Over time, you'll develop a strong personal brand, build a supportive network, and unlock job opportunities more effectively than traditional methods.  &lt;/p&gt;




&lt;p&gt;By following these steps, you can not only increase your chances of landing interviews but also become a recognized voice in the tech community. Start building in public today, and take control of your software engineering career trajectory!&lt;/p&gt;

</description>
      <category>programming</category>
      <category>webdev</category>
      <category>github</category>
      <category>opensource</category>
    </item>
    <item>
      <title>How I became the Youngest Google Developer Expert at 18 Globally.. !</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Sat, 02 Nov 2024 17:04:58 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/how-i-became-the-youngest-google-developer-expert-at-18-globally--357c</link>
      <guid>https://dev.to/imdigitalashish/how-i-became-the-youngest-google-developer-expert-at-18-globally--357c</guid>
      <description>&lt;p&gt;( In this guide, there’s special section on how you can become too ! )&lt;/p&gt;

&lt;p&gt;Hey everyone! I’m Ashish, the world’s youngest Google Developer Expert at just 18 years old. So, if any of you want to take a shot at breaking that record, you’ve got one month — just kidding! 😄&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%2Ft5rc72a6aph8sv5xi8d4.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%2Ft5rc72a6aph8sv5xi8d4.png" alt="Image description" width="800" height="514"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Picture this: a young kid hunched over his computer, furiously coding away, accidentally creating viruses that turned my machines into paperweights! Yep, that was me, making regular pit stops at the hardware repair shop because my curious fingers just couldn’t resist cutting wires and pushing buttons. During this chaos, I stumbled upon tech communities, and it was like discovering a secret lair of superheroes. “Whoa, these folks have some epic titles!” I thought. The first one that made my jaw drop was “Microsoft Learn Student Ambassador.” My immediate thought? “How on earth can I get one of those cool titles?”&lt;/p&gt;

&lt;p&gt;That’s when I discovered the legendary Google Developer Expert Program. 🌟&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%2Fwbh2ekdls3848makxbw3.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%2Fwbh2ekdls3848makxbw3.png" alt="Image description" width="400" height="225"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The entry process was like trying to unlock a hidden level in a video game — There weren’t many GDEs around, and the entry process was tough. But the perks were amazing — travel support, a direct connection to a fantastic network, early access to Google products, and the chance to share my love for technology with the world. I thought, “Heck yes, this is exactly what I want!” Unfortunately, I was only 15 at the time, so I had to wait three years to apply.&lt;/p&gt;

&lt;p&gt;Then, I met Ashok Vishwakarma at GDG Jalandhar, who guided me on how to become a GDE in 11th grade. I was pumped and thought, “Let’s freaking do this!” I made a checklist of everything I needed to accomplish&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Talks ( 10+ )&lt;/li&gt;
&lt;li&gt;Technical Articles / Content and Video ( Uncountable )&lt;/li&gt;
&lt;li&gt;Deep knowledge into my Technology that I’m applying for ( Literally dived into Chrome V8 Engine )&lt;/li&gt;
&lt;li&gt;Seminars and Webinars&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%2F95id5zg11eta6hqmpjll.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%2F95id5zg11eta6hqmpjll.png" alt="Image description" width="800" height="538"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For two relentless years, I tackled that checklist like it was a final boss fight — It wasn’t like I was forcing myself — I was in the zone driven by my passion ! I found all of it so fascinating, especially helping out the community, and that drove me to learn even more. During this journey, I had the wild honor of hosting the Hon’ble Prime Minister of India and discussing my AI project with him! Talk about a career highlight! 🥳 I also met the President of India, got featured in several magazines and newspapers, and even represented India on a global stage in Japan.&lt;/p&gt;

&lt;p&gt;Eventually, I got my golden ticket — a recommendation from Ashok Vishwakarma! ( GDE — Web Tech )&lt;/p&gt;

&lt;p&gt;The process to become a GDE is pretty straightforward. You need to be recommended by a GDE in your area of expertise based on your work, and then that recommendation is forwarded to the Program Manager. They evaluate your qualifications and guide you through the process, which includes two interviews.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Product Round: Get ready for some tech questions that’ll make your brain spin!&lt;/li&gt;
&lt;li&gt;Community Round: They’ll ask how you engage with the community, so bring your A-game!&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%2Fom28t370wl3qftankf7q.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%2Fom28t370wl3qftankf7q.png" alt="Image description" width="800" height="222"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After conquering these rounds, you finally hear those magical words: “YOU ARE NOW OFFICIALLY A GDE!!” 🎊&lt;/p&gt;

&lt;p&gt;Welcome to GDE Family ( For you )&lt;br&gt;
But wait, there’s even more — introducing the &lt;a href="https://docs.google.com/forms/d/e/1FAIpQLSfn0VoaExeogxBUDic5IW7cpO2yGMl_nWiLTqQ7CnFuM9LV5w/viewform" rel="noopener noreferrer"&gt;ROAD TO GDE PROGRAM!&lt;/a&gt; In this program, current GDEs will train the next wave of GDEs, so you won’t feel lost on your journey. Just sign up, and let’s bring in the next GDEs to lead this amazing program and become part of this awesome family!&lt;/p&gt;

&lt;p&gt;That’s it for now! If you have any questions, feel free to connect with me. Cheers! 🎉&lt;/p&gt;

&lt;p&gt;By — Ashish Kumar Verma&lt;br&gt;
Google Developer Expert — Web&lt;br&gt;
Software Engineer at HTCD AI&lt;/p&gt;

</description>
      <category>experts</category>
      <category>google</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Navya: Unifying All AI Platforms into One Powerful App – Check It Out!. ( Reducing Prize by 1/10th or FREE )</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Mon, 21 Aug 2023 18:01:55 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/navya-unifying-all-ai-platforms-into-one-powerful-app-check-it-out-reducing-prize-by-110th-or-free--5g0i</link>
      <guid>https://dev.to/imdigitalashish/navya-unifying-all-ai-platforms-into-one-powerful-app-check-it-out-reducing-prize-by-110th-or-free--5g0i</guid>
      <description>&lt;h3&gt;
  
  
  Introduction to me and motivation behind Navya !
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;For more info about me goto &lt;a href="https://ashishverse.vercel.app"&gt;https://ashishverse.vercel.app&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Hello everyone, I'm Ashish Kumar Verma. Currently, I'm a high school senior in the 12th grade. I recently developed an application called 'NAVYA AI,' inspired by the Sanskrit term 'Navya,' signifying the act of creating something innovative. My main objective in crafting this app was to immerse myself in the realm of generative AI and ascertain my ability to construct my own models that can 'generate content.' I aimed to present this technology in a user-friendly manner, accessible to the general public. This journey led me to delve into various facets, including Android and web development, backend systems, and server management – all of which I tackled independently (although it was demanding, it turned out to be an enjoyable experience). Now Let's get to next part.&lt;/p&gt;

&lt;h3&gt;
  
  
  What Did I observed
&lt;/h3&gt;

&lt;p&gt;In the market, there exist several startups engaged in various endeavors like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Generating Images: Startup 0&lt;/li&gt;
&lt;li&gt;Creating Videos: Startup 1&lt;/li&gt;
&lt;li&gt;Crafting Digital Talking Avatars: Startup 2&lt;/li&gt;
&lt;li&gt;Generating Voices: Startup 3&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I endeavored to unify all of these functionalities onto a single application 🎉🎉. My goal was to offer a user-friendly interface, despite my limited expertise in User Interface design, that would cater to everyone's ease of use. I aimed for simplicity by providing only essential options, as the paradox of choice can sometimes lead to more confusion than clarity.&lt;/p&gt;

&lt;h4&gt;
  
  
  The main problem:
&lt;/h4&gt;

&lt;p&gt;Not everyone was able to leverage, specially who was less digital people because of insanely difficult controls giving bunch of options. Also the major factor was the cost, &lt;strong&gt;for creating avatar of just 15 minutes users have to pay $30, that is quite high !&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So I created Navya AI - &lt;a href="https://play.google.com/store/apps/details?id=com.ashishverse.navya"&gt;https://play.google.com/store/apps/details?id=com.ashishverse.navya&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Do try it out and let me know your thoughts and suggestions ! You can Watch these Videos I prepared to understand NAVYA Better, Hope they are not boring ( Also learned video editing in process )&lt;/p&gt;

&lt;h4&gt;
  
  
  What is NAVYA AI
&lt;/h4&gt;

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

&lt;h4&gt;
  
  
  Introducing AI Avatar Feature
&lt;/h4&gt;

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

&lt;h4&gt;
  
  
  How to use it detailed video step by step
&lt;/h4&gt;

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

&lt;h3&gt;
  
  
  Thank you !
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Ashish Kumar Verma
&lt;/h3&gt;

</description>
    </item>
    <item>
      <title>Introducing Navya AI - Where AI crafts your content, effortlessly</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Sun, 04 Jun 2023 18:14:37 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/introducing-navya-ai-where-ai-crafts-your-content-effortlessly-15dc</link>
      <guid>https://dev.to/imdigitalashish/introducing-navya-ai-where-ai-crafts-your-content-effortlessly-15dc</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/v34O4gmS4rQ"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Download APK Now - &lt;a href="https://play.google.com/store/apps/details"&gt;https://play.google.com/store/apps/details&lt;/a&gt;...&lt;br&gt;
🚀 Ready to revolutionize content creation? Introducing NAVYA, the game-changing app that puts the power of AI in your hands! 🎥✨ -&lt;br&gt;
Unleash the Power of Your Thoughts: Create Videos like Never Before! Introducing a Revolutionary Approach to Video Creation, Shorts, and Reels.&lt;/p&gt;

&lt;p&gt;🎯 Calling all content creators, marketers, and storytellers! Tired of wrestling with complex video editing software? NAVYA is here to save the day, making video creation a breeze for everyone, regardless of your editing experience. Say goodbye to hours of frustration and hello to stunning videos in minutes! 💫&lt;/p&gt;

&lt;p&gt;📝 Simply write your scenes, choose the perfect tone, and hit create – that's it! NAVYA's cutting-edge AI technology works its magic, transforming your words into eye-catching visuals that will leave your audience in awe. It's like having your own personal video editing wizard in your pocket! 🔮📱&lt;/p&gt;

&lt;p&gt;🖼️ But wait, there's more! NAVYA's image generation feature allows you to effortlessly create jaw-dropping graphics and visuals that will take your content to the next level. Whether you're crafting social media posts, presentations, or educational materials, NAVYA has got you covered! 🎨📸&lt;/p&gt;

&lt;p&gt;🎙️ And that's not all! NAVYA also offers an AI voice-over feature, giving your documentaries, tutorials, and videos an engaging professional narration. Choose from a wide range of voices and accents, and let your content come to life with captivating storytelling. 🎬🎤&lt;/p&gt;

&lt;p&gt;🙌 Download the app to unlock your creative potential. It's time to say goodbye to tedious editing and hello to seamless content creation. Download NAVYA today and watch your ideas come alive! ✨💡&lt;/p&gt;

</description>
      <category>ai</category>
      <category>machinelearning</category>
      <category>startup</category>
      <category>tooling</category>
    </item>
    <item>
      <title>Create Youtube Shorts, Insta Reels, Tiktok like scrolling effect | Just HTML and CSS</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Thu, 13 Oct 2022 13:07:16 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/create-youtube-shorts-insta-reels-tiktok-like-scrolling-effect-just-html-and-css-4n29</link>
      <guid>https://dev.to/imdigitalashish/create-youtube-shorts-insta-reels-tiktok-like-scrolling-effect-just-html-and-css-4n29</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/_rjNcnD_rCI"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&amp;gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
    &amp;lt;title&amp;gt;Youtube | Insta | Tiktok | Reels &amp;lt;/title&amp;gt;

    &amp;lt;style&amp;gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        body {
            background: black;
        }


        .reelsContainer {
            /* background: pink; */

            height: 80vh;
            width: 25vw;
            margin-top: 4em;
            display: flex;
            overflow: auto;
            gap: 2em;
            flex-direction: column;
            scroll-snap-type: y mandatory;
        }

        .reelsContainer::-webkit-scrollbar {
            display: none;
        }


        .reel  {
            min-height: 75vh;
            min-width: 25vw;
            background-color: red;
            scroll-snap-align: start;
        }

    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;

&amp;lt;div style="display: flex; justify-content: center;"&amp;gt;

        &amp;lt;div class="reelsContainer"&amp;gt;
            &amp;lt;div class="reel"&amp;gt;1&amp;lt;/div&amp;gt;
            &amp;lt;div class="reel"&amp;gt;2&amp;lt;/div&amp;gt;
            &amp;lt;div class="reel"&amp;gt;3&amp;lt;/div&amp;gt;
            &amp;lt;div class="reel"&amp;gt;4&amp;lt;/div&amp;gt;
            &amp;lt;div class="reel"&amp;gt;5&amp;lt;/div&amp;gt;
            &amp;lt;div class="reel"&amp;gt;6&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;




&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>css</category>
    </item>
    <item>
      <title>I Recreated imagine dragons website !</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Mon, 18 Jul 2022 13:47:48 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/i-create-imagine-dragons-website--539d</link>
      <guid>https://dev.to/imdigitalashish/i-create-imagine-dragons-website--539d</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/F-qtr4FaXco"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>imdigitatalashish</category>
      <category>nextjs</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Create CRUD using Golang and Next.js</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Thu, 14 Jul 2022 12:03:40 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/create-crud-using-golang-and-nextjs-1jdo</link>
      <guid>https://dev.to/imdigitalashish/create-crud-using-golang-and-nextjs-1jdo</guid>
      <description>&lt;p&gt;The most fastest technology combined together ! &lt;/p&gt;

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

</description>
      <category>javascript</category>
      <category>react</category>
      <category>nextjs</category>
      <category>go</category>
    </item>
    <item>
      <title>Let's create a Markdown editor just like dev.to</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Fri, 25 Mar 2022 08:21:24 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/lets-create-a-markdown-editor-just-like-devto-1ld8</link>
      <guid>https://dev.to/imdigitalashish/lets-create-a-markdown-editor-just-like-devto-1ld8</guid>
      <description>&lt;h3&gt;
  
  
  Hey Guys, Let's create a Markdown like dev.to website and process the markdown data to html
&lt;/h3&gt;

&lt;p&gt;So In this post We are going to make a editor with a textarea and when you click process the processed html content will appear... !&lt;/p&gt;

&lt;p&gt;If you are more of a listening, following along person you can watch the video, where I have done the live demonstration of this web app&lt;/p&gt;

&lt;p&gt;And As Always you can always find the whole code in the end section of my posts &lt;/p&gt;

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

&lt;p&gt;So Let's Dive&lt;/p&gt;

&lt;h1&gt;
  
  
  1) Creating the frontend part
&lt;/h1&gt;

&lt;p&gt;Here we will create a simple &lt;code&gt;index.php&lt;/code&gt; file for frontend with a simple form with a textarea and a button&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4M17sKJp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx3m14xfz4l9ozeifwtr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4M17sKJp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx3m14xfz4l9ozeifwtr.png" alt="Image description" width="799" height="147"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here we have given &lt;code&gt;textarea&lt;/code&gt; name as textArea and &lt;code&gt;button&lt;/code&gt; name as submitData so we can process the data in backend part&lt;/p&gt;

&lt;p&gt;This is it for the frontend part.... !&lt;/p&gt;

&lt;h1&gt;
  
  
  2) Let's write our backend
&lt;/h1&gt;

&lt;p&gt;So for parsing the data we will use &lt;a href="https://parsedown.org/"&gt;parsedown&lt;/a&gt; It is written in PHP which is actually 6x faster than normal parsers... So I think this is best for parsing our data&lt;/p&gt;

&lt;p&gt;so first will write the following in our terminal or cmd to install packages using composer ( Composer is a dependency management tool for PHP )&lt;/p&gt;

&lt;p&gt;&lt;code&gt;$ composer init&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And then you can just do enter enter enter enter for whatever it asks....&lt;/p&gt;

&lt;p&gt;Next...&lt;/p&gt;

&lt;p&gt;&lt;code&gt;$ composer require erusev/parsedown&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This command will download all the dependencies we need for our web app.&lt;/p&gt;

&lt;p&gt;So now let's write the code open up the php tags at the top of your website and import the Parsdown package&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--To5mTu0K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omi50q4sfrpt1hzr99ao.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--To5mTu0K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omi50q4sfrpt1hzr99ao.png" alt="Image description" width="509" height="78"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next we need to get the post data submitted by the user&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3JIkwFcd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9kygxywcnjucehfdl93.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3JIkwFcd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9kygxywcnjucehfdl93.png" alt="Image description" width="508" height="248"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;at line 5 - We are checking whether the user has clicked the process data button or not&lt;/p&gt;

&lt;p&gt;if the condition turns out to be true we instantiate our &lt;code&gt;Parsedown&lt;/code&gt; class&lt;/p&gt;

&lt;p&gt;and then we get the user submitted data into our &lt;code&gt;$textToParse&lt;/code&gt; variable and the show the output using &lt;br&gt;
&lt;code&gt;echo $Parsedown-&amp;gt;text($_POST["textArea"]);&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Yeahhhhh !! now your web app is ready to test&lt;/p&gt;

&lt;p&gt;Open up your terminal and start the server:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;$ php -S localhost:8000&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;INPUT&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--a6SY-UZ_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aucdl2u5wgy8g2bwiuno.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--a6SY-UZ_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aucdl2u5wgy8g2bwiuno.png" alt="Image description" width="337" height="139"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;OUTPUT&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--14PmgVWx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3zinjel2dyte2tms7k6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--14PmgVWx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3zinjel2dyte2tms7k6.png" alt="Image description" width="305" height="158"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you for reading this... !&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
&amp;lt;?php

require "./vendor/erusev/parsedown/Parsedown.php";

if(isset($_POST["submitData"])) {
    $Parsedown = new Parsedown();
    $textToParse = $_POST["textArea"];
    echo $Parsedown-&amp;gt;text($_POST["textArea"]);
}

?&amp;gt;
&amp;lt;div&amp;gt;
    &amp;lt;form action="" method="POST"&amp;gt;
        &amp;lt;textarea name="textArea" id="textArea" cols="80" rows="40"&amp;gt;&amp;lt;/textarea&amp;gt;
        &amp;lt;button name="submitData"&amp;gt;Process Markdown&amp;lt;/button&amp;gt;
    &amp;lt;/form&amp;gt;
&amp;lt;/div&amp;gt;


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

&lt;/div&gt;



&lt;p&gt;Hope you like, share it with your friends too !&lt;/p&gt;

</description>
      <category>php</category>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Create a Signature Painting Drawing App using Javascript</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Tue, 22 Mar 2022 10:13:21 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/create-a-web-app-to-draw-signature-and-download-it--58oe</link>
      <guid>https://dev.to/imdigitalashish/create-a-web-app-to-draw-signature-and-download-it--58oe</guid>
      <description>&lt;p&gt;Hmm... So let's start with what are the toolset we will be using to accomplish this task... ! So we are going to be using canvas, That's it and javascript for the interaction part... ! If you just want the code you can just scroll down to find all the code at once...&lt;/p&gt;

&lt;h2&gt;
  
  
  1) First we will be creating a blank template of our web page and place the canvas tag
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2a8o7s9jjjzrlb54nxh4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2a8o7s9jjjzrlb54nxh4.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then we will access the canvas in our javascript using getElementById and set the height and width of our canvas to window height and width divided by 2.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7sia1x00ve0dpuv7und.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7sia1x00ve0dpuv7und.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Which will be looking something like this.. For visibility purposes I have set background color of body to black&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2oc0a28z1ga5d1iek4bm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2oc0a28z1ga5d1iek4bm.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next is to handle mouse events&lt;/p&gt;

&lt;h2&gt;
  
  
  2) Handling Mouse Events
&lt;/h2&gt;

&lt;p&gt;In javascript we have the access to the mouse events such as mouseup, mousedown, mousemove etc within document or we can apply it on different set of elements individually ! So I am going to apply this to our canvas and we do so by addEventListener to a specific element which accepts to parameters.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;element.addEventListener("event_name", callback function()");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here the callback function will run whenever this event -&amp;gt; event_name get's triggered.. ! In this case it's the mouse move event&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftwb5umvn2kruemvj6psk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftwb5umvn2kruemvj6psk.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;this &lt;strong&gt;e&lt;/strong&gt; in the function() is required to get the current position of &lt;strong&gt;x&lt;/strong&gt; and &lt;strong&gt;y&lt;/strong&gt; of the mouse&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1qh3x660pklogd39nxg2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1qh3x660pklogd39nxg2.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So now let us create two variables outside of the eventlistener and set our mouseX and mouseY to e.clientX (returns current position of X in x coords ) and e.clientY ( returns current position of mouse in Y coords ) &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note: In javascript there is no negative x and y position. (0, 0) in canvas means top left, top right point in the canvas&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now let's draw a line in canvas using mousemove events. In general you would draw a line in canvas like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();

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

&lt;/div&gt;



&lt;p&gt;But we are going to replace the third and fourth line in two different events. &lt;/p&gt;

&lt;p&gt;Now we need to bring two more events the first is mousedown and mouseup. The working of these events are self explanatory.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frym3nsvwrf4bi7i7lonz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frym3nsvwrf4bi7i7lonz.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We also need a variable &lt;strong&gt;isDrawing&lt;/strong&gt; to keep track whether the user is holding the mouse click.&lt;/p&gt;

&lt;p&gt;So in the mouse down event we have,&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3jgpb2jdygjgsxdnwf1d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3jgpb2jdygjgsxdnwf1d.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and here we are not writing lineTo because that's going to changing every second when our mouse is moving.&lt;/p&gt;

&lt;p&gt;So in mousemove event we have,&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi40izsxsx5gzrxykfwpl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi40izsxsx5gzrxykfwpl.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now you can open up the page in your browser and see that you are drawing &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk3cwjn9yjmfndcikbiai.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk3cwjn9yjmfndcikbiai.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But here comes are isDrawing variable because in this we can't control when we have to draw, so we do the following&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1ntjwtf01i3v1b1z9qp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1ntjwtf01i3v1b1z9qp.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First we declared a variable called isDrawing, in mousedown function we set that drawing = true and in mousemove function we are checking if isDrawing is true, if it is so then we are drawing, after we release our mouse, &lt;strong&gt;mouseup&lt;/strong&gt; event get's triggered and we are not drawing any more ! &lt;/p&gt;
&lt;h2&gt;
  
  
  3) To save the canvas as png
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; function downloadCanvas() {
            var imageData = canvas.toDataURL("image/png");
            let anchorTag = document.createElement("a");
            document.body.appendChild(anchorTag);
            anchorTag.href = imageData;
            anchorTag.download = "imageData";
            anchorTag.click();
            document.body.removeChild(anchorTag);
}

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

&lt;/div&gt;


&lt;p&gt;This is a block of code that just creates a element and set some props and converts the canvas to a image and downloads it !, you can just memorize this because it can be used in any canvas without changing the code !&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqrsdi34f0kkfhhjvfze3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqrsdi34f0kkfhhjvfze3.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we can just create a button to download the picture... !&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg0c0rdlzs7pkwfc98w8d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg0c0rdlzs7pkwfc98w8d.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, &lt;em&gt;Congratulations&lt;/em&gt; you have just created a web app to write signatures and download it in a png format.. ! &lt;/p&gt;
&lt;h2&gt;
  
  
  4) Challenge Time
&lt;/h2&gt;

&lt;p&gt;My challenge to you is to modify this code and add feature to sign in different colors etc. ! and comment your modified code so that everyone can see and learnn !! Thank you for reading this... !&lt;/p&gt;

&lt;p&gt;Here is the full code !&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;

&amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&amp;gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
    &amp;lt;style&amp;gt;
        body {
            background-color: black;
        }
    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;

&amp;lt;body&amp;gt;
    &amp;lt;canvas id="canvas"&amp;gt;&amp;lt;/canvas&amp;gt;

    &amp;lt;button onclick="downloadCanvas();"&amp;gt;Save&amp;lt;/button&amp;gt;

    &amp;lt;script&amp;gt;
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth / 2;
        canvas.height = window.innerHeight / 2;
        canvas.style.background = "white";


        let mouseX = 0;
        let mouseY = 0;


        let isDrawing = false;
        canvas.addEventListener("mousedown", function (e) {
            isDrawing = true;

            ctx.beginPath();
            mouseX = e.clientX;
            mouseY = e.clientY;
            ctx.moveTo(mouseX, mouseY)

        })

        canvas.addEventListener("mousemove", function (e) {
            if (isDrawing) {
                ctx.lineTo(e.clientX, e.clientY);
                ctx.stroke();
            }

        })

        canvas.addEventListener("mouseup", function (e) {
            isDrawing = false;
        })

        function downloadCanvas() {
            var imageData = canvas.toDataURL("image/png");
            let anchorTag = document.createElement("a");
            document.body.appendChild(anchorTag);
            anchorTag.href = imageData;
            anchorTag.download = "imageData";
            anchorTag.click();
            document.body.removeChild(anchorTag);
        }

    &amp;lt;/script&amp;gt;

&amp;lt;/body&amp;gt;

&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hope you like, share it with your friends too !&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Top Programming Languages you should with use cases</title>
      <dc:creator>Ashish Kumar Verma</dc:creator>
      <pubDate>Tue, 27 Oct 2020 16:40:18 +0000</pubDate>
      <link>https://dev.to/imdigitalashish/top-programming-languages-you-should-with-use-cases-52g</link>
      <guid>https://dev.to/imdigitalashish/top-programming-languages-you-should-with-use-cases-52g</guid>
      <description>&lt;p&gt;1) Python - Web, AI, Data science, Machine learning, Backend dev&lt;br&gt;
2) typescript / javascript - Interactive UI, backend with nodejs, frontend with Angular / React/ Vue&lt;br&gt;
3) Java ( most used language ) - Backend dev, game dev, software dev, android dev&lt;br&gt;
4) Dart - Just because of flutter &lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
