From 1478701138a9e56e6104669ee1396f54ea01a61d Mon Sep 17 00:00:00 2001 From: Akanksha Chaurasia <97845909+akanksha984@users.noreply.github.com> Date: Fri, 11 Aug 2023 08:51:11 +0530 Subject: [PATCH] Style All the Blogs (#589) * Update blogdata.js Signed-off-by: Akanksha Chaurasia <97845909+akanksha984@users.noreply.github.com> * Update [blogId].js Signed-off-by: Akanksha Chaurasia <97845909+akanksha984@users.noreply.github.com> * Update BlogDetail.module.css Signed-off-by: Akanksha Chaurasia <97845909+akanksha984@users.noreply.github.com> --------- Signed-off-by: Akanksha Chaurasia <97845909+akanksha984@users.noreply.github.com> --- data/blogdata.js | 393 +++++++++++++++++++---------------- pages/blog/[blogId].js | 45 ++-- styles/BlogDetail.module.css | 36 +++- 3 files changed, 271 insertions(+), 203 deletions(-) diff --git a/data/blogdata.js b/data/blogdata.js index 1acd6739..5f4cbbd0 100644 --- a/data/blogdata.js +++ b/data/blogdata.js @@ -1,4 +1,5 @@ let i = 0; +import 'tailwindcss/tailwind.css' const blogData = [ { id: i++, @@ -9,21 +10,21 @@ const blogData = [ author:"Ben", description: <> <> -
-

-How I Got Hired Contributing to open source projects +
+

+ How I Got Hired Contributing to open source projects

-

-#opensource -#webdev -#javascript -#career +

+#opensource +#webdev +#javascript +#career

- + 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. - + This means being able to put yourself out there and show employers how your skills and experience can benefit their company.

@@ -33,10 +34,10 @@ It is the goal of 90%-if not 100%-of geeks who are in tech to get hired, butwith

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 -OpenSauced by contributing to their +OpenSauced by contributing to their open source projects.*

-

+

My Background and Passion

@@ -48,32 +49,36 @@ I took it upon myself to explore this little gadget at my disposal. In 2020, during the covid 19 pandemic, I started learning the basics of the web (HTML, CSS & Javascript) with a friend (a graphic designer) who also was trying to transition into UI/UX design. Luckily, I got my first job at -Softkodesllc which didn’t last long +Softkodesllc which didn’t last long due to my lack of experience. So I kept on learning until I got into - open source. + open source

How I got to know about open source

-

+

+
In a Twitter space by -@ShawnBasquiat(The HUNT) was +@ShawnBasquiat(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 open source projects. -

-

+first contributions to open source projects. + +

The life-changing move I took that led to the AHA! moment

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 - - https://github.com/open-sauced/hot/pull/285 +the month of August 2022. I got my first PR up on the 3rd of the same month + + https://github.com/open-sauced/hot/pull/285 .

+
+

+

The second and third PR followed on the 4th

-

+

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 -@bdougieyo). +@bdougieyo).

@@ -112,15 +118,15 @@ and more contributions to the same project 🔥🔥 (all thanks to />

-

+

The AHA! moment

Shortly after my contributions, I got a message from the -CEO of -OpenSauced. +CEO of +OpenSauced.

-

+

-

+

It all seemed like magic to me at first 😊😊...but it was reality! My first step towards working in public earned me a Software Engineering role 🍕🍕 @@ -138,7 +144,7 @@ step towards working in public earned me a That's my short story on how I got hired making open-source contributions 💫💫

-

+

Tips

@@ -147,37 +153,37 @@ get started:

  • -Choose a Project that Aligns with Your Interests: 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. +Choose a Project that Aligns with Your Interests: 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.
  • -Start Small and Contribute: 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. +Start Small and Contribute: 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.
  • -Engage with the Community: 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. +Engage with the Community: 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.
  • -Read Documentation and Code: 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. +Read Documentation and Code: 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.
  • -Embrace Feedback and Learn from Others: 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. +Embrace Feedback and Learn from Others: 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.
-

+

With these few tips listed, you can kick-start your journey into open source.

-

+

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 -@OgDev-01 to get useful resources +@OgDev-01 to get useful resources and tech trends or on -OpenSauced to +OpenSauced to see what contributions I've been making and the ones I highlight! Stay saucy! 🍕🍕

-

+

* 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 @@ -200,16 +206,21 @@ And as it was coined in comments: 10, likes: 7, author:"Lisa", - description:

- AI code quality -
-

+ description:
+ +
+

+ How You Can Use AI to Improve Your Code Quality

+
+
+ AI code quality +
+

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 @@ -231,13 +242,13 @@ And as it was coined in Well, my friends, you can supercharge your coding skills if you know how to use these new AI tools effectively.

-

+

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.

-

A Disclaimer Before We Start

+

A Disclaimer Before We Start

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 @@ -249,11 +260,13 @@ And as it was coined in 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.

-

So with that out of the way, let's get started.

-

Ways to Use AI When Writing Code

+
+
+

So with that out of the way, let's get started,

+

Ways to Use AI When Writing Code

  1. -

    Idea Generation

    + Idea Generation

    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 @@ -282,7 +295,7 @@ And as it was coined in Here is an example of me asking it the question from this Stack Overflow thread, and it gave a pretty helpful response:

    -
    +

    "The error you're encountering is because the player.find() method is returning None for some elements, which means it couldn't find a @@ -305,7 +318,7 @@ And as it was coined in

  2. -

    Leveraging AI for Code Reviews

    + Leveraging AI for Code Reviews

    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 @@ -348,16 +361,18 @@ And as it was coined in likes: 10, author:"David", description:

    -

    +

    How to Build a Discord AI Chatbot that Talks Like Your Favorite Character

    + +
    Discord GIF -

    Introduction

    +
    +

    Introduction

    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 @@ -366,7 +381,9 @@ And as it was coined in crashing the bot. 😳 You can read more about my deployment post-mortem in this post.

    -

    Outline of this Tutorial

    +
    +
    +

    Outline of this Tutorial

    • Gather text data for your character using one of these two methods: find @@ -384,84 +401,92 @@ And as it was coined in
    • Host the bot on Repl.it.
    • Keep the bot running indefinitely with Uptime Robot.
    -

    How to Prepare the Data

    +

    How to Prepare the Data ?

    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.

    -

    +

    Is Your Favorite Character on Kaggle?

    There are a lot of interesting datasets on Kaggle for popular cartoons, TV shows, and other media.

    -

    +

    Can't Find Your Favorite Character on Kaggle?

    No worries. We can create datasets from raw transcripts. A great place to look for transcripts is Transcript Wiki.

    -

    How to Train the Model

    +

    How to Train the Model ?

    Under the hood, our model will be a Generative Pre-trained Transformer (GPT), the most popular language model these days.

    -

    Upload the File to Google Colab

    +

    Upload the File to Google Colab

    Start by uploading the file to Google Colab. Select the GPU as the runtime to speed up the model training process.

    -

    +

    Change the Dataset and the Target Character

    Modify the dataset and the target character in code snippets like:

    - 
    -      
+    
    +      
         data = pd.read_csv('MY-DATASET.csv'){"\n"}CHARACTER_NAME = 'MY-CHARACTER'
       
     
    
-    
    Host the Model on Hugging Face
    
+    
    Host the Model on Hugging Face
    
     
    
       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.
     
    
-    
    How to Build the Discord Bot
    
-    
    
-      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.
-    
    
-    
    Conclusion
    
-    
    
-      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.
-    
    
-    
    
-      To access the full tutorial, please visit{" "}
-      
-        this link
-      
-      .
-    
    
-    Discord GIF
-    
    
-      Remember to check out the original blog post for detailed code snippets and
-      step-by-step instructions.
-    
    
-    
    
+    
    
+      
    
+      
    How to Build the Discord Bot ?
    
+      
    
+        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.
+      
    
+      
    Conclusion
    
+      
    
+        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.
+      
    
+      
    
+        To access the full tutorial, please visit{" "}
+        
+          this link
+        
+        .
+      
    
+      
+      
    
+        Remember to check out the original blog post for detailed code snippets and
+        step-by-step instructions.
+      
    
+      
    
+      
    
+      Discord GIF
+      
    
+    
    
+    
    
+
       Happy bot building and enjoy conversing with your favorite character on
       Discord!
     
    
@@ -476,40 +501,45 @@ And as it was coined in
     likes: 9,
     author:"John",
     description:
    
-    Julia machine learning
     
    
-      
    
+      
    
         Machine learning with Julia – How to Build and Deploy a Trained AI Model
         as a Web Service
       
    
-      
    
-        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.
-      
    
-      
    
-        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.
-      
    
-      
    
-        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.
-      
    
-      
    
-        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.
-      
    
-      
    Here's what we'll cover:
    
+      
    
+        
    
+          
    
+          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.
+        
    
+        
    
+          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.
+        
    
+        
    
+          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.
+        
    
+        
    
+          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.
+        
     
+        
    
+        Julia machine learning
+      
    
+      
+      
    Here's what we'll cover:~
    
       
      
         
    1. 
-          
      What You Should Know in Advance
      
+          What You Should Know in Advance?
           
      
             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
@@ -531,7 +561,7 @@ And as it was coined in
           
      
             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 https://kaggle.com.
+            article you need to have an account on https://kaggle.com.
           
      
           
      
             There are a lot of books already written, and many courses already
@@ -542,7 +572,7 @@ And as it was coined in
           
      
         
      2. 
         
    2. 
-          
      Why Use Julia for Machine Learning?
      
+          Why Use Julia for Machine Learning?
           
      
             For a long time, Python has been a standard for data science and
             machine learning because of its simplicity and a great set of
@@ -595,7 +625,7 @@ And as it was coined in
               want it compiled." - Source: The Julia blog.
             
      
           
-          
      
+          
      
             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.
           
      
@@ -613,15 +643,16 @@ And as it was coined in
     likes: 18,
     author:"Jazz",
     description:<>
-    
      React Design Patterns
      
-    
      
-      #react #webdev{" "}
-      #designpatterns{" "}
-      #beginners
+    
      
+    
      React Design Patterns
      
+    
      
+      #react 
+      #webdev{" "}
+      #designpatterns{" "}
+      #beginners
     
      
-
    
-    
      
+    
      
       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.
@@ -634,7 +665,7 @@ And as it was coined in
       React provides different design patterns to solve common problems. The list
       of commonly used design patterns in React are:
     
      
-    
      
   
   
   },
@@ -1244,32 +1276,39 @@ And as it was coined in
     description:
       <>
       
      
-  
      
+  
      
     Learn Serverless on AWS Step-by-Step: SQL with Aurora
   
      
+
+  
+  
      
+  
      
+    
      Introduction
      
+    
      
+      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.
+    
        
+  
      
+
   Basic Schema
-  
      Introduction
      
-  
      
-    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.
-  
      
-  
      Prerequisites
      
+  /> 
+  
      
+  
      Prerequisites
      
   
      
     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.
   
      
-  
      Table of Contents
      
-  
        
+  
        Table of Contents
        
+  
          
     
        1. Setting up the AWS Environment
          2. 
     
        2. Creating an Amazon Aurora Serverless Database
          3. 
     
        3. Building the Serverless API
          4. 
@@ -1278,14 +1317,14 @@ And as it was coined in
     
        4. Deploying and Testing the Application
          5. 
     
        5. Conclusion
          6. 
   
        
-  
        
+  
        
     Section 1: Setting up the AWS Environment
   
        
   
        
     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.
   
        
-  
        
+  
        
     Section 2: Creating an Amazon Aurora Serverless Database
   
        
   
        
@@ -1293,7 +1332,7 @@ And as it was coined in
     Serverless database. We will cover the configuration, security groups, and
     connecting to the database.
   
        
-  
        
+  
        
     Section 3: Building the Serverless API
   
        
   
        
@@ -1301,7 +1340,7 @@ And as it was coined in
     Lambda and API Gateway. You will learn how to handle HTTP requests, connect
     to the Aurora database, and perform CRUD operations.
   
        
-  
        
+  
        
     Section 4: Creating the Serverless Frontend
   
        
   
        
@@ -1309,7 +1348,7 @@ And as it was coined in
     and the AWS SDK. You will learn how to interact with the API endpoints to
     fetch and display data.
   
        
-  
        
+  
        
     Section 5: Styling with Tailwind CSS
   
        
   
        
@@ -1317,7 +1356,7 @@ And as it was coined in
     integrate it into your serverless application. We will guide you in setting
     up Tailwind CSS and show you how to style your frontend components.
   
        
-  
        
+  
        
     Section 6: Deploying and Testing the Application
   
        
   
        
@@ -1326,13 +1365,13 @@ And as it was coined in
     Gateway, and the frontend to an S3 bucket. We will also guide you in testing
     the application to ensure everything is working as expected.
   
        
-  
        Section 7: Conclusion
        
+  
        Section 7: Conclusion
        
   
        
     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.
   
        
-  
        Conclusion
        
+  
        Conclusion
        
   
        
     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
@@ -1343,12 +1382,12 @@ And as it was coined in
   
        
   
        
     Remember to refer to the original blog post at{" "}
-    
+    
       https://dev.to/kumo/learn-serverless-on-aws-step-by-step-sql-with-aurora-5hn1
     {" "}
     for detailed code snippets, images, and step-by-step instructions.
   
        
-  
        Happy coding and serverless development on AWS!
        
+  
        Happy coding and serverless development on AWS!
        
 
      
 
       
diff --git a/pages/blog/[blogId].js b/pages/blog/[blogId].js
index f40aff69..aa6a5f0e 100644
--- a/pages/blog/[blogId].js
+++ b/pages/blog/[blogId].js
@@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { useState ,useEffect} from "react";
-import Image from "next/image";
 import styles from "@styles/BlogDetail.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUserCircle } from "node_modules/@fortawesome/free-solid-svg-icons/index";
@@ -16,6 +15,7 @@ import {faArrowLeft} from "node_modules/@fortawesome/free-solid-svg-icons/index"
 import BlogCard from "components/Blogs/BlogCard";
 import blogData from "/data/blogdata";
 import Link from "next/link";
+import Footer from "components/common/Footer";
 import ReactMarkdown from "react-markdown";
 import md from "markdown-it";
 export default function BlogId() {
@@ -27,30 +27,30 @@ export default function BlogId() {
   console.log(blog)
   console.log("heelo",blogId);
   
-  
   return (
+    
      
     
      
       
      
         
      
-          
      {blog.title}
      
+          
      {blog.title}
      
           
      
             
      
               
               
      
-                
-                
+                
+                
               
      
             
      
           
      
         
      
         
      
-          
         
      
         
      
-
-{blog.description}
-   
+            {blog.description} 
         
      
       
      
       
      
-        
      See other blogs
      
+        
      See other blogs
      
         
      
           {blogData.map((blogItem) => (
             
           ))}
         
      
       
      
-    
      
+      
    
   );
 }
 
@@ -129,4 +130,4 @@ export async function getServerSideProps(context) {
   return {
       props: {},
   };
-}
\ No newline at end of file
+}
diff --git a/styles/BlogDetail.module.css b/styles/BlogDetail.module.css
index fb0b22fa..98107dcd 100644
--- a/styles/BlogDetail.module.css
+++ b/styles/BlogDetail.module.css
@@ -18,6 +18,7 @@
   max-width: 1700px;
   gap: 35px;
   flex-wrap: wrap;
+  margin-top: 8%;
 }
 
 .blogHeaderInfoLeft,
@@ -29,7 +30,7 @@
 
 .blogHeaderInfoLeft > ul {
   display: flex;
-  gap: 35px;
+  gap: 1.25rem;
 }
 
 .blogHeaderInfoLeft > ul li {
@@ -45,15 +46,20 @@
 .blogHeaderInfoLeft > ul li:last-child {
   color: green;
   fill: green;
+  transition: 0.3s;
+}
+.blogHeaderInfoLeft > ul li:last-child:hover{
+  color: rgb(69, 207, 69);
+  fill: rgb(69, 207, 69);
 }
 
 .blogHeaderInfoRight {
-  gap: 50px;
+  gap: 28px;
 }
 
 .socialIcons {
   display: flex;
-  gap: 30px;
+  gap: 1.5rem;
 }
 
 .socialIcons > li {
@@ -71,18 +77,20 @@
 }
 
 .blogPicture {
-  display: "block";
+  display: block;
   width: 100%;
   height: 100%;
   max-width: 1700px;
   max-height: 1100px;
   margin: 20px auto;
+  border: 3px solid black;
 }
 
 .blogBody {
   margin: 0 auto 50px;
   width: 100%;
   max-width: 1700px;
+  font-size: x-large;
 }
 
 .otherBlogsCard {
@@ -109,9 +117,29 @@
 @media screen and (max-width: 768px) {
   .blogHeaderInfo {
     justify-content: center;
+    margin-top: 15%;
   }
 
   .blogHeaderInfoLeft > ul li {
     font-size: 18px;
   }
+  .blogBody{
+    font-size: larger;
+  }
+  .blogHeaderInfo {
+    margin-top: 12%;
+  }
+}
+@media screen and (max-width: 468px) {
+  .blogBody{
+    font-size: large;
+    width: 100%;
+  }
+  .blog {
+    padding: 0 10px;
+  }
+  .blogHeaderInfo {
+    margin-top: 28%;
+  }  
+  
 }