teleren/devto huggingface dataset:
How to create or write HTML code as example in Visual Studio Code(VS Code)
Tags: webdev, html, coding, learning
Published: 2024-06-30 15:43:02

## **Method of writing HTML code in VS Code**
Writing HTML code in Visual Studio Code (VS Code) is straightforward and follows these steps:
**Open VS Code**: Launch the Visual Studio Code editor on your computer.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axr0g2ucj99pv6dxidmh.png)
## **Create a new folder**
After opening the VS code, set up the new folder.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux7cibt1hbyggh32n0z9.png)
**Create a New File**: Either open an existing HTML file or create a new file by selecting File > New File from the menu, or using the shortcut Ctrl + N (Windows/Linux) or Cmd + N (Mac).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r931hzpd9z3vtyjh1aol.png)
**Set File Type**: If you created a new file, save it with an .html extension. This helps VS Code recognize it as an HTML file and provides syntax highlighting and other helpful features.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85v7kcwvph4ez4him3kz.png)
**Start Writing HTML**: Begin writing your HTML code. VS Code provides autocomplete suggestions and syntax highlighting to assist you as you type.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edxnrojtnc1idzso4lao.png)
**Code Formatting**: VS Code can automatically format your HTML code for consistency. Use Shift + Alt + F (Windows/Linux) or Shift + Option + F (Mac) to format the entire document or a selected portion.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d09qeskurr7xf6mw3gvu.png)
**Preview in Browser**: You can install extensions like "Live Server" or simply open the HTML file in a web browser to preview your webpage.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l84fvkskq7427mk04gpz.png)
**Save Your Work**: Remember to save your changes periodically (Ctrl + S or Cmd + S) to keep your HTML file up to date.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ymor7e9vckppechi5kf.png)
## **Running of Code with Live Server**
After writing the coding, the written code is run with Live Server
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxs3hm6y9sx6qld8y5bl.png)
Python Development Environment on WSL2
Tags: python, development, microsoft, wsl2
Published: 2024-06-30 15:31:48

This Post guides you through how to setup a python development environment on Windows Sub-System for Linux(wsl2).

**What is WSL2?** 

wsl2 lets a windows user use a virtual linux environment on Windows Machine itself. This is pretty handy feature for quick development needs on your local machine. 

Below Steps would list what all are the pre-requisites for achieving a python development environment on Windows Machine:

- Installing WSL2: https://learn.microsoft.com/en-us/windows/wsl/install

- Install Microsoft Visual Studio code for Windows platform: https://code.visualstudio.com/ 

- Install the Remote WSL Extension on VSCode: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

- Once Wsl2 (at step 1) in installed open an Ubuntu terminal and verify if Python3 is installed using `python3 --version`.

- If Python3 is not installed then do the following:
```
sudo apt update
sudo apt install python3 python3-pip python3-venv
```
**NOTE** : Above command will install python3 , pip tool and python virtual environment package.

- To create a _**Virtual Environment**_ Open the WSL2 Terminal and create your python project directory using command `mkdir <YOUR_PROJECT_NAME>` and then inside it run
`source .venv/bin/activate` to activate the Virtual Environment where **_.venv_** is your virutal environment name.

**NOTE**: Recommendation is creating the virtual environment inside the directory in which you plan to have your project. Since each project should have its own separate directory, each will have its own virtual environment, so there is not a need for unique naming

- To exit from virtual environment run on wsl2 terminal: `deactivate`

**Reference:** https://learn.microsoft.com/en-us/windows/python/web-frameworks
AWS Cloud Cost Optimization - Identifying Stale Resources
Tags: cloud, costoptimization, aws, lambda
Published: 2024-06-30 15:28:14



![Lambda function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lptkl1hroz0qe7if2u8.jpeg)


![permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35pavkf55tvqje6i73yi.jpeg)

![Policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aut4h59wkl29yu89odwt.jpeg)




In the fast-paced world of cloud computing, managing costs efficiently is crucial for any business. I'm thrilled to announce that I've recently completed a mini-project focused on cost optimisation in AWS, using AWS Lambda, IAM roles, and policies.

🔍 Project Highlights:

AWS Lambda Functions: Automated routine tasks, eliminating the need for manual intervention and reducing operational costs.
IAM Roles and Policies: Ensured secure and efficient access control, allowing only necessary permissions to optimize cost and enhance security.

 This project has been a great opportunity to deepen my understanding  of AWS and cloud cost management strategies.

GitHub Repo - https://github.com/SNS-Srinivasu
Linkedin - https://www.linkedin.com/in/sns-srinivasu
Frontend Face-Off: React vs. Vue.js - An HNG Intern's Perspective
Tags: hng
Published: 2024-06-30 15:18:55

Ever wondered which tool to use to build awesome websites? Today, we compare two frontend titans: ReactJS (the one we use at HNG [link to HNG Internship website, https://hng.tech/internship]) and Vue.js! Both are JavaScript libraries that help you create dynamic and interactive web experiences, but they have their own strengths.

React: The OG of Web Frameworks

React, developed by Facebook, is the undisputed king of frontend development. It boasts a massive community, tons of helpful tools, and a wide range of libraries. Building complex web applications with React is like having a whole army of developers at your back. Plus, its virtual DOM keeps things organized and efficient.

The downside to learning React is it can be a bit steeper due to its JSX syntax and the need for additional tools for state management and routing.  Sometimes, websites built with React can be a bit on the bigger side.

Vue.js: The Simpler Choice

Vue.js is like the friendly neighborhood Spider-man of frontend frameworks. It's powerful, yet easy to learn, with a clean and concise syntax. Plus, it offers a good balance between features and simplicity, making it a great choice for both small and large projects.

The downside is while Vue.js has a strong community, it might not be as vast as React's. Additionally, the job market might favor React experience in some cases.

My HNG Journey: Gearing Up with React

As an HNG Intern  https://hng.tech/internship, I'm excited to delve into the world of React development. The program's focus on React aligns perfectly with my interest in building dynamic web experiences. I'm eager to leverage React's robust framework and vast learning resources to hone my skills and contribute to real-world projects.

The Verdict: It Depends on Your Project

So, which one wins? It depends on your needs! React is the industry standard, perfect for complex projects and those seeking a well-trodden development path. Vue.js, on the other hand, offers a smoother learning curve and a good balance of features for projects of all sizes.

React empowers you to build a feature-rich application for an HNG Internship challenge [link to HNG Internship website, https://hng.tech/internship]. As HNG emphasizes continuous learning [link to HNG Internship website, https://hng.tech/premium], experimenting with various frontend technologies is a fantastic way to broaden your skillset and become a well-rounded developer.
.present? VS .any? VS .exists?
Tags: rails, database, queries, sql
Published: 2024-06-30 15:13:49


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb165na0a56kjd20spwr.jpg)

Something I have a difficult time wrapping my head around as a newbie is how actually super important it is to care about query speeds.
Different methods will have _vastly_ different query speeds, and it's therefore to my advantage to understand how they actually work, in order to use the one that will do what I want while keep everything running smooth.

Here are three methods I've been using recently that kind of look the same, but run differently in the background and therefore have different uses!

- **.present?**
```
[ "", " ", false, nil, [], {} ].any?(&:present?)
# => false
```
This one tests for an object's general falsiness. As per the documentation, "An object is present if it’s not `blank?`. An object is blank if it’s false, empty, or a whitespace string."
Very important to point out that `.present?` initializes ActiveRecord for each record found(!). It effectively goes through the whole relevant database available.

- **.any?**
```
person.pets.count # => 0
person.pets.any?  # => false
```
This one will use a SQLCount to see if it's > 0, and therefore, although faster than `.present?`, still takes time and queries the database multiple times.

- **.exists?**
```
Note.create(:title => 'Hello, world.', :body => 'Nothing more for now...')
Note.exists?(1) # => true
```
This one, according to the documentation, "asserts the existence of a resource, returning true if the resource is found."
The beauty of `.exists?` is that it uses SQL LIMIT 1 to just check if there's at least one record, without loading them all or counting them all!
In a case where I just want to know if an object is there or not, this is without a doubt the best option.

And now to remember these three...

Let's do our best!
Networking-Architecture-using-Terraform
Tags: aws, terraform
Published: 2024-06-30 15:03:29

![ Networking-Architecture-using-Terraform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awfun326fssurfzhnehx.jpeg)


🖥 Excited to Share My Latest Project with AWS and Terraform! 

I am thrilled to announce that I have recently completed a small but impactful project leveraging AWS and Terraform. This hands-on experience has been incredibly rewarding and has significantly deepened my understanding of cloud infrastructure and automation.
Throughout this project, I utilized AWS's comprehensive documentation and Terraform's resources to guide me. This approach allowed me to dive deep into AWS, gaining practical insights and skills that are essential for modern cloud environments.

Key takeaways from this project:

1) Hands-on experience with AWS and Terraform configurations.
2) Enhanced understanding of cloud infrastructure as code.
3) Improved ability to navigate and utilize extensive technical   documentation.

This project has not only broadened my technical skill set but also reinforced the importance of continuous learning and adaptation in the ever-evolving tech landscape.

GitHub Repo - https://github.com/SNS-Srinivasu
Linkedin - https://www.linkedin.com/in/sns-srinivasu
About using Microsoft office 365 (offline version) for free
Published: 2024-06-30 14:52:16

As a budding Data Analyst, I have encountered challenges with utilizing Microsoft 365 due to financial constraints. I am seeking guidance on how to access or download Microsoft Office 365 for free in its offline version. This is important as certain functionalities I require are not available in the online version. Your help in this matter would be greatly appreciated.
React vs. Vue: Frontend Duel.
Tags: webdev, javascript, frontend, programming
Published: 2024-06-30 14:42:00

Hey folks,
I’ve been diving into two awesome frontend technologies: React and Vue. Both are super powerful but have their own vibes. Since I use ReactJS a lot, I thought it’d be cool to explore Vue too, which i did but for a short period of time. So, here’s what I found:
Let's start with react;
React is a library for building user interfaces with components and a virtual DOM and as we all know it was made by Facebook.
Why I prefer React:
1. Component-Based: It is components based, and with that you can be able to use a particular UI in any other place on your work environment.
2. Flexible: Mix and match with other tools and frameworks.
 But, it has some downsides;
1.Learning Curve: The filename JSX can be weird at first.
2. Also, many setups before starting to work with it.

Now, let's talk about VUE
Vue is a progressive framework built on top of standard HTML, CSS and JavaScript.
Why It Rocks:
1. Easy to Learn: Simple syntax, great for beginners.
2. Single-File Components: Keep HTML, JS, and CSS in one place.
3. Reactivity: State management is straightforward.

Downside:
Smaller Ecosystem: Not as many third-party tools as React.

         THEIR DIFFERENCES
Learning Curve: 
a. React: Steeper, especially with JSX.
b. Vue: Easier to pick up.

Ecosystem:
a. React: Huge.
b. Vue: Growing but smaller.

Performance:
Both are fast but handle updates differently.

Final Thoughts
React and Vue both kick butt. React's robustness is great for big projects, while Vue’s simplicity is perfect for getting started quickly. Exploring both is fun, but React remains my top choice for building scalable apps.

How I Plan to Use React in HNG
1.Building User Interfaces: I’m using React to create clean, reusable components that make our UIs look great and function smoothly.
2.State Management: With tools like Context API, I’ll manage complex state across our app, ensuring everything works seamlessly.

Check out more about the HNG Internship program via  https://hng.tech/internship or https://hng.tech/hire.
React vs Flutter
Tags: webdev, flutter, react, beginners
Published: 2024-06-30 14:36:59

Getting into the field of frontend web development can be exciting and at the same confusing. Here you'll discover that there are myriads of tools to get the job done. The thought of what tool to use can become a hindrance to productivity.In this article, we compare and contrast two well-known web technology tools; Reactjs and Flutter.

##What is React?
ReactJs or React is a javascript library that was built and is maintained by Facebook. It makes use of components(individual pieces of code) to build user interfaces. It is best used in building SPAs(Single Page Applications).

##What is Flutter?
Flutter is a framework developed by Google for building native applications from a single codebase. It uses the Dart programming language.Flutter is used to build mobile applications but is also used in building desktop applications and web apps.

##React Or Flutter :confused: ?
Well, suffice it to say it depends on the usecase. Each one of them is tailored towards solving a peculiar problem. For instance, React is best suited for web applications. This does not mean it cannot for mobile development, in fact, React-Native(used for mobile development) competes with Flutter in this field.
Flutter can best be used when a mobile and a web version of a product is both needed. With flutter, there's no need to rewrite the codebase.

##Conclusion
I know, I know :smiley:, I barely scratched this topic but you are free to read more on [react](https://react.dev/) and on [flutter](https://docs.flutter.dev/). Truth is, it depends on what tools are best for the particular task at hand. This can be influenced to a large extent by your team's decision. For instance, in a program that I'm a part of; [HNG](https://hng.tech/internship) internship, ReactJs is the preferred tool. The Program also [hires](https://hng.tech/hire) frontend developers.
The field of frontend development has myriads of tools that sometimes do the same thing or sometimes tailored to a particular task. It's up to you as a developer to choose from these tools what you need.
My Journey of Taming Transitive Dependencies in Spring Boot
Tags: java, springboot, developers, softwareengineering
Published: 2024-06-30 14:29:27

The beauty of being a Software Developer lies in the endless journey of learning and overcoming challenges. Among the myriads of obstacles I’ve faced, one stands out as particularly overwhelming: **_Managing Transitive Dependencies in my Spring Boot application using Maven_**. 

This is the tale of my struggle, frustration, and ultimate triumph, a journey I hope will resonate with and inspire fellow developers.

My application was humming along nicely, bugs were getting fixed, and then....... everything came to a complete stop. Error messages about version conflicts littered my console, and my once cooperative dependencies seemed to be at war with each other.

I was confused. How could everything have gone so wrong so quickly? I dove into documentation, checked Stack Overflow, and watched video tutorials. Yet, the more I read, the more confused I became. I was completely lost.

My application still refused to cooperate. Dependencies that once played nicely together were now in conflict. It was as if my project had developed a mind of its own. I learned that the root of the problem lay in transitive dependencies, those hidden, indirect dependencies that came along for the ride when I included a library in my project. 

Understanding transitive dependencies is one thing, managing them is another beast entirely. It wasn’t just about knowing which libraries depended on what, it was about ensuring that all these dependencies played nicely together. 

After countless hours of trial and error, something clicked. I discovered that Maven offers a mechanism to control these dependencies through the `dependencyManagement` section in the `pom.xml` file.

Here’s an example of how I used `dependencyManagement` to resolve my conflicts:

```
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.example</groupId>
            <artifactId>problematic-library</artifactId>
            <version>1.2.3</version>
        </dependency>
    </dependencies>
</dependencyManagement>
```

The day my application finally built successfully was one of the most satisfying days of my career. The struggle had been real, the frustration intense, but the victory was sweet. I had not only solved the problem but also gained a deeper understanding of dependency management.

This experience taught me that in software development, challenges are not roadblocks but stepping stones. Each problem we solve makes us better, stronger developers.

As I embark on my journey with HNG internship. I am excited about the new challenges and opportunities to grow as a developer. To anyone considering a career in tech, I encourage you to embrace the difficulties. They are the moments that define us, the crucibles that forge our skills and resilience.

If you’re interested in pushing your boundaries and learning alongside brilliant minds, consider joining the HNG internship. You can find more information. [Here](https://hng.tech/internship)

Cheers!!!
AWS-infrastructure-using-Terraform
Tags: aws, terraform
Published: 2024-06-30 14:22:41


![ AWS-Infrastructure ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpt6rf5lvh2et60yf58y.jpeg)

🚀 Excited to share my latest project where I set up a highly available and scalable infrastructure on AWS using Terraform! 🌐

🔧 Project Overview:

1) Provider Configuration: Utilized AWS as the cloud provider with the region set to us-east-1.
2) VPC Creation: Built a Virtual Private Cloud (VPC) with subnets in two different availability zones for enhanced fault tolerance.
3) Internet Gateway & Route Table: Established an Internet Gateway and configured route tables to manage internet access for our resources.
4) Security Group: Implemented a robust security group to control inbound and outbound traffic, ensuring only HTTP and SSH traffic are allowed.
5) EC2 Instances: Deployed two EC2 instances across the subnets with user data scripts for initialization, enabling automated setup.
6) Application Load Balancer: Configured an application load balancer to distribute traffic between the EC2 instances, ensuring high availability and reliability.
7) S3 Bucket: Created an S3 bucket for additional storage needs.
Outputs: Provided the DNS name of the load balancer for easy access to the deployed application.

This project underscores the power of Infrastructure as Code (IaC) with Terraform, enabling automated, repeatable, and efficient cloud infrastructure setup.
Day20- 90DaysOfDevOps
Tags: devops, docker, awschallenge, 90daysofdevop
Published: 2024-06-30 14:20:58

Hey Learners! Welcome back. We learned about Docker, Docker-Compose, Docker-Volumes and Docker Networking hands-on. Now it's time to create a comprehensive cheat sheet of all the commands we've learned so far. Let's get started.

_**Docker Commands:-**_

**docker login**
**docker pull <image-name>**
**docker push <repo/image-name:version>
docker logout
docker build . -t <any-name:version>
docker images OR docker image ls
docker rmi <image-name> OR docker image rm <image-name>
docker tag <image-name> <new-tag>:version
docker inspect <image-name>
docker save <image-name> --output <file-name.tar>
docker load --input <file-name.tar>
docker create <image-name>
docker run <image-name>
docker run -d --name <cont-name> <image-name>
docker run -e <variable=value> <image-name>
docker run --network <any-network> <image-name>
docker run -p <host-port:cont-port> <image-name>
docker run --rm <image-name>
docker run -v <host/dir/path>:<cont/dir/path> <image-name>
docker start <cont-name>
docker stop <cont-name>
docker pause <cont-name>
docker unpause <cont-name>
docker restart <cont-name>
docker export <cont-name> > <file-name.tar> OR docker export --output="<file-name.tar> <cont-name>
docker ps
docker ps -a
docker inspect <cont-name>
docker logs <cont-name>
docker stats**

_**Docker-Compose Commands:-**_

**docker-compose up
docker-compose up -d <service-name>
docker-compose down
docker-compose down <service-name>
docker-compose ps
docker-compose rm
docker-compose rm <service-name>
docker-compose start
docker-compose stop
docker-compose restart
docker-compose pause
docker-compose unpause**


_**Docker Networking Commands:-**_

**docker network ls
docker network create <net-name>
docker network inspect <net-name>
docker network connect <net-name> <cont-name>
docker network disconnect <net-name> <cont-name>
docker network rm <net-name>**

Thank you so much for taking the time to read till the end! Hope you found this blog informative.