teleren/devto huggingface dataset:
Gana $50 dólares en créditos de AWS mientras aprendes sobre DevOps y AWS en español
Tags: awsdevops, devopsespañol, awsespañol, terraformespañol
Published: 2023-12-13 18:36:12

En TerraSpacio, nuestro objetivo es cambiar el panorama actual de YouTube al proporcionar contenido excepcional sobre DevOps y AWS en español. Sabemos que menos del 2% del contenido sobre estos temas está disponible en nuestro idioma, y estamos decididos a cambiar eso. Soy Augusto Valdivia, tu guía en este viaje hacia el dominio de DevOps y AWS.

Para comenzar con emoción, ¡estamos realizando un sorteo! Regalaremos 15 códigos de crédito de $50 para usar en AWS. Participar es sencillo: solo suscríbete al canal y deja un comentario explicando por qué te interesa aprender sobre tecnología y cuáles han sido tus desafíos al buscar contenido en español en YouTube. Yo mismo enfrenté dificultades al inicio, pero juntos podemos superarlas.

Creo firmemente en el valor de esta propuesta y su potencial para ayudar a otros. Si estás de acuerdo, te invito a compartir esta oportunidad con tu red. En TerraSpacio, tendrás acceso a la experiencia completa que necesitas para aprender DevOps en AWS utilizando Terraform, la herramienta más popular del mercado.

¡Únete a nuestra comunidad y seamos parte del crecimiento del contenido en español sobre DevOps y AWS! Gracias por ser parte de TerraSpacio. Juntos, cambiaremos las reglas del juego en YouTube.

[TerraSpacioYoutube](https://www.youtube.com/watch?v=vE5uzZnls_Q)
Gana $50 dólares en créditos de AWS mientras aprendes sobre DevOps y AWS en español
Tags: awsdevops, devopsespañol, awsespañol, terraformespañol
Published: 2023-12-13 18:32:56

En TerraSpacio, nuestro objetivo es cambiar el panorama actual de YouTube al proporcionar contenido excepcional sobre DevOps y AWS en español. Sabemos que menos del 2% del contenido sobre estos temas está disponible en nuestro idioma, y estamos decididos a cambiar eso. Soy Augusto Valdivia, tu guía en este viaje hacia el dominio de DevOps y AWS.

Para comenzar con emoción, ¡estamos realizando un sorteo! Regalaremos 15 códigos de crédito de $50 para usar en AWS. Participar es sencillo: solo suscríbete al canal y deja un comentario explicando por qué te interesa aprender sobre tecnología y cuáles han sido tus desafíos al buscar contenido en español en YouTube. Yo mismo enfrenté dificultades al inicio, pero juntos podemos superarlas.

Creo firmemente en el valor de esta propuesta y su potencial para ayudar a otros. Si estás de acuerdo, te invito a compartir esta oportunidad con tu red. En TerraSpacio, tendrás acceso a la experiencia completa que necesitas para aprender DevOps en AWS utilizando Terraform, la herramienta más popular del mercado.

¡Únete a nuestra comunidad y seamos parte del crecimiento del contenido en español sobre DevOps y AWS! Gracias por ser parte de TerraSpacio. Juntos, cambiaremos las reglas del juego en YouTube.

[TerraSpacioYoutube](https://www.youtube.com/watch?v=vE5uzZnls_Q)
I'm sure there is a better way of doing this...
Tags: typescript, addtocart, ecommerce, react
Published: 2023-12-13 18:19:25


```ts
  function increaseItemQuantity(cartItem: Item) {
    setCart((items) => {
      const cartItemExists = items.find((item) => item.id === cartItem.id);

      if (!cartItemExists) {
        const newItem: CartItem = {
          id: cartItem.id,
          quantity: cartItem.quantity,
          variants: [cartItem.variant],
        };

        return [...items, newItem];
      }

      return items.map((item) => {
        if (item.id === cartItem.id) {
          const existingVariant = item.variants.find(
            (variant) => variant.name === cartItem.variant.name
          );

          if (!existingVariant) {
            return {
              ...item,
              quantity: item.quantity + cartItem.quantity,
              variants: [
                ...item.variants,
                { name: cartItem.variant.name, quantity: 1 },
              ],
            };
          }

          return {
            ...item,
            quantity: item.quantity + cartItem.quantity,
            variants: item.variants.map((variant) =>
              variant.name === cartItem.variant.name
                ? {
                    name: variant.name,
                    quantity: variant.quantity + cartItem.quantity,
                  }
                : variant
            ),
          };
        }

        return item;
      });
    });
  }
```
Project Thirteen: Search
Tags: webdev, beginners, challenge, codingquokka
Published: 2023-12-13 18:09:30

Aren't we all searching for something? A community, a purpose, car keys when you're in a rush... Or simply a gift to buy last minute?

I guess if there would be a nomination for the most used search bar it would be this one:

![Google search bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wn3eipdhha0nol3cjgir.png)

But not only a search engine needs a search: it's hard to find a website or a service that doesn't! So how about implementing one today?

## Search Input: requirements and recipe

> As a user I want to be able to input a search query, so that I can see information related to my request.

I'm sure you're already have a design in mind and, by all means - go wild as long as you fulfil these requirements:

### Requirements

1. User should be able to enter search request and press "Enter" to perform search or click/tap on a button
2. A list of suggestions should be shown as user types their search query
3. It should be possible to select a suggestion by using keyboard or a pointer event.
4. Input design should have sufficient contrast
5. Any icons present should have proper aria labels
6. Make sure that it works to copy & paste queries as well

### Recipe

1. Start with the design: create a static input field
2. Ensure that it matches accessibility requirements
3. Create static markup for suggestions list
4. Implement suggestions logic
5. Ensure that it's still accessible
6. Add finishing touches and praise yourself!

### Hints

It's always easier to keep things accessible by using build-in components, e.g. `<input type="search">` in a `<form>` would already cover most of functionality.

Consider adding a bit of a delay before you update suggestions - if the user types very fast you'll end up fetching suggestions from the eventual server much more often than needed.

## Hard Mode: Search Sanitiser

Most of users are jolly good fellows, but not always - and often they might try and do something that aren't supposed to: like get access to your whole database or break your server.

Try and write a function that would sanitise whatever user inputs to make sure that while they still can use the search - they can't do anything else.

A lot would depend on the underlying server architecture, so maybe you could make it easily adjustable - for example using a *tokeniser* and a black list of symbols or sequences?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-red.png)](https://www.buymeacoffee.com/valeriavg)
🤫 Secret JavaScript Methods They Don't Want You To See (part 2)
Tags: webdev, javascript, programming, learning
Published: 2023-12-13 17:57:29

As a continuation to our secret JavaScript Methods series, we’re going to talk about a controversial topic. This is a method that globe heads definitely don’t want you to see. That’s right, you guessed it, I’m talking about `flatMap()`
Theory.

##The flatMap Theory 🌎

The flatMap() method, introduced in ES2019, isn't as well-known as its counterparts, but its potential is vast. It combines the functionalities of `map()` and `flat()` to transform and flatten arrays simultaneously.

```javascript
const numArray = [1, 2, 3, 4];

const multipliedArray = numArray.flatMap((num) => [num * 2]);

console.log(multipliedArray); // Output: [2, 4, 6, 8]
```

The callback in flatMap() operates similar to map(), but it also flattens the resulting array by one level. If the callback returns an array, flatMap() assimilates its elements into the main array. The method performs this action recursively to flatten to a single depth.

##MTV’s The Real World: FlatMap 🎭

Imagine handling data from various sources with varying structures and needing to merge and process them uniformly. Here's a scenario where flatMap() shines:

Let's say we have an array of user objects containing interests, but these interests are nested arrays due to data variability:

```javascript
const users = [
  { name: 'Alice', interests: ['skiing', 'photography'] },
  { name: 'Bob', interests: ['gaming'] },
  { name: 'Charlie', interests: ['hiking', 'baking', 'skiing'] }
];
```

To create a unified list of all interests across users, we'd traditionally use `map()` followed by `flat()`:

```javascript
const allInterests = users.map(user => user.interests).flat();
console.log(allInterests); // Output: ['skiing', 'photography', 'gaming', 'hiking', 'baking', 'skiing']
```

However, with `flatMap()`, this becomes concise and elegant:

```javascript
const allInterests = users.flatMap(user => user.interests);
console.log(allInterests); // Output: ['skiing', 'photography', 'gaming', 'hiking', 'baking', 'skiing']
```

The `flatMap()` method elegantly handles the extraction and flattening in a single sweep, simplifying complex data transformations.

##Embracing flatMap() 🤗

As the globe spins on its axis, so too does the world of JavaScript, mastering versatile methods like `flatMap()` enhances our coding arsenal and helps us to write clean, concise, maintainable code for the future. Whether it's flattening arrays, transforming data structures, or streamlining complex data handling, `flatMap()` stands as a super useful method to keep in your back pocket.
[You're invited!] We're hosting 2 free LinkedIn Live events this December around OpenTelemetry & Generative AI! RSVP here
Tags: eventsinyourcity, devops, ai, webdev
Published: 2023-12-13 17:40:07

Hi, devs!

We're excited to host two free LinkedIn Live events for you this month! Come join us in the conversation!

Deets below:


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

Join our very own Reese Lee and friends Purvi Kanal from Honeycomb, and Adriana Villela from Lightstep to learn how to add OpenTelemetry to your browser app and the benefits of doing so on 12/14 at 12 PM PT, [register here](https://www.linkedin.com/events/7140048058251153409/about/).



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hqx2w4j02vosku3exi0.jpeg)

Generative AI has already changed the game for dozens of industries. Join experts Peter Pezaris, Camden Swita, and Santiago Lator as they explore the current and future state of Generative AI and how it’s transforming observability as we know it on 12/19 at 10am PT, [register here](https://www.linkedin.com/events/7138212770658877440/about/).

I hope to see you all there! Feel free to share to other devs to join as well. 😊

_-Daniel_
SwiftUI - Basic Core Image Processing
Tags: ios, swift, swiftui, coreimage
Published: 2023-12-13 17:36:36

Steps to create a processed image based on CI filter in SwiftUI

1. Create CIFilter instance to be sepia or any filter type.
2. Convert selectedItem  - PhotosPickerItem into Data format using loadTransferable method.
3. Convert imageData into UIImage
4. For Core Image processing, Image needs to be in CI format, so convert UIImage into CIImage.
5. CIFilter is a specific container within Core Image that can accept input CI image and generate output CI image and apply filter in between.
6. Set CurrentFilter's CI inputImg using setValue with Img key.
7. Set CurrentFilter's intensity or any valid inputKeys with respective float value
8. Fetch CurrentFilter's CI outputImg
9. Now that processing within CI is over, its time to convert that to proper pixels in Coregraphics.
10. CIContext can create cgImage with this generated CIImage with applied filter to the fullest extent size.
11. Back convert from CGImage to UIImage as CIImage conversion is not needed as image has been processed.
12. Back convert from UIImage to Image initializer in SwiftUI.

My Notes as understood from HackingWithSwift 100 days of SwiftUI.
How to check what supported mime-type is by media audio or video in your browser
Published: 2023-12-13 17:22:51

Supported mime-type by media audio or video is super defragmented. To find out what your browser supports use following link (I've created that page):

[https://www.sitelint.com/lab/audio-video-supported-media-type/](https://www.sitelint.com/lab/audio-video-supported-media-type/)
I became the Weather Man - My experience in building a Weather App
Published: 2023-12-13 16:56:34

**1. Introduction**

![NewWeather Logo](newweather_logo.png)

Embarking on the journey of building "newWeather," a comprehensive Weather App, has been a fascinating experience. Our team, consisting of weather enthusiasts and seasoned developers, collaborated to create a tool that provides users with accurate and accessible weather information. Team members include backend developer Naniwet Maritim, and myself, focusing on frontend design. Over the course of four weeks, we aimed to develop a Weather App that caters to everyday users.

**2. Tell a Story**

Becoming the Weather Man wasn't just about building an app; it was a journey rooted in my fascination with the ever-changing atmosphere. From childhood days spent marveling at thunderstorms to my career as a software engineer, the desire to merge technology and meteorology led to the inception of newWeather. This project aimed to bring the joy of weather tracking to users worldwide, offering a personal touch to forecasting experiences.

**3. Project Accomplishments**

The architecture of newWeather reflects a seamless flow of data, ensuring users receive up-to-date and accurate weather information. The frontend, designed with a user-friendly interface, utilizes Python. Notable features include real-time weather updates and customizable forecasts, and an interactive map for a detailed overview coming soon.

**4. Most Difficult Technical Challenge**

The most challenging aspect of the project involved integrating a live satellite feed for a global weather map. This task required extensive research and collaboration with meteorological data providers. Using the STAR method, I navigated the situation, identified the task, took strategic actions, and achieved a successful result. Overcoming this hurdle enhanced the app's functionality, providing users with a dynamic and visually appealing weather map experience.

**5. Lessons Learned**

Building newWeather provided valuable technical takeaways, including the intricacies of meteorological data integration and the significance of user-centric design in weather applications. This project has influenced my engineering path by reinforcing the importance of marrying passion with technology to create impactful and meaningful applications. It challenged and reshaped my beliefs, emphasizing the power of technology in enhancing everyday experiences, even something as commonplace as checking the weather.

**6. About Me**

I am a dedicated software engineer passionate about creating innovative solutions. Explore the newWeather project on [GitHub](https://github.com/Reliccode/newWeather), access the deployed Weather App [here](https://github.com/Reliccode/newWeather). Connect with me on [Github](https://github.com/ExitMirth) to join the journey of blending learning with cutting-edge technology.
Cloud Environment Synchronization
Tags: development, beginners, devops, tutorial
Published: 2023-12-13 16:25:00

Designing an effective environment synchronization strategy is crucial for managing cloud infrastructures at scale. 

Here's an outline on how to implement environment synchronization on [Brainboard](https://app.brainboard.co/):

## Definition of Environment Synchronization: 

It's a process to keep different environments, such as QA, staging, and production, closely aligned. This involves synchronizing an architecture across multiple environments, where modifications in one environment are automatically replicated in others, except for environment-specific variable values​​.

## Creating Synced Environments:

- Design and configure a specific architecture within an environment, like development.
- Use the project selector to choose and clone the architecture you want to sync.
- Add the target environment, such as QA, for cloning.
- Assign a new name to the architecture and enable syncing to keep the source and destination architectures aligned.
- Variables' values aren't synced, allowing customization for each environment​​.
- Viewing Synced Environments: After syncing, a new button appears in the options bar indicating the synced status. This button allows you to view all synchronized environments for that architecture​​.

## Un-syncing Environments: 

To remove synchronization, click the sync button in the options bar and select 'Unsync this architecture' to unlink it from the synchronized environments​​.

## Best Practices for Environment Synchronization:

- Apply changes consistently across all environments. For example, use Brainboard's CI/CD engine to apply different pipelines while keeping the cloud architecture design consistent.
- Customize each environment using variables and configuration options, like differing the number of instances or database sizes per environment.
- By implementing environment sync with Brainboard, organizations can ensure infrastructure consistency, reducing the risk of configuration errors and improving overall reliability​​.

This framework provides a clear path to maintain consistent infrastructure across various development, testing, and production environments, enhancing efficiency and reliability in cloud infrastructure management on [Brainboard](https://app.brainboard.co/).
🚀 Exciting Update: 'Merging Lists with LeetCode's 'Merge Two Sorted Lists'!' 🎥
Tags: programming, beginners, tutorial, algorithms
Published: 2023-12-13 16:13:40


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

Hello, tech enthusiasts! I'm thrilled to share my latest video where I tackle the challenge of LeetCode problem 21 - 'Merge Two Sorted Lists' using an Iterative Approach. Join me as we explore an efficient way to merge two sorted lists into a new sorted list.

🎥 Watch the video here: https://youtu.be/fCTeGvRGXdo?si=z1BwARhipKrAL-1T
🔗 Access the code on GitHub: https://github.com/Vinay352/Leetcode/tree/main/0021-merge-two-sorted-lists
🔗 Explore the LeetCode question: https://leetcode.com/problems/merge-two-sorted-lists/

Your thoughts and comments are highly appreciated, so feel free to share your insights below. Let's continue our shared journey of learning and coding! 💡👨‍💻

Stay connected:
🎥 YouTube: https://www.youtube.com/@VinayJainDev3097
📚 Medium: https://medium.com/@vinay.j3097
📝 Dev.to: https://dev.to/vinay_jain_dev
🔗 GitHub: https://github.com/Vinay352
🐦 Twitter: https://twitter.com/vinayj3097
📸 Instagram: https://www.instagram.com/vinay_jain_dev/
📘 Facebook: https://www.facebook.com/vinayj3097/
BakaLLM step 13.1, achievement unlucked: flash attention
Published: 2023-12-13 16:04:11

Hello, fairy dairy diary!

![Cirno holding a flashlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eav7bvfo063t3bln4dvk.png)

Tried flash fft conv and even though I updated torch to 2.1 where memory leak was fixed, it still eaten way too much memory. But! I remembered another flash! Flash attention. Now, I assumed it's used by F.SDPA by default. In fact maybe it is. But I used nasty masks  for XL sake and with nasty masks nothing is guranteed. However Flash Attention fixed alignment long time ago, so I added option to use it instead. I had to throw away RMT knowing every other token from RMT for simplicity, but it didn't became too bad, in fact most loss was identical, only the beginning of the 1st was different.

Here are their differences against step4. 

![Training graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsc2n5pnxtgkwmlvw4sc.png)

Loss was so insignificantly different that it might as well be addressed to me using nondeterministic algos.

To the end of the week I'll try to play around with increased batch size or maybe even (gasp) context size, oh horrors of giving up on 512 tokens and increasing them to 640 or maybe even 768. And I'm still thinking how to reMEGAfy the model. Failing, I think I'll try step2 in general and then  for Q/K only. Interesting if adding them under attn will help.

(Here: I'd say chill, but -30C is chilled enough.)
Spring Boot Template Project Introduction
Tags: springboot, java, backend, tutorial
Published: 2023-12-13 16:04:09

Whenever I need to implement a new feature, I typically start by researching available solutions on Google. Then I will experiment with one or more solutions to select the best one.

However, after several months, I might forget how to implement that feature. Consequently, I end up having to revisit internet resources, conduct research once again, and reattempt the implementation.


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

The above situation is very common, not just for me but also among my friends and colleagues. We waste a lot of time recalling and researching solutions - things could be synthesized in a template project for the next implementation.

So I have developed this project which includes implementations designed to assist both myself and other Spring Boot developers in seamlessly diving into coding. Each commit within the project represents the implementation of a specific technique.

Github: [Spring Boot Template Project](https://github.com/hieubz/spring-boot-template-project)

Tech stack: Java 17, Spring Boot 3.1.5


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

Whenever I need to implement a feature in my list, I simply search by relevant keywords associated with that feature (e.g., Redis, retry, email,...) to find the corresponding commit. By doing so, I can apply the code of that commit for my feature, with no need to Google or remember boilerplate code.


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


## Features

We have basic features as below:

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

or advanced things:

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

There are also modules related to Unit Tests and monitoring:

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

## Conclusion

I hope this project helps Spring Boot developers increase their productivity, allowing them to allocate more time to other important activities.

If you find [this project](https://github.com/hieubz/spring-boot-template-project) useful, please give it a star ⭐️!