teleren/devto huggingface dataset:
Learn HTML Easily !
Published: 2022-12-29 19:46:44

In this blog, we will be talking about learning HTML language from scratch !


If you want to learn the basics of HTML, the best way is to dive right in and start coding. HTML (Hypertext Markup Language) is the language used to create websites and web applications. It is a fundamental building block of the web and is essential to understand if you want to create a website or web application.

HTML is not a difficult language to learn, and it can be learned quickly if you have the right resources and the right approach. Here are a few tips to help you learn HTML the best way:

1. Read HTML tutorials

One of the best ways to learn HTML is to read tutorials. There are countless HTML tutorials available online, and they cover everything from the basics of HTML to more advanced topics. Reading tutorials is a great way to get familiar with the language and learn the syntax.

2. Practice coding

Another great way to learn HTML is to practice coding. The best way to learn HTML is to actually write some code. This will help you understand the syntax and structure of HTML and make it easier for you to remember the different tags and attributes.

3. Use HTML editors

HTML editors are a great way to make writing HTML code easier. HTML editors provide a graphical user interface that makes it easier to write and edit HTML code. Many HTML editors also provide features such as syntax highlighting, which makes it easier to spot errors in your code.

4. Use HTML validators

HTML validators are a great way to make sure your code is valid and error-free. HTML validators will check your code for any errors and alert you to any potential problems. This is a great way to ensure that your code is valid and that it will work in all browsers.

5. Join a web development community

Joining a web development community is a great way to learn HTML. A web development community is a great way to get feedback from other developers and get help with any issues you may be having.

These are just a few tips to help you learn HTML the best way. With the right resources and approach, you can learn HTML quickly and easily. So, get started today and start coding!
Add ChatGPT to Visual Studio Code
Tags: chatgpt, ai
Published: 2022-12-29 19:20:35

Open Visual Studio Code and click on the Extensions Icon
- Search for ChatGPT Helper and install.
![ChatGPt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9miqq304tznf8lwnki7.png)

- [Go Here and add a "Secret Key"](https://beta.openai.com/account/api-keys)
Copy this key to the clipboard.

- Open the Command Pallet
Search for ChatGPT and select one of the items.
![Open Command Pallet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t265a7ixc4tfabhv87o.png)

The first time it will ask for the key. Paste in the key on the clipboard.

- If you ask a question about code make sure to highlight the code you want (first)

- Otherwise just type in the Question

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

Note: The free version has a limited number of queries. Check Out Pricing [here](https://openai.com/api/pricing/) 

[Market Place Link](https://marketplace.visualstudio.com/items?itemName=kiranshah.chatgpt-helper)
GPT-3 inside VSCode with official OpenAI API
Tags: chatgpt, openai, gpt3
Published: 2022-12-29 19:06:35

# Code GPT extension for VSCode

Using the official [OpenAI API](https://openai.com/api/) inside the IDE with **Code GPT**.

## New feature! Get code from comments
- Write a comment asking for a specific code
- Press `cmd + shift + i`
- Use the code 😎 

![image1](https://user-images.githubusercontent.com/6216945/210677720-4a2ebbf3-84a1-4972-83a0-10a265c368ab.gif)

## Examples

### Create a README.md with "Ask CodeGPT"

![Copy of Untitled Design](https://user-images.githubusercontent.com/6216945/210635881-06636e67-3c18-47ec-8a48-78456bc4058e.gif)


### Select the code and then click on `Explain CodeGPT`
<br>
<img width="693" alt="Captura de Pantalla 2022-12-26 a la(s) 7 17 59 p  m" src="https://user-images.githubusercontent.com/6216945/209589948-6d6171a2-0716-45cd-8d7c-9ab73ec077cf.png">
<br>

### Result:
<br>
<img width="739" alt="Captura de Pantalla 2022-12-26 a la(s) 7 19 02 p  m" src="https://user-images.githubusercontent.com/6216945/209589987-b94984ef-932c-429f-8f19-67377f479433.png">

## Features

- `Get Code`: Create a comment asking for a specific code and CodeGPT will open a new Editor with the code (You don't need to write the code language. CodeGPT will detect it automatically).
- `Ask CodeGPT`: CodeGPT will open a new Editor and respond the question.
- `Explain CodeGPT`: CodeGPT will open a new Editor and explain the code.
- `Refactor CodeGPT`: CodeGPT will open a new Editor and refactor the code.
- `Document CodeGPT`: CodeGPT will open a new Editor and Document the code.
- `Find Problems CodeGPT`: CodeGPT will open a new Editor and find problems in the code.
- `Set API KEY`: To save your API KEY securely.
- `Remove API KEY`: To remove your API KEY.

## Installation

Go to **Settings > Extensions > CodeGPT**

Complete the following information:

- To enter your [API Key](https://beta.openai.com/account/api-keys) press cmd+shift+p and search for `CodeGPT: Set API KEY`. Your API KEY will be safely stored. 

![Captura-de-Pantalla-2023-01-04-a-la-s-2-29-15-p-m-](https://user-images.githubusercontent.com/6216945/210634562-1dd5f8cd-4625-42fc-92f4-7e1b5f132c49.png)


- [OpenAI API Key](https://beta.openai.com/account/api-keys)
- [Model](https://medium.com/@dan.avila7/modelos-de-gpt-3-y-codex-11a64948d87)
- [Max Token](https://medium.com/@dan.avila7/concepto-de-tokens-en-openai-f5d4196076f6)
- [Temperature](https://medium.com/@dan.avila7/c%C3%B3mo-manejar-los-par%C3%A1metros-temperature-y-top-p-en-openai-b45892b250be)
Miror
Tags: codepen
Published: 2022-12-29 19:03:14

<p><a href="https://www.ionos.com/?_gl=1*w3rbpj*_ga*ODczNzMxMDIxLjE2NzIzMzI5MjM.*_ga_29DKNVLRWX*MTY3MjMzMjkyMy4xLjEuMTY3MjMzMzM5OC41My4wLjA.&amp;linkId=hd.tab.domainHosting" target="_blank">https://www.ionos.com/?_gl=1*w3rbpj*_ga*ODczNzMxMDIxLjE2NzIzMzI5MjM.*_ga_29DKNVLRWX*MTY3MjMzMjkyMy4xLjEuMTY3MjMzMzM5OC41My4wLjA.&amp;linkId=hd.tab.domainHosting</a></p>

https://codepen.io/collection/rxpoar
Learn Tailwindcss - full course for beginners of 4 hours
Tags: programming, beginners, tutorial, tailwindcss
Published: 2022-12-29 19:01:37

{% embed https://www.youtube.com/watch?v=nL7LE4KJDoE %}

## Simplicity and flexibility

Tailwind CSS is a utility-based CSS library that allows developers to apply styles directly to HTML elements, rather than creating complex class names and styling rules. This makes it easy to quickly prototype and style a web page or application, as you can simply apply the desired styles directly to the elements you want to style.
Additionally, Tailwind CSS provides a wide range of utility classes that can be combined in a variety of ways, giving you a lot of flexibility in how you style your page. This means you can use Tailwind CSS to achieve a wide range of design styles, from minimalist to complex, without having to write a lot of custom CSS.

## Improved workflow and efficiency

One of the main benefits of using Tailwind CSS is that it can help improve your workflow and efficiency as a developer. With its simple and flexible approach to styling, you can avoid the time-consuming process of creating custom CSS styles and focus on building out the functionality of your web page or application.
Furthermore, Tailwind CSS provides a wide range of responsive utility classes that allow you to easily create responsive layouts, meaning you don't have to write separate styles for different screen sizes. This can save you a lot of time and effort, as you don't have to manually adjust your styles for different devices.

## Enhanced collaboration and maintenance

Another advantage of using Tailwind CSS is that it can enhance collaboration and maintenance within a development team. Because Tailwind CSS uses a clear and consistent naming convention for its utility classes, it can be easier for team members to understand and work with each other's code.
Additionally, because Tailwind CSS has a smaller footprint than other CSS libraries and frameworks, it can be easier to maintain and update over time. You don't have to worry about managing a complex set of styles and rules, which can make it easier to make changes and updates to your project as needed.

Guillaume Duhan
Roadmap for front-end developers to learn cloud
Published: 2022-12-29 18:52:48

You are a front-end developer and planning to learn the cloud. However, you have no idea where to start? Then this blog is for you.

Cloud is very vast and has more than 100+ services. As a FE or an engineer without any clear plan, it would be impossible to navigate through the cloud.  

I started my cloud journey a few years back from Azure and then move to AWS.  I was lost but today when I look back I can see that what worked and what didn't. So, based on my experience here is a roadmap for you:

1 . Start with any cloud vendor all are the same concepts just the name of the services is different

2 . Remember always WHY you are doing it - upskilling, backend knowledge, support for your side project?

## Pre-requisites

1 . Knowledge of backend language would be helpful or NodeJS  

2 . Knowledge of how client and server work

3 . Knowledge of suggested pre-read: Multi-tier app

## Step 1: Cloud fundamentals

- What is cloud

- Why do we need cloud

- Different types of clouds

- Cloud computing models

- on-prem vs cloud: pros and cons

- Ways to access the cloud: Console, SDK, CLI

## Step 2:  Regions, Availability zones, and edge-locations

- What is a regions, AZs, edge locations

- Why do we need them

## Step 3: Services

- Type of services

- Services: Regional or global

- Billing model

- Managing resources (deleting, disabling etc.)

## Step 4: Host a static website

- S3 - What, and why

- How to create a bucket

- Host a static website, or content

- Enable versioning, server access logs, and cross-region replication

- Enable CloudFront

- Buy and map a custom domain

## Step 5: IAM and security

- What is IAM

- Why IAM and Security

- Create: a user, role, group, and permission

- What is policy and create one for S3

## Step 6: Host a dynamic app on EC2

- What is EC2

- Create an EC2 

- SSH to an EC2

- Deploy a web app to EC2 (nodeJS)

- What is Elastic IPs

- How to get one

## Step 7: Database

- What is database

- Why we need Database

- Different Types of Database

- Create and deploy a DB (AWS-managed RDS or DynamoDB )

- Create and Deploy a DB (Custom)

- Scaling, Backups, updating a DB

Remember you are a front-end developer you can relate to static web apps (HTML, ReactJS, etc), NodeJS, and databases. So, you are just now expanding your skills to understand and implement what goes behind the scenes of hosting an application or database. What it takes to make an app up and accessible for the world.

So, far you have learned and done hands-on different services and projects:

1. Fundamentals of cloud

2. IAM

3. Cloud vs on-premises

4. S3

5. EC2

6. Database

## What to learn next:

- Scaling

- Security

- Static app vs dynamic

- Multi-tier application

- Disaster recovery

- Single Point of Failure

- On-demand scaling

- Payment/billing of cloud services

Happy Learning!!
Responsive Image Made Simple with srcset
Tags: css, webdev, html, beginners
Published: 2022-12-29 18:45:31

The srcset attribute is used in HTML to specify a list of images and their sizes. It allows the browser to choose the most appropriate image based on the device's screen size and resolution. This can be useful for optimizing the loading time of a webpage, as well as improving the user experience by displaying the best possible image quality.
Here's an example of how you might use the srcset attribute in an img element:

```<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="A description of the image"> ```

In this example, the src attribute specifies the default image to display (small.jpg). The srcset attribute specifies two additional images (medium.jpg and large.jpg), along with their sizes in pixels (1000w and 2000w, respectively). The browser will use the src attribute as a fallback if it is unable to use the srcset attribute for some reason.

The srcset attribute can be used in conjunction with the sizes attribute to specify the size of the image in relation to the viewport:

```
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 50vw, 25vw" alt="A description of the image">```

In this example, the sizes attribute specifies that the image should be displayed at 50% of the viewport's width when the viewport is 600px or smaller, and 25% of the viewport's width when the viewport is larger than 600px.
Helpppp, i can't show this data api on my web
Tags: react
Published: 2022-12-29 18:07:08

I am making maps from an api inside a map, apparently the console shows everything correctly but it does not show the complete data and it does not show errors in the console.


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



This is how it is displayed on the console 

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

For some reason it only shows the data of the first map

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywoojuffku1z3m5xrzhx.png)
Open Source Webhooks as a Service Written in Rust
Tags: opensource, showdev, rust, programming
Published: 2022-12-29 18:05:56

Sending one webhook is trivial. It's just a POST request to an API endpoint. But sending webhooks at scale is so much harder. At Svix we make it easy for anyone to offer a world class webhook experience.

[https://github.com/svix/svix-webhooks](https://github.com/svix/svix-webhooks)
Fetching and Loading Data from Github
Tags: programming, machinelearning, github, python
Published: 2022-12-29 17:58:25

It's usually preferable to write a function that downloads and decompresses data from github (or online data) rather than doing it manually. 

This is especially true if the data changes frequently: you can write a small script that uses the function to retrieve the most recent data (of you can set up a scheduled job to do that automatically at regular intervals). Automating the data retrieval process is also useful if you need to install the dataset on multiple machines.

Here is the fuction to fetch and load data: 

```python
# ----- Libraries ---------
from pathlib import Path

import pandas as pd
import tarfile
import urllib.request
# --------------------------

# Function to fetch and load data --->
def function_name():
    zipped_path = Path("datasets/files.tgz")
    
    if not zipped_path.is_file():
        Path("datasets").mkdir(parents=True, exist_ok=True)
        url = "https://github.com/****/Datasets/raw/main/files.tgz"
        urllib.request.urlretrieve(url, zipped_path)
        
        with tarfile.open(zipped_path) as file_name:
            file_name.extractall(path = "datasets")
            
    return pd.read_csv(Path("datasets/files/file.csv"))

data_file = function_name()
```
When `function_name()`is called, it will look for the dataset file in `datasets/files.tgz`. If it does not find it, it will create a directory `datasets` inside your working directory; then it will download the `files.tgz` from the site `https://github.com/****/Datasets/raw/main/files.tgz`. This `files.tgz` contains the file `file.csv`. 

The function with then lod the CSV file into a Pandas DataFrame object containing all the data, and return it. 

You can check your data by: 

```Python
print(data_file[:10])
 # Or 
print(housing.head())
```
To display the top 10 rows ( or 5 top rows) of your data.
Software Engineer Career Ladder
Tags: career, management
Published: 2022-12-29 17:47:29

In the tech industry we use progression frameworks (or '*career ladders*') to guide the development of engineers' careers.

A **career ladder** usually consists of **Designations** (Software Engineer, Product Manager, etc.), **Levels**, and **Expectations**, to measure, develop, and evaluate performance.

A typical Software Engineering (SWE) career ladder:

- SWE, SWE II and Sr. SWE: The first three, and most common, levels in Software Engineering;
- Staff: They lead deep, complex, or high-risk technical projects;
- Principal: They guide the technical direction of the company;
- Distinguished and Fellow: Such levels may exist in large organizations. Like Principals, they guide the technical vision of the organization. Usually there is no standardized way to achieve this.

For each level in the ladder, companies define a set of expectations. Engineers may take them as reference for personal development, and those expectations are usually evaluated in [performance review cycles](https://eduklein.com.br/performance-review-cycle).

## Progression Frameworks

Some interesting resources covering career ladders in the tech industry:

- [progression.fyi](https://progression.fyi/): *progression.fyi is currently a collection of open source and public ‘progression frameworks’, examples of the tools that thousands of managers in tech are building for their teams to ensure that they feel valued at work*
- [Engineering Career Paths at Big Tech and High-Growth Startups](https://newsletter.pragmaticengineer.com/p/engineering-career-paths): An Issue of the Pragmatic Engineer Newsletter, by Gergely Orosz, covering the most common levels and career paths for engineers at big tech
- [Designations, levels and calibration](https://lethain.com/perf-management-system): An interesting article about career ladders and performance management by [Will Larson](https://lethain.com)

## Climbing the Ladder

There are tons of references online on how to develop yourself as a software engineer. Here I share a few posts and articles that I think is valuable to help engineers to progress in their careers.

- [What makes an effective software engineer?](https://leaddev.com/personal-development/what-makes-effective-software-engineer) by [Addy Osmani](https://addyosmani.com), published at [LeadDev](https://leaddev.com)
- [The product-minded Software Engineer](https://blog.pragmaticengineer.com/the-product-minded-engineer), by [Gergely Orosz](https://blog.pragmaticengineer.com/)
- [StaffEng](https://staffeng.com/): A collection of [stories](https://staffeng.com/stories) from folks who reached a Staff-plus engineering role, and [guides](https://staffeng.com/guides) for reaching and succeeding at such roles
I built a Saas to make emails sending easy for front-end developers
Published: 2022-12-29 17:09:32


# Hi everyone ! 
TLDR; I coded an application for a simple email sending, and I'm checking if I'm not coding something nobody wants.

I'm Yusuf and I'm freelancing from France since 2016 ✌️.
I'm working mainly on web & mobile apps.
And I worked for clients and for different personals projects for many years.

I often have to make websites / landing pages for my projects or for clients, and naturally, theses needs a contact form that send an email with a message from the website visitor, right ?

## First solution: Use emailling services
We all know the main challengers out there: Sendinblue, Mailchimp, Mailjet etc
Theses are built for marketers actually, with campaigns management, bulk sending, etc...

 1. Creating a profile for each project / client: **Time consuming**
 2. Email configuration, settings: **More time consuming**
 3. Creating templates, setting up variables: **So much time consuming**
 4. I just want to send an email with a message field: **Too much options**

## Second solution: Code my own backend server
There is the steps:

 1. Develop the backend app with the language/framework of your choice.
 2. Install many packages.
 3. Code, code, code
 4. Deploy
 5. Heroku has no more free plan
 6. Search for an alternative
 7. *3 days later*: still runs on localhost

## Third solution (mine hehehe pls read)
I developed a minimalist app to relieve the pain from all of us, front end developers.

**Pros**
 - Only the basic features that matters.
 - Create many emails & test in less than 30 seconds.
 - Google or SMTP
 - Pre-rendered email HTML template
 - Manage access tokens
 - Free for personal use
 
**The Cons**
 - No bulk send options
 - No campaigns
 - Not mailchimp

## How ?
**Steps:**
1. Register
2. Fill the required fields to create an email instance.
3. Create a token & send a test mail.
4. Copy the integration example depending on what language you use.

> At the end, it consist of 1 URL that you POST your message with a Bearer token. And voila ! The email is sent !

## When ?
I'm in the process of finalizing the app right now
I'm also checking if people might want to use / test it, so feel free to drop a comment to support ! 

## Screenshots

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


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


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


Peace form France ! ✌️
Passwordless.ID - Beta testers wanted! (~5 Min)
Tags: feedback, authentication, webauthn, passkey
Published: 2022-12-29 16:57:26

Hello dear developers,

After half a year of slow but steady progress, the first prototype of Passwordless.ID is finally ready! 🎉 

This is meant to be a free public identity provider. But does it work properly? For everyone? 🙄 That's why I need you (yes you) to try it out! 

It will be very quick, I swear. It's basically clicking on a few buttons to register a "passwordless" account, no email required! 

To try it, simply open this demo: https://passwordless-id.github.io/demo/

The [code of the demo](https://github.com/passwordless-id/demo) is tiny, it's really really simple since the goal is to enable any web developer to obtain a user's profile and token trivially.

Please keep in mind that it is an early prototype which lacks some functionality. However, I would already be glad to get some early feedback. Thanks for trying it out!