let i = 0;
import 'tailwindcss/tailwind.css'
const blogData = [
  {
    id: i++,
    title: "How I Got Hired Contributing to open source projects",
    image: "/images/blog/x6sc1eno6shuvql8noth.webp",
    comments: 12,
    likes: 65,
    author:"Ben",
    description:       <>
    <>
<div class="text-left w-full overflow-x-hidden">
<h1 id="how-i-got-hired-contributing-to-open-source-projects" class="text-2xl md:text-3xl lg:text-5xl font-bold mb-2 font-mono w-[100vw]">
  How I Got Hired Contributing to open source projects
</h1>
<p class="text-blue-500 flex gap-x-2 lg:gap-x-3 mb-4 flex-wrap">
<a href="/t/opensource" class="hover:text-blue-900 transition duration-200">#opensource</a>
<a href="/t/webdev" class="hover:text-blue-900 transition duration-200">#webdev</a>
<a href="/t/javascript" class="hover:text-blue-900 transition duration-200">#javascript</a>
<a href="/t/career" class="hover:text-blue-900 transition duration-200">#career</a>
</p>
<p class="text-left mt-2">
<span class="font-semibold">
  In the tech space, getting a job is not totally based on how good you are
  at the technical side of things, but rather your positioning.
</span>
This means being able to put yourself out there and show employers how your
skills and experience can benefit their company.
</p>
<p class="text-left">
It is the goal of 90%-if not 100%-of geeks who are in tech to get hired, butwithout stepping out to the public that is nearly impossible.
</p> 
<p class="text-left">
As you read, I will share my journey on how I got into open source and
secured my first international role as a software engineer at
<a href="https://opensauced.pizza" class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">OpenSauced</a> by contributing to their
open source projects.*
</p>
<h2 id="-my-background-and-passion-my-background-and-passion" class="font-mono text-left font-bold mt-6 text-2xl">
My Background and Passion
</h2>
<p>
My desire to know how the web works has always been my driving force. So
from the day I was given my first mobile phone (Nokia s2) in the year 2010,
I took it upon myself to explore this little gadget at my disposal.
</p>
<p>
In 2020, during the covid 19 pandemic, I started learning the basics of the
web (HTML, CSS &amp; Javascript) with a friend (a graphic designer) who also
was trying to transition into UI/UX design. Luckily, I got my first job at
<a href="https://softkodesllc.com/"  class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">Softkodesllc</a> which didn’t last long
due to my lack of experience. So I kept on learning until I got into
<span class="font-semibold"> open source</span>
</p>
<h2 id="-how-i-got-to-know-about-open-source-how-i-got-to-know-about-open-source" class="text-left font-bold mt-4 text-2xl">
How I got to know about open source
</h2>
<div class="flex flex-col lg:flex-row gap-x-4 space-between mt-4 mb-14">
<div class="lg:w-1/2 self-center">
In a Twitter space by
<a href="https://twitter.com/ShawnBasquiat"  class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">@ShawnBasquiat</a>(The HUNT) was
the first place I heard about open source and ways to contribute to open
source. Then I ran into a video on YouTube talking about how to make your
first contributions to <span class="font-semibold">open source</span> projects.

<h2 id="-the-lifechanging-move-i-took-that-led-to-the-aha-moment-the-life-changing-move-i-took-that-led-to-the-aha-moment" 
class="text-left font-semibold mt-6 text-2xl">
The life-changing move I took that led to the AHA! moment
</h2>
<p>
After listening to the talks and tips from the space, I decided to set a
30-days target for myself to make contributions to open source projects in
the month of August 2022. I got my first PR up on the 3rd of the same month 
<a href="https://github.com/open-sauced/hot/pull/285" class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">
   https://github.com/open-sauced/hot/pull/285
</a>
.
</p>
</div>

<p class="text-left">
<a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tSuwvW8C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c2evj5yt5vxmd0anp0d.png">
  <img loading="lazy"
    src="https://res.cloudinary.com/practicaldev/image/fetch/s--tSuwvW8C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c2evj5yt5vxmd0anp0d.png"
    alt="My first PR in open source"
    class="mx-auto mt-4"
  />
</a>
</p>
</div>
<p class="text-left">The second and third PR followed on the 4th</p>
<ul class="list-disc list-inside">
<li>
  <a href="https://github.com/open-sauced/hot/pull/290" class="text-blue-500 hover:text-blue-900 transition duration-200">
    https://github.com/open-sauced/hot/pull/290
  </a>
</li>
<li>
  <a href="https://github.com/open-sauced/hot/pull/292" class="text-blue-500 hover:text-blue-900 transition duration-200">
    https://github.com/open-sauced/hot/pull/292
  </a>
</li>
</ul>
<p class="text-center mt-4">
At first, I was confused about how to start, but when I took up the courage
to pick up my first issue, it all started making sense 😇😇😇. I got a warm
welcome on my first contribution which resulted in me wanting to make more
and more contributions to the same project 🔥🔥 (all thanks to
<a href="https://dev.to/bdougieyo" class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">@bdougieyo</a>).
</p>
<p class="text-center">
<a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eEr1kLL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4fm4d7d751wlfxwuecm.png">
  <img loading="lazy"
    src="https://res.cloudinary.com/practicaldev/image/fetch/s--eEr1kLL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4fm4d7d751wlfxwuecm.png"
    alt="A message from brian douglas when I made my PR 🍕"
    class="mx-auto mt-4"
  />
</a>
</p>
<h2 id="-the-aha-moment-the-aha-moment" class="text-lg text-left font-bold mt-6">
The AHA! moment
</h2>
<p>
Shortly after my contributions, I got a message from the
<a href="https://insights.opensauced.pizza/user/bdougie" class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">CEO</a> of
<a href="https://opensauced.pizza" class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">OpenSauced</a>.
</p>
<p class="text-left">
<a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0ccvMeIC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/688p7osal2ghm1aw1n6k.png">
  <img loading="lazy"
    src="https://res.cloudinary.com/practicaldev/image/fetch/s--0ccvMeIC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/688p7osal2ghm1aw1n6k.png"
    alt="brian douglas messsage to me about a contract"
    class="mx-auto mt-4"
  />
</a>
</p>
<p class="text-2xl italic text-left mt-4">
It all seemed like magic to me at first 😊😊...but it was reality! My first
step towards working in public earned me a
<strong> Software Engineering</strong> role 🍕🍕
</p>
<p class="text-left mt-2 text-bold">
That's my short story on how I got hired making open-source contributions
💫💫
</p>
<h2 id="-tips-tips" class="text-left text-3xl font-bold mt-5 mb-2 border-b-2 w-[10%]">
Tips
</h2>
<p class="mb-2 ">
If you are looking to get started with open source, here are some tips to
get started:
</p>
<ul class="list-disc list-inside ">
<li>
<strong class="text-blue-800">Choose a Project that Aligns with Your Interests</strong>: Start by identifying open-source projects that align with your passions and skills. Whether it's web development, machine learning, or design, finding a project that excites you will keep you motivated and engaged.
</li>
<li>
<strong class="text-blue-800">Start Small and Contribute</strong>: Begin by tackling small tasks or bugs within the project. This allows you to familiarize yourself with the codebase and workflow. Look for "good first issue" or "beginner-friendly" tags that indicate suitable tasks for newcomers.
</li>
<li>
<strong class="text-blue-800">Engage with the Community</strong>: Join the project's community forums, mailing lists, or chat channels. Introduce yourself, ask questions, and seek guidance from experienced contributors. Engaging with the community not only helps you learn but also opens doors to collaboration and mentorship opportunities.
</li>
<li>
<strong class="text-blue-800">Read Documentation and Code</strong>: Invest time in understanding the project's documentation and codebase. Familiarize yourself with the project's structure, coding conventions, and guidelines. This knowledge will help you navigate the code more efficiently and contribute effectively.
</li>
<li>
<strong class="text-blue-800">Embrace Feedback and Learn from Others</strong>: Open source is a collaborative environment, so be open to feedback from experienced contributors. Take constructive criticism positively and use it to improve your skills. Learning from others' code and approaches will also broaden your understanding of best practices.
</li>
</ul>

<p class="text-left italic mt-4 mb-3">
With these few tips listed, you can kick-start your journey into open
source.
</p>
<p class="text-left italic font-semibold mt-6">
If you find this article helpful, then click on the follow button to get
more updates and helpful resources on JavaScript, Reactjs, and Next.js. You
can also follow me on Twitter
<a href="https://twitter.com/OgDev_01" class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">@OgDev-01</a> to get useful resources
and tech trends or on
<a href="https://insights.opensauced.pizza/user/OgDev-01/" class="ml-1 text-blue-500 hover:text-blue-900 transition duration-200">OpenSauced</a> to
see what contributions I've been making and the ones I highlight! Stay
saucy! 🍕🍕
</p>
<p class="text-left italic font-semibold">
* This is not fiction. However, this piece does not guarantee the desired
result you might need. It is designed to point you toward the right path.
And as it was coined in
<a href="https://asana.com/resources/fiedlers-contingency-theory">
  Fiedler’s Contingency Theory
</a>
</p>


</div>
</>

</>
    
  },
  {
    id: i++,
    title: "How You Can Use AI to Improve Your Code Quality",
    image: "/images/blog/AICodeQuality--1-.png",
    comments: 10,
    likes: 7,
    author:"Lisa",
    description:<div className="container py-1">
  
    <div className="mb-3 lg:mb-8 text-left">
      <h1 class="text-2xl md:text-3xl lg:text-5xl font-bold mb-4 font-mono">

        How You Can Use AI to Improve Your Code Quality
      </h1>
      <div class="flex flex-col 2xl:flex-row space-between gap-x-4 mt-8">
      <div>
        <img loading="lazy"
      src="https://www.freecodecamp.org/news/content/images/size/w1000/2023/05/image-76.png"
      alt="AI code quality"
      className="mx-auto items-center"/>
    </div>
    <div className="2xl:w-2/3 w-full my-auto">
      <p className="mb-4">
        As a software developer, I've always tried to write flawless code. Great
        code is not just functional – it should also be elegant, efficient, and
        robust.
      </p>
      <p className="mb-4">
        But let's be honest – the journey towards code perfection can sometimes
        feel like an uphill battle. Or more often than not, a chore not worth
        pursuing. And with the huge advances in AI lately, it would be unfortunate
        not to use what's available to its full advantage.
      </p>
      <p className="mb-4">
        Now what if you could have a digital assistant tirelessly working by your
        side, analyzing every line of code, catching bugs and vulnerabilities
        before they rear their ugly heads, suggesting improvements that elevate
        your work from good to exceptional?
      </p>
      <p className="mb-4">
        Well, my friends, you can supercharge your coding skills if you know how
        to use these new AI tools effectively.
      </p>
      <p className="mb-6">
        In this article, I want to share with you the six most common ways I've
        been leveraging AI to enhance my code quality. It's been a game-changer,
        unleashing new levels of efficiency, accuracy, and creativity in my
        development process. So let's jump in and see how you can do the same.
      </p>
      <p className="mb-2 font-bold font-serif">A Disclaimer Before We Start</p>
      <p className="mb-4">
        As it currently stands, I wouldn't recommend using AI to code out your
        projects in full. I've tried my hand at several projects, and you'll
        quickly find that the results are usually underwhelming.
      </p>
      <p className="mb-4">
        Where AI doesn't let you down is in being your programming assistant. You
        should still be the captain of the ship and steer the direction of your
        AI. When it comes to menial and maintenance tasks, such as improving code
        quality as we'll talk about here, that's where AI currently shines.
      </p>
    </div>
    </div>
      <p className="mt-4 mb-4 italic">So with that out of the way, let's get started,</p>
      <p className="mb-4 font-bold font-sans text-3xl">Ways to Use AI When Writing Code</p>
      <ol className="list-decimal list-inside pl-4">
        <li className="mb-4">
          <span className="font-semibold text-3xl text-slate-700">Idea Generation</span>
          <p className="mb-2">
            I'll be the first to admit that I don't always come up with the best
            solutions for a coding problem. I can recall too many times that I've
            worked on a programming task for hours, only to hit a wall, and then
            have to consult a colleague or Stack Overflow to get new ideas.
          </p>
          <p className="mb-2">
            It's only once I receive this external input from friends or forums
            that I can dig myself out of the mental block and continue with new
            ideas. But this usually takes time (and often someone else's time,
            too), which is precious as a programmer.
          </p>
          <p className="mb-2">
            So I turned to AI to help me out. Even outside of programming, I've
            been a huge advocate that one of the healthy uses of AI is for idea
            generation – and it's not different for programmers.
          </p>
          <p className="mb-2">
            One of the great ways to get over a mental block is to ask ChatGPT for
            suggestions. If you describe your problem in full, it usually does a
            good job and figuring out what the next step could be. Just remember
            to be specific in your prompts, and it helps to include some of your
            code snippets.
          </p>
          <p className="mb-2">
            Here is an example of me asking it the question from this Stack
            Overflow thread, and it gave a pretty helpful response:
          </p>
          <blockquote className="border-l-4 pl-8 italic text-blue-400 mb-2">
            <p>
              "The error you're encountering is because the player.find() method
              is returning None for some elements, which means it couldn't find a
              match for the specified class. You need to handle these cases where
              the element is not found to avoid the AttributeError. Additionally,
              you can use the pandas.read_html() function to simplify the process
              of extracting table data from the HTML."
            </p>
          </blockquote>
          <p className="mb-2">
            Personally, I think it's a great suggestion! Certainly would be enough
            to get me back on track.
          </p>
          <p className="mb-2">
            I will emphasize that you should take the ideas more-so then the code
            ChatGPT might suggest wholesale. ChatGPT did suggest code snippets
            from the above question, and in general the code snippets provided
            will work. But it's better to err on the side of caution and be
            accountable for the code you're putting out.
          </p>
        </li>
        <li className="mb-4">
          <span className="font-semibold text-3xl text-slate-700">Leveraging AI for Code Reviews</span >
          <p className="mb-2">
            The next great way I've been using AI is in reviewing my code. This is
            especially useful for newer programmers who are trying to find their
            footing and don't have a complete grasp of what's right or wrong and
            the best practices to follow.
          </p>
          <p className="mb-2">
            I mainly suggest this for newer programmers, as we already have tools
            such as Application Performance Monitoring Tools (APMs) that can give
            you a good indication of your code quality on larger applications. But
            when you're a newer dev working on smaller projects, AI is a great way
            to get quick and insightful code reviews.
          </p>
          <p className="mb-2">
            If I was able to obtain personalized feedback on my code when I was
            first picking up coding, I'm sure my learning productivity and overall
            code quality would've been much more concrete. I hate to even think
            about what my code looked like in the early days!
          </p>
          <p className="mb-2">
            There are tons of great tools for this. One of my favorites is
            Rankode. They provide personalized reports to you that highlight your
            strengths, areas of improvement, and an overall assessment of your
            programming skills. It's a great way to track your growth as a
            programmer and keep any poor coding habits at bay.
          </p>
        </li>
      </ol>
    </div>
  </div>
  
   

  },
  {
    id: i++,
    title: "How to Build a Discord AI Chatbot like Your Favorite Character",
    image: "/images/blog/lynns-thumbnail.png",
    comments: 4,
    likes: 10,
    author:"David",
    description:<div className="container mx-auto px-4 py-8 text-left">
    <h1 class="text-2xl md:text-3xl lg:text-5xl font-bold mb-2 font-mono">
      How to Build a Discord AI Chatbot that Talks Like Your Favorite Character
    </h1>

    <div className="flex flex-col lg:flex-row space-between gap-x-6 mt-4">
    <img loading="lazy"
      src="https://freecodecamp.org/news/content/images/2021/08/discord.gif"
      alt="Discord GIF"
      className="w-full lg:w-1/2 lg:h-1/2 mb-8"
    />
    <div className="w-[100%] my-auto">
    <h2 className="text-2xl font-bold mb-2 font-serif">Introduction</h2>
    <p className="mb-4">
      My chatbot project started as a joke with a friend when we were playing
      video games. I'm honestly surprised by how popular it became – there were
      5.9k views of my previous tutorial, plus, when I deployed my bot to a 1k+
      user server, people flooded it with 300+ messages in an hour, effectively
      crashing the bot. 😳 You can read more about my deployment post-mortem in
      this post.
    </p>
    </div>
    </div>
    <h2 className="text-lg md:text-xl lg:text-3xl font-bold mb-2 font-serif mt-2 underline">Outline of this Tutorial</h2>
    <ul className="list-disc pl-6 mb-4">
      <li>
        Gather text data for your character using one of these two methods: find
        pre-made datasets on Kaggle or make custom datasets from raw transcripts.
      </li>
      <li>
        Train the model in Google Colab, a cloud-based Jupyter Notebook
        environment with free GPUs.
      </li>
      <li>Deploy the model to Hugging Face, an AI model hosting service.</li>
      <li>Build a Discord bot in either Python or JavaScript, your choice! 🤩</li>
      <li>
        Set up the Discord bot's permissions so they don't spam non-bot channels.
      </li>
      <li>Host the bot on Repl.it.</li>
      <li>Keep the bot running indefinitely with Uptime Robot.</li>
    </ul>
    <h2 className="text-lg md:text-xl lg:text-3xl font-bold mb-2 font-serif mt-2 underline">How to Prepare the Data ?</h2>
    <p className="mb-4">
      For our chatbot to learn to converse, we need text data in the form of
      dialogues. This is essentially how our chatbot is going to respond to
      different exchanges and contexts.
    </p>
    <h3 className="text-xl md:text-2xl text-green-900 font-bold mb-2">
      Is Your Favorite Character on Kaggle?
    </h3>
    <p className="mb-4">
      There are a lot of interesting datasets on Kaggle for popular cartoons, TV
      shows, and other media.
    </p>
    <h3 className="text-xl md:text-2xl text-orange-900 font-bold mb-2">
      Can't Find Your Favorite Character on Kaggle?
    </h3>
    <p className="mb-4">
      No worries. We can create datasets from raw transcripts. A great place to
      look for transcripts is Transcript Wiki.
    </p>
    <h2 className="text-lg md:text-xl lg:text-3xl font-bold mb-2 font-serif mt-2 underline">How to Train the Model ?</h2>
    <p className="mb-4">
      Under the hood, our model will be a Generative Pre-trained Transformer
      (GPT), the most popular language model these days.
    </p>
    <h3 className="text-orange-600 text-xl md:text-2xl font-semibold mb-2">Upload the File to Google Colab</h3>
    <p className="mb-4">
      Start by uploading the file to Google Colab. Select the GPU as the runtime
      to speed up the model training process.
    </p>
    <h3 className="text-orange-600 text-xl md:text-2xl font-semibold mb-2">
      Change the Dataset and the Target Character
    </h3>
    <p className="mb-4">
      Modify the dataset and the target character in code snippets like:
    </p>
    <pre className="bg-gray-200 p-2 pl-4 mb-4 overflow-x-scroll">
      <code className="text-sm ">
        data = pd.read_csv('MY-DATASET.csv'){"\n"}CHARACTER_NAME = 'MY-CHARACTER'
      </code>
    </pre>
    <h3 className="text-orange-600 text-xl md:text-2xl font-semibold mb-2">Host the Model on Hugging Face</h3>
    <p className="mb-4">
      Host the model on Hugging Face, which provides a free API for us to query
      the model. Sign up for Hugging Face, create a new model repository, and
      obtain your API token.
    </p>
    <div className="flex flex-col xl:flex-row space-between gap-x-4">
      <div className="xl:w-2/3">
      <h2 className="text-lg md:text-xl lg:text-3xl font-bold mb-2 font-serif mt-2 underline">How to Build the Discord Bot ?</h2>
      <p className="mb-4">
        Go to the Discord Developer's page, create an application, and add a bot to
        it. Configure the bot's permissions to prevent it from spamming non-bot
        channels.
      </p>
      <h2 className="text-lg md:text-xl lg:text-3xl font-bold mb-2 font-serif mt-2 underline">Conclusion</h2>
      <p className="mb-4">
        In this tutorial, we learned how to build a Discord AI chatbot that can talk
        like your favorite character. We covered gathering text data, training the
        model, hosting it on Hugging Face, and building the Discord bot. By
        following the steps outlined in this tutorial, you can create your own
        personalized chatbot that brings your favorite character to life on Discord.
      </p>
      <p className="mb-4">
        To access the full tutorial, please visit{" "}
        <a class="text-blue-500 hover:text-blue-900 transition duration-200" href="https://www.freecodecamp.org/news/discord-ai-chatbot/">
          this link
        </a>
        .
      </p>
      
      <p className="mb-4">
        Remember to check out the original blog post for detailed code snippets and
        step-by-step instructions.
      </p>
      </div>
      <div className='my-auto'>
      <img
        src="https://freecodecamp.org/news/content/images/2021/08/discord.gif"
        alt="Discord GIF"
        className="w-full max-w-screen-lg mb-8"
      />
      </div>
    </div>
    <p className="mt-4 mb-2 italic font-semibold text-xl md:text-2xl text-slate-600">

      Happy bot building and enjoy conversing with your favorite character on
      Discord!
    </p>
  </div>
  
  },
  {
    id: i++,
    title: " How to Build and Deploy a Trained AI Model as a Web Service",
    image: "/images/blog/cover-3.png",
    comments: 2,
    likes: 9,
    author:"John",
    description:<div className="container py-8">
    <div className="mt-8 text-left">
      <h1 className="text-2xl md:text-3xl lg:text-5xl font-bold mb-2 font-mono">
        Machine learning with Julia – How to Build and Deploy a Trained AI Model
        as a Web Service
      </h1>
      <div className="flex flex-col xl:flex-row space-between mt-4">
        <div>
          <p className="mb-4">
          Julia is a general-purpose programming language well-suited for numerical
          analysis and computational science. Some consider it the future of machine
          learning and the most natural replacement for Python in this field.
        </p>
        <p className="mb-4">
          This article introduces the Julia language and its ecosystem. You'll learn
          how to use it to solve a Titanic machine learning competition and submit
          it to Kaggle.
        </p>
        <p className="mb-4">
          You'll also learn how to deploy your machine learning model to production
          as a web service and create a web interface to send prediction requests to
          this service from a web browser.
        </p>
        <p className="mb-4">
          By the end of the article, you will create a simple AI-powered web
          application that you can use as a template for creating more complex Julia
          ML solutions.
        </p> 
        </div>
        <img loading="lazy"
      src="https://www.freecodecamp.org/news/content/images/size/w1000/2023/02/survived.png"
      alt="Julia machine learning"
      className="mx-auto"
    />
      </div>
      
      <p className="mb-4 font-semibold text-xl md:text-2xl lg:text-3xl">Here's what we'll cover:~</p>
      <ol className="list-decimal list-inside pl-4">
        <li className="mb-4">
          <span className="font-medium text-green-700 underline">What You Should Know in Advance?</span>
          <p className="mb-2">
            This is not a book, but only an article. I won't cover everything and
            assume that you already have some base knowledge so you can get the
            most from reading it.
          </p>
          <p className="mb-2">
            It is essential that you are familiar with Python machine learning and
            understand how to train machine learning models using Numpy, Pandas,
            SciKit-Learn, and Matplotlib Python libraries.
          </p>
          <p className="mb-2">
            Also, I assume that you are familiar with machine learning theory:
            types of machine learning problems like regression and classification,
            the concept and process of Supervised machine learning (fit/predict
            and evaluate quality using metrics) and common models used for it,
            including Random Forest Classifier, and it's implementation in
            SciKit-Learn Python library.
          </p>
          <p className="mb-2">
            Additionally, it would be great if you've previously participated in
            Kaggle competitions, because to understand and run all code of this
            article you need to have an account on <a href="https://kaggle.com" className="text-blue-500 hover:text-blue-900 transition duration-200">https://kaggle.com</a>.
          </p>
          <p className="mb-2">
            There are a lot of books already written, and many courses already
            released about the topics described above. In this article, my goal is
            to show you how to create, train, and deploy a basic machine learning
            model using Julia, without diving into theoretical aspects of ML and
            AI.
          </p>
        </li>
        <li className="mb-4">
          <span className="font-medium text-green-700 underline">Why Use Julia for Machine Learning?</span>
          <p className="mb-2">
            For a long time, Python has been a standard for data science and
            machine learning because of its simplicity and a great set of
            libraries and tools.
          </p>
          <p className="mb-2">
            Among others, there are great libraries like Numpy to help you do
            linear algebra with vectors and matrices, Pandas to manipulate
            datasets, Matplotlib for data visualizations, and Scikit-Learn that
            provides a uniform interface to work with well-known machine learning
            models.
          </p>
          <p className="mb-2">
            Also, Jupyter Notebooks allow you to write and run Python code online
            right in a web browser. This creates a comfortable environment for
            data researchers to design and implement the whole machine learning
            cycle even if they are not very experienced in programming.
          </p>
          <p className="mb-2">
            All this is good for research in laboratories, but at some point, you
            need to go to production. At this moment things change dramatically.
          </p>
          <p className="mb-2">
            Python was created in the early nineties and was never supposed to be
            fast. Its kernel was never assumed to be used for new modern
            technologies like distributed computing.
          </p>
          <p className="mb-2">
            That is why, to make complex ML tasks production-ready, you need to
            install a lot of third-party dependencies. You'll also have to employ
            some tricks to speed Python code up. You can even rewrite or convert
            Python machine learning models before deploying them to production in
            faster languages like C++.
          </p>
          <p className="mb-2">
            Well, Julia aimed to resolve these problems. This is what the authors
            wrote about why they created Julia:
          </p>
          <blockquote className="border-l-4 pl-4 italic text-gray-700">
            <p>
              "We are greedy: we want more. We want a language that’s open source,
              with a liberal license. We want the speed of C with the dynamism of
              Ruby. We want a language that’s homoiconic, with true macros like
              Lisp, but with obvious, familiar mathematical notation like Matlab.
              We want something as usable for general programming as Python, as
              easy for statistics as R, as natural for string processing as Perl,
              as powerful for linear algebra as Matlab, as good at gluing programs
              together as the shell. Something that is dirt simple to learn, yet
              keeps the most serious hackers happy. We want it interactive and we
              want it compiled." - Source: The Julia blog.
            </p>
          </blockquote>
          <p className="mb-2 mt-2 text-normal">
            So, from an ML perspective, Julia got the best of both worlds. It was
            built to be as fast as C and as simple as Python.
          </p>
        </li>
      </ol>
    </div>
  </div>
  
  },
  {
    id: i++,
    title: " How to work  and choose React Design Patterns",
    image: "/images/blog/aa6g894nyxxmytztd9ta.webp",
    comments: 9,
    likes: 18,
    author:"Jazz",
    description:<>
    <div className='overflow-x-hidden'>
    <h1 id="react-design-patterns" className="text-2xl md:text-3xl lg:text-5xl font-bold mb-2 font-mono">React Design Patterns</h1>
    <p className="flex gap-x-2 md:gap-x-4 mb-2">
      <a href="/t/react"  className="text-blue-500 hover:text-blue-900 transition duration-200">#react</a> 
      <a href="/t/webdev" className="text-blue-500 hover:text-blue-900 transition duration-200">#webdev</a>{" "}
      <a href="/t/designpatterns" className="text-blue-500 hover:text-blue-900 transition duration-200">#designpatterns</a>{" "}
      <a href="/t/beginners" className="text-blue-500 hover:text-blue-900 transition duration-200">#beginners</a>
    </p>
   
    <p className="font-bold mb-3 font-sans text-green-600">
      Hello developers!! While developing apps in React, I'm sure you have come
      across different use cases which cannot be easy to solve using the same
      older approach.
    </p>
    <p>
      Each use cases demand a different pattern to solve the problem in the most
      optimised way and also made our code more scalable.
    </p>
    <p>
      React provides different design patterns to solve common problems. The list
      of commonly used design patterns in React are:
    </p>
    <ul className="font-semibold list-disc ml-6 mt-2 mb-2 text-slate-600">
      <li>
        <p>Presentational &amp; Container Component</p>
      </li>
      <li>
        <p>Higher Order Components</p>
      </li>
      <li>
        <p>Render Props</p>
      </li>
      <li>
        <p>Compound Components</p>
      </li>
      <li>
        <p>Hooks</p>
      </li>
    </ul>
    <p>Let's explore them one by one.</p>
    <h3 id="-1-presentational-amp-container-component-1-presentational-container-component" 
    className="text-2xl md:text-3xl mb-2 font-bold text-blue-800 mt-6">
      <a href="#1-presentational-amp-container-component" />
      <strong>🎯</strong> 1. Presentational &amp; Container Component
    </h3>
    <p>
      Each component in React has two parts: One is logic to handle your data and
      the other is displaying data on screen.
    </p>
    <p>
      This pattern helps <span className='font-semibold'>separate concerns</span> by splitting
      components into two categories. <span className='font-semibold'>Container components</span> handle
      the logic and state management, while{" "}
      <span className='font-semibold'>Presentational components</span> focus on rendering the UI based
      on the provided props.
    </p>
    <pre style={{backgroundColor:"black",color:"green"}}>
      <code >
        <span className="hljs-keyword ">export</span>{" "}
        <span className="hljs-keyword">const</span> DisplayList ={" "}
        <span className="hljs-function">
          (
          <span className="hljs-params">
            {"{"} patientRecord {"}"}
          </span>
          ) =&gt;
        </span>{" "}
        {"{"}
        {"\n"}
        {"  "}
        <span className="hljs-keyword">return</span> ({"\n"}
        {"    "}
        <span className="xml">
          <span className="hljs-tag">
            &lt;<span className="hljs-name">ul</span>&gt;
          </span>
          {"\n"}
          {"      "}
          {"{"}patientRecord.map((patient, id) =&gt; {"{"}
          {"\n"}
          {"        "}return{" "}
          <span className="hljs-tag">
            &lt;<span className="hljs-name">li</span>{" "}
            <span className="hljs-attr">key</span>=
            <span className="hljs-string">
              {"{"}id{"}"}
            </span>
            &gt;
          </span>
          {"{"}patient{"}"}
          <span className="hljs-tag">
            &lt;/<span className="hljs-name">li</span>&gt;
          </span>
          ;{"\n"}
          {"      "}
          {"}"}){"}"}
          {"\n"}
          {"    "}
          <span className="hljs-tag">
            &lt;/<span className="hljs-name">ul</span>&gt;
          </span>
        </span>
        {"\n"}
        {"  "});{"\n"}
        {"}"};{"\n"}
      </code>
    </pre>
    <p>Enter fullscreen mode Exit fullscreen mode</p>
    <p>
      Container components, on the other hand, keep track of the internal states
      and data-fetching logic and handles business logic.
    </p>
    <pre style={{backgroundColor:"black",color:"green"}}>
      <code>
        <span className="hljs-keyword">export</span>{" "}
        <span className="hljs-keyword">const</span> PatientComponent ={" "}
        <span className="hljs-function">
          <span className="hljs-params">()</span> =&gt;
        </span>{" "}
        {"{"}
        {"\n"}
        {"  "}
        <span className="hljs-keyword">const</span> [patientList, getPatientList]
        = React.useState([]);{"\n"}
        {"\n"}
        {"  "}React.useEffect( <span className="hljs-keyword">async</span>() =&gt;{" "}
        {"{"}
        {"\n"}
        {"    "}
        <span className="hljs-comment">
          // Fetch data through an API and apply business logic
        </span>
        {"\n"}
        {"    "}
        <span className="hljs-keyword">const</span> data ={" "}
        <span className="hljs-keyword">await</span> fetchPatientList();{"\n"}
        {"\n"}
        {"    "}setPatientList([...data]);{"\n"}
        {"  "}
        {"}"}, []);{"\n"}
        {"\n"}
        {"  "}
        <span className="hljs-comment">
          // provide data to presentational component to display
        </span>
        {"\n"}
        {"  "}
        <span className="hljs-keyword">return</span>{" "}
        <span className="xml">
          <span className="hljs-tag">
            &lt;<span className="hljs-name">DisplayList</span>{" "}
            <span className="hljs-attr">patientRecord</span>=
            <span className="hljs-string">
              {"{"}patientList{"}"}
            </span>{" "}
            /&gt;
          </span>
          ; {"\n"}
          {"}"};
        </span>
        {"\n"}
      </code>
    </pre>
    <p>Enter fullscreen mode Exit fullscreen mode</p>
    <p>
      The container component passes the state and any required callbacks as props
      to the presentational component. The presentational component is responsible
      for rendering the UI based on the provided props, without worrying about the
      data fetching or business logic.
    </p>
    <h3 id="-2-higher-order-components-2-higher-order-components" className="text-2xl md:text-3xl mb-2 font-bold text-blue-800 mt-6">
      <a href="#2-higher-order-components" />
      <strong>🎯</strong> 2. Higher Order Components
    </h3>
    <p>
      HOCs take one component as an input and give a newly created component with
      additional functionalities as an output. It allows you to reuse component
      logic by wrapping components with additional functionality.
    </p>
    <p className='mb-4'>
      By using HOCs, we can easily add common functionality to multiple components
      without duplicating code.
    </p>
    <pre style={{backgroundColor:"black",color:"green"}}>
  <code class="bg-gray-900 rounded-lg p-4">
    <span class="text-purple-500">import</span> React{" "}
    <span class="text-purple-500">from</span>{" "}
    <span class="text-green-500">'react'</span>;{"\n"}
    {"\n"}
    <span class="text-purple-500">const</span> withLogger ={" "}
    <span class="text-purple-500">(<span class="text-blue-500">WrappedComponent</span>) =&gt;</span>{" "}
    {"{"}
    {"\n"}
    {"  "}
    <span class="text-purple-500">class</span>{" "}
    <span class="text-yellow-500">WithLogger</span>{" "}
    <span class="text-purple-500">extends</span>{" "}
    <span class="text-yellow-500">React</span>.
    <span class="text-yellow-500">Component</span>{" "}
    {"{"}
    {"\n"}
    {"    "}componentDidMount() {"{"}
    {"\n"}
    {"      "}
    <span class="text-red-500">console</span>.log(
    <span class="text-green-500">`Component {" "}
      <span class="text-yellow-500">${"{"}WrappedComponent.name{"}"}</span>{" "}
      mounted.`</span>
    );{"\n"}
    {"    "}
    {"}"}
    {"\n"}
    {"\n"}
    {"    "}componentWillUnmount() {"{"}
    {"\n"}
    {"      "}
    <span class="text-red-500">console</span>.log(
    <span class="text-green-500">`Component {" "}
      <span class="text-yellow-500">${"{"}WrappedComponent.name{"}"}</span>{" "}
      will unmount.`</span>
    );{"\n"}
    {"    "}
    {"}"}
    {"\n"}
    {"\n"}
    {"    "}render() {"{"}
    {"\n"}
    {"      "}
    <span class="text-purple-500">return</span>{" "}
    <span class="text-purple-500">
      &lt;<span class="text-blue-500">WrappedComponent</span> {"{"}
      <span class="text-red-500">...this.props</span>
      {"}"} /&gt;
    </span>
    ;{"\n"}
    {"    "}
    {"}"}
    {"\n"}
    {"  "}
    {"}"}
    {"\n"}
    {"\n"}
    {"  "}
    <span class="text-purple-500">return</span> WithLogger;{"\n"}
    {"}"}
    {"\n"}
    {"\n"}
    <span class="text-green-500">// Usage</span>{"\n"}
    <span class="text-purple-500">const</span> MyComponent = (props) =&gt; {"{"}
    {"\n"}
    {"  "}
    <span class="text-purple-500">return</span>{" "}
    <span class="text-purple-500">
      &lt;<span class="text-red-500">div</span>&gt;
    </span>
    My Component
    <span class="text-purple-500">
      &lt;/<span class="text-red-500">div</span>&gt;
    </span>
    ;{"\n"}
    {"}"};
    {"\n"}
    {"\n"}
    <span class="text-purple-500">const</span> EnhancedComponent = withLogger(MyComponent);
  </code>
</pre>

   
    <p className="mt-4">
      In the example above, <code>withLogger</code> is a HOC that takes a
      component (<code>WrappedComponent</code>) as input and returns a new
      component (<code>WithLogger</code>). The returned component logs a message
      to the console when it mounts and unmounts.
    </p>
    <p className="mt-4">
      To use the HOC, we wrap our original component <code>MyComponent</code> with{" "}
      <code>withLogger</code>, creating a new component{" "}
      <code>EnhancedComponent</code>. The enhanced component has the same
      functionality as <code>MyComponent</code>, but it also includes the logging
      behaviour defined in the HOC.
    </p>
    <h3 id="-3-render-props-3-render-props" className="text-2xl md:text-3xl mb-2 font-bold text-blue-800 mt-6">
      <a href="#3-render-props" />
      <strong>🎯</strong> 3. Render props
    </h3>
    <p className="mt-4">
      In this pattern, a component receives a function as a prop and uses that
      function to render its content.
    </p>
    <pre style={{backgroundColor:"black",color:"green"}}>
      <code>
        <span className="hljs-keyword">import</span> React{" "}
        <span className="hljs-keyword">from</span>{" "}
        <span className="hljs-string">'react'</span>;{"\n"}
        {"\n"}
        <span className="hljs-class">
          <span className="hljs-keyword">class</span>{" "}
          <span className="hljs-title">MouseTracker</span>{" "}
          <span className="hljs-keyword">extends</span>{" "}
          <span className="hljs-title">React</span>.
          <span className="hljs-title">Component</span>{" "}
        </span>
        {"{"}
        {"\n"}
        {"  "}state = {"{"} <span className="hljs-attr">x</span>:{" "}
        <span className="hljs-number">0</span>,{" "}
        <span className="hljs-attr">y</span>:{" "}
        <span className="hljs-number">0</span> {"}"};{"\n"}
        {"\n"}
        {"  "}handleMouseMove ={" "}
        <span className="hljs-function">
          (<span className="hljs-params">event</span>) =&gt;
        </span>{" "}
        {"{"}
        {"\n"}
        {"    "}
        <span className="hljs-keyword">this</span>.setState({"{"}{" "}
        <span className="hljs-attr">x</span>: event.clientX,{" "}
        <span className="hljs-attr">y</span>: event.clientY {"}"});{"\n"}
        {"  "}
        {"}"};{"\n"}
        {"\n"}
        {"  "}render() {"{"}
        {"\n"}
        {"    "}
        <span className="hljs-keyword">return</span> ({"\n"}
        {"      "}
        <span className="xml">
          <span className="hljs-tag">
            &lt;<span className="hljs-name">div</span>{" "}
            <span className="hljs-attr">onMouseMove</span>=
            <span className="hljs-string">
              {"{"}this.handleMouseMove{"}"}
            </span>
            &gt;
          </span>
          {"\n"}
          {"        "}
          {"{"}this.props.renderPosition(this.state){"}"}
          {"\n"}
          {"      "}
          <span className="hljs-tag">
            &lt;/<span className="hljs-name">div</span>&gt;
          </span>
        </span>
        {"\n"}
        {"    "});{"\n"}
        {"  "}
        {"}"}
        {"\n"}
        {"}"}
        {"\n"}
        {"\n"}
        <span className="hljs-comment">// Usage</span>
        {"\n"}
        <span className="hljs-keyword">const</span> DisplayMousePosition ={" "}
        <span className="hljs-function">
          <span className="hljs-params">()</span> =&gt;
        </span>{" "}
        ({"\n"}
        {"  "}
        <span className="xml">
          <span className="hljs-tag">
            &lt;<span className="hljs-name">MouseTracker</span>
            {"\n"}
            {"    "}
            <span className="hljs-attr">renderPosition</span>=
            <span className="hljs-string">
              {"{"}({"{"}
            </span>{" "}
            <span className="hljs-attr">x</span>,{" "}
            <span className="hljs-attr">y</span> {"}"}) =&gt;
          </span>{" "}
          ({"\n"}
          {"      "}
          <span className="hljs-tag">
            &lt;<span className="hljs-name">div</span>&gt;
          </span>
          {"\n"}
          {"        "}Mouse position: {"{"}x{"}"}, {"{"}y{"}"}
          {"\n"}
          {"      "}
          <span className="hljs-tag">
            &lt;/<span className="hljs-name">div</span>&gt;
          </span>
          {"\n"}
          {"    "}){"}"}
          {"\n"}
          {"  "}/&gt;{"\n"});
        </span>
        {"\n"}
      </code>
    </pre>
  
    <p>
      A prop like <code>renderPosition</code> is called a{" "}
      <strong>
        <em>render prop</em>
      </strong>{" "}
      because it is a prop that specifies how to render a piece of the user
      interface.
    </p>
    <h3 id="-4-compound-components-4-compound-components" className="text-2xl md:text-3xl mb-2 font-bold text-blue-800 mt-6">
    
      <a href="#4-compound-components" />
      <strong>🎯</strong> 4. Compound Components
    </h3>
    <p   className="mt-2">
      Compound components are a pattern used in React to create components that
      work together as a group, allowing users to customize and control the
      rendering of multiple related components.
    </p>
    <p>
      It allows you to define a parent component that encapsulates the behaviour
      and state of child components, while still giving flexibility to users to
      determine the composition and appearance of the child components.
    </p>
    <p   className="mt-2">
      Let's consider a use case where you need to create a{" "}
      <strong>List component</strong> in React which looks something like an
      unordered list in native HTML or an Accordion component.
    </p>
    <pre style={{backgroundColor:"black",color:"green"}}>
      <code>
        <span className="hljs-tag">
          &lt;<span className="hljs-name">List</span>&gt;
        </span>
        {"\n"}{" "}
        <span className="hljs-tag">
          &lt;<span className="hljs-name">ListItem</span>&gt;
        </span>
        1
        <span className="hljs-tag">
          &lt;/<span className="hljs-name">ListItem</span>&gt;
        </span>
        {"\n"}{" "}
        <span className="hljs-tag">
          &lt;<span className="hljs-name">ListItem</span>&gt;
        </span>
        2
        <span className="hljs-tag">
          &lt;/<span className="hljs-name">ListItem</span>&gt;
        </span>
        {"  "}
        {"\n"}{" "}
        <span className="hljs-tag">
          &lt;<span className="hljs-name">ListItem</span>&gt;
        </span>
        3
        <span className="hljs-tag">
          &lt;/<span className="hljs-name">ListItem</span>&gt;
        </span>
        {"\n"}{" "}
        <span className="hljs-tag">
          &lt;<span className="hljs-name">ListItem</span>&gt;
        </span>
        4
        <span className="hljs-tag">
          &lt;/<span className="hljs-name">ListItem</span>&gt;
        </span>{" "}
        {"\n"}
        <span className="hljs-tag">
          &lt;/<span className="hljs-name">List</span>&gt;
        </span>
        {"\n"}
      </code>
    </pre>

    <p>
      Now in this scenario, we need some of the states of the{" "}
      <strong>List</strong> component to be transferred to its child component
      i.e. <strong>ListItem.</strong> It can be implemented either by using the{" "}
      <code>context API</code> or <code>React.cloneElement</code> API.
    </p>
    <p>
      Let's explore how to develop the same scenario using{" "}
      <strong>Context API</strong>.
    </p>
    <pre style={{backgroundColor:"black",color:"green"}}>
      <code>
        <span className="hljs-keyword">const</span> ListContext =
        React.createContext();{"\n"}
        {"\n"}
        <span className="hljs-comment">// Parent Component</span>
        {"\n"}
        <span className="hljs-keyword">export</span>{" "}
        <span className="hljs-keyword">const</span> List = (props) =&gt; {"{"}
        {"\n"}
        {"  "}
        <span className="hljs-keyword">const</span> {"{"} children,{" "}
        <span className="hljs-built_in">size</span> {"}"} = props;{"\n"}
        {"  "}
        <span className="hljs-keyword">const</span> {"{"} Provider {"}"} =
        ListContext;{"\n"}
        {"\n"}
        {"  "}
        <span className="hljs-keyword">const</span> sharedProp = {"{"}{" "}
        <span className="hljs-built_in">size</span> {"}"}
        {"\n"}
        {"\n"}
        {"  "}
        <span className="hljs-built_in">return</span> ({"\n"}
        {"    "}&lt;Provider value={"{"}sharedProp{"}"}&gt;{"\n"}
        {"      "}&lt;ul&gt;{"\n"}
        {"        "}
        {"{"}children{"}"}
        {"\n"}
        {"      "}&lt;/ul&gt;{"  "}
        {"\n"}
        {"    "}&lt;/Provider&gt;{"\n"}
        {"  "}){"\n"}
        {"}"}
        {"\n"}
        {"\n"}
        <span className="hljs-comment">// Child Component</span>
        {"\n"}
        <span className="hljs-keyword">export</span>{" "}
        <span className="hljs-keyword">const</span> ListItem = (props) =&gt; {"{"}
        {"\n"}
        {"  "}
        <span className="hljs-keyword">const</span> contextProp =
        React.useContext(ListContext);{"\n"}
        {"  "}
        <span className="hljs-keyword">const</span> {"{"}{" "}
        <span className="hljs-built_in">size</span> {"}"} = contextProp;{"\n"}
        {"\n"}
        {"  "}
        <span className="hljs-built_in">return</span> ({"\n"}
        {"   "}&lt;li className={"{"}
        <span className="hljs-built_in">size</span> ==={" "}
        <span className="hljs-string">'medium'</span> ? bg-primary : bg-secondary
        {"}"}&gt;{"\n"}
        {"      "}
        {"{"}props.children{"}"}
        {"\n"}
        {"   "}&lt;/li&gt;{"\n"}
        {"  "}){"\n"}
        {"}"}
        {"\n"}
        {"\n"}
        <span className="hljs-comment">// Usage</span>
        {"\n"}&lt;List <span className="hljs-built_in">size</span>=
        <span className="hljs-string">'medium'</span>&gt;{"\n"}{" "}
        &lt;ListItem&gt;Item <span className="hljs-number">1</span>
        &lt;/ListItem&gt;{"\n"} &lt;ListItem&gt;Item{" "}
        <span className="hljs-number">2</span>&lt;/ListItem&gt;{"\n"}{" "}
        &lt;ListItem&gt;Item <span className="hljs-number">3</span>
        &lt;/ListItem&gt;{"\n"}&lt;/List&gt;{"\n"}
      </code>
    </pre>
    <p>Enter fullscreen mode Exit fullscreen mode</p>
    <p>
      In the above example, React Context is created to share the prop{" "}
      <code>size</code> between the parent (&lt;<strong>List&gt;</strong>) and
      child (
      <strong>
        <listitem />
      </strong>
      ) components. Also, the user has the flexibility to provide custom content
      inside each list item.
    </p>
    <h3 id="-5-hooks-5-hooks" className="text-2xl md:text-3xl mb-2 font-bold text-blue-800 mt-6">
      <a href="#5-hooks" />
      <strong>🎯</strong> 5. Hooks
    </h3>
    <p className="mt-2 mb-2">
      Hooks are introduced in React Functional component as a replacement for
      Class components. There are multiple hooks available to manage states and
      different lifecycle methods of React.
    </p>
    <pre style={{backgroundColor:"black",color:"green"}}>
      <code>
        <span className="hljs-keyword">import</span> React, {"{"} useState {"}"}{" "}
        <span className="hljs-keyword">from</span>{" "}
        <span className="hljs-string">'react'</span>;{"\n"}
        {"\n"}
        <span className="hljs-keyword">const</span> Counter ={" "}
        <span className="hljs-function">
          <span className="hljs-params">()</span> =&gt;
        </span>{" "}
        {"{"}
        {"\n"}
        {"  "}
        <span className="hljs-keyword">const</span> [count, setCount] = useState(
        <span className="hljs-number">0</span>);{"\n"}
        {"\n"}
        {"  "}
        <span className="hljs-keyword">return</span> ({"\n"}
        {"    "}
        <span className="xml">
          <span className="hljs-tag">
            &lt;<span className="hljs-name">Button</span>{" "}
            <span className="hljs-attr">onClick</span>=
            <span className="hljs-string">{"{"}()</span> =&gt;
          </span>{" "}
          setCount(count + 1){"}"}&gt;
          <span className="hljs-tag">
            &lt;/<span className="hljs-name">Button</span>&gt;
          </span>
        </span>
        {"\n"}
        {"  "}){"\n"}
        {"}"}
        {"\n"}
      </code>
    </pre>
   
    <p className="mt-4">
      We can also create custom hooks to solve our specific use case and code
      reusability.
    </p>
    <p>
      You can read about the most commonly used built-in react hooks{" "}
      <a href="https://react.dev/reference/react">here</a>.
    </p>
    <h3 id="-wrap-up-wrap-up-" className=" text-medium text-red-800 mt-2"> 
      <a href="#wrap-up" />
      <strong>🎯</strong> Wrap Up!!
    </h3>
    </div>
  </>
  
  },
  {
    id: i++,
    title: "Learn serverless on AWS step-by-step - SQL with Aurora",
    image: "/images/blog/cover.webp",
    comments: 5,
    likes: 20,
    author:"mike",
    description:
      <>
      <div className="container mx-auto px-4 py-8 text-left">
  <h1 className="text-2xl md:text-3xl lg:text-5xl font-bold mb-2 font-mono">
    Learn Serverless on AWS Step-by-Step: SQL with Aurora
  </h1>

  
  <div className="flex flex-col 2xl:flex-row space-between gap-x-4">
  <div className="my-auto 2xl:w-4/5">
    <h2 className="text-xl lg:text-2xl font-bold mb-2 text-left font-sans text-green-600">Introduction</h2>
    <p className="mb-4">
      In this tutorial, we will explore how to build a serverless application on
      AWS using SQL with Amazon Aurora. Serverless computing allows developers to
      focus on writing code without worrying about server management. We will
      leverage the power of AWS Lambda, API Gateway, and Aurora Serverless to
      create a scalable and cost-efficient application. Throughout this tutorial,
      we will use Tailwind CSS for styling and demonstrate the code and
      implementation details with relevant images.
    </p>  
  </div>

  <img loading="lazy"
    src="https://res.cloudinary.com/practicaldev/image/fetch/s--DdzoSOFB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://raw.githubusercontent.com/PChol22/kumo-articles/master/blog-posts/learn-serverless/aurora/assets/basic-schema.png"
    alt="Basic Schema"
    className="w-full max-w-screen-lg mb-8"
  /> 
  </div>
  <h2 className="text-xl lg:text-2xl font-bold mb-2 text-left font-sans text-green-600">Prerequisites</h2>
  <p className="mb-4">
    Before diving into this tutorial, you should have basic knowledge of AWS
    services, SQL, and JavaScript. Additionally, make sure you have an AWS
    account set up.
  </p>
  <h2 className="text-xl lg:text-2xl font-bold mb-2 text-left font-sans text-green-600">Table of Contents</h2>
  <ol className="list-decimal pl-6 tracking-wide">
    <li>Setting up the AWS Environment</li>
    <li>Creating an Amazon Aurora Serverless Database</li>
    <li>Building the Serverless API</li>
    <li>Creating the Serverless Frontend</li>
    <li>Styling with Tailwind CSS</li>
    <li>Deploying and Testing the Application</li>
    <li>Conclusion</li>
  </ol>
  <h2 className="text-xl lg:text-2xl font-semibold lg:font-bold mb-2 mt-8 text-left font-sans text-blue-800 tracking-wide" >
    Section 1: Setting up the AWS Environment
  </h2>
  <p className="mb-4">
    In this section, we will guide you through the process of setting up your
    AWS environment, including creating an IAM role and installing the AWS CLI.
  </p>
  <h2 className="text-xl lg:text-2xl font-semibold lg:font-bold mb-2 mt-8 text-left font-sans text-blue-800 tracking-wide">
    Section 2: Creating an Amazon Aurora Serverless Database
  </h2>
  <p className="mb-4">
    Here, we will walk you through the steps of creating an Amazon Aurora
    Serverless database. We will cover the configuration, security groups, and
    connecting to the database.
  </p>
  <h2 className="text-xl lg:text-2xl font-semibold lg:font-bold mb-2 mt-8 text-left font-sans text-blue-800 tracking-wide">
    Section 3: Building the Serverless API
  </h2>
  <p className="mb-4">
    In this section, we will dive into creating a serverless API using AWS
    Lambda and API Gateway. You will learn how to handle HTTP requests, connect
    to the Aurora database, and perform CRUD operations.
  </p>
  <h2 className="text-xl lg:text-2xl font-semibold lg:font-bold mb-2 mt-8 text-left font-sans text-blue-800 tracking-wide">
    Section 4: Creating the Serverless Frontend
  </h2>
  <p className="mb-4">
    Here, we will guide you in building a serverless frontend using JavaScript
    and the AWS SDK. You will learn how to interact with the API endpoints to
    fetch and display data.
  </p>
  <h2 className="text-xl lg:text-2xl font-semibold lg:font-bold mb-2 mt-8 text-left font-sans text-blue-800 tracking-wide">
    Section 5: Styling with Tailwind CSS
  </h2>
  <p className="mb-4 ">
    In this section, we will introduce Tailwind CSS and demonstrate how to
    integrate it into your serverless application. We will guide you in setting
    up Tailwind CSS and show you how to style your frontend components.
  </p>
  <h2 className="text-xl lg:text-2xl font-semibold lg:font-bold mb-2 mt-8 text-left font-sans text-blue-800 tracking-wide">
    Section 6: Deploying and Testing the Application
  </h2>
  <p className="mb-4">
    Here, we will walk you through the process of deploying your serverless
    application on AWS. We will cover the deployment of Lambda functions, API
    Gateway, and the frontend to an S3 bucket. We will also guide you in testing
    the application to ensure everything is working as expected.
  </p>
  <h2 className="text-xl lg:text-2xl font-semibold lg:font-bold mb-2 mt-8 text-left font-sans text-blue-800 tracking-wide">Section 7: Conclusion</h2>
  <p className="mb-4">
    In the final section, we will recap what we have learned throughout the
    tutorial. We will also provide additional resources for further exploration
    and encourage you to experiment and build upon what you have learned.
  </p>
  <h2 className="text-xl lg:text-2xl font-bold mb-2 text-left font-sans text-green-600">Conclusion</h2>
  <p className="mb-4">
    By following this step-by-step tutorial, you have learned how to build a
    serverless application on AWS using SQL with Amazon Aurora. You have gained
    hands-on experience with AWS services like Lambda, API Gateway, and Aurora
    Serverless. Additionally, you have integrated Tailwind CSS into your
    application for enhanced styling. With the knowledge acquired, you can now
    explore and build more sophisticated serverless applications on AWS.
  </p>
  <p className="mb-4">
    Remember to refer to the original blog post at{" "}
    <a className="text-blue-500 hover:text-blue-900 transition duration-200" href="https://dev.to/kumo/learn-serverless-on-aws-step-by-step-sql-with-aurora-5hn1">
      https://dev.to/kumo/learn-serverless-on-aws-step-by-step-sql-with-aurora-5hn1
    </a>{" "}
    for detailed code snippets, images, and step-by-step instructions.
  </p>
  <p className="mb-4 font-semibold text-slate-600">Happy coding and serverless development on AWS!</p>
</div>

      </>
  },
];

export default blogData;
