teleren/devto huggingface dataset:
Windows WSL Setup (with GIFs)
Tags: wsl, ubuntu
Published: 2019-06-25 04:25:48

## Enable the Windows Subsystem For Linux (WSL)
- Hit the “Windows” key and start typing “Windows features”
- Press enter when “Turn Windows features on or off” pops up (you can also find from Control Panel > Programs)
- Search for the “Windows Subsystem for Linux” setting in “Windows Features”
- Check the box. Another popup should appear telling you to restart your computer

![](https://thepracticaldev.s3.amazonaws.com/i/08x76et7b61ws9c04gdz.gif)

## Install the Ubuntu terminal
- Hit the “Windows” key and start typing “Ubuntu”. The Microsoft Store app should open.
- Press the “Install” button. A popup might appear asking you to login to your Microsoft account, you can just exit it.

![](https://thepracticaldev.s3.amazonaws.com/i/623s7xuqn9xvhbx8tumz.gif)

After it’s finishing downloading, you can exit the Microsoft Store and launch the Ubuntu app by hitting the “Windows” key and typing “Ubuntu”.

The terminal should appear and start installing.

![](https://thepracticaldev.s3.amazonaws.com/i/pg7629mb6qdbvh7vgl5f.gif)

After it’s done installing, it should ask you for a username and password for the new user account that is being created.

Once the account is done creating, you should see the terminal prompting you for a command: `username@computername:~$`

![](https://thepracticaldev.s3.amazonaws.com/i/nn09iubqlukdt0jbw3y7.gif)

Note that the password you type will not show up in the terminal.

You’ve successfully setup WSL! 🎉 
Now it's time to get hacking 👩‍💻
The Frontend Challenge: 🍩 Donut eat my favorite snack!
Tags: frontendchallenge, devchallenge, css
Published: 2024-03-22 19:13:56

_This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack._

## Inspiration 

I think the cover image is more than explicit. I will be drawing a **Donut** which is the favorite snack of many of you.

To draw this snack, I invited a Donut expert to help me get the perfect output and make sure my art is so realistic that you want to eat it but **donut eat it!**

I know, I know. You are excited to see the result, so let's jump straight to the demo.

![drum roll](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYXV1bzRsbGNla2FteTRpYm5wcDdxODIyMXBxZnd1N2szN3I0bDNwNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ItiWsSXpHKPvphL5Hw/giphy.gif)

## Demo

Ladies and gentlemen here is my CSS Art: A Beautiful Donut 🥳

{% codepen https://codepen.io/t_afif/pen/oNOZQWG %}

## Noooooooooooo 😱

---

He was supposed to help me draw a Donut not eat it. I spent a lot of time making a perfect donut but now it's over... 😩

Sorry for this inconvenience, instead of a Donut my entry will be "Homer Simpson ate my Donut".

I was really proud of my Donut...

![facepalm](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNG41ZTNsbHgyNDNydWN2aXJvejl0dWNjNXg2ejhydWxoMXF4MWpociZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/27EhcDHnlkw1O/giphy.gif)

---

Wait a minute, nothing is lost! I have tried to make a few donuts before he came. Yes, I am saved!

Well, they are not as perfect as the one Homer ate but still good ones. 

Hurry Up and select one before he eats them as well!

{% codepen https://codepen.io/t_afif/pen/NWmjbXy %}

## Journey

I wanted something a bit surprising and creative so I hope you liked this plot twist 😁

The donut is a single-element implementation and can be easily adjusted to get as many variations as you want. I used an `<input>` tag to get that "eating" effect on click.

Drawing Homer Simpson was more complicated but it was a good opportunity to get back to some [CSS Arts](https://css-only.art/) so thank you for this challenge! 

The demos are best viewed in Chrome (or Firefox). 

<sup><sup>Please, don't ask me about Safari</sup></sup>
Open API with Postman
Tags: 100daystooffload, postman, openapi, tooling
Published: 2024-03-22 19:09:50

I had to do some exploring/testing of an API today and thought that [Postman](https://www.postman.com/) would be the tool for the job.

The API had an [OpenAPI](https://www.openapis.org/) endpoint built with [Swagger](https://swagger.io/) where I could download a JSON specification file for the API.

And lucky me, I found this repository, [openapi-to-postman](https://github.com/postmanlabs/openapi-to-postman). Now I could easily get a collection of requests for the API I wanted to explore. This without manually building up each request in Postman.

The tool is a Node module and converts OpenAPI specification files to a file format that can be imported by Postman.

This is how I used it in this case. First step is to install the tool.

```bash
npm i -g openapi-to-postmanv2
```

Then I navigated to my downloaded `openapi.json` and used this command.

```bash
npx openapi2postmanv2 -s openapi.json -o collection.json -p -O folderStrategy=Tags,includeAuthInfoInExample=false
```

Which created the `collection.json` file that I could use to import it in Postman.

![import in postman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hltgbr2fvqi46gi1zawx.png)

Very easy and simple! The funny thing is that after this I found this documentation, [Integrate Postman with OpenAPI](https://learning.postman.com/docs/integrations/available-integrations/working-with-openAPI/), on learning.postman.com.

The import already support the OpenAPI standard, so I didn't really need to use the converter at all.

![import dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2r0cyiznbdc2cqkm64t.png)

Sometimes it's best to start with the documentation than start searching on the net. However, the good part was that the converting step was super easy, and the collection worked perfectly with Postman.
A good documentation can lead you to be better
Tags: beginners, codenewbie, writing, learning
Published: 2024-03-22 19:08:15

Hello!

I'm sure you've encountered a lot of **documentation** in your life, whether it was for studies or work. Even your mom probably already read documentation on how to change her profile picture on Facebook! **But have you ever considered the importance of writing your own documentation?**

> Creating your own documentation can help you retain the information you're learning. Write it as if you're explaining to someone else what you're studying.

It's not an easy task, but this exercise will **engage your brain** and help you fix the knowledge you've acquired. Imagine this: one day, you ask a senior developer about a function in the code you're working with and they explain how each component works within the code. Now, fast forward a few days, and you need to revisit that part of the code but you have forgotten how it works. Wouldn't it be better if you had a **documentation** to support you?

Documentation is an important step, you'll be showcasing **how much you know** and **how much care you put into your code and work**. And now, I'd like to share a few tips that I use when I'm writing:

## Write first and edit later

You know when you are studying or coding and you think about everything all at once? **Write it down!** Don't worry about whether it's right or if it makes sense. Just write. Put your thoughts into words.

After you finish, give it some time, like 30 minutes or 1 hour, and then come back to it. Read it and see what you can improve. Repeating this will help you to improve your writing skills. **Trust me.**

## Pretend you're explaining it to someone unfamiliar with technology

When writing and trying to explain something, imagine that you are **talking to someone who doesn't understand how technology works**. This will help you think of the best ways to communicate what you mean, maybe it'll be through texts only, or maybe it'll be clearer if you add drawings, images, videos, etc.

**As technical writers, we need to ensure that everything we write is easy to understand, regardless of the reader's level of expertise.**

## Keep it organized

There are a bunch of tools, like Notion or Obsidian, that can help you stay organized with all the content you are going to produce. **They will help you find the information you are looking for in an easier way.** Do a bit of research before you start and try different tools at first. You can learn how you can use the tools and the best way to organize your content, like links between contents, tags, folders, and others.

## Conclusion

**Good writing doesn't come easy.** It's an exercise, and every day we all improve a little. But I dare you do it anyway! You'll find it becomes easier every day and in the future you'll be thankful for starting it.

Now, tell me, do you already write about the things you develop or study? If yes, how do you do it? If not, are you interested? Let me know, and let's exchange experiences.

Thank you for reading and see you soon!

---
_Cover image by pch.vector from Freepik._
The open source image ?
Tags: opensource, openeducation, metaverse
Published: 2024-03-22 18:25:54

With the resource printed, I went to an open source event to ask this question to open source professionals: is it open source ?

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

« An image being open source is not something I already considered », « Interesting question », « I sometimes have to fight with my colleagues when they share their pdf with me to get them to share the source with me ». [approximate quotations from memory]

« Is that metaverse? » (or « it's a bit meta », I can't remember precisely)

With an intent to consider the meaning of open source beyond software, the approach was simply to show them the image and, in a reflexive way, let them tell me whether it was open source or not. Usually done with a small group of people.

After some debate about the right to use logos, the question was all about the availability of sources through this QR code. It brings to the web page presenting the workshop of the image itself: https://open-source-undefined.org/workshops/image/open-source-image.html

I asked between 10 and 15 people and nobody automatically replied that it was open source.

After the discussions, nobody told me that it wasn't open source. The majority said yes, a few undecideds. It looks like an open source resource.

From this unexpected format, this challenged their conception of what open source is. The experiment raises a number of questions on the knowledge that open source professionals can have about open source.

It was a very interesting workshop to do, particularly from an (open) educational point of view. First, it could be used in this type of setting. People seemed to appreciate the reflection and the approach, being active in the process, without even realizing that they were undergoing some kind of training.

More entertaining than just explanations on open source resources, it even creates some discussions afterwards.

If you might be interested in the OER, there are ideas for improvements, I think it could be interesting to develop it: https://github.com/Open-Models/Open-Source-Undefined/issues/21

It may have planted a few seeds that could follow them every time they talk about open source.

I went to an open source event to ask what open source was, but obviously it wasn't clear to them either. According to them, I would have made open source with this image.

This would mean that you could do open source without knowing how to program, and without even working on software.

This image, open source or not open source ? And even further, an open source educational resource?
ثبت نام سایت انفجار
Published: 2024-03-22 18:25:14

سلام به همه ی دوستان عزیز و علاقمند به بازی های آنلاین! امروز می خواهیم درباره ی یکی از پرطرفدارترین بازی های آنلاین صحبت کنیم و آن هم بازی انفجار است. این بازی جذاب و هیجان انگیز که در ایران و جهان بسیار مورد علاقه است، باعث شده تا بسیاری از افراد به دنبال راه هایی برای شرکت در آن باشند. یکی از مهمترین راه ها برای شرکت در بازی انفجار، ثبت نام در سایت های معتبر و قانونی است.

[ثبت نام سایت انفجار](https://enfejar.website/enfejar-register/) بسیار آسان و سریع است. شما فقط کافی است که به سایت مورد نظرتان مراجعه کنید و فرآیند ثبت نام را طی کنید. در این فرآیند شما باید اطلاعات شخصی خود را وارد کنید و یک حساب کاربری بسازید. بعد از اتمام این مراحل، شما می توانید به راحتی بازی انفجار را شروع کنید و از تمامی امکانات و جوایز آن بهره مند شوید.

یکی از مزیت های ثبت نام در سایت های انفجار، این است که شما می توانید به صورت آنلاین و از هر کجا که هستید به بازی انفجار شرکت کنید. بدون نیاز به حضور فیزیکی در یک مکان خاص، شما می توانید هر زمانی که دلتان بخواهد بازی کنید و از لذت و هیجان این بازی لذت ببرید.

اگر علاقه مند به شرکت در بازی انفجار هستید، پیشنهاد ما این است که از سایت های معتبر و با تجربه استفاده کنید. این سایت ها امنیت و رضایت کاربران را به عنوان اولویت خود قرار داده اند و به شما تجربه یک بازی حرفه ای و لذت بخش را ارائه می دهند.

پس چه می گویید؟! آیا آماده انجام ثبت نام در سایت های انفجار هستید؟! پس بلافاصله به سایت مورد نظرتان مراجعه کنید و شروع به بازی کنید. ما اطمینان داریم که تجربه ای فوق العاده و هیجان انگیز را خواهید داشت. به امید موفقیت و شادکامی در بازی انفجار!
How to update Go version of tailscaled on macOS
Published: 2024-03-22 18:09:43

I'm using the GitHub version of `tailscaled` on one of my Macs as a [background daemon launched at boot](https://github.com/tailscale/tailscale/wiki/Tailscaled-on-macOS). To upgrade to the latest version, try the following:

```
sudo launchctl stop com.tailscale.tailscaled
go install tailscale.com/cmd/tailscale{,d}@main
sudo $HOME/go/bin/tailscaled install-system-daemon
tailscale up
```

If you don't re-install the system daemon from your user's local installation, the old version will continue to get launched at boot.

Hope this helps someone!
How to push Docker Image to Public and Private AWS ECR Repository
Tags: aws, awsecr, docker, containers
Published: 2024-03-22 17:55:00

In this short tutorial we will see how we can push a Docker Image to a private or public registry in ECR.

## Step 1: Create an AWS ECR Repository

A Private Repository: It will be managed and accessed by IAM and Registry Policy Permissions and not be accessible by everyone.

![Private ECR Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tftpcc7uboq71b4z5gkd.png)

OR

A public Repository: It will be accessible by everyone.

![Public ECR Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gv3r0zqxsjbmuywk3en.png)

Created Repository
Private ECR Repo:
![Private ECR Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e88wlheb1tha8ux3qnwv.png)
Public ECR Repo:
![Public ECR Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfdsadjkuj0t3f1cd95t.png)

## Step 2: Prepare Docker Image to be pushed to ECR

I have taken an example of a simple Nodejs application got from the internet and created an image on Docker Desktop using following command from the directory where DOCKERFILE for my app is present.

```
docker image build -t simple-nodejs-app.
```

Tag the image before pushing to ECR
For Private ECR Repo
```
docker tag simple-nodejs-app:latest 197317184204.dkr.ecr.us-east-1.amazonaws.com/simple-nodejs-app:latest
```
For Public ECR Repo
```
docker tag simple-nodejs-app:latest public.ecr.aws/n4o6g6h8/simple-nodejs-app:latest
```

## Step 3: Authenticate Docker to AWS ECR
You will need AWS credentials configured and required IAM permissions to that AWS user.
For Private ECR Repo:
```
aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin 197317184204.dkr.ecr.us-east-1.amazonaws.com
```
For Public ECR Repo:
```
aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws/n4o6g6h8
```

## Step 4: Push Image to ECR
For Private ECR Repo:
```
docker push 197317184204.dkr.ecr.us-east-1.amazonaws.com/simple-nodejs-app:latest
```
For Public ECR Repo:
```
docker push public.ecr.aws/n4o6g6h8/simple-nodejs-app:latest
```

Image pushed to Private ECR Repo
![Image in Private Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbivszbszva7pwcmdivp.png)

Image pushed to Public ECR Repo
![Image ins Public Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gie9ei6fvaum1u3zifhe.png)

Screenshot
![Sample Image Push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h29sc8q9duxzrfkf6ze1.png)



And the image is ready to be used in a container started in an ECS or EKS cluster.
Navigating the Developer's Dilemma: Challenges in the World of Coding
Published: 2024-03-22 17:48:48

Embarking on the journey of software development is akin to navigating a labyrinth of challenges, where each turn presents a new obstacle to overcome. For developers, these hurdles aren't merely lines of code to debug or algorithms to optimize; they are complex puzzles demanding innovative solutions.

One of the foremost challenges developers face is the perpetual evolution of technology. As frameworks, languages, and tools evolve at breakneck speed, staying abreast of the latest advancements becomes a daunting task. Moreover, the pressure to deliver high-quality code within tight deadlines often leads to a precarious balancing act between efficiency and efficacy.

In the midst of this technological whirlwind, developers encounter unexpected interruptions, such as the urgent need for [Miami EXP Cleaning](https://www.miamiexpcleaning.com/). Despite such interruptions, they must stay focused and agile, adapting to the demands of the moment while maintaining the integrity of their code.

Another pressing concern is the omnipresent bug. No matter how meticulously crafted a program may be, bugs inevitably rear their elusive heads, necessitating exhaustive debugging sessions that can be both time-consuming and frustrating.

Furthermore, collaboration in a team setting introduces its own set of challenges. Coordinating efforts, maintaining version control, and resolving conflicts amidst divergent coding styles require adept communication and interpersonal skills as much as technical prowess.

In this dynamic landscape, the modern developer must navigate through a labyrinth of technical, temporal, and interpersonal challenges, armed with resilience, adaptability, and an insatiable thirst for innovation. Only by confronting and overcoming these obstacles can developers truly thrive in their craft.
Crafting Creative Layouts: A Concise Guide
Tags: ui, ux, uidesign, beginners
Published: 2024-03-22 17:22:05

Crafting captivating layouts for web design demands a blend of creativity, technical finesse, and user-centric thinking. Whether you're a veteran designer or an eager beginner, this concise guide will steer you through the process, ensuring your layouts not only look visually appealing but also engage users effectively.

1. Know Your Audience: Understanding your target audience is paramount. Dive deep into their preferences, behaviors, and needs to tailor your layouts effectively.

2. Set Clear Objectives: Define precise goals for your project to ensure your layouts align with your website's purpose and drive desired actions from users.

3. Seek Inspiration: Explore diverse sources like design blogs, social media, and showcases to gather inspiration and insights that fuel your creativity.

4. Sketch and Wireframe: Begin by sketching rough ideas and creating wireframes to map out the structure and layout of your website logically.

5. Prioritize Visual Hierarchy: Guide users' attention using size, color, typography, and spacing strategically to create an intuitive flow through your layouts.

6. Experiment with Grids: Employ grid systems to organize content and maintain balance in your layouts, ensuring consistency and alignment.

7. Harness Typography and Imagery: Use typography and imagery to convey mood, tone, and brand personality, experimenting with font pairings and imagery choices.

8. Embrace White Space: Allow elements to breathe by embracing white space, reducing clutter, and enhancing readability for a more sophisticated look.

9. Test and Iterate: Conduct usability testing and gather feedback to refine your designs iteratively, ensuring they meet user needs effectively.

10. Stay Updated: Keep abreast of industry trends and advancements, continuously refining your skills and embracing innovation to keep your layouts fresh and engaging.
✨💻
A comprehensive guide to mastering the art of UI design
Tags: ui, ux, design, web
Published: 2024-03-22 17:14:11

Embark on a transformative journey into the captivating world of seamless UI design, where every pixel carries meaning and every interaction is an opportunity to delight users. 🚀💻 Crafting an exceptional app experience transcends mere aesthetics; it's about diving deep into the psyche of your audience, understanding their behaviors, and sculpting digital landscapes that resonate on a profound level. 🌟✨

😀User-Centric Approach: Begin by immersing yourself in the minds of your users. What are their pain points? What are their goals? Tailor your design to meet their needs.

😎Embrace Usability: Strive for simplicity in every aspect of your design. Ensure that users can effortlessly navigate through your app without friction or confusion.

🤩Consistency Matters: Establishing a cohesive visual identity fosters familiarity and builds trust. Consistent use of typography, color palettes, and design elements enhances the overall user experience.

🙂Functionality First: While aesthetics are important, functionality should always take precedence. Every element within your app should serve a clear purpose and contribute to the user's journey.

🔂Iterate and Improve: Design is an iterative process. Solicit feedback early and often, and be willing to refine and iterate upon your designs based on user insights.

Join me as we delve deep into the delicate balance between form and function, where design meets psychology and innovation fuels inspiration. 🎨💡 Let's transform complexity into simplicity and turn ideas into interactive realities that leave a lasting impression. 💫📱