Forem: Aashutosh Soni

How to Create a Virtual Machine in Azure

Aashutosh Soni — Mon, 23 Oct 2023 19:46:46 +0000

This guide provides step-by-step instructions on how to create a virtual machine in Azure. It covers all the necessary details, from navigating the Azure portal to configuring the virtual machine settings. Following this guide will allow someone to easily create a virtual machine in Azure for their specific needs.

Step by Step instructions-

After registration navigate to https://portal.azure.com/
Click on Create a new Resource.
Click Create when upon verifying details.
After some time your deployment will be complete, go to Resource.
Congratulations your VM is deployed successfully.🎉🎉
To Connect use this IP , username and your password.
Now, you have the power of Linux at your fingertips. Try out some Linux commands and explore your new virtual machine! 🐧💻

📝 What is RSS Feed and How I Used It to My Advantage 🌐

Aashutosh Soni — Tue, 01 Aug 2023 09:51:07 +0000

sit tight, lots of interesting things ahead ; let's begin-

Introduction to RSS Feed 📰

RSS (Rich Site Summary or Really Simple Syndication) is a standard format used to publish and distribute frequently updated content on the web. It allows websites and blogs to share their content & updates in an organized way, making it a breeze for users and applications to stay up-to-date without the hassle of manually visiting each site.

RSS feeds are usually represented in XML (eXtensible Markup Language) format, which is a human-readable and machine-readable markup language (similar to HTML).XML provides a hierarchical structure to organize data, making it ideal for representing various types of information.

How RSS Feed Works?🔄

Imagine your favourite blog site, "blog.ashutosh7i.dev 😁", constantly churning out captivating articles. With RSS , this blog site creates a summarized version of each article, along with essential details like the title, link, and cover image. These summarized versions are packed into an XML file known as the RSS feed. It's like a scroll of enchantment, holding all the latest and greatest blog updates in one place.

Now, whenever a new article is published, the RSS feed gets updated automatically. It's as if the blog site sends out a signal to all the RSS subscribers, saying, "Hey, I've got some fresh content for you! Come and take a look!" This signal, represented by the updated RSS feed, allows users and applications to fetch the latest content effortlessly.

What exactly it looks like🤔?

(click this to see an RSS feed- blog.ashutosh7i.dev/rss.xml)

🌟Now Comes the "I have an Idea🤩!" Moment 💡

Here's where my lightbulb moment happened💡! As a web developer itching to create something dynamic and exciting for my users, I stumbled upon the incredible power of RSS feeds.

"Why not use this fantastic tech to my advantage and create a dynamic component?" I thought to myself. And let me tell you, the possibilities were endless🤩🚀!

The Dynamic Component! 🎉

Picture this: a beautifully crafted component that automatically updates itself with the latest and greatest blog posts. No more static content or boring pages! Thanks to the magic of RSS feeds, my dynamic component would fetch the freshest content from my blog site, "blog.ashutosh7i.dev," and present it on my portfolio in a visually stunning carousel🚀.

Fetching, Parsing, and Creating Magic!

Okay, so let's break down how I pulled off this enchanting feat. First,

I used Express.js and the HTTP module to fetch the RSS feed from "https://blog.ashutosh7i.dev/rss.xml." Then, I skillfully parsed the XML data using the DOMParser, extracting the blog titles, cover images, and links to each blog post.

With the data in hand, I set out to create my dynamic blog card carousel. The HTML, CSS, and JavaScript trio worked their magic to display the blog cards. As the user landed on my portfolio, they were greeted with a mesmerizing array of Sliding blog cards, each enticing them to explore more with a simple click.

Fetching the RSS Feed** Parsing XML Data Render the Dynamic Component**🚀

also on the latest blog, it shows "Latest" too😁;

Let's Talk Code-

Implementation of Dynamic Component 🚀

here is what I created-

https://codepen.io/ashutosh7i/pen/VwVqrZP

so theoretically the thing was complete-

{ i too thought this initially😅;; Ever heard of CORS?? I did🥲🥹it was such a P.I.T.A resolving it, I had to create a reverse proxy for this, if ever you encounter a CORS error, read this Blog(upcoming) for a solution💖}

while trying to parse data from https://blog.ashutosh7i.dev/rss.xml it was giving me CORS policy errors in the code, which is subjected to my Blog Server.

to overcome this we used https://ashutosh7i.dev/blog-rss-xml this gives the same data as the above url, just without CORS🫡.

Other Possibilities with RSS Feed 🌟

The usage of RSS feeds opens up numerous possibilities:

Automated Content Updates : By using RSS feeds, we can keep our application content updated in real-time without manual intervention. This is particularly beneficial for news websites, blogs, and content-heavy platforms.
Content Aggregation : RSS feeds enable content aggregation from multiple sources, allowing users to view content from various websites in a centralized location.
Customized User Experience : With RSS feeds, users can subscribe to specific topics or authors they are interested in, providing them with a personalized content experience.
SEO Benefits : Utilizing RSS feeds can improve search engine optimization (SEO) as search engines can easily crawl and index updated content.

In conclusion , my fondness for older technologies and backend development is driven by their time-tested reliability and the solid foundation they offer🗿. As a fan of these classic tools, I appreciate their simplicity , efficiency , and ability to stand the test of time. Embracing older technologies is not just a nostalgic choice , but a strategic one that allows me to focus on crafting elegant solutions and building a future-proof tech ecosystem.

In a rapidly evolving world, these timeless tools remain a source of inspiration, reminding me of the enduring power of simplicity and the beauty of a well-crafted backend. 💙🔧Happy coding! 🚀

Thank you for reading this far, 💙🔧Happy coding! 🚀

All you need to Know about HTML

Aashutosh Soni — Fri, 28 Jul 2023 13:46:18 +0000

This Blog/Documentation contains everything you need to know about HTML, Either you are a beginner starting with HTML or a Seasoned Developer, this blog got you covered🚀

Before this Go through this Blog for VsCode Setup

Let's Begin 🚀

What is HTML?🌐

HTML stands for Hyper Text Markup Language, it is the standard markup language for creating Web pages.📄

HTML describes the structure of a Web page HTML tells the browser how to display the content on Web page. 🌐🎨

How HTML looks? 🎨

(This is a basic HTML Boilerplate)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script src="index.js"></script>
    <!--This is a comment. -->
    <h1>Jessy, Wanna Cook?🍳</h1>
    <img
      src="https://media.vanityfair.com/photos/53f0fd829b1e228549e7ba22/1:1/w_800%2Cc_limit/you-wanna-cook-crystal-meth.gif"
      alt="Failed"
    />
  </body>
</html>

https://codepen.io/ashutosh7i/pen/dyQQPxP

This code represents a basic HTML document that includes an external CSS file and a JavaScript file. It has the following sections:

📋<!DOCTYPE html> declares that this is an HTML5 document.
🌐The <html> tag is the root element of the document, and the lang attribute specifies the language as "en" (English).
📄The <head> section contains metadata about the document, such as character encoding, viewport settings, and the page title.
🔤Character Encoding: <meta charset="UTF-8" /> specifies that the document is encoded in UTF-8 to support various characters.
🖥Viewport Settings: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> sets the initial scale and width of the page to adapt to different device screens.
🌐Compatibility: <meta http-equiv="X-UA-Compatible" content="ie=edge" /> indicates that the document should be rendered using the latest version of Internet Explorer's rendering engine.
📝Title: <title>HTML 5 Boilerplate</title> sets the title of the web page, which is displayed in the browser's title bar or tab.
🎨External CSS: <link rel="stylesheet" href="style.css" /> links an external CSS file named "style.css" to style the content of the page.
👀Body Section: The <body> tag contains the visible content of the web page.
💡JavaScript: <script src="index.js"></script> includes an external JavaScript file named "index.js" to add interactive behavior to the page.
💬Comment:  is an HTML comment, which won't be displayed on the web page but can be used for documenting the code.
📚Heading: <h1>Jessy, Wanna Cook?</h1> displays a level 1 heading with the text "Jessy, Wanna Cook?".
🖼Image: <img src="..." alt="Failed" /> inserts an image into the page with the specified source URL and an alternative text "Failed" that will be shown if the image cannot be loaded.

Page Structure-

HTML Tags🏷 and Their Usage

HTML is a versatile language with a wide range of tags to structure content and create interactive web pages. Understanding these tags is essential for building well-formatted and accessible websites. Let's explore some of the most commonly used HTML tags:

1. `<h1>`, `<h2>`, ..., `<h6>`📑

Headings are used to create different levels of headings on a web page, with <h1> being the highest level and <h6> the lowest. They are useful for dividing content into sections and creating a hierarchical structure.

Example:

https://codepen.io/ashutosh7i/pen/zYMMKrR

2. `<p>`📝

The <p> tag represents a paragraph of text. It is used to structure and separate blocks of text within the content.

Example:

<p>This is a paragraph of text.</p>
<p>Another paragraph here.</p>

3. `<a>`🔗

The <a> tag creates hyperlinks, allowing users to navigate to other web pages or resources. The href attribute specifies the URL of the linked page.

Example:

<a href="https://www.example.com">Visit Example Website</a>

4. `<img>`🖼

The <img> tag embeds images on a web page. The src attribute specifies the image URL, and the alt attribute provides alternative text that describes the image for accessibility.

Example:

<img src="image.jpg" alt="A beautiful landscape">

5. `<ul>`, `<ol>`, and `<li>` 📃

These tags are used to create lists on a web page. <ul> represents an unordered (bullet-point) list, <ol> represents an ordered (numbered) list, and <li> defines list items.

Example:

https://codepen.io/ashutosh7i/pen/poQQEye

6. `<div>` and `<span>`📦

The <div> tag is a block-level container used to group elements together, while the <span> tag is an inline-level container used to apply styles to specific parts of text.

Example:

https://codepen.io/ashutosh7i/pen/LYXXRNg

7. `<table>`, `<tr>`, `<th>`, and `<td>` 🗃

These tags are used to create tables for organizing tabular data. <table> defines the table, <tr> represents table rows, <th> represents table headers, and <td> represents table cells.

Example:

https://codepen.io/ashutosh7i/pen/MWzzjeo

8. `<form>`, `<input>`, and `<button>` 📝

The <form> tag is used to create interactive forms for user input. <input> elements inside the form define input fields, and <button> elements represent buttons.

Example:

https://codepen.io/ashutosh7i/pen/abQQmBK

9. `<iframe>` 🖼

The <iframe> tag embeds an inline frame that can display content from another web page within the current page.

Example:

<iframe src="https://www.example.com"></iframe>

10. `<audio>`🎵 and `<video>`🎥

These tags allow embedding audio and video content on a web page.

Example:

https://codepen.io/ashutosh7i/pen/mdQQrMd

🌟Other important HTML concepts-

1. Semantic HTML 🌐:

Semantic HTML involves using tags that carry meaningful information about the structure of the content. Instead of just using generic div containers for layout, you can use semantic elements like <header>, <nav>, <main>, <section>, <article>, <footer>, etc., to give your web page a clear and meaningful structure. Semantic HTML enhances accessibility and makes it easier for search engines to understand the content.

Example:

<html>
<header>
  <h1>Website Name 🏠</h1>
  <nav>
    <ul>
      <li><a href="#home">Home 🏡</a></li>
      <li><a href="#about">About </a></li>
      <li><a href="#contact">Contact 📞</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About Us </h2>
    <p>...</p>
  </section>
  <section id="contact">
    <h2>Contact Us 📞</h2>
    <p>...</p>
  </section>
</main>
<footer>
  <p> 2023 Your Company. All rights reserved. 📅</p>
</footer>
</html>

2. HTML Data Attributes 🔍:

HTML data attributes allow you to store custom data private to the page or application. They start with data- followed by your chosen attribute name. Data attributes are useful for storing additional information for JavaScript or CSS to interact with.

Example:

<div data-id="123" data-category="product">Product Card 🛍</div>

3. Importance of Proper HTML Usage :

Using HTML tags correctly and employing semantic elements and forms has several significant benefits:

Accessibility: Properly structured HTML using semantic elements improves website accessibility for people using assistive technologies, such as screen readers.
Search Engine Optimization (SEO): Search engines use the structure of your HTML to understand the content and relevance of your web pages, improving your website's search rankings.
Code Maintainability: Semantic HTML provides a more logical and organized structure, making it easier for developers to maintain and update the codebase.
Compatibility: Writing clean, valid HTML ensures that your website renders correctly across different browsers and devices.
User Experience: Well-designed forms enhance the user experience by providing clear input fields and validation messages.

4. HTML Validation :

To ensure your HTML code is error-free and adheres to the standard syntax, you can use online validators like the W3C Markup Validation Service. These validators help identify and fix any HTML errors, leading to a more robust and reliable website.

In this blog, we covered some of the fundamental HTML tags used for structuring content and creating interactive elements on a web page. As you continue to learn HTML, remember that there are many more tags and attributes available, each serving specific purposes. With practice, you'll become more proficient in using them to build dynamic and engaging web pages.

Stay curious and keep experimenting with HTML to unleash its full potential in web development. Happy coding! 🚀

Supercharge Your Coding Experience with Visual Studio Code🚀✨

Aashutosh Soni — Fri, 28 Jul 2023 06:55:59 +0000

Introduction🌟:

Visual Studio Code (VSCode) is a versatile and powerful code editor that has become a favourite among programmers and web developers due to its extensive set of features and customizability. In this blog, we'll explore how to set up Visual Studio Code for programming and web development, focusing on essential tools like formatters, code snippets, live code preview, HTML Emmet support, and more. By the end, you'll be equipped with the knowledge to optimize your coding workflow and boost productivity.🚀

Installation and Basic Setup:

Before diving into specific features, you need to install Visual Studio Code. Head over to the official website (https://code.visualstudio.com/) and download the appropriate version for your operating system. Once installed, launch VSCode and take a quick tour of the user interface to familiarize yourself with the editor's layout and basic functionalities.

### Formatter Tools and Prettier💅:

One of the key reasons developers love VSCode is its support for code formatting, making your code consistently organized and readable.

Prettier, a popular code formatter, integrates seamlessly with VSCode. Install the "Prettier - Code formatter" extension from the VSCode marketplace to enable automatic code formatting📦.

Installation - https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code

### Live Code Preview🌐:

For web developers, the "Live Server" extension is a game-changer. It allows you to preview your web pages live in the browser as you make changes to your HTML, CSS, and JavaScript files. Simply right-click on an HTML file and select "Open with Live Server" to see your changes instantly without manually refreshing the browser🔍.

Installation- https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

### Code Snippets💡:

Code snippets are pre-defined code blocks that you can quickly insert into your editor. VSCode provides built-in support for snippets and offers an extensive library of user-created snippets via extensions. For instance, you can use the "JavaScript (ES6) code snippets" extension to access common JavaScript code templates, saving you time and effort during development💻.

What i use- https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

### HTML Emmet Support🚀:

Emmet is a powerful tool for accelerating HTML and CSS coding. Fortunately, VSCode comes with Emmet support out of the box. With Emmet, you can write HTML and CSS code using shorthand abbreviations and expand them into complete markup.

For example, typing "div.container>p.title" and pressing the Tab key will generate the corresponding HTML markup: <div class="container"><p class="title"></p></div>.🔧

https://code.visualstudio.com/docs/editor/emmet

Useful Extensions🛠:

Conclusion📝:

Setting up Visual Studio Code for programming and web development can significantly enhance your coding experience. The combination of formatter tools like Prettier, live code preview, code snippets, and HTML Emmet support streamlines your workflow, making you more productive and efficient. Additionally, exploring the vast world of VSCode extensions allows you to customize the editor to suit your specific needs and preferences. With the right tools at your disposal, you'll be empowered to tackle projects with ease and deliver high-quality code in no time. Happy coding🚀!

Tips for Effective Bug Fixing and Troubleshooting in Web Development 🐞💡

Aashutosh Soni — Tue, 04 Jul 2023 13:30:39 +0000

As a web developer, you've probably encountered your fair share of bugs and issues in your projects. Bug fixing and troubleshooting are critical skills that can significantly impact your productivity and the quality of your web applications. In this blog post, I will share valuable tips, techniques, and tools to help you become more effective at identifying and resolving bugs. Let's dive in and improve our bug fixing skills! 💪🔧

0.What is a Bug?🐞

A computer bug is a mischievous little creature that sneaks into our digital world and causes mischief in our programs😂.

Back in the early days of computing, a real buga literal moth🪲found its way into a computer and caused a malfunction. The brave engineers, in their wit, called it a "bug" and decided to use the term for any unexpected issue in a computer program.

So, the next time you encounter a bug, just remember that it's not a creepy-crawly critter but a misbehaving line of code that needs some debugging magic!

more here-

https://education.nationalgeographic.org/resource/worlds-first-computer-bug/#undefined

1. Understand the Bug and Gather Contextual Information 🕵📋

When encountering a bug, it's essential to understand its nature and gather relevant contextual information. Pay attention to error messages, console logs, and any visual inconsistencies in your web application. Additionally, collect information about the user's browser, operating system, and the sequence of actions leading up to the error. This contextual information will help you replicate and diagnose the bug more effectively.

2. Efficient Google Searching and Utilizing Stack Overflow 🔍🔗

Google and Stack Overflow can be your best friends when it comes to troubleshooting. Mastering the art of efficient Google searching can lead you to relevant articles, documentation, and forum discussions that address similar bugs or issues. Use specific keywords, error messages, and include relevant technologies or frameworks in your search queries. Stack Overflow, in particular, is a treasure trove of developer solutions and community-driven support. Read through existing questions and answers to gain insights and possible solutions.

3. Leverage AI Chatbots and Code Debugging Assistance 🤖🧑💻

AI-powered chatbots, like ChatGPT & Bard, can assist you in code debugging and problem-solving. These chatbots utilize machine learning to understand and respond to your queries. You can provide them with code snippets, error messages, or a description of the issue, and they can suggest possible solutions or guide you in the right direction. While AI chatbots can be a helpful resource, remember to validate the suggestions and solutions they provide.

See what ChatGPT says-

4. Use Effective Debugging Techniques and Tools 🚀🔧

Effective debugging techniques and tools are invaluable in your bug fixing arsenal. Here are a few popular ones:

Browser Developer Tools : Every modern browser comes with powerful developer tools. Utilize features like the JavaScript console, network tab, and element inspection to debug and understand the behavior of your web application.
Logging and Debug Statements : Strategically place console.log statements in your code to track the flow of execution and identify any unexpected values or errors. Logging can provide valuable insights into the state of your application.
Code Profilers : Profiling tools help identify performance bottlenecks and memory leaks in your code. Tools like Chrome DevTools' Performance tab or the Node.js built-in profiler can pinpoint areas that require optimization.
Linters : Use linters like ESLint or Prettier to catch common coding mistakes, enforce code style guidelines, and improve code quality. Linters can help identify potential issues and enhance your debugging process.

5. Efficient Documentation and Code Examples 📚💻

Documenting your bug fixes, workarounds, and troubleshooting steps is crucial for future reference. Create a knowledge base or a personal wiki to store solutions and code snippets. Additionally, consider sharing your knowledge and experiences through blog posts, tutorials, or contributing to developer communities. Providing code examples and walkthroughs can be immensely helpful for fellow developers facing similar challenges.

6. Continuous Learning and Improvement 📖🌱

Web development is a constantly evolving field,

and new bugs and challenges emerge regularly. Stay updated with the latest technologies, frameworks, and best practices. Follow blogs, attend webinars, and participate in developer communities to learn from others and expand your troubleshooting skills.

Conclusion 🎉

Bug fixing and troubleshooting are critical skills for web developers. By adopting a systematic approach, leveraging effective debugging techniques, utilizing tools like Google, Stack Overflow, and AI chatbots, and documenting your solutions, you can enhance your ability to identify and resolve bugs efficiently. Remember to contribute to the developer community by sharing your experiences and code examples. Happy bug hunting! 🐞💻

I hope this blog post provides valuable insights and strategies for effective bug fixing and troubleshooting in web development. By following these tips and techniques, you can become a more proficient developer in handling bugs and delivering high-quality web applications.

You can check out My Github and Linkedin (Hyperlink)😊🚀

Getting Started with Web Development: Unleash Your Creativity! 🌐💻🚀

Aashutosh Soni — Mon, 03 Jul 2023 13:28:39 +0000

Welcome to the exciting world of web development! In this blog post, we will embark on a journey to explore the basics of web development, from HTML to CSS and JavaScript. Get ready to unleash your creativity and bring your ideas to life on the web! 🎉

HTML: Building Blocks of the Web🩻

HTML (Hypertext Markup Language) is the foundation of every web page. It provides the structure and content of a website. Here's a simple HTML code snippet that showcases the basic structure of a web page:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website!</h1>
    <img src="image.jpg" alt="Image">
    <p>Hello, world!</p>
  </body>
</html>

In the code above:

<!DOCTYPE html> defines the document type.
<html> is the root element of the HTML document.
<head> contains meta-information about the page.
<title> sets the title of the page.
<body> represents the visible content of the page.
<h1> is a heading element.
<img> displays an image on the page.
<p> represents a paragraph of text.

Start by creating an HTML file with the .html extension, and open it in a web browser to see your web page in action!

CSS: Styling the Web👦🏻

CSS (Cascading Style Sheets) allows you to style your web pages and make them visually appealing. Here's an example of CSS code that adds some style to our previous HTML page:

h1 {
  color: #ff0000;
  font-size: 24px;
}

p {
  color: #333333;
  font-size: 16px;
}

img {
  width: 200px;
  height: auto;
  border-radius: 50%;
}

In the code above, we target the h1, p, and img elements and apply various styles, such as colour, font size, and image properties. You can either include the CSS code in a <style> tag within the <head> section of your HTML file or link an external CSS file using the <link> tag.

Experiment with different CSS properties and values to customize the look and feel of your web page!

JavaScript: Adding Interactivity🧔🏻

JavaScript brings interactivity and dynamic behaviour to your web pages. It allows you to add functionality, handle user interactions, and manipulate the content of your website. Here's a simple JavaScript code snippet that adds a button to our web page:

<button onclick="myFunction()">Click Me!</button>

<script>
  function myFunction() {
    alert("Hello, World!");
  }
</script>

In the code above, we define a JavaScript function myFunction() that displays an alert message when the button is clicked. The onclick attribute attaches the function to the button's click event.

JavaScript code can be placed in the <script> tag within the HTML file, or it can be stored in an external JavaScript file and linked using the <script> tag.

Explore JavaScript's vast capabilities to enhance user interactions and add dynamic features to your web pages!

Building a Basic Portfolio👨🏻💼

Now that you have a solid understanding of HTML, CSS, and JavaScript basics, let's create a simple portfolio page to showcase your skills and projects. Here's a code snippet to get you started:

https://codepen.io/ashutosh7i/pen/qBQjWqX

In the code above, we've created a basic portfolio page with a header, sections for "About Me" and "Projects," and a footer with a link to your GitHub profile. Customize the content, add more sections, and style it according to your preferences using CSS.

Feel free to include additional elements, such as contact information, skills, or social media links, to make your portfolio unique and appealing.

my own Portfolio-

Conclusion

Congratulations on taking your first steps into the exciting world of web development! You've learned the basics of HTML, CSS, and JavaScript, and even built a simple portfolio page to showcase your skills. Keep exploring, practising, and diving deeper into these technologies to become a proficient web developer.

I highly recommend this Repository of mine for web Dev resources-

https://github.com/ashutosh7i/Get_Started_in_WebDev

In future blogs, we will delve into more advanced topics and techniques to help you elevate your web development skills. Stay tuned, and happy coding! 🌟💻🚀

You can check out My Github and Linkedin (Hyperlink)😊🚀

Automating Deployment with GitHub Actions and GitHub Pages 🚀🔧

Aashutosh Soni — Sun, 02 Jul 2023 13:54:39 +0000

In this blog post, we will explore how to automate the deployment of your web application using GitHub Actions and GitHub Pages. By setting up a GitHub Actions workflow, you can publish your application to GitHub Pages whenever you push changes to your repository. Let's get started! 💪🌐

What is GitHub Actions💡?

GitHub Actions is a powerful automation platform provided by GitHub. It allows you to define custom workflows that can be triggered based on events, such as pushing code changes, opening pull requests, or creating releases. With GitHub Actions, you can automate various tasks in your development workflow, including building, testing, and deploying your applications.

Setting up GitHub Pages📄

Before we dive into setting up the GitHub Actions workflow, let's make sure you have GitHub Pages enabled for your repository. Here's how you can enable it:

Go to your repository on GitHub.
Click on the Settings tab.
Scroll down to the GitHub Pages section.
Select the branch you want to use for GitHub Pages (e.g., main or master).
Choose the root folder for your GitHub Pages site (e.g., /root or /docs).
Click Save.

GitHub Pages will now be enabled for your repository, and your website will be published at https://your-username.github.io/your-repository/.

Setting up GitHub Actions Workflow

Now that GitHub Pages is enabled, let's create a GitHub Actions workflow that automatically deploys your application whenever changes are pushed to the repository. Create a file named .github/workflows/deploy.yml with the following content:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # Replace with your branch name

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Build and deploy
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          branch: gh-pages
          folder: ./portfolio # Replace with the folder containing your built files

In the above workflow, we define a job named deploy that runs on each push event to the specified branch (main by default). It uses the actions/checkout action to fetch the repository's code. Then, it uses the JamesIves/github-pages-deploy-action action to build the application and deploy it to the gh-pages branch.

Make sure to replace the branch name and folder path in the workflow file with your actual branch name and the folder where your built files are located.

Commit and push the workflow file to your repository, and GitHub Actions will automatically kick in whenever you push changes.

Creating a Simple Portfolio🧑🏻💻

Now, let's create a simple portfolio webpage that we can deploy using GitHub Pages. Create an index.html file with the following content:

<!DOCTYPE html>
<html>
  <head>
    <title>My Portfolio</title>
  </head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    header {
      display: flex;
      align-items: center;
      padding: 20px;
    }
    header img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-right: 20px;
    }
    section {
      padding: 20px;
    }
    h1,h2 {
      color: #333;
    }
    footer {
      background-color: #f5f5f5;
      padding: 20px;
      text-align: center;
    }
    footer a {
      margin-right: 10px;
    }
  </style>
  <body>
    <header>
      <img src="https://github.com/ashutosh7i.png" alt="Profile Picture">
      <h1>Aashutosh Soni</h1>
    </header>
    <section>
      <h2>About Me</h2>
      <p>I'm a passionate web developer with experience in HTML, CSS, and JavaScript. I love creating beautiful and interactive web applications.</p>
    </section>
    <section>
      <h2>Projects</h2>
      <ul>
        <li>
          <a href="https://github.com/ashutosh7i">Project 1</a>
        </li>
      </ul>
    </section>
    <footer>
      <a href="https://github.com/ashutosh7i">GitHub</a>
      <a href="https://linkedin.com/in/ashutosh7i">LinkedIn</a>
    </footer>
  </body>
</html>

Update the above page, Place a profile picture in the same directory as your HTML file and replace it with "https://github.com/ashutosh7i.png" for your photo.

Commit and push these files to your repository.

More in out Getting started with Web Dev blog

Testing the Deployment🧪

To test the deployment, make some changes to your web application code and push the changes to your repository. GitHub Actions will run the workflow, build your application, and deploy it to GitHub Pages.

Once the workflow finishes running, visit https://your-username.github.io/your-repository/ to see your deployed portfolio live!

Conclusion

By utilizing GitHub Actions and GitHub Pages, you can automate the deployment process for your web applications, making it easier to publish and share your work with the world. With this simple setup, your application will be automatically deployed to GitHub Pages whenever you push changes to your repository.

In addition to automating deployment, you can create a portfolio webpage to showcase your projects and skills. Customize the HTML and CSS code to reflect your own information and style.

Explore more possibilities with GitHub Actions and experiment with different workflows to streamline your development process. Happy coding, deploying, and showcasing your talent! 🚀💻🌐

You can check out My Github and Linkedin (Hyperlink)😊🚀

Mastering GitHub: Empowering Collaboration and Automation 🚀🔗

Aashutosh Soni — Sat, 01 Jul 2023 12:51:32 +0000

In a previous blog post, we explored the fundamentals of Git, the powerful version control system that every developer should know. If you haven't checked it out yet, make sure to read my Mastering Version Control with Git blog. In this post, we will take our development workflow to the next level by diving into GitHub, a web-based platform built on top of Git, designed to enhance collaboration, automate workflows, and showcase your projects to the world. Let's unleash the power of GitHub! 💪😎

What is GitHub💡?

GitHub is a popular code hosting and collaboration platform that provides a wide range of features to streamline the development process. It allows developers to host their Git repositories, manage code versions, collaborate with others, and leverage various tools and services. GitHub offers an intuitive web interface and integrates seamlessly with Git, making it a go-to platform for open-source projects, team collaborations, and personal repositories.

Getting Started with GitHub🤔

If you haven't created a GitHub account yet, head over to github.com and sign up. Once you're ready, you can create a new repository by following these simple steps:

Click on the "New" button in the top-left corner of your GitHub dashboard.
Give your repository a meaningful name, choose its visibility (public or private), and optionally add a description.
Initialize the repository with a README file, which serves as a starting point for your project.
Finally, click on the "Create repository" button, and congrats🎉, your repository is ready!

Collaboration with GitHub🤝

GitHub excels at enabling collaboration among developers and teams. Here are some key features that make collaboration seamless:

Pull Requests and Code Reviews🤓

Pull requests (PRs) are the heart of collaboration on GitHub. They allow developers to propose changes, discuss code, and review each other's work. Here's how it works:

Fork a repository or create a new branch in the repository you want to contribute to.
Make your changes and push them to your branch.
Open a pull request, comparing your branch to the original repository's branch.
Discuss the changes, address feedback, and collaborate with the repository maintainers.
Once the changes are approved, the maintainers can merge the pull request, incorporating your contributions into the main codebase.

Issue Tracking and Project Management🧑🏻💼

GitHub provides a robust issue-tracking system, allowing you to create, assign, and track issues or feature requests. You can also organize your work using project boards, milestones, and labels. These features help streamline project management and keep track of tasks and progress.

GitHub Actions: Automate Your Workflow💪🏻

GitHub Actions allows you to automate your development workflows by creating custom workflows and tasks. You can define workflows using YAML syntax, which specifies triggers, jobs, and steps. Here's an example of a simple workflow that runs tests and deploys your application to a server:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm run test

      - name: Deploy to server
        uses: some-deployment-action
        with:
          server: example.com
          username: ${{ secrets.SSH_USERNAME }}
          password: ${{ secrets.SSH_PASSWORD }}

No issue if you didn't understand the above snippet🤯, Here is a specific blog on GitHub actions for a more detailed explanation.

GitHub Actions can be used for a wide range of tasks, such as running tests, building and deploying applications, scheduling jobs, and more. Explore the GitHub Actions Marketplace for pre-built actions or create your custom workflows.

GitHub Pages: Showcasing Your Projects😎

GitHub Pages allows you to host static websites directly from your repositories. Whether it's a personal portfolio, a project documentation site, or a blog, GitHub Pages makes it easy to publish your content. Simply create a branch called gh-pages, configure your settings, and your site will be live at https://your-username.github.io/repository-name.

Mine is at ashutosh7i.github.io

Conclusion

GitHub is not just a code hosting platform; it's a powerful tool that empowers collaboration, automates workflows, and showcases your projects to the world. By harnessing the features of GitHub, you can take your development projects to new heights, whether you're working on an open-source contribution or building your personal portfolio. So, dive in, explore its features, and let GitHub revolutionize the way you collaborate and automate your development process. Happy coding! 😄🎉

Don't forget to check out my previous blog on Mastering Version Control with Git to enhance your understanding of Git and Git workflows.

You can check out My Github and Linkedin (Hyperlink)😊🚀

Version Control with Git: A Dev's Best Friend 🌟

Aashutosh Soni — Sat, 01 Jul 2023 12:01:05 +0000

As a developer, you might have heard about Git, a powerful version control system that revolutionized the way we collaborate and manage code. In this blog post, we will explore the fundamentals of Git, including repository management, branching, merging, and collaborating with other developers. Let's dive in and master Git! 💻🚀

What is Git?💡

Git is a distributed version control system made by Linux Torvalds, The same guy who made Linux (read my Linux article here) designed to track changes in your codebase and facilitate collaboration among developers. It allows you to keep a complete history of your project, create branches for different features, merge changes seamlessly, and easily revert to previous versions if needed. Git's popularity stems from its speed, efficiency, and flexibility.

Setting Up Git🧑🏻💻

Before we begin, ensure that you have Git installed on your system. You can download and install Git by following the instructions on the official website (link: git-scm.com/downloads).

Once installed, open your terminal and configure your name and email address:

git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"

Git Basics 📚

Creating a Repository🧑🏻🔧

To start using Git, you need to initialize a repository. Navigate to your project directory and run the following command:

git init

Tracking Changes

Git tracks changes made to files within your repository. To add files for tracking, use the following command:

git add filename

Committing Changes

Once you've added files, it's time to commit your changes. A commit is like taking a snapshot of your code at a specific point in time. Use the following command to create a commit:

git commit -m "Your commit message"

ProTip- keep the commit message meaningful so Other developers and you in the future grasp the code easily, There is a standard around this, it is called "Conventional commit messages", more here

Example-

git commit -m "feat: Add user authentication feature"
git commit -m "fix: Resolve issue with login page not rendering properly"

Branching🌿

Branching allows you to create independent lines of development. To create a new branch, use the following command:

git branch branch_name

Switching Branches

To switch to a different branch, use the following command:

git checkout branch_name

Merging Branches

Merging combines changes from one branch into another. To merge a branch, switch to the target branch and run the following command:

git merge source_branch

Collaborating with Other Developers

Git enables seamless collaboration with other developers. You can share your code by pushing your local changes to a remote repository and pull changes made by others. Use the following commands:

git push origin branch_name
git pull origin branch_name

Best Practices and Tips

To make the most out of Git, here are some best practices and tips:

Commit Frequently : Commit small, logical changes with descriptive commit messages.
Use Meaningful Branch Names : Choose meaningful names that reflect the purpose of the branch.
Write Good Commit Messages : Provide clear and concise messages that explain the changes made in the commit.
Pull Before Push : Always pull the latest changes from the remote repository before pushing your changes.
Use .gitignore : Create a .gitignore file to exclude files and directories that should not be tracked by Git (e.g., temporary files, dependencies).
Review Pull Requests : When collaborating with others, carefully review and test code changes before merging.

Start Mastering Git Today!🚀

With its powerful features and versatility, Git is a developer's best friend. By mastering Git, you can effectively manage your code, collaborate seamlessly with others, and maintain a clean and organized project history.

Keep practising, exploring advanced Git workflows, and learning from the vibrant Git community. Happy coding! 🎉😄

Getting Started with Linux 🐧

Aashutosh Soni — Sat, 01 Jul 2023 09:36:17 +0000

Are you ready to embark on a journey into the world of Linux? 🌍 In this blog post, we'll cover the basics of Linux, introduce you to the legendary Linus Torvalds, and provide you with some essential Linux commands and packages to kickstart your Linux adventure. Let's dive in! 💻

What is Linux?

Linux is a free and open-source operating system that powers millions of devices around the globe. 🌐 It was created by Linus Torvalds in 1991 and has since become a cornerstone of the software development and server administration worlds. Linux offers a powerful, customizable, and secure environment for both beginners and advanced users.

Meet Linus Torvalds 🤝

Linus Torvalds, a Finnish-American software engineer, is the mastermind behind Linux. He conceived the idea of a new operating system while studying at the University of Helsinki. Linus released the first version of Linux as an open-source project, allowing anyone to modify and distribute it freely. His contributions to the world of technology have been nothing short of revolutionary. 🌟

Basics of Linux 📚

Command Line Interface (CLI) 💡

Unlike other operating systems that rely heavily on graphical user interfaces, Linux offers a powerful Command Line Interface (CLI) that allows you to interact with the system using text commands. Embracing the CLI will give you more control and flexibility over your Linux experience.

Essential Linux Commands

Here are a few essential Linux commands to get you started:

ls: List files and directories.
cd: Change directory.
mkdir: Create a new directory.
rm: Remove files and directories.
nano: A simple text editor.
grep: Search for patterns in files.
chmod: Change file permissions.
sudo: Execute commands with administrative privileges.

Package Management with APT 📦

APT (Advanced Package Tool) is a powerful package management system in Linux. It simplifies the installation, removal, and update of software packages. To install a package using APT, you can use the following command:

sudo apt install package_name

Replace package_name with the name of the package you want to install for ex- firefox.

However, you have to first update older packages/ fetch data for that use-

sudo apt update && sudo apt upgrade

after running this command installation will work fine.

Stay Motivated and Inspired!

Learning Linux can be challenging at times, but don't get discouraged! Embrace the journey, and remember that every expert was once a beginner. Surround yourself with a supportive community of Linux enthusiasts, join forums, and ask questions. You'll be amazed at how quickly you'll grow your skills.

Also, a personal disclaimer, try Linux on a virtual machine or on the cloud,

don't try to install Linux on Dual Boot or as Primary OS on the first day😂, it hurts🥲🥲😂, Contact me if already did and we will figure it out😂

Follow me on my Linux adventures on my blog at Ashutosh7i.hashnode.dev or connect on LinkedIn and Twitter and let's explore the limitless possibilities of Linux together! 🚀

Happy Linuxing! 🐧💻

What is MVC? => 🤔 to 🤩.

Aashutosh Soni — Sat, 06 May 2023 09:51:27 +0000

What is MVC?

MVC stands for Model View Controller.
MVC is a Applicaton designing Architecture used to standerize an application for production level, by using MVC your application becomes more easy to develop with a team.
MVC is a industry standard and a Best Practise.

Model

Model handles the database part of an application, its main task is to interact with a database/storage and read/write data to it, a model is accessible by Controller.

The model determines how a database is structured, defining a section of the application that interacts with the database. This is where we will define the properties of a user that will be store in our database.

View

View handles the presentation part of an applicaion, its main task it to create presentation for the user using the data provided by the controller, it used a template for this process.

The view is where end users interact within the application. Simply put, this is where all the HTML template files go.

Controller

The controller interacts with the model and serves the response and functionality to the view. When an end user makes a request, it’s sent to the controller which interacts with the database.

You can think of the controller as a waiter in a restaurant that handles customers’ orders, which in this case is the view. The waiter then goes to the kitchen, which is the model/database, and gets food to serve the customers, which is the controller handling the request.

Routes

Route folder contain routes for diffrent endpoints of an application.

Work-Flow.

Repo:- https://github.com/ashutosh7i/Learning_MVC-Node-Express

The whole flow is described in the index.js file of an app, it is the entry point for any MVC application.
Firstly the request is handles by the routes, routes is an index file that handles all request sent to the server,
Then the routes pass the request to the appropriate controller.
Contoller then uses its internal logics to process the request,it interacts with the model.
Model is uses to fetch and send back information to the database,and then to controller.
Controller then processed the information and sends it to views.
Views create a presentation for that information.and sends the presentation (HTML) back to the controller,
And at last, the controller shows the information back to the user.
This is the working flow of a MVC application.

Implementation in Express&Node.

A Standarized MVC Application looks like this-
[ the repo 😂]

The requests can be sent to this server/app,

send a GET request to localhost:3000/users to get all users.
send a POST request to localhost:3000/users to add a new user.
send a DELETE request to localhost:3000/users to delete a user.

Flow in our Application-

Server is started from index.js, then index.js tells routes to handle upcoming requests,
Routes handles types of request and tells the respective controller to process the request,
Contoller handles the request and uses diffrent models to manipulate the data,
Models works with database(inbuilt here) & gives response to controller,
Views (router again here) makes presentation & gives response to controller.
Controller sends the presentation back to user using routes.

Notes-

Any middleware required/imported on the main index.js page, will be availble to any page which will have instance to main page. eg- the express.json allows to pass the request body(req.body.anyJsonKeyName). without it we wont be able to parse it, in the controller page, we needed it, but we didnt required it, it worked out of the box. more on that page.
The app.route(...) chainable handler & the express.Router() class can be chained together, to make chainable request handler and exported simultaneously. as done it routes.

This is what i learnt about MVC in a day, remained confused for a while about MVC before today, but after implementing it today, everything is crystal clear✨

Hope it helps.😉🚀

How to Center a Div?

Aashutosh Soni — Fri, 17 Mar 2023 17:56:29 +0000

There are two Most used ways of centering a Div-

First Method-

display: flex
justify-content: center
align-items: center

Second Method-

display: grid
place-items: center

Forem: Aashutosh Soni

How to Create a Virtual Machine in Azure

Step by Step instructions-

📝 What is RSS Feed and How I Used It to My Advantage 🌐

Introduction to RSS Feed 📰

How RSS Feed Works?🔄

🌟Now Comes the "I have an Idea🤩!" Moment 💡

The Dynamic Component! 🎉

Fetching, Parsing, and Creating Magic!

Let's Talk Code-

Other Possibilities with RSS Feed 🌟

All you need to Know about HTML

What is HTML?🌐

How HTML looks? 🎨

Page Structure-

HTML Tags🏷 and Their Usage

1. <h1>, <h2>, ..., <h6>📑

2. <p>📝

3. <a>🔗

4. <img>🖼

5. <ul>, <ol>, and <li> 📃

6. <div> and <span>📦

7. <table>, <tr>, <th>, and <td> 🗃

8. <form>, <input>, and <button> 📝

9. <iframe> 🖼

10. <audio>🎵 and <video>🎥

🌟Other important HTML concepts-

1. Semantic HTML 🌐:

2. HTML Data Attributes 🔍:

3. Importance of Proper HTML Usage :

4. HTML Validation :

Supercharge Your Coding Experience with Visual Studio Code🚀✨

Introduction🌟:

Installation and Basic Setup:

Conclusion📝:

Tips for Effective Bug Fixing and Troubleshooting in Web Development 🐞💡

0.What is a Bug?🐞

1. Understand the Bug and Gather Contextual Information 🕵📋

2. Efficient Google Searching and Utilizing Stack Overflow 🔍🔗

3. Leverage AI Chatbots and Code Debugging Assistance 🤖🧑💻

4. Use Effective Debugging Techniques and Tools 🚀🔧

5. Efficient Documentation and Code Examples 📚💻

6. Continuous Learning and Improvement 📖🌱

Conclusion 🎉

Getting Started with Web Development: Unleash Your Creativity! 🌐💻🚀

HTML: Building Blocks of the Web🩻

CSS: Styling the Web👦🏻

JavaScript: Adding Interactivity🧔🏻

Building a Basic Portfolio👨🏻💼

Conclusion

Automating Deployment with GitHub Actions and GitHub Pages 🚀🔧

What is GitHub Actions💡?

Setting up GitHub Pages📄

Setting up GitHub Actions Workflow

Creating a Simple Portfolio🧑🏻💻

Testing the Deployment🧪

Conclusion

Mastering GitHub: Empowering Collaboration and Automation 🚀🔗

What is GitHub💡?

Getting Started with GitHub🤔

Collaboration with GitHub🤝

Pull Requests and Code Reviews🤓

Issue Tracking and Project Management🧑🏻💼

GitHub Actions: Automate Your Workflow💪🏻

GitHub Pages: Showcasing Your Projects😎

Conclusion

Version Control with Git: A Dev's Best Friend 🌟

What is Git?💡

Setting Up Git🧑🏻💻

Git Basics 📚

Creating a Repository🧑🏻🔧

Tracking Changes

Committing Changes

Branching🌿

Switching Branches

Merging Branches

Collaborating with Other Developers

Best Practices and Tips

Start Mastering Git Today!🚀

Getting Started with Linux 🐧

1. `<h1>`, `<h2>`, ..., `<h6>`📑

2. `<p>`📝

3. `<a>`🔗

4. `<img>`🖼

5. `<ul>`, `<ol>`, and `<li>` 📃

6. `<div>` and `<span>`📦

7. `<table>`, `<tr>`, `<th>`, and `<td>` 🗃

8. `<form>`, `<input>`, and `<button>` 📝

9. `<iframe>` 🖼

10. `<audio>`🎵 and `<video>`🎥