teleren/devto huggingface dataset:
Anunciando la JSConf Chile! 🇨🇱🎉
Tags: javascript, community, chile, spanish
Published: 2022-07-15 18:49:48

**Hola Javascript@s!**

No estábamos muertos, andábamos de parranda!

El equipo de la JSConf Chile ha estado trabajando a full estos últimos meses, completando todo lo necesario para poder llevar a cabo esta _primera_ JSConf, y tenemos anuncios oficiales que realizar.

Así que vamos a lo importante!

![Una imagen animada de "party parrot"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg69aor4gvldmmn9g32m.gif)


----

## La fecha y el lugar!

Después de muchas conversaciones y visitas finalmente tenemos un lugar y fechas para compartirles.

JSConf Chile se realizará el **3 y 4 de Febrero del 2023** 🎉 en el Teatro Principal de Matucana 100, en Santiago de Chile.

<br></br>

![Fotografía del teatro Matucana 100 tomada desde el escenario hacia las butacas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3dbnvoowv7r3nm1rnv3.jpeg)
<figcaption>El teatro de Matucana 100 (o "M100" para los amigos).</figcaption>

------

El teatro del M100 es hermoso! Con un poco más de 700mts², nos permite _fácilmente_ tener un espacio donde convocar a más de 500 Javascript@s 🤯.

Esto sin contar el **Cine100**, donde se realizarán workshops en vivo, y **"La explanada"**, un gigante espacio abierto donde podrás tomarte un coffee break, hacer networking con otros Javascript@s, conversar con Sponsors e interactuar con los charlistas.

## Una nueva cara!

Como parte de este anuncio, les queremos contar que lanzamos una renovación de nuestro sitio! 

Puedes entrar a [JSConf.cl](https://jsconf.cl) para conocer más de la conferencia y suscribirte a nuestros anuncios.

![una captura del sitio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pirpuo7fs5rxeejacp0i.png)
 

## ¿No qué era el 2022?

Inicialmente nuestro plan era realizar la conferencia a finales del 2022, pero todos nuestros planes terminaban chocando con temas covid ya sea por viajes, hospedajes, alimentación, aforos y etc. 
Y como queremos que la conferencia sea ~~a toda raja~~ increible, tomamos la decisión de mover las fechas a Febrero  del 2023.

## Entonces, ¿Cómo será la JSConf?

JSConf Chile es un evento de 2 días, con **más de 20** charlistas nacionales e internacionales, en un solo track de charlas, para que no te pierdas nada.

Pero aún hay más! La JSConf Chile tendrá más de 500 asistentes, workshops, recuerdos, regalos, stickers, coffee breaks, carrito de sopaipillas, una fiesta de cierre y muchas otras sorpresas! 

## Genial! ¿Cómo me entero de más?

- Puedes seguirnos en nuestras redes sociales ([Twitter](https://twitter.com/jsconfcl), [Facebook](facebook.com/jsconfcl) y [Linkedin](https://www.linkedin.com/company/80207030)).

- Suscribirte a nuestros anuncios en [jsconf.cl](https://jsconf.cl)

- Síguenos en nuestro blog en [dev.to/jsconfcl](https://dev.to/jsconfcl)

---

Eso es todo por hoy! 

Dentro de las próximas semanas estaremos anunciando la apertura de CFPs, el documento de patrocinio/sponsorship, la venta de entradas, charlistas y más!

Un abrazo asíncrono!

Con 💛
El equipo JSConf Chile - hi@jsconf.cl
17+ Great Websites for web Developers
Tags: webdev, beginners, productivity, programming
Published: 2022-07-15 18:42:31

###1. [Hidden Tools](https://github.com/heybereket/hiddentools)
![Hidden Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v53hh5jxna5nurbtck2j.png)
###2. [Music For Programming](https://musicforprogramming.net/latest/)
![Programming Music](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bk9ndwc6ewbbnpx9pjo.png)
###3. [Programming Language Convertor](https://ide.onelang.io/)
![Language Convertor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh7ypiuq96iruzprfi2u.png)
###4. [Http Cat](https://http.cat/) 
![HttpCat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5okkbff5ed6m5x0tz7u8.png)
###5.[CSS Zen Garden](http://www.csszengarden.com/) 
![CsszenGarden](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k1vauixhrnxc1cehanl.png)
###6. [Code project](https://www.codeproject.com/)
![Code Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbyadk7v6unq6bhwopkn.png)
###7. [A Listapart](https://alistapart.com/)
![A Listapart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp4kww7270ty2qxzcj1b.png)
###8. [CreativeBloq](https://www.creativebloq.com/)
![CreativeBloq image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mweez4mxrkq1adrc5qx.png)
###9. [Codrops](https://tympanus.net/codrops/)
![Codrops image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqghmzv96f3b2kipiluc.png)
###10. [Tutsplus](https://tutsplus.com/)
![Tutsplus image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx8su7e61jnbmrydkeab.png)
###11. [The Odin Project](https://www.theodinproject.com/)
![The Odin Project Imagw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhmkuv2kwotp4see8z8w.png)
###12. [CodeWars](https://www.codewars.com/)
![CodeWars Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2newi0djjfwb15g4zvr.png)

###13. [WP Sessions](https://wpsessions.com/)
![WP Sessions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip2abfnes7cbdp204v2v.png)

###14. [CSS Author](https://cssauthor.com/)
![CSS Author](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9nngnlykcjszxgvwplv.png)

###15. [LaraCasts](https://laracasts.com/)
![LaraCasts_image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwoyo39b3glc9epomjs5.png)

###16. [Gradient Magic](https://www.gradientmagic.com/)
![Gradient Magic Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndcqzu8lg87udpzrvmjt.png)

###17. [Tringlify](https://trianglify.io/)
![Tringlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iatdjb1vch529zdneh5.png)

###18. [Free Frontend](https://freefrontend.com/)
![Free Frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mng2ag83iprfyp7i4je3.png)

###19. [Codemy UI](https://codemyui.com/)
![Codemy UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shidqgwo8pnmxtfcne2s.png)
###20. [CSS Tricks](https://css-tricks.com/)
![Css Tricks image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tot4bhmoe9i9tse8rxcp.png)
Does this engineering culture suck? (How to find out before you take the job)
Tags: career, productivity, agile, webdev
Published: 2022-07-15 18:41:12

## Interview the Company
If I were to go on LinkedIn and search "UI developer," I would find a plethora of jobs with almost identical job descriptions.

However, each job could have a very, very different engineering maturity in its culture that could make or break your experience there.

So, how do you avoid entering into a bad engineering culture?

You have to ask questions to draw this out upfront.

Don't let the 5+ rounds of interviews with technical challenges fool you. You are interviewing the company as much as they are interviewing you.

Before you take a job, make sure to ask good questions that give you a sense of the engineering culture. It can be a bit illusive to know what to ask, so I'll give you some pointers:

## Questions to Ask

- What is the acceptance criteria for a branch to get merged into main?
**🚩Red flag:** No mention of making sure the code reaches a quality threshold based on determined standards/practices.

- What is technical debt and how does this team address it?
**🚩Red flag:** Very abstract conversation, nothing actual process to point to.

- Can you tell me the difference between tactical and strategical development? Where does this team lie on the spectrum?
**🚩Red flag:** Unable to understand the question.

- Why are professional goals important to work towards in addition to releasing features? How does the manager take this responsibility upon themself?
**🚩Red flag:** Very abstract conversation, nothing actual process to point to.

- What are the roles and responsibilities of engineering leads and engineering managers? How do the two roles differ?
**🚩Red flag:** The roles don't differ, and one person is doing both.

- Can you show me an outline of an example 1-on-1?
**🚩Red flag:** Very abstract, nothing concrete to point at.

- How do you distinguish between the different levels of engineering maturity between teammates when assigning work?
**🚩Red flag:** There is no distinction between levels of maturity.

- How does this team aim at maintaining good talent amidst their developers?
**🚩Red flag:** They haven't really thought about it.

- Can I explore some of the codebase?
**🚩Red flag:** They won't let you.

- Who determines the product roadmap and what pushback do the developers have to negotiate time for technical improvements/vision?
**🚩Red flag:** An abstract answer.

- If I want to be the best possible engineer I can, why would I join this company?
**🚩Red flag:** They won't let you.

Many more questions could be thought of, but hopefully this gets you thinking on the right track.

If you want to get your brain juices flowing even more, [I highly recommend reading this book on software philosophy](https://amzn.to/3Rybaex).
Image editor With React
Tags: tutorial, beginners
Published: 2022-07-15 18:31:06

Hello guys today i want to show you an image editor app created with React js 
It's not an advance image editor
But can be considered as a good project

PROJECT LINK
https://waadu-image-editor.netlify.app/

## Go check it out 

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
How to render card items in sequence after data load is finished like AirBnB?
Tags: question, discuss, css, ui
Published: 2022-07-15 18:28:32


When in AirBnB you scroll down to load more results I have seen that the cards load their data from start to finish like a dominoes style... like a sweep

Do you know what that effect is called or how to do something similar?

https://www.airbnb.ca/

![Air B and B loading results example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bifapf8mu14mst27l9k.png)
How to Remove Empty and Non Empty Directories in Linux
Tags: linux, webdev, tutorial
Published: 2022-07-15 18:18:38

Removing a directory in Linux is harder than you think, and it's not uncommon to get errors that looks like this:

```
folder: Directory not empty
folder: is a directory
```

The confusion comes because `rmdir` cannot be used to delete a directory with files or folders inside of it.

## Remove a non-empty directory on Linux
To remove a directory on linux, which is not empty, pass the `-r` flag to `rm`. `-r` means recursive, so it deletes everything in a folder, including the folder itself. Replace 'folder' below with your folder's name or location.

```
rm -r folder
```

## Remove multiple non-empty directories on Linux
If you want to remove multiple directories on linux, and they are not empty, simply separate the folder names with a space, and use `rm -r`:

```
rm -r folder1 folder2 folder3
```

## Remove an empty directory on Linux

If you want to remove a directory on linux, and your directory is empty, with no folders or files in it, then use rmdir:
```
rmdir folder
```
New way to cook angular 14 typed forms
Tags: angular, typescript
Published: 2022-07-15 18:16:58

Hello everyone, I want to show you a library with which you can conveniently declare forms and describe the type of form according to your models, this will be useful to everyone who deals with forms in angular 14. [ngx-mf](https://github.com/iamguid/ngx-mf) i want to get some feedback from you, thanks! You can try it on [stackblitz](https://stackblitz.com/edit/angular-ngx-mf)

You can do something like this:

We define some model:

```

enum ContactType {
    Email,
    Telephone,
}

interface IContactModel {
    type: ContactType;
    contact: string;
}

interface IUserModel {
    id: number;
    firstName: string;
    lastName: string;
    nickname: string;
    birthday: Date;
    contacts: IContactModel[];
}

```

Then we define some magic type like:

```
Type Form = FormModel<IUserModel, { contacts: ['group'] }>
```

Then we have type based on our model before form will be init:

```
FormGroup<{
    firstName: FormControl<string | null>;
    lastName: FormControl<string | null>;
    nickname: FormControl<string | null>;
    birthday: FormControl<Date | null>;
    contacts: FormArray<FormGroup<{
        type: FormControl<ContactType | null>;
        contact: FormControl<string | null>;
    }>>;
}>
```
Why React but not Vue!!
Tags: vue, react, javascript, webdev
Published: 2022-07-15 18:04:26

I am a Vue developer and recently started to learn React.It's the first time I write code while being angry at it 😂😂, I wonder why would someone choose the scramble(in my opinion) of React over the convenience and organisation of Vue.

I want to hear your opinion about this if you have experience in React or vue or both of them.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zivslje2aiw125fvf5ex.jpg)
PHASE 1 BLOG: review.addEventListener("")
Published: 2022-07-15 17:02:59

**Phase 1 review**

Phase 1 will be in the books after our project presentation today. Feeling a tad accomplished but mostly weary of Phase 2. The amount of knowledge downloaded in 3 weeks is wild! To end every Phase, we have a project week. I learned a lot from all of Phase 1 but had the most fun during project week. Here are some fun topics learned:

1. JavaScript Fundamentals

- Strings

- Variables 

- Functions (Callbacks and Arrow)

- Arrays / Objects

2. Manipulating the DOM 

- Document Object Model

- getElementById

- querySelector(all)

3. JavaScript Events and Communicating with the Server

- addEventListener ("onClick")

- DOM Content Loaded

- GET/POST/PATCH/DELETE

- JSON (DERULO)

and more....

On to REACT!

**add.EventListener**

Although I would argue callback and arrow functions are the most important thing to master in Phase 1, adding event listeners was the most rewarding for me.

For me, when our cohort started using event listeners, everything started moving. Event listeners "listen" for an action like "click" or "key press". Once triggered, they invoke the event handler functions to start working on the event.

Think clicking on a comment button or hitting that like ♥ button on IG.

     "`document.addEventListener("click", myFunction);`" 
                     - w3schools

"`<form id="search-form" onsubmit="searchByAbv(event)" 
                    autocomplete="off">`"


Without event listeners, our web pages couldn't function. Event listeners make interaction with the users fun and dynamic. As I look back on our Phase 1 project with my partner John, I count 10+ event listeners! I can only imagine a more in depth website and the number of event listeners.

Sources:

w3schools
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Flatiron Canvas https://learning.flatironschool.com/courses/5206

Sweet Code 
https://sweetcode.io/understanding-the-javascript-dom-manipulations/

MDN web docs
https://developer.mozilla.org/en-US/docs/Web/API/Element#mouse_events
Check out my new programming language called - Boson, written in Rust!
Tags: rust, tutorial, opensource, javascript
Published: 2022-07-15 17:47:01

I recently built and open sourced my programming language called "boson", it is An interpreted, dynamically-typed, multi-threaded, general purpose hobby programming language written in Rust.

Features:
1. Multiple Data Types: char, int, float, string, array, hashtable, bytes and buffer.
2. Airthmetic, Logical operations
3. Variables and Constants
4. Control and Looping structures
5. Functions and Lambda expressions
6. Threads and Multi-threading
7. Shell operator to run shell commands within the language statements
8. Some basic built-in functions
9. Iterators (psuedo iterators)
10. Byte code generation, serialization and loading

[Link to GitHub repository](https://github.com/Narasimha1997/boson-lang)
Data Structures & Algorithms: Deep Dive
Published: 2022-07-15 17:45:54

 In this articles I will be using python for our demonstration of some of the data structures and algorithms as we go deeper into the topic of data structures and algorithms.

## Data Structures

 The basic data structures in python include:

- Lists

- Sets

- Tuples

- Dictionaries

These structures differ based on order of their elements and how their elements can be accessed, and if they can be change after they have been created. If a structure can be changed after it has been created then it is said to be mutable and if not it is said to be immutable.

**Syntax**
_Lists_
These are created by starting with the name followed by the equal sign which in python is considered as an assignment operator, after we have the square brackets and the list elements in between.
`listname = ["element", "element", "element"]`  
You can also have a list with a list which are known as nested lists.
`name = [integer, ["element", "element"], ["element"]]`
list are mutable.

_Sets_
`setname = {"item", "item"}`
sets are mutable.

_Tuples_
`tuplename = ("item", "item")`
tuples are immutable.

_Dictionaries_
`dictionaryname = {key: value, key: value}`
dictionaries are mutable in someway but not completely.

## Algorithms
**The Big O Notation**
This is a mathematic notation used to know how efficient an algorithm is, even if that depends on different factors like the type of data and data structure the algorithm is going to act on.

## Conclusion
This is how far I have gone in my journey. If there is anywhere my work seems off or not right feel free to offer a brother some help and lets grow together. Feel free to like, share, follow and connect.
Curiosidade para o dia 15 de julho
Published: 2022-07-15 17:44:01

Em 1928, a máquina criptográfica alemã Enigma codificava sua primeira mensagem – o dispositivo foi utilizado pelos militares alemães para transmitir informações secretas durante a Segunda Guerra Mundial. E ao final das notícias desta sexta: indicação de uma mesa com regulagem de altura que contribui muito com a saúde e última chamada para participar de um curso introdutório gratuito em Java.
Python Beginner Level Project Series |Episode - 2|
Tags: python, programming, datascience, beginners
Published: 2022-07-15 17:32:22

Hii again! I am Goutham.
Welcome to the Python beginner level project Series.

## EPISODE 2 - BODY MASS INDEX(BMI) CALCULATOR 
**Description:** Using this project we can Find the Body Mass Index of an individual based upon his Height and Weight.
📝Project - 02
🎓Skill-Level: Beginner
🎨Language-Python

💡You can run the project by clicking down the link below 👇
[`click here to run`](https://replit.com/@Gouthique/BMIcalculator-3#main.py)
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
**Get The Code Here**
_Feel free to download and edit the code💨_
See the project in more detail at my GitHub.
👉🏻[`Click here`](https://github.com/Gouthique/Python-Programming/tree/main/Beginer-Level-Projects/2%20-%20BMI%20Calculator)
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
`If You Did not check my previous Episode Click below to see:` [`Episode-1`](https://dev.to/gouthique/python-beginner-level-project-1jg3)
`See You on the Next Episode`
**K. SAI GOUTHAM** - Thank you 👋🏻
Hello World. 👋
Published: 2022-07-15 17:25:31


![Nervous Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/696cdrm7jsv4xp6enu2k.gif)

The best way to describe my first day/week in the Develop Carolina apprenticeship would be the GIF above 😂

I’m super grateful and excited for having the opportunity to be a part of this program. It was really nice meeting and speaking to some of my fellow cohort mates and realizing we actually shared feelings of anxiety, nervousness, and uncertainty. So I wasn't alone! 

**So a little about me...** 

I love technology. A very simple statement, I know. When I was younger, video games were the initial ✨spark✨. It started with console gaming, then evolved into PC gaming. My first PC game was Halo Combat Evolved. Funny enough, I didn't even have a 'gaming' PC. I had a really generic home HP family computer that I played it on. I really wish I could remember the performance, but I can imagine I was getting probably 12 fps. 

When was working as a teenager, I finally had my own funds. I can build a PC! So that happened and really accelerated my passion. Started learning Linux so I could rent a VPS and run my own game servers without having to 'rent' individual overpriced 'slot' based game servers. From then on, this tech stuff has been in motion.  

**What about development?**

Initially, I didn't pursue Software Development. I enrolled in an IT program and got my B.S. Information Technology. During that program, I had some intro to programming classes and thought it was really cool. Thinking now, it was pretty basic, but I really enjoyed it. At the time, I thought that to get into development, I would have had to go the computer science route and be this genius mathematician. A lot of misconceptions on my end. After completing my degree, I never moved into a technical role. Still wasn't sure what I wanted to do for the rest of my life 😅.

**And so our story begins...** `shoutout to any Fable fans`

I started to research and realized that I could make a career in software development and remember how much I enjoyed my introduction to programming. For a few months, I went the self-learning route and I was having a blast. Spending time after work and even weekends dedicated to learning. That was REALLY the point when I discovered I found what I LOVE doing. After building some confidence I decided I would enroll in a Bootcamp to get a deeper dive `(primarily web development)` into current technologies used in the industry. I completed that in April 2022 and found Develop Carolina! 

Since then, I've had such an amazing experience! I'm just so excited to be on this journey to see how we will all grow over the next six months.
#Server-Side Rendering Vs Client-Side Renderin
Tags: javascript, ssr, csr, beginners
Published: 2022-07-15 17:24:17

**Server-Side rendering**
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Website</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>This is an example of my new website</p>
    <a href="https://www.youtube.com/other.html.">Link</a>
  </body>
</html>

```

**Client-Side-Rendering**
client-side rendering means rendering content in the browser directly using JavaScript. This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <div id="root">
    <app/>
  </div>
  <script src="https://vuejs.org" type="text/javascript"></script>
  <script src="location/of/app.js" type="text/javascript"></script>
</body>
</html>
```