teleren/devto huggingface dataset:
Fundamentos Esenciales de JavaScript: Construyendo una Base Sólida
Tags: webdev, javascript, programming, beginners
Published: 2023-12-24 17:18:15

Si estás comenzando tu viaje en el mundo del desarrollo web o buscas fortalecer tus habilidades en JavaScript, entender sus fundamentos y sintaxis es importante. Aquí te presento una guía detallada de lo esencial que debes saber para establecer una base sólida en JavaScript.

## 1. Variables y Tipos de Datos
**Variables:** Aprende las diferencias entre var, let, y const, y cómo su alcance (scope) afecta tu código.
**Tipos de Datos:** Domina los tipos primitivos (números, strings, booleanos) y complejos (objetos, incluyendo arrays y funciones).

## 2. Operadores
**Aritméticos y de Asignación:** Esenciales para realizar cálculos y actualizar variables.
**Comparación y Lógicos:** Claves para la toma de decisiones y el control del flujo lógico.

## 3. Estructuras de Control
**Condicionales (if, else, switch):** Aprende a dirigir el flujo de tu programa basado en diferentes condiciones.
**Bucles (for, while, do-while):** Esenciales para repetir tareas y procesar datos.

## 4. Funciones
**Declaración y Expresión:** Entiende la diferencia y cuándo usar cada una.
**Arrow Functions:** Aprende su sintaxis y cómo manejan el contexto this.

## 5. Arrays y Objetos
**Arrays:** Practica con métodos como .map(), .filter(), y .reduce().
**Objetos:** Entiende cómo crearlos, acceder a sus propiedades, y manipularlos.

## 6. Manipulación del DOM
Aprende a seleccionar, modificar y interactuar con elementos del DOM, una habilidad importante para cualquier desarrollador front-end.

## 7. Errores y Debugging
Domina el manejo de errores con try-catch y utiliza la consola para depurar tu código.

## 8. Mejores Prácticas
Adopta prácticas como nombrar variables y funciones de manera descriptiva, escribir código limpio y comentado, y evitar la mutación de datos innecesaria.

## 9. Práctica Continua
La teoría es solo el comienzo. Aplica estos conceptos en ejercicios y proyectos reales. La práctica regular es clave para convertirte en un desarrollador competente y seguro.

Este conocimiento fundamental de JavaScript no solo te preparará para proyectos complejos, sino que también te dará confianza en entrevistas de trabajo y te ayudará a destacar en el campo del desarrollo web. Recuerda, JavaScript es un lenguaje en constante evolución, así que mantenerse actualizado es parte del viaje. ¡Feliz codificación! 🚀💻👩‍💻
Dominando JavaScript: Guía para Profundizar en el Lenguaje de la Web
Tags: webdev, javascript, programming, beginners
Published: 2023-12-24 17:04:08

JavaScript no es solo un lenguaje más en el mundo del desarrollo web; es el corazón palpitante de casi todas las aplicaciones web modernas. Aquí te presento una hoja de ruta detallada para dominar JavaScript, más allá de simplemente entender su sintaxis básica.

**1. Fundamentos y Sintaxis:** Antes de todo, asegúrate de tener una base sólida. Esto significa entender variables, tipos de datos, operadores, estructuras de control y funciones básicas.

**2. ES6 y Más Allá:** Con la llegada de ES6, JavaScript se ha transformado. Aprende sobre arrow functions, template literals, destructuring, spread/rest operators y la importancia de let y const.

**3. Funciones Avanzadas:** Las funciones son el núcleo de JavaScript. Profundiza en funciones de orden superior, callbacks y las IIFEs para entender cómo encapsular y organizar tu código.

**4. Closures y Scope:** Comprender closures y scope te dará un control increíble sobre tus variables y cómo se comportan en diferentes contextos.

**5. Asincronía Maestra:** Dominar promesas y async/await es importante, ya que JavaScript se basa fuertemente en operaciones asíncronas, especialmente en la comunicación con servidores.

**6. El Event Loop:** Entender el event loop de JavaScript te ayudará a comprender cómo se maneja la ejecución de código, especialmente en escenarios asíncronos.

**7. DOM a Fondo:** Para los desarrolladores front-end, manipular el DOM es una habilidad diaria. Entiende cómo interactuar con elementos de la página de manera eficiente.

**8. Debugging y Gestión de Errores: **Aprende a utilizar try/catch para manejar errores y familiarízate con herramientas de debugging para solucionar problemas rápidamente.

**9. POO en JavaScript:** Aunque JavaScript usa prototipos, conocer los conceptos de POO, especialmente con la sintaxis de clase de ES6, es valioso.

**10. Patrones y Principios de Diseño:** Implementar patrones de diseño te ayudará a escribir código más organizado y mantenible.

**11. Pruebas Unitarias y Testing:** Desarrollar habilidades en testing es importante para garantizar que tu código funcione como se espera.

**12. Herramientas de Desarrollo:** Familiarízate con NPM, Webpack, Babel y ESLint para mejorar tu flujo de trabajo y la calidad de tu código.

**13. Mejores Prácticas:** Por último, pero no menos importante, adhiérete a las mejores prácticas y estándares de la industria para escribir código limpio y profesional.

Dominar JavaScript es un viaje continuo de aprendizaje y práctica. Con estas claves, estarás en el camino correcto para convertirte en un experto en el lenguaje que da vida a la web moderna. ¡Feliz codificación! 💻🌐✨
🌟 #DEVImpact2023 Reflections
Tags: devimpact2023
Published: 2023-12-24 16:48:22

### Proud Moments
I finally managed to complete the #100DaysOfCode on X after much struggle! ✨

I got very happy when I got recruited to be a Volunteer Mod on DEV! ✨

I wrote a post which ended up on Top Discussion of the Week on DEV! ✨ 

I won the 1st place on Sololearn and earned the Intergalactic Champion badge! ✨ 

I participated in, and won, my very first hacker battle in the programming game of EXAPUNKS! ✨ 

### DEV Contributions
I actively wished newcomers welcome to DEV, helped out with their questions and problems, I have published a post every week since I joined and I am on DEV every day helping moderating posts! 

### Celebrate the Numbers 
![Celebrate the Numbers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u82vdgtkf370ikiadth5.png)

### Shoutouts
Michael Tharrington (@michaeltharrington) for great communication and for the awesome job he does around here! 

Abhishek (@craftingbugs) for joyful discussions and for us cheering on each other!   

### Future Goals 
I usually do not share my goals but I want to say that I plan to make great progress on my personal website during 2024! 

### What Does DEV Means to You?
DEV means community and the place to go to for learning new things. DEV is the place I visit for an update on what is important for people in the world of tech.
Claves para Dominar JavaScript como Full-Stack Developer en la Industria Tecnológica
Tags: webdev, javascript, programming, beginners
Published: 2023-12-24 16:47:48

En el mundo acelerado de la tecnología, especialmente en ecosistemas innovadores como Silicon Valley, ser una ingeniera de software full-stack especializada en JavaScript significa estar en la cúspide de la innovación. Aquí te comparto las claves esenciales para no solo sobrevivir sino prosperar en este campo.

**1. Dominio Profundo de JavaScript:** Antes de sumergirte en frameworks y bibliotecas, asegúrate de que los fundamentos de JavaScript están firmemente arraigados. Comprende a fondo ES6+, así como conceptos avanzados como closures, promesas, y async/await.

**2. Frameworks de Front-End:** En la vanguardia del desarrollo web, frameworks como React, Angular, y Vue.js son imprescindibles. Elegir uno y dominarlo puede abrir puertas innumerables.

**3. Back-End con Node.js:** Node.js ha revolucionizado el desarrollo de back-end con JavaScript. Aprender a utilizar frameworks como Express.js es crucial para manejar eficientemente las operaciones del servidor.

**4. Bases de Datos Versátiles:** Un full-stack developer debe ser competente tanto en SQL como en NoSQL. La flexibilidad para trabajar con diferentes tipos de bases de datos es un gran activo.

**5. El Arte del Desarrollo Web Moderno:** Entender SPA, SSR, y PWA no es solo una habilidad; es una necesidad para crear aplicaciones web de vanguardia.

**6. Control de Versiones con Git:** Git no es solo una herramienta, es el lenguaje universal de colaboración en el desarrollo de software. Dominarlo es fundamental.

**7. Testing Riguroso y Debugging:** Una sólida práctica de testing y debugging garantiza la calidad y fiabilidad del software. Herramientas como Jest y Mocha son tus aliadas aquí.

**8. Introducción a DevOps y CI/CD:** Aunque no seas una experta en DevOps, comprender los fundamentos de CI/CD te colocará un paso adelante en la cadena de desarrollo.

**9. Diseño y Patrones de Diseño:** El conocimiento de patrones de diseño no solo mejora la calidad del código, sino que también facilita la colaboración y mantenimiento a largo plazo.

**10. Mantenerse Actualizada:** El mundo de JavaScript está en constante evolución. Mantente al día con las mejores prácticas, las tendencias emergentes, y los cambios en el ecosistema.

Convertirse en una experta full-stack JavaScript no es una tarea fácil, pero es extraordinariamente gratificante. Estos son los pilares sobre los que puedes construir una carrera exitosa y dinámica en el desarrollo de software. ¡Adelante y conquista el mundo del código! 🚀💻
How to install latest yarn version
Tags: yarn, node, tutorial
Published: 2023-12-24 16:47:19


To install the latest version of yarn4.x we need nodejs to be installed first and yarn1.x version

![yarn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a62ldbfvgf7v5gilacj.png)

## **Nodejs Installation Instructions**

### Ubuntu:

- Import nodesource GPG key
```
sudo apt-get update  
sudo apt-get install -y ca-certificates curl gnupg  
sudo mkdir -p /etc/apt/keyrings  
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg - dearmor -o /etc/apt/keyrings/nodesource.gpg
```
- Add nodejs deb URL to the sources list
```
NODE_MAJOR=21  
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
```
> `NODE_MAJOR` can be changed depending on the version you need.

```
NODE_MAJOR=16  
NODE_MAJOR=18  
NODE_MAJOR=20  
NODE_MAJOR=21
```

- Now run apt-get update and install nodejs
```
sudo apt-get update  
sudo apt-get install nodejs -y
```

#### Uninstall:

```
sudo apt-get purge nodejs  
rm -r /etc/apt/sources.list.d/nodesource.list  
rm -r /etc/apt/keyrings/nodesource.gpg
```

### Mac:

#### Install:

```
brew install node
```

#### Uninstall:

```
brew uninstall node
```

## **Yarn1.x Installation Instructions**

### Ubuntu:

- Import yarn GPG key

```
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
```

- Add yarn deb URL to the sources list

```
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
```

- Now run apt-get update and install yarn

```
sudo apt-get update  
sudo apt-get install --no-install-recommends yarn -y
```

> We don’t want apt-get to install nodejs again as we already installed the latest version of nodejs from the above method, so we are specifying --no-install-recommends in apt-get to not install nodejs along with yarn.

#### Uninstall:

```
sudo apt-get purge yarn  
rm -r /etc/apt/sources.list.d/yarn.list
```

### Mac:

#### Install:

```
brew install yarn
```

#### Uninstall:

```
brew uninstall yarn
```

## Yarn4.x Installation Instructions

After following the above methods we assume that yarn1.x binary is added to your path, if not run the following command to add it to your path

```
corepack enable
```

> If corepack is not installed already use npm to install it globally

```
npm install -g corepack
```

Now we have to create a project directory and switch to that directory

```
mkdir yarn-project  
cd yarn-project
```

Initialize the project to use the latest version of yarn

```
yarn init -2
```

If you want to update yarn to the latest version you need to run:

```
yarn set version stable  
yarn install
```

Now yarn will be configured to use the most recent stable binary

> Yarn will periodically gather anonymous telemetry to disable it run

```
yarn config set --home enableTelemetry 0
```
Code Smell 235 - Console Side Effects
Tags: webdev, javascript, programming, beginners
Published: 2023-12-24 16:42:29

*You compute and log in the same place*

> TL;DR: Avoid side effects

# Problems

- Coupling

- Testability

- Reusability

- Function Composition

# Solutions

1. Decouple the code and avoid side-effects

2. Inject the output destination

# Context

Outputting to the console within an internal function generates coupling and side effects

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/c8fcd38572bce8e59bf28ceaede7a055)
```javascript
function drawChristmasTree(height) {
  let tree = '';
  let currentFloor = 1;

  while (currentFloor <= height) { 
      tree += ' '.repeat(height - currentFloor) + '🎄'.repeat(currentFloor)
        + '\n';
      currentFloor++;
  }

  // This function has side effects
  // You cannot test it
  console.log(tree);
}


drawChristmasTree(7);
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/1c4881a54286a827b8fc037fdd89722c)
```javascript
function createChristmasTree(height) {
  let tree = '';
  let currentFloor = 1;

  while (currentFloor <= height) { 
      tree += ' '.repeat(height - currentFloor) + '🎄'.repeat(currentFloor)
        + '\n';
      currentFloor++;
  }

  return tree;
}

// The side effects are OUTSIDE the function
console.log(createChristmasTree(7));

// You can also test it 

const createChristmasTree = createChristmasTree(7);

describe('createChristmasTree', () => {
  it('should create a Christmas tree of the specified height', () => {
    const expectedTree = 
      '      🎄\n' +
      '     🎄🎄\n' +
      '    🎄🎄🎄\n' +
      '   🎄🎄🎄🎄\n' +
      '  🎄🎄🎄🎄🎄\n' +
      ' 🎄🎄🎄🎄🎄🎄\n' +
      '🎄🎄🎄🎄🎄🎄🎄\n';

    const result = createChristmasTree(7);
    expect(result).toEqual(expectedTree);
  });

});

```

# Detection

[X] Automatic 

Several linters warn for this usage

# Tags

- Globals

# Conclusion

Instead of logging directly within internal functions, a more modular and flexible approach is to have functions return values or throw exceptions when errors occur. 

The calling code can then decide how to handle and log these results based on the application's logging strategy.

# Relations

{% post https://dev.to/mcsee/code-smell-17-global-functions-4b82 %}

# Disclaimer

Code Smells are my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Image generated by Midjourney
  
* * *

> Memory is like an orgasm. It's a lot better if you don't have to fake it.

_Seymour Cray_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Parsing data from CSV into PostgreSQL in Phoenix Framework project with Elixir
Tags: elixir, ecto, phoenix
Published: 2023-12-24 16:37:42

In this article, I will discuss how to populate database (PostgreSQL in my case) from CSV file. 

My configs are:
- Elixir 1.15.7
- OTP 26
- LiveView 0.20.1
- Phoenix 1.7.10
- Phoenix LiveView 0.18.18
- Ecto 3.11
- Dockerized PostgreSQL
- All running on my MacBook Air M2 8GB Ram

First, let’s install CSV parser. I am using [NimbleCSV](https://github.com/dashbitco/nimble_csv) — created and maintained by the creator of Elixir, Jose Valim.

In `mix.exs` deps, we need to add:

```
def deps do
  [
    {:nimble_csv, "~> 1.1"}
  ]
end
```

Let’s create a context and schema which we are going to populate:

```
mix phx.gen.live Projects Investment investments name funder type status
```

Now, let’s go to the actual implementation which is really easy and straightforward.

In our `seeds.exs` file, we add:


```elixir
alias NimbleCSV.RFC4180, as: CSV

"/Users/user/Documents/investments.csv"
|> File.stream!()
|> CSV.parse_stream()
|> Stream.each(fn [
                   project_name,
                   funder,
                   type,
                   status
                 ] ->
  %{
    project_name: project_name,
    funder: funder,
    type: type,
    status: status,
  }
  |> MyApp.Projects.create_investment()
end)
|> Stream.run()

```

First, we are importing `NimbleCSV.RFC4180` (the most common type of CSV encoding — works well with Google Sheet exported CSVs) as CSV (make sure to double check your CSV file’s encoding). Then, we are creating a file stream, parsing it through the CSV parser. Then on each row, we are going to create an entry in our database. 

Function that we pass to `Stream.each` takes a row as an array in which each element is a separate column of data. Then, we are going to create a map and pass it to our Context function (that was auto-generated for us). 

Then, all we have to do is to run this script in terminal:

```
mix run priv/repo/seeds.exs
```

For the sake of intellectual debate, there is probably a lot of ways this can be improved. 

We can add some asynchronous parallel spices into the script. One can create a few parallel processes that will asynchronously iterate the rows from certain indices. 1st process will iterate from 0th to 100th row, second will iterate from 100th to 200th, so on. Each process will create an array of data which we can then insert to DB with [Ecto.Repo.insert_all](https://hexdocs.pm/ecto/Ecto.Repo.html#c:insert_all/3).
Introduction To Javascript
Tags: webdev, javascript, programming, beginners
Published: 2023-12-24 16:36:30

### **Introduction:**

JavaScript, often abbreviated as JS, is a high-level, interpreted, and dynamically-typed programming language. Initially created to make web pages interactive, it has evolved into a versatile language used for both front-end and back-end development. JavaScript is an integral part of the modern web, enabling developers to create dynamic, user-friendly interfaces and responsive web applications.

### **History**

JavaScript was created by Brendan Eich in 1995 while he was working at Netscape. Originally named "Mocha" and later "LiveScript," it was eventually renamed JavaScript to capitalize on the popularity of Java. Despite the name similarity, JavaScript and Java are distinct languages. JavaScript was later standardized under the name ECMAScript, with regular updates to enhance and standardize its features.

### **Execution Environment:**

JavaScript is primarily executed in web browsers, providing client-side scripting capabilities. Every major browser, such as Chrome, Firefox, Safari, and Edge, includes a JavaScript engine that interprets and executes JavaScript code. With the advent of server-side platforms like Node.js, JavaScript can also be executed on servers.

### **Syntax and Structure:**

JavaScript syntax is similar to other C-based languages, such as Java and C++. It uses a combination of statements, expressions, variables, operators, and control structures like loops and conditionals. The language is case-sensitive, meaning `variableName` and `VariableName` are distinct.

### **Libraries and Frameworks**

JavaScript has a rich ecosystem of libraries and frameworks that simplify development. Examples include jQuery for DOM manipulation, React and Angular for building user interfaces, and Express.js for server-side development.

### **Conclusion:**

JavaScript's ubiquity in web development makes it a crucial language to learn for aspiring developers. Its continuous evolution and widespread adoption in various domains ensure its relevance and importance in the ever-changing landscape of programming. Whether you're building interactive websites, server-side applications, or mobile apps, a solid understanding of JavaScript is an invaluable asset.
Meme Lord's Secret Weapon: The Troll Face Meme Unveiled
Tags: trollface, trollmeme, facememes, trollfaceemoji
Published: 2023-12-24 16:10:58

[Simplified's AI Troll Face Meme Generator](https://simplified.com/ai-meme-generator/troll-face) is the perfect tool for injecting humor into your online presence. Whether you're a social media influencer or just someone who loves to make people laugh, our AI-powered generator will help you create hilarious troll face memes that will leave a lasting impression.
How to Clone and Import GitHub Repositories in Android Studio | Step-by-Step Guide
Tags: github, tutorial, android, clone
Published: 2023-12-24 16:10:35

{% embed https://youtu.be/NVn_T-99w5E %}

Welcome to this tutorial where you'll discover the seamless process of cloning GitHub projects into Android Studio. In this video, we'll guide you step-by-step on setting up your development environment, cloning repositories, and importing projects directly from GitHub. This streamlined workflow will enhance your app development experience. Whether you're a beginner exploring GitHub integration or looking to enhance your collaboration skills, this video provides practical insights for developers using Android Studio.

**Step 1: Setting Up Your Development Environment**
To start, we'll walk you through the process of setting up your development environment in Android Studio. This includes configuring Git, the version control system, and connecting it to your GitHub account.

**Step 2: Finding and Choosing a GitHub Repository**
In this step, you'll learn how to navigate GitHub to find repositories of interest. Whether it's your project or a collaborative effort, we'll guide you on selecting a repository to clone.

**Step 3: Cloning a GitHub Repository**
Next, we'll dive into the process of cloning a GitHub repository using Android Studio. You'll understand how to use Git commands or Android Studio's built-in VCS tools to create a local copy of the remote repository.

**Step 4: Importing the Cloned Project into Android Studio**
In this step, we'll demonstrate how to import the cloned project into Android Studio. You'll learn about the various options and configurations available during the import process.

**Step 5: Syncing and Building the Project**
We'll guide you through the final steps of syncing and building the project in Android Studio. This ensures that all dependencies are resolved, and the project is ready for development.

**Conclusion:**
Congratulations! You've successfully learned how to clone and import GitHub repositories into Android Studio. This tutorial has equipped you with the skills to seamlessly integrate GitHub into your app development workflow.

If you have any questions or comments, please feel free to leave them below. Don't forget to subscribe to our YouTube channel for more exciting tutorials on Android app development and GitHub collaboration.

Now, armed with the ability to effortlessly clone and import GitHub projects, you're ready to explore, collaborate, and contribute to the vibrant world of open-source development. Happy coding!

**Build android apps without coding** 
Start for free: https://try.draftbit.com/buildwithoutcode

Feel free to reach out to me with any questions or opportunities at (aahsanaahmed26@gmail.com)
**LinkedIn** (https://www.linkedin.com/in/ahsan-ahmed-39544b246/)
**Facebook** (https://www.facebook.com/profile.php?id=100083917520174).
**YouTube** (https://www.youtube.com/@mobileappdevelopment4343)
**Instagram** (https://www.instagram.com/ahsanahmed_03/)