teleren/devto huggingface dataset:
Welcome Thread - v280
Tags: welcome
Published: 2024-06-12 00:00:00

---
published_at : 2024-06-12 00:00 +0000
---
![Crocodile waving hello](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4gwqml0v7jagt5es3fc.gif)
---

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

3. Share your wins from this week in our weekly ["What was your win this week?](https://dev.to/t/weeklyretro) thread.
Hosting websites with ipv6 on Hetzner servers
Tags: hosting, ipv6, hetzner
Published: 2024-06-11 23:33:51

I had to set up a website on hetzner cloud with debian, while having to use an ipv6 address. 
I struggled for some time but then stumbled on a [blog post](https://www.blunix.com/blog/ipv6-on-hetzner-cloud-server-for-hosting-a-website.html) that covered the same topic. 

The amount of time it saved me with not having to figure all the details out is insane, if you're also trying to set this up  you should check it out.

genuinely hope for everyone to just stumble on a tutorial for the exact thing they are doing.
[Game of Purpose] Day 24
Tags: gamedev
Published: 2024-06-11 23:19:57

Today I made my drone animate propeller rotation when it's flying. Well, for now it's rotating only 1 of 4, because I didn't figure out how to efficiently trigger events for all of Child Actors of specific type.

{% embed https://youtu.be/tXP4WcLtmh0 %}


Below you can see my pain point. Too many nodes just to trigger event to one propeller, and I have 3 more. There must be a better way.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7nmks10gm3pv7rqougv.png)

Anyway, I cut the propeller from the drone mesh to make a blueprint, which would make it constantly rotate. I needed to use Blender, because a propeller extracted using Modeling Mode in Unreal had a broken pivot point (not in the center) and Blender did the work. Then I moved 4 instances of that Propeller blueprint and will make them rotate.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60y37znwpg464q47cwve.png)
AWS Amplify Gen2 Authentication
Tags: aws, amplify, react, authentication
Published: 2024-06-11 23:15:01

Some times the guides does not help much and something is missing to make thinks work. In this case, this guide will help setting up a new project in AWS Amplify with Cognito Authentication.

There we go with the required steps:

1. Create a GitHub or CodeCommit repo.
2. Create a React App, in my case I'm using Vite.
    
```
npm create vite@latest my-app-name
npm install    
```

3. Add amplify to the new React app

```
npm create amplify@latest
```
4. Commit the changes to master/main branch

5. Create Amplify app in the AWS Console, select your repository and the master/main branch.

6. Once the deployment has been completed, download the file amplify_outputs.json and put it on the root of your project.

7. Add the authentication component, it can be found here: https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/

And that's it, now you can use Cognito authentication in your React app. I spent some time struggling with backend deployment on Amplify but it was because I didn't follow the correct order on this steps, we need first to add the Amplify files (step 3) and then deploy the app (step 5), otherwise the backend deployment will not be there.

See you in a next post!
Day 968 : Find A Way
Tags: hiphop, code, coding, lifelongdev
Published: 2024-06-11 22:05:08

_liner notes_:
- Professional : Was in meetings for the majority of the day. In between, I was able to work on refactoring a project, responded to some community questions and created a ticket for an upcoming trip. The day went by super quick!

- Personal : Yo! I made some pretty great progress on the in-browser highlight video creator project. The reason it was taking so long before to create the video was because it was re-encoding everything. I found a command that will just copy the audio and video. The video is created SO MUCH faster now. I also figured out how to create blank videos and add them to the front and end of the video. Now I need to find a way to add text to them. Once I get that done, I'll be pretty happy with it and can call it complete (for now. haha). Also, went through some tracks for the radio show and looked at some land.

![﻿The image shows a rugged canyon landscape with a large, winding river running through it. The canyon walls are sheer. The sky is a light blue and there are some clouds in the distance. There is a tree in the foreground on a cliff edge. The location is the Grand Canyon in the United States.﻿](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrlyd73c4i086ltl7jq4.jpg)

Going to see if I can get the text added to the blank slides in my highlight video creator. Then I'm going to go through some more tracks. I really need to finish up this logo so I can move forward with this project. Cool. Got my game plan.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube NrG_VLCWGS4 %}
🚀 How to Create React Components Really Quick 🛠️
Tags: webdev, react, ai, javascript
Published: 2024-06-11 22:03:38

Creating components **quickly** is crucial to maintaining high productivity and keeping your project moving forward. Let's explore how to do this **efficiently** and swiftly! 😎💡
Imagine designing and building your components in **Figma** or any tool of your choice, like this:
![profile pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdkcidetj3nf8wgmdkhm.png)
You will spent a lot of time working to improve your wireframe to a real component 👎

## No worries! ✅

You now have the new [Frontend Ai](https://tools.webcrumbs.org)!

Just drag and drop your component picture, you will see it quickly!
![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zra9hd8jbpjyou4j3c8r.gif)

## Code output:
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj4np43jg8aaxfkzpbsh.png)

🌟 **Tired** of your old component design? 😩 No problem! 🎨 Switch it up instantly with new themes! 🚀💻

![themes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owd8qi2iwyzv7fuyo0fp.gif)

## Theres a lot of ways to improve the component style ✨

![right panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i70y3lse6tiogv832c1b.png)

## Try to change the font style 🦾

![fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1le3n7exl55s3lbc6sf.png)

## Try it by yourself💡[**Frontend AI**](https://tools.webcrumbs.org/frontend-ai)

<a href="https://webcrumbs.org" target="_blank">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hntbot736acwm54vn33l.png" alt="Logo Webcrumbs" width="100" height="50">
</a>
@Duolingo is amazing! 🤩
Tags: ios, liveactions, github, swift
Published: 2024-06-11 21:37:45

Github: https://github.com/MaatheusGois/DuoDemo

Excited to share with you a demo I crafted showcasing the latest Duolingo feature on iOS – the Live Activities Dynamic Island.


Let me know what you think! 🚀 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3lmh7is36223lzif8zr.jpeg)
Renting VS Buying LED Wall in Los Angeles
Tags: led, buyledwall, losangeles, rentforevent
Published: 2024-06-11 21:11:46

Here is a comparison of renting vs buying an LED wall in Los Angeles:

Renting an LED Wall: Pros:

Lower upfront costs, since you only pay for the rental period

Flexibility to rent different sizes and resolutions for different events

No maintenance, storage, or repair responsibilities

Good for one-time or occasional use

Rental companies handle delivery, setup, and teardown

Cons:

Higher costs in the long run if you use LED walls frequently

Limited selection and availability dependent on rental company inventory

No ownership of the equipment as an asset

Buying an LED Wall: Pros:

More cost-effective in the long run if you use LED walls regularly

Ownership of the equipment as an asset that can be used indefinitely

Ability to rent out your LED wall and generate revenue

Full control over maintenance, configuration, and customization

Guaranteed availability whenever you need it

Cons:

Significant upfront investment to purchase

Ongoing costs for maintenance, repair, storage, and operation

Requires technical knowledge or staff to set up and run

Technology may become outdated over time

Large equipment requires substantial storage space

In summary, renting is best if you only need an LED wall occasionally or want to try different options, while buying is better if you use LED walls frequently and want full ownership and control. The best choice depends on your specific needs, budget, and long-term plans. I recommend getting quotes from AV rental companies and LED wall manufacturers in LA to compare the costs for your situation.
If you're looking to rent an LED wall for your upcoming event in Los Angeles, consider [RentForEvent](https://rentforevent.com/la/). They offer a wide selection of high-quality LED walls in various sizes and resolutions, along with professional delivery, setup, and teardown services. Their experienced team will work with you to choose the perfect LED wall solution for your event needs and budget.

On the other hand, if you're interested in purchasing an LED wall for long-term use or rental opportunities, consider Buy LED Wall. As a leading LED wall manufacturer and supplier in Los Angeles, they offer a range of high-performance LED panels and complete LED wall systems for sale. Their team can provide expert guidance on choosing the right LED wall product for your specific requirements, as well as training and support for installation and operation.
Contact RentForEvent for your LED wall rental needs or [Buy LED Wall ](https://rentforevent.com/la/buy-led-wall/)for purchasing options, and take your events to the next level with stunning visual displays in Los Angeles.
$in, $nin, $implicit in MongoDB: Examples and Usage🔥
Tags: mongodb, database, kawsarkabir
Published: 2024-06-11 20:20:16

## Understanding `$implicit`

Let's first understand how `$implicit` works. Suppose you're asked to fetch data for individuals aged more than 18 and less than 30. How would you do that? Let's explore through an example:

Imagine we have a database named `school` with a collection called `students`.

```javascript
db.students.find({ age: { $gte: 18, $lte: 30 } });
```

- `db.students` indicates that we are working with the `students` collection.
- The `find` method is used to search for all the matching data.
- `{ age: { $gte: 18, $lte: 30 } }` is the search criteria, which specifies that we are looking for documents where the `age` is greater than or equal to 18 and less than or equal to 30.

## Using `$in`

Now, suppose you are asked to fetch data for individuals aged 18, 20, 10, and 4. You can easily achieve this using `$in`. Let's understand through an example:

```javascript
db.students.find({ age: { $in: [18, 20, 10, 4] } }, { age: 1 });
```

- `db.students` indicates that we are working with the `students` collection.
- The `find` method is used to search for all the matching data.
- `{ age: { $in: [18, 20, 10, 4] } }` is the search criteria, specifying that we are looking for documents where the `age` matches any of the values in the array `[18, 20, 10, 4]`.
- `{ age: 1 }` specifies that only the `age` property will be shown in the results.

## Using `$nin`

`$nin` is the opposite of `$in`. In this case, you will get all data except for the values you provide. For example:

```javascript
db.students.find({ age: { $nin: [18, 20, 10, 4] } }, { age: 1 });
```

- `{ age: { $nin: [18, 20, 10, 4] } }` is the search criteria, specifying that we are looking for documents where the `age` does not match any of the values in the array `[18, 20, 10, 4]`.
- `{ age: 1 }` specifies that only the `age` property will be shown in the results.

Feel free to check out my GitHub [Kawsar Kabir](https://github.com/kawsarkabir) and connect with me on [LinkedIn](https://www.linkedin.com/in/kawsarkabir/).
CSS Padding
Tags: webdev, css, beginners, programming
Published: 2024-06-11 20:16:39

The [CSS padding](https://www.devwares.com/tailwindcss/classes/tailwind-padding/) properties are used to generate space around an element's content, inside any defined borders. Padding does not include [margins](https://www.devwares.com/tailwindcss/classes/tailwind-margin/) or borders.


## Padding - Individual Sides
CSS allows you to set the padding for individual sides of an element:

```css
div {  
padding-top: 50px;  
padding-right: 30px;  
padding-bottom: 50px;  
padding-left: 80px;
   }
```
In this example, the top padding is 50px, the right padding is 30px, the bottom padding is 50px, and the left padding is 80px.


## Shorthand Property: Padding

The padding property is a shorthand property for padding-top, padding-right, padding-bottom, and padding-left.

```css
div {  
padding: 25px 50px 75px 100px;
}
```
In this example, the top padding is 25px, the right padding is 50px, the bottom padding is 75px, and the left padding is 100px.

You can also provide less than four values:
If you provide one value, it applies to all sides. For example, padding: 25px;.

If you provide two values, the first value applies to the top and bottom padding, and the second value applies to the right and left padding. For example, padding: 25px 50px;.

If you provide three values, the first value applies to the top padding, the second value applies to the right and left padding, and the third value applies to the bottom padding. For example, padding: 25px 50px 75px;.

## Padding and Element Width

By default, the width of an element is calculated like this: width + border = actual width of an element.

If you set the CSS box-sizing property to border-box, the padding and border are included in the element's total [width](https://www.devwares.com/tailwindcss/classes/tailwind-width/) and [height](https://www.devwares.com/tailwindcss/classes/tailwind-height/):

```css
div {  box-sizing: border-box;}
```

In this example, if you set a div element to be 300px wide, that 300px will include any border or padding you added, and the [content](https://www.devwares.com/tailwindcss/classes/tailwind-content/) box will [shrink](https://www.devwares.com/tailwindcss/classes/tailwind-flex-shrink/) to absorb that extra width. This typically makes it much easier to size elements.
Smooth Transition of Dynamic Heights
Tags: css, coding, programming, tutorial
Published: 2024-06-11 20:09:46


# ① Height Transition

`index.html` and `style.css` have already been provided in the VM.

This code snippet transitions an element's height from `0` to `auto` when its height is unknown by performing the following steps:

- Use the `transition` property to specify that changes to `max-height` should be transitioned over a duration of `0.3s`.
- Use the `overflow` property set to `hidden` to prevent the contents of the hidden element from overflowing its container.
- Use the `max-height` property to specify an initial height of `0`.
- Use the `:hover` pseudo-class to change the `max-height` to the value of the `--max-height` variable set by JavaScript.
- Use the `Element.scrollHeight` property and `CSSStyleDeclaration.setProperty()` method to set the value of `--max-height` to the current height of the element.
- **Note:** This approach causes reflow on each animation frame, which may cause lag when there are a large number of elements below the transitioning element.

```html
<div class="trigger">
  Hover over me to see a height transition.
  <div class="el">Additional content</div>
</div>
```

```css
.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}
```

```js
let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");
```

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the **Web 8080** Tab to preview the web page.

# ② Summary

Congratulations! You have completed the Height Transition lab. You can practice more labs in LabEx to improve your skills.

---

## Want to learn more?

- 🚀 Practice [Smooth Transition of Dynamic Heights](https://labex.io/tutorials/css-smooth-transition-of-dynamic-heights-35207)
- 🌳 Learn the latest [CSS Skill Trees](https://labex.io/skilltrees/css)
- 📖 Read More [CSS Tutorials](https://labex.io/tutorials/category/css)

Join our [Discord](https://discord.gg/J6k3u69nU6) or tweet us [@WeAreLabEx](https://twitter.com/WeAreLabEx) ! 😄
Revised 150+ LeetCode in 2 hours
Tags: javascript, leetcode, interview, beginners
Published: 2024-06-11 19:39:29

<p align="center">
  <a href="https://nextjs.org">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="./logo.png">
  </a>
</p>

<p align="center">
  <a aria-label="License">
    <img alt="" src="https://img.shields.io/npm/l/next.svg?style=for-the-badge&labelColor=000000">
  </a>
  <a aria-label="Connect" href="https://www.linkedin.com/in/prathamesh-sahasrabhojane">
    <img alt="" src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white&labelColor=000000"">
  </a>
</p>


## LeetCode Submission Saver 
[Github](https://github.com/TheShubham99/leetcode-to-pdf)

LeetCode Submission Saver is a tool that allows users to save all their accepted submissions from LeetCode to a PDF file for easy reference and offline access.

## How to Use

1. **Copy the Script**: Copy the code from [leetcode-pdf.js](https://github.com/TheShubham99/leetcode-to-pdf/blob/main/leetcode-pdf.js) This script contains the necessary functionality to extract and save accepted submissions from LeetCode.

2. **Log in to LeetCode**: Visit the LeetCode website (https://leetcode.com) and log in to your account.

3. **Open Developer Tools**: Right-click on the webpage and select "Inspect" or press `Ctrl + Shift + I` to open the Developer Tools panel.

4. **Go to Console**: In the Developer Tools panel, navigate to the "Console" tab.

5. **Paste the Code**: Paste the code copied from `leetcode-pdf.js` into the console and press `Enter` to execute it.

6. **Follow Instructions**: Follow the on-screen instructions to complete the process, which may include authenticating with LeetCode and initiating the PDF generation.

7. **Observe the Console**: After pasting the code, wait for a few moments and observe the console for any errors or messages.

8. **View the Output**: Once the process is complete, the generated PDF will be available for download.


{% embed https://www.youtube.com/embed/hbQM4ioN3b4?si=TBEPfysizT5qo11l %}

## Credits

Inspired by [Leetcode Downloader for Submissions](https://github.com/world177/Leetcode-Downloader-for-Submissions) by world177.

## Contributing

Contributions are welcome! If you have any ideas for improvements or feature requests, feel free to open an issue or submit a pull request.

## License

This project is licensed under the [MIT License](LICENSE).

---

**Disclaimer**: This project is not affiliated with LeetCode. Use it responsibly and in compliance with LeetCode's terms of service.
This is for you, let's build some cool stuff! 🚀✨
Tags: codenewbie, webdev, discuss, learning
Published: 2024-06-11 19:36:33

Hey Folks, 🎉

It's time to bring your ideas to life! 💡 Whether you're a designer, developer, content creator, or just have a passion to create something amazing, this is your chance. 🚀

No matter your skill level—beginner or pro, student or full-time professional—your dream project awaits. 🌟 Use your nights and weekends to build something you've always wanted. 🔨✨

You might know me from my previous blog on "[Using Google Apps Script](https://dev.to/sauravshah31/using-google-apps-script-create-a-todo-web-app-4cah)." 📚 Now, it's time to use those skills to create an actual product. 🛠️

And here's the fun part: I'm diving into this journey too, building something I'm passionate about. ❤️ I'll be documenting the process with plenty of technical blogs along the way. 📖🔧

**For you, I have buddy passes to [Buildspace's](https://buildspace.so/) [@_nightsweekends](https://x.com/_nightsweekends) S5. 🎟️ You will be accepted automatically. Click on [this invitation link and join nightsweekends s5](https://sage.buildspace.so/buddy/saurav-rNlBvQC). Let's create something incredible together with loads of other excited folks [@_nightsweekends](https://x.com/_nightsweekends)!** 🌍👥


[@sauravshah31](https://x.com/sauravshah31) - Feel free to connect, let's share the journey together
Desafío de Nombres y Apellidos
Tags: elixir, chile, javascript, ejercicios
Published: 2024-06-11 19:29:00

---
title: Desafío de Nombres y Apellidos
published: true
description: Un pequeño ejercicio para filtrar nombres y apellidos
tags: elixir, chile, javascript, ejercicios
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f01mofctkpptddwkqh3e.jpg
# Use a ratio of 100:42 for best results.
published_at: 2024-06-11 19:29 +0000
---

El siguiente es un pequeño ejercicio encontrado en el curso de _Haskell_
disponible en la [Universidad de Helsinki](https://haskell.mooc.fi/part1).

## Desafío

Dado una lista de nombres y apellidos:

- Nombres: `["Eva", "Mike"]`
- Apellidos: `["Smith", "Wood", "Odd"]`

Retornar una lista cuyos elementos sean solo de personas con largo par.

**Ejemplo de Retorno**

- `["EvaSmith", "EvaOdd", "MikeWood"]`

## Solución en Haskell

Haskell permite pattern matching y `list comprehensions`.

```haskell
[whole | first <- ["Eva", "Mike"],
         last <- ["Smith", "Wood", "Odd"],
         let whole = first ++ last,
         even (length whole)]
```

## Solución en Elixir

Si bien la solución en _Elixir_ no es tan corta como en _Haskell_
es igual de elegante.

```elixir
require Integer

for first <- ~w[Eva Mike],
  last <- ~w[Smith Wood Odd],
  name <- [first <> last],
  name
  |> String.length()
  |> Integer.is_even(), do: name
```

Para esto utilizamos las características de `for comprehensions`.

- https://elixirschool.com/en/lessons/basics/comprehensions

## Solución en Javascript

_David_ de _Javascript Chile_ nos escribe una solución en versión
imperativa y declarativa utilizando _Javascript_.

**Imperativa**

```javascript
const nombres = ["Eva", "Mike"];
const apellidos = ["Smith", "Wood", "Odd"];

const output = [];

for(let i = 0; i < nombres.length; i++){
    for(let j = 0; j < apellidos.length; j++){
        const fullName = `${nombres[i]}${apellidos[j]}`;
        if(fullName.length % 2 == 0){
            output.push(fullName);
        }
    }
}
```

**Declarativa**

```javascript
const nombres = ["Eva", "Mike"];
const apellidos = ["Smith", "Wood", "Odd"];

const output = nombres.flatMap(n =>
        apellidos.map(a => `${n}${a}`)
    )
    .filter(fullName => fullName.length % 2 == 0);
```

**Elixir**

La versión declarativa de _Javascript_ la podríamos emular en _Elixir_ de la siguiente
forma:

```elixir
~w[Eva Mike]
|> Enum.flat_map(fn first ->
  ~w[Smith Wood Odd]
  |> Enum.map(fn last ->
    first <> last
  end)
end)
|> Enum.filter(&
    &1
    |> String.length()
    |> Integer.is_even()
)
```

Aunque no es tan elegante como usar `for comprehensions`.

**¿En qué otros lenguajes puedes solucionar el desafío?**