teleren/devto huggingface dataset:
AWS Community Builders application form is now open
Tags: aws, community
Published: 2023-01-11 20:30:57


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

🚀 The AWS Community Builders application form is now open until January 23rd! 🚀

Here is an opportunity to be a part of a global network of passionate AWS enthusiasts / thought leaders and to level up your skills.

✨AWS Community Builders✨ offers technical resources, education, & networking opportunities to AWS technical enthusiasts who are passionate about sharing knowledge & connecting with the technical community.

How you can become builder:
🔸 Education & Mentorship from AWS SMEs to help you level up
🔸 AWS Promotional credits so you build exciting projects
🔸 Access to AWS Product teams and access new resources
🔸 Community Engagement Opportunities. Have fun & meet others!

🔗 Apply here: https://lnkd.in/eGfy7nam
☁️ Application close January 23rd

You can learn more about the program here:
https://lnkd.in/gDF52wz

Jason Dunn Amazon Web Services (AWS)
#awscommunitybuilders #AWSCommunity #aws #awscertified #awscloud #amazonwebservices #cloudengineer #awscloud #awscertification #community #mentorship #cloud #sharingknowledge #developercommunity #devopscommunity #opportunities2022 #onlinecommunities
Getting all the video thumbnails from a YouTube video
Tags: youtube, images, scraping
Published: 2023-01-11 20:22:40

---
title: Getting all the video thumbnails from a YouTube video
published: true
description: A quick tool to see all the image thumbnails from a youtube video
tags: youtube,images,scraping
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdy1ofnk7qbswpsjtwjn.jpg
canonical_url: https://christianheilmann.com/2023/01/11/getting-all-the-video-thumbnails-from-a-youtube-video/
---

I just wrote myself a [small tool to get all the thumbnail images available](https://codepo8.github.io/youtube-images-scraper) for a YouTube video.

Say you have a Youtube URL, the ID is the last part: [https://www.youtube.com/watch?v=GDukVqBDd3Q](https://www.youtube.com/watch?v=GDukVqBDd3Q), in this case `GDukVqBDd3Q`. Just copy this into the tool and you will get all the images available. You can choose to get JPG or WebP images and you can click each to see it or right-click to save it.

[![Result of the scraper showing all the thumbnails of a video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdy1ofnk7qbswpsjtwjn.jpg)](https://codepo8.github.io/youtube-images-scraper) 

If you feel like doing this by hand, here are the different URLs:

* Player Background Thumbnail (480x360):
  * https://i.ytimg.com/vi_webp/VIDEO_ID/0.webp
  * https://i.ytimg.com/vi/VIDEO_ID/0.jpg
* Video frames thumbnails (120x90)
  * Start: https//i.ytimg.com/vi_webp/VIDEO_ID/1.webp
  * Middle: https://i.ytimg.com/vi_webp/VIDEO_ID/2.webp
  * End: https//i.ytimg.com/vi_webp/VIDEO_ID/3.webp
  * Start: https//i.ytimg.com/vi/VIDEO_ID/1.jpg
  * Middle: https://i.ytimg.com/vi/VIDEO_ID/2.jpg
  * End: https//i.ytimg.com/vi/VIDEO_ID/3.jpg
* Lowest quality thumbnail (120x90)
  * https://i.ytimg.com/vi_webp/VIDEO_ID/default.webp
  * https://i.ytimg.com/vi/VIDEO_ID/default.jpg
* Medium quality thumbnail (320x180)
  * https://i.ytimg.com/vi_webp/VIDEO_ID/mqdefault.webp
  * https://i.ytimg.com/vi/VIDEO_ID/mqdefault.jpg
* High quality thumbnail (480x360)
  * https://i.ytimg.com/vi_webp/VIDEO_ID/hqdefault.webp
  * https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg
* Standard quality thumbnail (640x480)
  * https://i.ytimg.com/vi_webp/VIDEO_ID/sddefault.webp
  * https//i.ytimg.com/vi/VIDEO_ID/sddefault.jpg
* Unscaled thumbnail resolution
  * https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp
  * https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg
Why i prefer Git over TFS (Experience)
Tags: git, opensource, programming, devjournal
Published: 2023-01-11 20:09:17

Git is a distributed version control system that has become a popular choice among developers due to its many advantages over centralized systems like Team Foundation Server (TFS).

One major advantage of Git is its distributed nature. In a centralized system like TFS, all code changes are made in a single central repository, which can be a bottleneck for developers working on large projects. With Git, each developer has their own local copy of the repository, allowing them to work independently without having to constantly communicate with a central server. This also allows for offline development and better performance when working with large codebases.

Another advantage of Git is its branching and merging capabilities. Git's branching model is more flexible than TFS's, which allows for better collaboration among team members. In TFS, branches are often treated as separate silos, making it difficult for developers to share code and collaborate on features. In contrast, Git's branching model allows developers to easily create, merge, and delete branches, making it easier to work on different features in parallel.

Git also has a large and active community of developers, which means that there are many resources available online, including tutorials, documentation, and forums. This makes it easy for developers to learn Git and find answers to any questions they may have.

Finally, Git is an open-source software, which makes it free to use and allows for customization. TFS, on the other hand, is a proprietary product that requires a license and is only available on Microsoft Windows.

In conclusion, Git offers many advantages over Team Foundation Server, including a distributed architecture, better branching and merging capabilities, and a large active community. These advantages make Git a better choice for teams that want to work collaboratively and efficiently on large codebases.
Beautiful HTML Resume Templates with Tailwind CSS
Tags: html, css, tailwindcss, nextjs
Published: 2023-01-11 20:06:09

---
title: Beautiful HTML Resume Templates with Tailwind CSS
published: true
description: Beautiful and modern resume templates built in HTML.
tags: html, css, tailwindcss, nextjs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5g2yxm6wl6bdl1euaq9.png
canonical_url: https://codebushi.com/html-resume-templates
---

Hello! I just released 5 HTML resume templates on my new site, [resumewind.com](https://resumewind.com/).

The Resume Wind marketing site was built with Next.js and Tailwind CSS.

The resume templates themselves are built with Tailwind CSS and are fully mobile responsive. Let me know what you think!

If you want to try them out, leave a comment below and I can send you a discount code.
Modal editing: Here's where I've landed
Tags: blog, vim
Published: 2023-01-11 20:01:56


![Sublime Text & Micro Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/so7fsw8luujpi5qste9x.png)

If you've been following along with my Vim/Modal editing debacle, here's where I've landed.

---------

I'm a all-or-nothing person, so since I can't do modal editing everywhere (without madness) I'm ditching the paradigm

I've been playing around with using `nano` this morning for e.g. Git commits, etc and decided to use [`micro`](https://micro-editor.github.io) instead.

Micro is a great editor after-all. Checkout the customizations I've made to it to make it more useful:

[.config/micro/settings.json](https://github.com/aubreypwd/vcsh/blob/main/.config/micro/settings.json)

[.config/micro/bindings.json](https://github.com/aubreypwd/vcsh/blob/main/.config/micro/bindings.json)

I'm also going to work to have parity with Sublime, here's what I have so far:

[Packages/User/Default (OSX).sublime-keymap#L66](https://github.com/aubreypwd/vcsh/blob/main/Library/Mobile%20Documents/com%7Eapple%7ECloudDocs/Application%20Support/Sublime%20Text/Packages/User/Default%20(OSX).sublime-keymap#L66)

I'm going to start trying to improve my editing techniques in _normal_ editing across my system instead of spamming the GUI menu and sloppy `⌘-` combos to get more and more efficient at editing in macOS.
A chrome extension that lets you select any text and run it through ChatGPT
Tags: chatgpt, javascript, openai, gpt3
Published: 2023-01-11 19:56:18

## select-gpt
A chrome extension that lets you select any text and run it through ChatGPT

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

Github - [https://github.com/mihiraggarwal/select-gpt] 
(https://github.com/mihiraggarwal/select-gpt)  
While browsing any tab, whenever you want to run something through ChatGPT, simply:
- Select that text
- Click on the extension button in the toolbar and await results

Save yourself time and conveniently use select-gpt!

Find instructions to install [here](https://github.com/mihiraggarwal/select-gpt).
Language and Syntax
Tags: html, css, javascript, syntax
Published: 2023-01-11 19:45:22

**HTML**, **CSS**, **JavaScript**, **Python**, **PHP**, **C++**, **Dart** — there are so many programming languages out there and you may even be totally fluent in several of them! But as we aim to write more and better code, the way we write and communicate in everyday language becomes more and more important… and perhaps even overlooked.

The way we write about and around code is arguably as important as the code itself. And despite where you fall on that line, we can all agree that our words have the potential to both help and hurt code’s effectiveness.
🔁 Browse Neo4J EoL versions inside Neo4J AuraDB 🤓
Tags: neo4j, datascience, api, tutorial
Published: 2023-01-11 19:29:17

## ❔ About

Sometimes, you may need to know if the current Neo4J version you are running is up-to-date, **which versions are available**, supported... **or simply if you have the `latest` version of your release so you can achieve maintenance.**

In this post, you'll discover how to achieve this in pure [`Cypher`](https://neo4j.com/developer/cypher/) with the help of [`APOC`](https://neo4j.com/developer/neo4j-apoc/).

To show how easy the process is, we'll do this on [`AuraDB`](https://neo4j.com/cloud/platform/aura-graph-database/), from scratch.

## 🍿 Demo for impatients

{% youtube rpRDstHf-fk %}

## 🕹️ Script time for geeks

```cypher
// Get the current version
call dbms.components() yield name,
  versions,
  edition
unwind versions as version
return name, version, edition;
```


```cypher
// Load all products
CALL apoc.load.json("https://endoflife.date/api/all.json")
  YIELD value
  UNWIND value.result AS product
MERGE (p:EOLProduct {name: product,
  url: 'https://endoflife.date/' + product});

// create unique index
CREATE CONSTRAINT EOL_UNIQUE_PRODUCTS
FOR (p:EOLProduct)
REQUIRE p.product IS UNIQUE;

MATCH (p:EOLProduct) RETURN p;


MATCH (p:EOLProduct) 
  CALL apoc.load.json('https://endoflife.date/api/neo4j.json')
  YIELD value
MERGE (c:EOLCycle {product: p.name,
       cycle: value.cycle,
       eol: value.eol,
       //support: value.support,
       latest: value.latest,
       latestReleaseDate: value.latestReleaseDate,
       releaseDate: value.releaseDate,
       lts: value.lts//link: value.link
       }
       );

// link cycles with products
MATCH
  (c:EOLCycle),
  (p:EOLProduct)
WHERE c.product = p.name
  CREATE (c)-[r:EOL_CYCLE_OF]->(p)
RETURN type(r);
```

... then get releases of `Neo4J` :

```cypher
MATCH (c:EOLCycle)-[r:EOL_CYCLE_OF]->(p:EOLProduct)
  WHERE p.name = 'neo4j'
RETURN c,r,p;
```

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


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


## 🔖 Related content

{% embed https://github.com/endoflife-date/endoflife.date/issues/2211 %}
7 Websites that will change the way you write code🚀👩‍💻
Tags: codequality, programming, productivity, webdev
Published: 2023-01-11 19:23:59

- Here is the list of the best 7 websites to help you write code faster and clean. 


### Blackbox

- Turn any questions into a code snippet or extract a code snippet from a video.

### Carrd

- Build one-page sites for pretty much anything.

### SourceAI

- Explain what you want in plain English, and AI will generate a code snippet for you.

### Getform

- It basically converts HTML form into an endpoint.
- Send emails from the contact form.
- Upload files.
- Automate your workflow.

### Figstack

- One-stop for developers.
- understand code in any programming language.
- Translate programming languages.
- Automate documentation for your functions.
- Get the time complexity of your program.

### Extends Class

- Syntax validators, code formatter, testers, HTTP clients, mock server, and much more.

### Pull Request

- Code Review as a Service.
- Get on-demand code reviews from expert engineers and developers.


Happy working


🎥[Websites links:](https://youtu.be/8z1PJPtQ4qM)

####Bonus:

#### Web developers tools 🛠️ you need to know💡👩‍💻

🎥[Websites links:](https://youtu.be/lj4ZBJbV5yk)

#### Top 6 🔥 API testing tools 2023🚀👩‍💻

🎥[Websites links:](https://youtu.be/reu6fIYtoEs)

#### 5 websites will make you a smarter 🏆 developer👩‍💻 

🎥[Websites links:](https://youtu.be/LgkcEWC6uKY)


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
Step 2:Converting .pem to .ppk on Windows
Published: 2023-01-11 19:20:31

If you don’t already have PuTTYGen and PuTTY already installed navigate to:

PuttyGen

https://www.puttygen.com/#Download_PuTTYgen_on_Windows (Links to an external site.)Links to an external site.

PuTTY

https://www.puttygen.com/download-putty#PuTTY_for_windows (Links to an external site.)Links to an external site.

After installation, review the PuTTYGen and PuTTY instructions for this activity:

Converting .pem to .ppk on Windows

Click on Start menu> All Programs > PuTTY > PuTTYgen.
 

puttygen-window
puttygen-window
The following window will present with options on the crucial a user wants to generate. Select the option ‘RSA (Rivest–Shamir–Adleman). RSA is a public-key cryptosystem that is commonly used to transmit data securely. Users with an older version of PuTTY should select the option – ‘SSH-2 RSA.’
 

Load .PEM file to puttygen
Load .PEM file to puttygen
Next, click on the option ‘Load.’ As PuTTY supports its native file format, it will only show files that have .ppk file extension. Therefore, users have to choose the ‘All Files’ option from the drop-down bar. It will display all key files included the .pem file.
 

save private key
save private key
Now, select the .pem file that you want to convert. As aforementioned that PuTTYgen is used for SSH connectivity, so it crucial for users to select the specific file that they plan to convert and click ‘Open.’ To confirm, click on ‘OK.’
In the resultant window, click on ‘Save private key’ which will convert and save the key file in PuTTY compatible format.
PuTTYgen will prompt a warning of saving the key without a passphrase. Hit ‘Yes’ on it.
 

save private key
save private key
Now, give the name to your file and PuTTYgen will automatically add .ppk file extension.
Launch Amazon EC2 Linux Instance Step 1: Launch a Linux Virtual Machine
Published: 2023-01-11 18:53:28

Step 1: Launch a Linux Virtual Machine

Launch an Amazon EC2 instance

Our first requirement is that our product team would like a Linux web server that has Apache installed on it.  They would also like for it to be publicly accessible, so let’s get going.

1.In the AWS Management Console, find and select the Amazon EC2 dashboard

2.From the Amazon EC2 dashboard, click "Launch Instance"

3.Notice the variety of AMIs located on the AMI page. These are different templates for different types  of machines. Select the Amazon Linux 2 AMI (HVM)

4.Notice the variety of instance types available. Select the t2.micro instance.

5.Select Next: Configure Instance Details

We are going to use our default Amazon VPC and launch our Amazon EC2  instance into the default public subnet where it will automatically assign our virtual machine a public IP  address.

6.Accept the default settings for the Step 3: Configure Instance Details page

7.Click Next: Add Storage

a.We will not need another Amazon Elastic Block Store  (Amazon EBS) volume

8.Click Next: Add Tags

9.Click Add tag then configure:

Key: Name Value: WebServer
10.Click Next: Configure Security Group

11.Configure a new security group as follows:

a.Security group name: WebserverSG

b.Description: Security group for my webserver

A security group works very much the same way as a  firewall. It contains a set of rules that filter traffic coming into and out of an Amazon EC2  instance. By default, all non-local traffic is blocked. For example, webservers typically allow public traffic access on port 80 (HTTP)  and/or port 443 (HTTPS) and also keep SSH rules.  In all 3 rule, keep the IP source as "Anywhere"

c.Click Review and Launch.

12.Review the details, scroll down and click Launch.

13.In the Select an existing key pair or create a new key pair dialog box, choose Create a new key pair, enter a name for the key pair, and then choose Download Key Pair. This is the only chance for you to save the private key file, so be sure to download it. Save the private key file in a safe place. 

14.On the Launch Status page, scroll to the bottom and click View  Instances. You’ll be taken to the Instances page.
ChatGPT or Google?
Tags: chatgpt, openai, openapi
Published: 2023-01-11 18:31:10


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uase67g46a72hb2zer8t.png)
How to create a modal from a div from scratch in Reactjs using CSS?
Tags: help, css, react, html
Published: 2023-01-11 18:29:15

I have tried finding this solution online which shows to use position absolute, top, left, bottom and right 0, and some background color which gives overlay kind of effect, but position absolute will not work for my case.
Please find my code snippet below:

The JSX:
<div className="buttonContainer">
        <div style={{ position: "relative", paddingLeft: "50%"}}>
          <button id="button" onClick={modalHandler}>
            Add new birthday
          </button>
        </div>
        <div style={modalStyle}>
          <Modal
            setOpenModal={setOpenModal}
            setPeople={setPeople}
            setBdaysToday={setBdaysToday}
            fromEdit={fromEdit}
            editId={editId}
            setModalStyle={setModalStyle}
          />
        </div>
</div>

The CSS: 
.buttonContainer{
  display: flex;
  flex-direction: row;
}
For modal, using modalStyles.hidden and visible by toggling it through a useState
export const modalStyles = {
  hidden: {
    display: "none" /* Hidden by default */,
    width: "100%" /* Full width */,
    height: "100%" /* Full height */,
    overflow: "auto" /* Enable scroll if needed */,
    backgroundColor: "rgb(0,0,0)" /* Fallback color */,
    backgroundColor: "rgba(0,0,0,0.4)" /* Black w/ opacity */,
  },
  visible: {
    display: "flex",
    zIndex: 1,
    background: "rgba(0, 0, 0, 0.3)",
  },
};

What can be done such that the modal remains at its current position and I can see that overlay, ie without using position: absolute
Start of Transformation • Week 2 of 2023 • Journey to Full Stack Mastery
Tags: webdev, beginners
Published: 2023-01-11 18:12:00

YES! LOVE IT! Another transformation promise. Another journey. Blah blah...

TLDR: 2023 focus:

1. Junior Full Stack Developer
1. 2nd income stream of £1 per month
1. 100 pushups. 100 squats. 10 handstand pushups. 120s planks.
1. Halal mode. Understand the entire Quran.

Bloody hell, 2022 was a roller coaster. Loads of twists and turns. Loads of dark moments. A few amazing moments. 

I've finally finished my Computer Science degree -- which took 8 years... -- and managed to score a graduate software engineering job. 

At the end of June 2022, I thought I failed my degree. Having only submitted a partial dissertation, my future seemed dark, uncertain. 

Jan last year, I didn't think I'd make it another year. Crazy.

2023 is my year. The birth of Archamedis. I'm not me, not yet. But this years transformation will bring me closer. 

I'll be posting weekly updates on progress. Heard of the 80/20 rule? 80% of this year will be miserable but that'll forge the 20% of a whole new level of me to enjoy.

- Tech stack? ReactJS • C# • .NET
Planning a cloud migration
Tags: cloud, migration, devops, beginners
Published: 2023-01-11 18:09:14

When planning a migration to the cloud, a thorough assessment of the current IT landscape is essential for a smooth and successful transition. The following are key considerations that should be taken into account when conducting a cloud assessment:

Technical Inventory: Conduct a comprehensive evaluation of the existing hardware, software, and network infrastructure to determine which assets need to be migrated and the resources required for the migration process.

Business and Technical Objectives: Understand the specific business and technical requirements of the migration, including performance goals, scalability, and security concerns.

Data and Application Characteristics: Identify and evaluate the data and application that will be migrated, including data volume, complexity, and any specific functional requirements.

Compliance and Regulatory Requirements: Assess the regulatory compliance and security requirements that must be adhered to during the migration process, including data privacy and data sovereignty laws.

Migration Methodology: Choose the most appropriate migration methodology, such as lift and shift, refactoring or re-architecting, or a hybrid approach.

Cloud Service Provider: Select the cloud service provider that aligns with the organization's specific needs and offers the best migration approach.

Risk and Dependency Management: Identify and evaluate any potential risks and dependencies that may impact the migration process, such as data loss, system downtime, or application compatibility issues.

Resource Allocation: Determine the necessary resources, including hardware, software, personnel, and budget, to complete the migration process.

Project Timeline: Develop a detailed project timeline, including milestones and contingencies, to ensure that the migration