teleren/devto huggingface dataset:
Welcome Thread - v226
Tags: welcome
Published: 2023-05-24 13:22:42

---
title: Welcome Thread - v226
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

!["Hello there" in multiple colors with waving cartoon hands surrounding the words](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g44d1ga4ts7oewtz1ry.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. If you are new to coding, want to help beginners in their programming journey, or just want another awesome place to connect with fellow developers, check out the [CodeNewbie Org](https://dev.to/codenewbieteam)!
The ideal VOD Platform build for high-volume Streaming Data
Published: 2023-05-24 12:48:58

One of the best ways to streamline your video streaming is by using a combination of Serverless architecture, S3 and CloudFront.

This innovative solution uses a serverless architecture that enables you to run code, integrate applications, and manage data without needing to worry about managing servers. Thanks to its automatic scaling and built-in high availability features, this approach is both more agile and more cost-effective, with a pay-as-you-go billing model that ensures you only pay for what you use.

By eliminating the need for infrastructure management tasks like patching and capacity provisioning, this serverless approach allows you to concentrate on creating code that best serves your customers.

The AWS Lambda event-driven compute service is the starting point for all serverless applications, and it is natively integrated with over 200 AWS services and SaaS applications.
The app can be built in Next.js with the help of serverless next component, can be deployed in AWS with near to zero configuration. All static routes in the application will be pre-rendered and distributed on CloudFront to maximize speed.

This will result is a dynamic application that can run near the speed of a static site because the dynamic parts are being distributed by the CDN as well.

To authenticate users for the web application, this particular solution uses AWS Cognito's User Pools, which control access to the GraphQL API, generating temporary AWS credentials with limited privileges for accessing S3 content.

AWS AppSync, which is based on the GraphQL API, allows client applications to perform CRUD operations on videos and store them in an S3 bucket.

To accomplish all of this, two separate S3 buckets are used: one for storing raw video and another for storing video with different output formats.

Lambda functions are employed for a range of tasks, including triggering MediaConvert jobs, storing metadata in DynamoDB, creating signed URL tokens, and sending notifications when MediaConvert jobs are complete.

MediaConvert, meanwhile, automatically transcodes the uploaded video to HLS format for multiple bitrates and device types, while Secrets Manager securely stores CloudFront's private keys for signing CloudFront URLs. CloudFront itself delivers content securely via CDN Edge locations to authorized users through the application at runtime.


![VOD AWS Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgi5mxgjide4p4bvemrf.png)

## Architecture benefits

The architecture of this solution has numerous benefits, including scalability through the CloudFront CDN, secure video content to prevent unauthorized access, automated transcoding of video content via MediaConvert, support for multiple devices using adaptive bitrate streaming, and secure storage and retrieval of secret keys using Secrets Manager. The solution can be quickly built and deployed using Amplify and CloudFormation, allowing you to get up and running with your video streaming service in no time.
Empowering Problem Solving: A Review of untools.co
Tags: productivity, performance, web, management
Published: 2023-05-24 12:42:25

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

Recently, I had the opportunity to explore untools.co, a captivating website that offers an array of resources for problem solvers and decision-makers. The platform's concept of providing "un-tools" brings a fresh perspective to the table.

Upon landing on the site, I was immediately captivated by its user-friendly interface. The design is sleek and well-structured, allowing for effortless navigation and easy access to the desired tools. The minimalist aesthetic enhances the overall experience, directing the focus towards the tools themselves.


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


What sets untools.co apart is its curated collection of unconventional and inventive problem-solving tools. The platform offers an assortment of frameworks, techniques, and approaches that challenge traditional thinking. Each tool is accompanied by clear explanations and practical examples, ensuring users grasp their application effectively.

The simplicity and practicality of the tools presented on untools.co are truly commendable. They are concise, easily comprehensible, and designed for immediate implementation. Whether you are a designer, entrepreneur, or professional from any field, the platform provides valuable tools to enhance your problem-solving abilities.

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

Additionally, untools.co fosters collaboration and community engagement. Users have the opportunity to contribute their own tools or provide feedback on existing ones. This interactive element encourages shared learning and continuous improvement.

From a technical standpoint, untools.co excels in performance, offering a fast and responsive browsing experience. The website is optimized for various devices, ensuring seamless access and usability. The absence of intrusive advertisements or unnecessary clutter allows users to focus on exploring the tools without distractions.

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

In conclusion, untools.co stands out as an outstanding platform that empowers individuals and teams to approach problem-solving from fresh perspectives. Its comprehensive collection of resources unlocks innovative solutions and enables users to overcome creative blocks and tackle complex challenges. Whether you seek inspiration or effective problem-solving techniques, untools.co is a valuable destination.

Rating: 5/5
The case agains modal windows
Tags: webdev, ux, webdesign
Published: 2023-05-24 12:16:10

Just stumbled upon [https://youdontneedamodalwindow.dev
](https://youdontneedamodalwindow.dev
)

here are the 4 reasons listed by the author :

>  - Modal windows can't be bookmarked or shared as links. (...)
- Modal windows can't be opened in a new tab. (...)

- Modal windows make the Back button confusing. (...)
- Modal windows are hard to get right. (...)

Right now on a Ghost install the subscribe to newsletter and search open modals. I'd rather have it otherwise. What do you think ?
Will Atomic Heart Beat The Hype?
Tags: gamedev, gaming
Published: 2023-05-24 12:01:34

Hey everyone, I recently came across an amazing website called Juicy Juice Game! It's a fun and interactive platform where you can play exciting games and win fantastic prizes. The graphics and gameplay are top-notch, making it a real treat for gamers. Don't miss out on the action, check out their website at: [https://juicyjuicegame.com/](https://juicyjuicegame.com/) and start playing today!
Aprendizagem Contínua: Além dos Limites do Estudo Formal
Tags: inovação, lifelonglearning, aprendizagemcontínua, educação
Published: 2023-05-24 12:00:00

> Na era da aprendizagem contínua, o conhecimento transcende os limites tradicionais. É hora de explorar novos horizontes, compartilhar experiências e abraçar a transformação. 

🌟💡 Recentemente, tive a oportunidade de participar da palestra "Lifelong Learning: a habilidade de aprender continuamente" durante a Bett Brasil 2023. Gostaria de compartilhar algumas reflexões e anotações que surgiram:

Aprender está além do estudo: Durante a palestra, surgiu um questionamento importante: será que aprender está estritamente relacionado a estudar? Explorou-se a ideia de que o aprendizado vai além dos ambientes formais de educação, sendo essencial estimular as pessoas a aprenderem de forma orgânica e contínua, ao longo de toda a vida.

O valor da paixão pessoal: Foi destacado que, embora ferramentas como o ChatGPT possam fornecer resumos de livros, filmes e informações, elas não são capazes de transmitir a paixão e o entusiasmo pessoal ao falar sobre algo que verdadeiramente gostamos. A paixão é um elemento que acrescenta profundidade e conexão emocional ao aprendizado, tornando-o mais significativo e duradouro.

Aprender em voz alta: A palestra abordou a prática de aprender em voz alta, ou seja, compartilhar o conhecimento adquirido com outras pessoas. Ao explicarmos conceitos e ideias em voz alta, aprimoramos nossa compreensão, identificamos lacunas no conhecimento e fortalecemos nossa própria aprendizagem.

Compartilhar conhecimento e organizar pensamentos: Ao compartilharmos conhecimento, não apenas ajudamos os outros, mas também organizamos nossos próprios pensamentos. Ao explicar algo a alguém, somos desafiados a estruturar as informações de forma clara e coerente, o que contribui para a consolidação do conhecimento em nossa própria mente.

A experiência sinestésica da simatesia: Por fim, foi mencionado o conceito de "simatesia", que envolve a capacidade de experimentar uma mistura de sentidos simultaneamente. Essa experiência sinestésica pode ser uma poderosa ferramenta de aprendizado, criando conexões mais profundas e memoráveis com o conteúdo.

✨ Estamos diante de um momento em que a aprendizagem contínua se torna cada vez mais essencial em um mundo em constante evolução. Vamos abraçar a oportunidade de aprender além dos limites do estudo formal e explorar novas maneiras de adquirir conhecimento.
Grid layout with adaptive squares
Tags: codepen
Published: 2023-05-24 11:51:39

{% codepen https://codepen.io/Linuxiness/pen/jOedQjZ %}

Grid layout with adaptive squares, depending, on how much squares you want it to have. 


## Explanation:

In `index.html` we add `<div>` which is grid layout.
With default values as 16 rows and columns.
And it have fixed width and height, and all squares inside (how much you want to have), need to be made inside that space.

```
<div id="grid"></div>
		
<style>
#grid { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16,1fr); width: 300px; height: 300px;}</style>
```




```
var x = 30;  // with this, we determine how much squares we want to have

// to get <div> element which is grid layout (parent), so we add (append) all children to this
var grid = document.getElementById("grid");


```


- Here we use **`  `** , to execute `${x}` , which means, to have that much squares. **this is crucial** to get all squares to shrink evenly !!! (after we added all childs to parent, they won't shrink without this !! )

```

// here we use ` ` , to execute ${x} , which means, to have that much squares. this is crucial to get all squares to shrink evenly !!! 
grid.style.gridTemplateColumns = `repeat(${x}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${x}, 1fr)`;
```

- And this is used, to make that much squares, equally across, append it to grid layout (parent), and have it's border 
```
// and this is used, to make that much squares, equally across
// append it to grid layout (parent)
// and have it's border 
for (var i = 0; i < x * x; i++ ){

	var cell = document.createElement("div");

	cell.style.border = "0.1px solid black";
	cell.style.borderCollapse = "collapse";

	grid.appendChild(cell);
}

```
Next JS 13.4, Firefox 113, Babylon and new Javascript features in ECMAScript 2023- Frontend News #34
Tags: javascript, nextjs, frontend, beginners
Published: 2023-05-24 11:46:02

{% youtube Z3qdstfouys %}

Introducing Frontend News #34, your go-to source for the latest advancements in the world of frontend development! In this edition, we dive deep into the exciting updates and releases that are shaping the future of web development.

First up, we explore Next JS 13.4, the popular framework that continues to push the boundaries of frontend development. Discover the new features, optimizations, and performance enhancements that will take your projects to new heights.

Next, we turn our attention to Firefox 113, the latest version of Mozilla’s beloved browser. Uncover the improvements in speed, security, and developer tools that make Firefox an even more robust choice for web development.

But that’s not all! We also delve into Babylon, a powerful and versatile rendering engine that empowers developers to create stunning visual experiences. Learn how Babylon is revolutionizing the way we build 3D applications on the web.

And finally, get a sneak peek into the future of JavaScript with the upcoming features in ECMAScript 2023. From enhanced syntax to powerful new functionalities, we explore the cutting-edge updates that will shape the JavaScript landscape.

Enjoy, you can also read the article at [Frontend House](https://frontendhouse.com/frontend-news/next-js-134-firefox-113-babylon-and-new-javascript-features-in-ecmascript-2023-frontend-news-34).
Local image not displaying in public folder: EASY fix -Nextjs
Tags: frontend, javascript, nextjs
Published: 2023-08-06 13:20:03

---
title: Local image not displaying in public folder: EASY fix -Nextjs
published: true
date: 2023-05-24 11:40:45 UTC
tags: frontenddevelopment,javascript,nextjs,frontend
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*BTiXTCQEd5CBMX4X)

At the time of writing this article, I’m working on a NextJS project and I faced a particular issue that I would love to share with you.

Since this is my first time using NextJS, I had to read a lot of the documentation to make sure my folder structure was accurate and so I didn’t mess anything up.

All my static assets were in the public folder and while also using Tailwind, I ran into an error. My images weren't showing up when I added the image source on the in-built Image component.

After minutes of making sure my paths were correct, and restarting my dev server (many times), I finally saw the issue!

Here is how my code looked before I saw what the issue was:

```
import Image from 'next/image'
const SampleImage = () => {
    return (
    <Image src={'/public/office.jpg'}/>
)
};

export default SampleImage;
```

I realized that since my image was in the public folder, I didn't need my image path to have the /public prefix.

So here is the new line of code that displayed my images as I wanted:

```
import Image from 'next/image'
const SampleImage = () => {
    return (
    <Image src={'/office.jpg'}/>
)
};

export default SampleImage;
```

If you’re using Tailwind, you can use the following in your tailwind.config.js file:

```
/** @type {import('tailwindcss').Config} */
module.exports = { content: [ 
'./app/**/*.{js,ts,jsx,tsx,mdx}', 
'./pages/**/*.{js,ts,jsx,tsx,mdx}', 
'./components/**/*.{js,ts,jsx,tsx,mdx}', 
], 
theme: { 
extend: { 
backgroundImage: { 
'office': "url('/office.jpg')", 
}, 
}, 
},
 plugins: [], 
}
```

Based on your images, NextJS might throw an error requiring you to add the width and height properties to your image.

_I look forward to learning way more about NextJS. Join me on this journey by following me. I’ll update you regularly on new things I learn._

Thanks for reading and please share with someone who would like this ;)

_Originally published at_ [_https://theambi.hashnode.dev_](https://theambi.hashnode.dev/local-image-not-displaying-in-public-folder-easy-fix-nextjs)_._
Wednesday Links - Edition 2023-05-24
Tags: java, jvm, crac, performance
Published: 2023-05-24 11:26:35

Spring Boot 3.1.0 released (30 sec)🎉
https://spring.io/blog/2023/05/18/spring-boot-3-1-0-available-now

Spring Tips: go fast with Spring Boot 3.1 (18 min)🏃‍♂️
https://www.youtube.com/watch?v=ykEK2xuJrN8

Spring Boot Application Testing and Development with Testcontainers (3 min)🫙
https://www.atomicjar.com/2023/05/spring-boot-3-1-0-testcontainers-for-testing-and-local-development/

Do you still need Testcontainers with Spring Boot 3.1? (12 min)🤔
https://softwaremill.com/do-you-still-need-testcontainers-with-spring-boot-3-1/

Reduce Java Application Startup and Warmup Times with CRaC (3 min)🏁
https://foojay.io/today/reduce-java-application-startup-and-warmup-times-with-crac/

Spring Boot CraC demo (1 min)🏁
https://github.com/sdeleuze/spring-boot-crac-demo

Debugging a FUSE deadlock in the Linux kernel (8 min)💀
https://netflixtechblog.com/debugging-a-fuse-deadlock-in-the-linux-kernel-c75cd7989b6d

Tuning Java Applications for Low Latency on Linux (8 min)🎛️
https://foojay.io/today/tuning-java-applications-for-low-latency-on-linux/

A Dissection of Java JDBC to PostgreSQL Connections (23 min)🔪
https://foojay.io/today/a-dissection-of-java-jdbc-to-postgresql-connections/

Mastering the Art of Controlling the JIT: Unlocking Reproducible Profiler Tests (9 min)🔥
https://mostlynerdless.de/blog/2023/05/18/mastering-the-art-of-controlling-the-jit-unlocking-reproducible-profiler-tests/

How to Debug Browser Redirects (6 min)↩️
https://dodov.dev/blog/how-to-debug-browser-redirects
What are the Reasons to set up Magento 2 on Docker
Tags: magento, magento2, magento2tutorial
Published: 2023-05-24 11:19:34

Have you ever contemplated the amount of time that a typical software engineer dedicates solely to establishing a reliable work tool configuration? The answer can vary across different companies, depending on the software stack being utilized and the availability of documentation. If you're interested in installing Magento 2 on Docker, it's worth noting that it can significantly reduce the time spent on configuring work tools and enhance software build efficiency. Engineers from various industries and stacks can empathize with the challenges of setting up a functional system, with some witnessing their teams struggle through it. Fortunately, there are abundant online resources available to assist you in learning **_What are the Reasons to set up Magento 2 on Docker._**

When embarking on the setup process for Magento 2, there are several compelling advantages to consider, including a reduction in the time invested in configuring work tools and an increase in software build efficiency. Why should you choose to set up Magento 2 on Docker? This is a question that holds considerable value, as it can immensely benefit teams in terms of productivity and collaboration. The benefits of utilizing a containerization platform become especially apparent when working within a team environment, as it enables swift establishment of the work configuration, facilitating prompt initiation of software builds.

for more information , please visit this :- **_[https://webguru.dev/what-are-the-reasons-to-set-up-magento-2-on-docker/](https://webguru.dev/what-are-the-reasons-to-set-up-magento-2-on-docker/)_**
Getting Onto The Kubernetes Release Team
Tags: kubernetes, devops, docker, git
Published: 2023-05-24 11:18:07

I recently got accepted to the Kubernetes Release Team to work on v1.28. I can’t explain how excited I am for this opportunity and how cool it is to be working on the exact platform that I focus the majority of my professional (and maybe a little personal) efforts for my work.

In this blog, I explain a quick “getting started” guide on how you can apply and get onto the Kubernetes Release Team.

## How It Works

Generally, the shadow application window starts a little before the release of the current cycle. Once you apply (which you’ll learn about in the next section), you can choose what you want to work on. For me, I decided to work on the docs. There are several options available, however.

Once you choose which option you want to go with, you’ll apply and wait for a response. You’ll get the response via email or Slack, so stay signed into the Kubernetes Slack Channel to ensure that you don’t miss the message.

Once your application is approved and you accept the invite via Slack or email from the Release Team Lead, you’ll see your name pop up on the Release Team doc.

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



## Applying

You can apply for up to two roles, so for example, you could apply for Docs and Enhancements.

You’ll have to monitor the `sig-release` channel on the Kubernetes Slack org or sign up for the mailing list to see when the form opens up to apply.

Once the form is sent out in the `sig-release` channel or the mailing list, you’ll click the link and it’ll take you to a Google Form where you can put in your information.

For example, this is what the application for the v1.28 Release Team looks like: https://bit.ly/k8s-shadow-application-1-28.

Once you apply, you’ll wait for a response.

## If You Don’t Get Chosen

There are A LOT of applicants that apply. If you don’t get chosen the first time, don’t give up! There have been plenty of times I went for a specific award or to contribute to a particular project and I got declined. The best thing I did was not to let that impact my ego and kept moving forward. You got this!
AI-Tutorial Videos Are Here
Tags: ai, chatgpt, tutorial, webdev
Published: 2023-05-24 11:15:07

You can now convert your article - or any text - into a slick video with an AI-voice with [Wuunu](https://wuunu.com). Here are some examples:

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

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

You can also create shorts (for YouTube shorts / IG reels / TikTok), like this one:

{% embed https://www.youtube.com/shorts/eAN19fF30LI %}

I created wuunu.com because I'm a content creator myself and was tired of using a microphone and doing mindless editing.

If you already wrote some articles, you can easily copy-paste the text into [Wuunu](https://wuunu.com) and create a smooth video that should perform well on social media. Of course, you can also create tutorials from scratch.

Let me know what you think!
Django simple notes
Tags: django, djangocms
Published: 2023-05-24 11:11:42

Hi, I released a new module today; [Django simple notes](https://gitlab.com/kapt/open-source/django-simple-notes).

## Can I have a screenshot or two, please?

Sure.

[![Screenshot of the toolbar buttons of django-simple-notes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiyveqntl9hq9so94nhz.png)](https://gitlab.com/kapt/open-source/django-simple-notes)

> *New toolbar menu!*


[![Screenshot of a note in django-simple-notes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01fdzod4ip81h3bwrhz4.png)](https://gitlab.com/kapt/open-source/django-simple-notes)

> *Store notes related to a single page.*

## What's this?

It's a (very) simple module that adds a new button on the CMS toolbar, which allow administrators to open a side-panel and store/retrieve notes linked to the current page.

## How it works?

This module is using Django's [generic foreign keys](https://docs.djangoproject.com/en/4.2/ref/contrib/contenttypes/#generic-relations) to store notes linked to pages.

It handles CMS `Page` and djangocms-blog `Post` objects by default, but you can write your own settings to extends the support to your own types of objects.

More information is available on the [README](https://gitlab.com/kapt/open-source/django-simple-notes#how-it-works).

## Features

- Create/edit notes linked to pages you're currently visiting.
- Add tags to notes.
- Different notes for different languages for the same page.
- List all notes.
- Search note content and tags in list view.
- Sort notes in list view (create/edit date, author, page language...).

## Thoughts?

What do you think of this package? What features do you find missing? Will you use this application? We would love to hear your opinion :)