teleren/devto huggingface dataset:
The best way to master HTML
Tags: beginners, html, tutorial, css
Published: 2022-08-12 17:09:11

## My Story :
I, as another newbie to web development, started learning the skeleton of websites, that is HTML, 7 months back. When I first started creating websites using HTML, for a long time I thought it was very easy to describe the structure of the websites and make them look exactly how we wanted. But there are a ton of concepts that you need to understand thoroughly in order to gain the maximum understanding of HTML and how it works. I will include a basic roadmap for you to follow, in a way where you will get a crystal clear understanding of all the important concepts you need to get hold of.

## What exactly is HTML?
HTML is nothing but HyperTextMarkupLanguage. It is used to describe the structure of your website and position various elements. You can style your website using various options, one of the best as we all know is CSS (Cascading Style Sheets). There are various HTML elements, like headings, links, tables, etc. You can master them by building side projects where each one of the concepts has some use.

## My Mistakes :
-> The number one mistake I did was getting stuck in tutorial hell. Basically, I tried following various tutorials and was busy watching all the tutorials all day and not actually applying the concepts I learned from them. Do watch tutorials, they are good for building a foundation, but also start implementing the concepts used in them itself.

-> My 2nd mistake was that I tried to learn everything at once, let me explain. I was learning about HTML with following a CSS tutorial too, I was so tempted to do new things with CSS, when I didn't even have a good hand at HTML first. Try and get a good grip on one thing first, then and only then move on to the next.

## Resources for HTML -
There are various youtube videos and websites for learning HTML, I have shortlisted a few to save your time researching about them.

## Websites -
w3schools.com

developer.mozilla.org/en-US

learn-html.org

freecodecamp.org/news/tag/html

## Youtube tutorials -
youtube.com/watch?v=BsDoLVMnmZs

youtube.com/watch?v=G3e-cpL7ofc

youtube.com/watch?v=pQN-pnXPaVg

youtube.com/watch?v=kUMe1FH4CHE

## A Beginner Roadmap for 7 days -
I am going to guide you through a basic HTML roadmap to get a good grip of all the concepts and moving ahead to CSS.

**Day 1 ->** Learn how HTML and websites work. Research about http, domains and browser engines about how they load websites.

**Day 2 ->** Basic HTML Headings and how to use them in different scenarios, also learn about paragraph elements and attributes.

**Day 3 -> **HTML Formatting text and fonts, build a basic website, where you apply these concepts and get hands-on experience.

**Day 4,5 ->** Learn about HTML tables, images, and links, this will also help you learn about the layout of websites.

**Day 6,7 ->** Start building a basic Portfolio website, think about how you can use these concepts, and make the website look amazing by only using HTML.


Thank you so much, for taking out time and reading this article. I hope you got some value from this one!
Where static type checking and type annotation are shining
Tags: typechecking, typeannotation
Published: 2022-08-12 17:06:10

---
title: Where static type checking and type annotation are shining
published: true
description: 
tags: typechecking,typeannotation
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Many teams don't test their functions separately. They run the whole project to see the result. When something goes wrong, they check the log and use a debugger. They are the majority, at least from my experience. Static type checking and type annotations are efficient for these teams because type annotations give a rough idea about data for each function. They can't look at testing data, which doesn't exist.

Still, I wonder if forcing type annotation is practical. Reading a long function is difficult. By splitting a long function, I found that type annotation can be distracting because instead of focusing on logic, I have to think about type annotation; sometimes, the size of type annotation is about half the function's size. Maybe forcing type annotation only on functions, which an outsider from another module can call, like in OCaml, is practical. I haven't coded in OCaml beyond some toy programs. So I don't know if it is really practical as I imagine.
My NeoVim setup for JavaScript(Front-End) development
Tags: vim, javascript, webdev, productivity
Published: 2022-08-12 16:59:00

> Recently I update my new NeoVim setup for JavaScript development.

![cover1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lxrfahxct2u9ks2rf6w.jpg)

![cover2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfqo2730hzycfh4vnbl6.jpg)

## What's includes?

- LSP(Language Server Protocol)
- Semantic Key Bindings
- Code Syntax
- Code Completion
- GitHub Copilot
- Good looking theme(NeoSolarized)
- Auto Session
- etc.

## Motivation

I love **frosted glass** effects. I used VS Code for a looong time and I don't know how to use frosted glass effected theme in VS Code, but it is very easy in vim, because I use iTerm2.

Second, since I figure out how to write JavaScript code in vim, then I switch to vim without hesitate. Thanks to LSP. :)

## Reach out

My dotfiles configs here 👉 https://github.com/2nthony/dotfiles

## Credit

Huge thanks to this [repo](https://github.com/craftzdog/dotfiles-public) and this [vedio](https://www.youtube.com/watch?v=ajmK0ZNcM4Q&ab_channel=devaslife)
React project one must do!
Tags: javascript, webdev, react, opensource
Published: 2022-08-12 16:58:48

When I started learning reactjs I wasn't having any idea. Then I thought that many of you may not any ideas as beginner react developers. So these are the projects I would recommend doing

## 1. Todo todo todo!
Todo is the most best idea to learn any programming language! SO the same is for react! Try to make a web app with same components with an input component and a storing component.

## 2. Weather of the world
Yes try using some cool apis from the net and watch this Youtube video for more detail.

## 3. Tic Tac react?
Try to make a tic tac toe game using react! try to make it with

one component to handle the game
one to tell the winner And all setup to play!

## 4. The time is?
Time is hard to handle but with react make a world time clock! and yes some more apis.

## last but not least(stop for a drum roll) twitter!
Yes! Twitter build a simple web app like twitter. Don't have to add database(It's only front-end not back-end!). With this you are all set to dive into react and within a mouth(maybe a bet more longer) you are a react developer!!
NFT Tutorial (Beginner-Advanced)
Published: 2022-08-12 16:44:12

<!-- wp:paragraph -->
<p>Imagine buying a piece of digital artwork on the Internet at a reasonable price and getting a unique digital token known which proves your authority over the artwork you bought. Wouldn't it be great? Well, that opportunity exists now, thanks to NFTs.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>NFTs are currently taking the digital art and collectible world by storm. Just as everyone worldwide believed Bitcoin was the digital answer to currency, NFTs are now being pitched as the digital answer to collectibles. As a result, digital artists are seeing their lives change thanks to the massive sales to a new crypto audience. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you are interested in NFTs and want to explore more about them, you have come to the right place. Let’s dive in and see what all the fuss is about! </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="what_is_nft">What is NFT?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>NFT means non-fungible tokens</strong>&nbsp;(NFTs), which are generally created using the same type of programming used for&nbsp;<a href="https://www.simplilearn.com/tutorials/blockchain-tutorial/what-is-cryptocurrency" target="_blank" rel="noreferrer noopener">cryptocurrencies</a>. In simple terms these cryptographic assets are based on&nbsp;<a href="https://www.simplilearn.com/tutorials/blockchain-tutorial/blockchain-technology" target="_blank" rel="noreferrer noopener">blockchain technology</a>. They cannot be exchanged or traded equivalently like other cryptographic assets.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Like Bitcoin or Ethereum. The term NFT clearly represents it can neither be replaced nor interchanged because it has unique properties. Physical currency and cryptocurrency are fungible, which means that they can be traded or exchanged for one another.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://www.simplilearn.com/ice9/free_resources_article_thumb/NFT/NFT_1.jpg" alt="NFT_1"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>NFT stands for a non-fungible token, which means it can neither be replaced nor interchanged because it has unique properties.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Key Features of NFT -<strong>&nbsp;</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Digital Asset - NFT is a digital asset that represents Internet collectibles like art, music, and games with an authentic certificate created by blockchain technology that underlies Cryptocurrency. </li><li>Unique - It cannot be forged or otherwise manipulated. </li><li>Exchange - NFT exchanges take place with cryptocurrencies such as Bitcoin on specialist sites. </li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2><strong>Read More: </strong><a href="https://www.google.com/url?sa=t&amp;source=web&amp;rct=j&amp;url=https://www.codelivly.com/nft-tutorial/&amp;ved=2ahUKEwijlarX3cH5AhVUe94KHTCOBYQQFnoECCIQAQ&amp;usg=AOvVaw1RTmfr-TWB0QNFqdOlTFG2">NFT Tutorial For Beginners</a></h2>
<!-- /wp:heading -->
Debug controllers and debug flow in VSCode
Tags: vscode, debug, react, node
Published: 2022-08-12 16:18:00

Hey, hey 👋 After we have learned about how to configure our debugger, let's talk more about the actual debugging controllers 🕹 

## Breakpoints

We will put some breakpoints
![Button component with breakpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtrbmscdb837cv7p48of.png)
 As you see, we put a breakpoint on **line 12**, so we will be able to receive a context of our `props`.
After that, you restart the page and see in the run & debug section of the `VSCode` the following structure. We will talk more about this section later.
![Run & Debug menu in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mzdq09ly4fvsjv6ino1.png)
On your screen, near the breakpoint will appear a yellow outline, which means that your code stopped its execution at this line
![Stop execution on a breakpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmkyvuoa1liv77w1iwyg.png)
We will also get controllers:
![Debug controllers VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxe8m4953d3ojnhl791r.png)
1. **Continue** – An action to take in the debugger that will continue execution until the next breakpoint is reached or the program exits.
2. **Step over** – An action to take in the debugger that will step over a given line. The function will be executed if the string contains a function, and the result is returned without debugging each line.
3. **Step In** – An action to take in the debugger. If the line does not contain a function, it behaves the same as "step over" but if it does, the debugger will enter the called function and continue line-by-line debugging there.
4. **Step out** – An action in the debugger that returns to the line where the current function was called.
5. **Restart**
6. **Stop**

 
## Controller demo

### Continue

{% vimeo 738961049 %}

With "Continue", we can resume debugging to the next breakpoint you put previously.

### Step over

{% vimeo 738992294 %}

"Step over" functionality helps us to go to the following execution line without putting a new breakpoint.

### Step in

{% vimeo 739001401 %}

"Step in" gives us a superpower to traverse up&down in a function execution and see the function's return values in a variables section.

### Step out

{% vimeo 739001056 %}

I'm happy that we're now familiar with essential debugging tools and ready for a new journey to something more advanced! 🚀🚀🚀
Building a Headless Commerce Site with Python and ButterCMS
Tags: headlesscms, headlesscommerce, tutorial, python
Published: 2022-08-12 16:16:00


Learn how you can use [Python and ButterCMS](https://buttercms.com/blog/building-a-headless-commerce-site-with-buttercms/) to build a headless commerce site integrated with the Square checkout API.
Download/Upload files on remote server
Tags: ssh, server, devenv
Published: 2022-08-12 16:11:46

### Upload File On Server

```bash
scp -i <ssh-private-key-path> <file-local-path>  <file-remote-destination>
scp -i ~/.ssh/work            ./notes2.txt       mahesh@example.com:/home/team1
```



### Download File From Server

```bash
scp -i <ssh-privae-key-path> <file-on-server-path>                      <file-local-destionation>
scp -i ~/.ssh/work           mahesh@example.com:/home/team1/notes2.txt  ./
```

### Remote Download on Server
```
wget <file-url>
wget https://ipfs.io/ipfs/QmNf1UsmdGaMbpatQ6toXSkzDpizaGmC9zfunCyoz1enD5/penguin/17.png
```
🔴 Live - Learning How to Create an NPM Package
Tags: livestream, programming, npm, javascript
Published: 2022-08-12 16:00:44

---
title: 🔴 Live - Learning How to Create an NPM Package
published: true
description: Clarkio hosts a livestream to research and learn how to create an npm package.
tags: livestream,programming,npm,javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

## Back at it Again
Hey there it's been quite some time since I've written anything on here so I thought let's just jump right back into it. For this one I'm sharing what we have planned for the livestream this Friday, August 12th, 2022. If you're interested in joining our welcoming community as we learn together drop by the stream today starting at 12:30pm ET ([time zone conversions](https://time.is/1230PM_12_Aug_2022_in_ET/PT/UTC)).

### Stream Plans
Here's an outline of what you can expect on the stream today:

1. Welcome and celebrate each other's wins of the week
2. Solve today's wordle
3. Research how to create an npm package and build an example

#### Wins of the Week
If you've not joined us for the livestream before you might be wondering what this is all about. It's the beginning segment of the show where we take time to reflect on the past week and look to find the positive things that happened for which we're grateful.

The idea behind this is that I personally have had a tendency to dwell on the negative things. This exercise has helped me to break out of that habit (not all the time but more often now than before). My hope is that it'll help folks dealing with the same thing.

#### Wordle
We do this as a transition segment where I hide the chat and turn off the text-to-speech feature of my chatbot (something we built on stream) so folks don't spoil the game. Viewers seem to have fun laughing at my frustrations as I try to solve the puzzle.

#### Technical Topic
After we're warmed up from the previous two segments we dive into a technical topic for the day. This can vary from stream to stream but for this particular one we're learning about creating npm packages for JavaScript and Node.js projects.

So far we've spent some time looking into some build tools like rollup.js and esbuild to generate CommonJS and ESM modules formats to support project use cases.


### How to Join
If any or all of that interests you and you'd like to see what this community is all about you can join us over on [Twitch](https://twitch.tv/clarkio). Hope to see you there 🙂👍

✌ Clarkio
[Swift/SwiftUI] How to fix "Attempt to present which is already presenting"
Published: 2022-08-12 15:59:57

When you implement present ViewController like Modal, some of case you'd see "Attempt to present which is already presenting".


**Before code**
```
uiView.window?.rootViewController?.present(viewController, animated: true)
```


**Error log**
```
[Presentation] Attempt to present <UIViewController: 0x10c72d050> on <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVS_7AnyViewVS_12RootModifier__: 0x10c60ab30> (from <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVS_7AnyViewVS_12RootModifier__: 0x10c60ab30>) which is already presenting <UIViewController: 0x1201f72b0>.
```


**After code**
```
guard let rootViewController = 
uiView.window?.rootViewController else { return }
if rootViewController.presentedViewController == nil {
    rootViewController.present(viewController, animated: true)
}
```
Intro to Data Structures & Algorithms
Tags: algorithms, computerscience, todayilearned
Published: 2022-08-12 15:56:52

## What are Data Structures?
Data Structures are exactly what they sound like--structures that hold data on our computer.  More formally, they're specific implementations of abstract data types.  ~~Wait...wtf are abst-~~

![Quora Advanced Explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82cbt19yt2zgukgu5u3u.png)
Uhhhh too hard for my brain...Let's keep looking.


![Quora ELI5 Explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xozd3l4u8kwza1xgim08.png)
Okay.  I can work with this.
## Abstract Data Types?!
Abstract Data types are [menus](https://qr.ae/pvMhKa) that tell you what you can ask for.

Data Structures are [chefs](https://qr.ae/pvMhKa) that build your chosen menu items for you.

For example, if I want a burger with ketchup, tomatoes, and mustard, I might call this person to make it.

If I want something where each new item is added to the front and the last items in are the first items out (LIFO), I might call a stack to implement it.
## Conclusion
Data structures are really important for programmers to understand because they're the cars, buses, and trains that move our data through our programs.  

And just like cars, buses, and trains, they all have tradeoffs.  Choosing to use a linked list in place of a hash table could save you as much time as choosing to take the subway instead of driving through rush hour traffic.  But you wouldn't know that unless you took the time to learn them!


## Sources
- The Algorithm Design Manual
- [ADT vs Data Structure](https://www.quora.com/Whats-the-difference-between-a-data-structure-and-an-abstract-data-type)
SVG + CSS Spinners!
Tags: webdev, showdev, opensource, css
Published: 2022-08-12 15:49:44

I created a collection of 24 x 24 dp SVG + SMIL spinners a month ago. Now, the collection also has **SVG + CSS** versions corresponding to the existing SVG + SMIL ones!

**Here:** https://github.com/n3r4zzurr0/svg-spinners

Thanks.
Getting external connectivity within CML on ESXi environment
Tags: vmware, esxi, cisco, cml
Published: 2022-08-12 15:01:32

# Background and result
In CML (Cisco Modeling Labs), when accessing each node in the lab from the outside via SSH, etc., a node called the External Connector is deployed and connected to the management interface of each node.

This procedure is shown in the user guide.
https://developer.cisco.com/docs/modeling-labs/#!bridge-mode

In my ESXi environment, the following work was required as a preliminary step.
 - Accept promiscuous mode in ESXi
https://developer.cisco.com/docs/modeling-labs/#deploying-the-ova-on-esxi-server

In addition, the following task was also required for CML 2.4.0.
 - Edit the bridge interface in CML
https://developer.cisco.com/docs/modeling-labs/#!configuring-the-management-ip-address

---

# What I did
### Accept promiscuous mode

- Check settings of port groups assigned to VMs in CML
- If it is inherited from a vSwitch, check the related vSwitch settings
	- Change promiscuous mode to accept and save

---

### Edit the bridge interface
- Login to CML's Web console
	- https://{CML's IP address}:9090/
	- username : "sysadmin"
	- password : string specified during installation

- Press bridge0 after selecting Networking from the menu
	- At this time, check the interface on which the management IP address is set

- Press "+" on the port and select the interface you just checked
	- in this case "ens160"

- Confirm that bridge0 is assigned an IP address for management

---

The required step was the above.

---

# Supplemental information and others
If the hypervisor is nested, then promiscuous mode must be accepted for all vNICs/vSwitches that the communication passes through.
Interactive dashboard: How long it takes to burn off McDonalds?
Tags: opensource, database, sql, analytics
Published: 2022-08-12 15:36:35

👉 [Original dashboard](https://metabase-public.metabaseapp.com/public/dashboard/4455f327-80c2-42df-8c86-3bec97ee5c47?menu=Chicken%20McNuggets%20(40%20piece)&activity=Cycling%2C%20mountain%20bike%2C%20bmx&weight_(kg)=70)

1. Select a McDonald's menu.
2. Select an activity.
3. Insert your weight in kilograms.
4. See how long you should exercise to burn off eaten calories.

Datasets: [Nutrition Facts for McDonald’s Menu](https://www.kaggle.com/datasets/mcdonalds/nutrition-facts) and [Calories Burned During Exercise and Activities](https://www.kaggle.com/datasets/aadhavvignesh/calories-burned-during-exercise-and-activities).

Tool used: [Metabase](https://www.metabase.com/)
2 arrays of Same value are not equal in JS.
Tags: javascript, beginners, tutorial, webdev
Published: 2022-08-12 15:22:48

Hello Guys today i am going to discuss a very little thing that you might have not noticed in Javascript.
I will show you that thing using an example.

## Example 1 - 
```js
let array1= [1,5,9,14,17];
let array2= [1,5,9,14,17];

console.log(array1 == array2);
console.log(array1 === array2);
```

### Can you guess what will be the output?

## Output - 
```
false
false
```

* It returned false in both comparsion although the values are equals, number of elements are also equal so, why it returned false? because everything in javascript is an object and arrays are also objects therefore instead of comparing the values or number of elements , it checks the reference of those array which is different that's why it returned false in both the cases.

## Example 2 - 
```js
let array1= [1,5,9,14,17];
let array2= [1,5,9,14,17];
let array3 = array1
console.log(array3 === array1);
console.log(array3 === array2);
```

### Can you guess now what will be the output?

## Output - 
```
true
false
```

* Well the reason it returned true while comparing array3 with array1 is because we stored the reference of array1 in array3 so, both are pointing to the same reference while array3 and array2 comparison returned false because they have different references.

## How you can then compare these arrays?
The answer is simple , use the toString method to convert the array into strings and then compare them

## Example 3-
```js
let array1= [1,5,9,14,17];
let array2= [1,5,9,14,17];
console.log(array1.toString() === array2.toString());
```

## Output - 
```
true
```

* So, now it is comparing string values which is equal that's why it returned true this time.

### It looks quite confusing and i tried my best to explain and if you find any point wrong please correct it in the comment section.

THANK YOU FOR CHECKING THIS POST
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl