Configuración

pwd: Saber donde estoy ubicado.
mkdir: Creación de carpeta
cd: Moverse a carpetas
git init: Inicias Git
npm init: Le da nombre, versión, entre otras cosas al proyecto
code . : Inicia el editor de códigos

⚙️ 𝗖𝗹𝗮𝘀𝗲 #𝟱: 𝗖𝗼𝗻𝗳𝗶𝗴𝘂𝗿𝗮𝗰𝗶ó𝗻 𝟱/𝟮𝟭 ⚙️
.
🖋️ Conceptos fundamentales antes de crear el proyecto:
.

• Web APIs JavaScript del lado del cliente: setTimeout, XMLHttpRequest, File Reader, DOM. Node: fs, https.
• API: El término API es una abreviatura de “Application Programming Interface” (Interfaz de programación de aplicaciones en español). Es un conjunto de rutinas que provee acceso a funciones de un determinado software.
• Hoisting: Sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código en tiempo de compilación.
• XML: Lenguaje de marcado creado para la transferencia de información, legible tanto para seres humanos como para aplicaciones informáticas, y basado en una sencillez extrema y una rígida sintaxis. Así como el HTML estaba basado y era un subconjunto de SGML, la reformulación del primero bajo la sintaxis de XML dio lugar al XHTML; XHTML es, por tanto, un subconjunto de XML.
• DOM: El DOM permite acceder y manipular las páginas XHTML como si fueran documentos XML. De hecho, DOM se diseñó originalmente para manipular de forma sencilla los documentos XML.
• Events: Comportamientos del usuario que interactúa con una página que pueden detectarse para lanzar una acción, como por ejemplo que el usuario haga click en un elemento (onclick), que elija una opción de un desplegable (onselect), que pase el ratón sobre un objeto (onmouseover), etc.
• Compilar: Compilar es generar código ejecutable por una máquina, que puede ser física o abstracta como la máquina virtual de Java.
• Transpilar: Transpilar es generar a partir de código en un lenguaje código en otro lenguaje. Es decir, un programa produce otro programa en otro lenguaje cuyo comportamiento es el mismo que el original.
  .
  .
  🛠️ Crear e inicializar un Proyecto:
  .

1. Tener instalado Visual Studio Code.
   .
2. Abrir la terminal (en Linux al presionar las teclas Ctrl + Alt + T).
   .
3. Para conocer donde estamos ubicados se escribe pwd y se da ENTER.
   .
4. Para ver las carpetas y archivos del lugar donde estamos, se escribe ls y se da ENTER.
   .
5. Para crear una carpeta se escribe mkdir nombre-de-la-carpeta y se da ENTER.
   .
6. Para entrar a una carpeta se escribe cd nombre-de-la-carpeta y se da ENTER.
   .
7. Si se quiere ir a la carpeta contenedora de la carpeta actual que estamos, se escribe cd … y se da ENTER.
   .
8. En linux para no escribir los comando de mkdir y cd, se escribe take nombre-de-la-carpeta y se da ENTER.
   .
9. Para crear un archivo se escribe touch nombre-del-archivo-extensión y se da ENTER.
   .
10. Para limpiar la pantalla en la terminal se escribe clear y se da ENTER.
    .
11. Si solo se quiere mover el scroll se presionan las teclas Ctrl + Alt + l
    .
12. Para iniciar el repositorio se escribe git init y se da ENTER.
    .
13. Vamos a inicializar el proyecto con npm, se escribe npm init y se da ENTER.
    .
14. Aparece el nombre del proyecto, si no se quiere modificar el nombre, se da ENTER.
    .
15. Aparece la versión del proyecto, si no se quiere modificar el número, se da ENTER.
    .
16. Aparece la descripción del proyecto, si se quiere modificar dejar vacío, se da ENTER.
    .
17. Lo mismo, dejar vacío: entry point, test command, git repository.
    .
18. En keywords se escribe las palabras claves como javascript y se da ENTER.
    .
19. En la licencia por defecto aparece la ISC, pero la más común es la MIT para compartir y poder comercializar después el producto.
    .
20. Por último, aparecen los datos ingresados (guardados en el archivo package.json) y si no hay que modificar, se escribe yes y se da ENTER.
    .
21. Para entrar al editor VSC se escribe code . y se da ENTER.
    .
22. Una vez dentro de VSC, en el panel izquierdo aparece el archivo package.json, crear una nueva carpeta llamada src donde contendrá nuestro código.
    .
23. Crear el archivo .gitignore (estará fuera de la carpeta src). En los sistemas Unix, dado que el archivo empieza con un punto, al abrir un explorador de archivos los toma como archivos ocultos y no son visibles. El contenido del archivo queda:

     /node_modules/

1. Para guardar los cambios de un archivo, presionar las teclas Ctrl + S
   .
2. Muy importante instalar la extensión Code Runner, presionar las teclas Ctrl + P y pegar: ext install formulahendry.code-runner y dar ENTER. Lo instala automáticamente (fuente: aquí).

Para aquellos que se quieran saltar las preguntas del npm init
pueden agregar el flag --yes o -y para que les genere el archivo por defecto.

npm init -y

Cuando me lo explican todo lo que necesito tan claro como lo hizo el profe!

Un comando útil para ignorar archivos cuando se utiliza git con node es:

npx gitignore node

Para aquellos que no les funcione el npm init
Deben verificar si tienen instalado NodeJS en su última versión, pueden chequearlo en la terminal con el siguiente comando “node -v”
En caso de no recibir respuesta puedes instalarlo desde su sitio oficial: nodejs .org
Aunque mi recomendacion es que vean el curso de prework para tener todo configurado para este y los proximos cursos 😃

Pienso que antes de este curso se debe tomar el curso donde el profesor te dice como instalar todo de acuerdo a tu sistema operaitvo. De hecho lo explica bien.

Aca algunos comandos que me se.

ls -> Te muestra los archivos que hay donde estas ubicado.
cd … -> Retrocede de carpeta.
cd -> Avanza de carpeta.
rm -> Eliminar un archivo o carpeta.
cd ~ -> Te lleva al home de la terminal.
cd mnt -> Te lleva al directorio de windows.
touch -> Crear un archivo .
mv -> Mover un archivo o carpeta .

Les recomiendo el curso de github con Freddy, github es… hermoso.

https://platzi.com/cursos/git-github/

Me gusta que despues del curso de git, seguimos usando los repositorios asi nos acostumbramos a llevar buenas practicas en nuestros proyectos

Agregar autor

tu nombre <tucorreo@correo.com>

. code me sirvio en windows.

git init -> Repositorio inicializado
npm init -> inicializar nuestro proyecto con NPM

pwd: Print Working Directory
mkdir: MaKe DIRectory

Para crear el .gitignote desde la terminal podemos escribir touch .gitignore

Pueden utilizar esta web para construir su .gitignore mas fácil

https://www.toptal.com/developers/gitignore/

Instalado Code Runner

Resumen de la clase

Comandos importantes

• pwd (print working directory) → Imprime la ruta del directorio en el cual estamos
• mkdir (make directory) → Crea un nuevo directorio con el nombre que indiquemos
• cd (change directory) → Cambiar la ruta de trabajo
• git → El sistema de control de versiones
• git init → Inicializa un repositorio
• npm init → Inicializar el package.json
• code → El comando de VS Code para abrir un directorio o fichero que indiquemos

Estructura de trabajo

• El directorio src (source) contendrá todo nuestro código
• El archivo .gitignore sirve para ignorar directorios y ficheros que indiquemos

Ventajas de saber manejar la terminal

Requiere pocos recursos

Al manejarse solo con texto no necesita mucho procesamiento lo que le brinda la capacidad de utilizar el tiempo no desperdiciado en cumplir la tarea requerida y no en procesar la visualización de una imagen.

Conciso y poderoso

Bajo este paradigma un programa tiene muchísimas opciones que suelen estar ocultas pero pueden ser accedidas mediante el comando correcto dando poder a la herramienta. Esto se dá gracias a que el enfoque es la funcionalidad y no necesariamente la simpleza.

Preferido por expertos

Suele ser una tendencia. Lo que no quiere decir que siempre los expertos la emplean o que uno es experto por el simple hecho de usarlas. Gracias al poder que este paradigma y el escaso consumo de recursos los usuarios exigentes suelen utilizarlos.

Esto se dá por ejemplo en el campo de las ingenierías y ciencias de la computación.

yaestamo uwu

.gitignore

# Created by https://www.toptal.com/developers/gitignore/api/node
# Edit at https://www.toptal.com/developers/gitignore?templates=node

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

# Optional stylelint cache

# SvelteKit build / generate output
.svelte-kit

# End of https://www.toptal.com/developers/gitignore/api/node
Ask AI to edit or generate...

los comandos de la consola de windows son los de ms-dos.
cd nombreCarpeta- para ingresar a al carpeta
cd… para salir de la carpeta
md para crear carpeta
rd para eliminar carpeta
copy para copiar archivo o carpeta
rename para renombrar archivo o carpeta
del para borrar archivo
del *.jpg para borrar todos los archivos con extension jpg

• lo mismo para todas las extensiones *
  del . para borrar todo dentro de una carpeta o directorio
  dir para ver lo que hay en la carpeta o el directorio
  dir / ah para ver el contenido oculto archivos y carpetas dentro del directorio o carpeta
  attrib para mostrar u ocultar archivos o carpetas y son las que me recuerdo por ahora

Algunos comandos de la consola de windows:

CD - sirve para cambiar de directorio.
DIR - lista el contenido del directorio o carpeta, mostrando las subcarpetas que tiene.
TREE CARPETA - árbol de directorios de una carpeta concreta.
CLS - limpia la ventana de la consola de Windows, quedará como si la acabaran de abrir.
EXIT - cierra la ventana de la consola de Windows.
HELP - muestra todos los comandos disponibles.
COPY ARCHIVO DESTINO - copia uno o más archivos en la dirección que elijas.
ROBOCOPY - borra el archivo o carpeta que le indiques.
RENAME ARCHIVO - permite cambiar el nombre de un archivo, incluso de una extensión.
MD NOMBREDECARPETA - crea una carpeta con el nombre que asignes en la dirección en la que te encuentres.

Otra extensión que recomiendo es Error Lens para saber si hay un error en tal línea en específico.

Lo importante que es git y el curso de Freddy, se utiliza en todo, dejo un recorderis por acá de algunos comandos importantes.

• pdw: Muestra la ruta donde están los archivos del usuario
• cd /: change direction y la dirección a la que quiero ir.
• ls: listar archivos
• clear o ctrl l: limpiar la consola
• ls -al: todos los archivos incluso los ocultos en una lista
• flecha arriba: ultimo comando
• ls -a: grupos de archivos pero no en una lista
• cd … carpeta anterior
• cd “letra+tab” y rellena
• mkdir nombrecarper //crear carpeta en la ubicación
• rmdir nombmnrecarpe //eliminar carpeta en la ubicación
• mv nombrearchivo nombrearchivonevo Para cambiar el nombre de un archivo/carpeta
• cd . carpeta actual
• source ~/.bashrc Actualizar cambios en configuración de la terminal.
• touch crear un archivo vacío
• history para listar la lista de comandos anteriores
• !## para reproducir esa acciógit rn de nuevo
• rm archivoaborrar borra archivo
• git init iniciar un repositorio en esa ubicación
• git add nombredelarchivo.ext para agregar el archivo a la rama de GIT (actualizar su contenido)
• git status muestra el estado del archivo en GIT, muestra si hay cambios
• git rm nombredelarchivo.ext eliminar el archivo del repositorio

🍃 Les paso dejando algunas herramientas que les pueden.

Creador de gitignore

Toptal tiene una web que les puede crear archivos .gitignore bastante completos.
🙈 https://www.toptal.com/developers/gitignore

Cursos de Platzi

Les dejo por acá unos cursos que les pueden ayudar a entender bien git, la terminal y la configuración de VSCode.

• 😺 Curso Profesional de Git y GitHub
• ⌨️ Curso de Introducción a la Terminal y Línea de Comando
• 🪟 Curso de Prework: Configuración de Entorno de Desarrollo en Windows
• 🐧 Curso de Prework: Configuración de Entorno de Desarrollo en Linux
• 🍎 Curso de Prework: Configuración de Entorno de Desarrollo en macOS

Espero les sirvan!

Mis apuntes en Notion💚

En https://www.gitignore.io/ puedes generar información más completa para el fichero, indicándole las tecnologías que trabajaras por ejemplo visual studio code y node o los que necesites y la herramienta te genera la información que debes copiar y luego pegar dentro del archivo .gitignore que creaste.

Saludos

Visual Studio Code Documentation

Vscodium, en caso de querer usar vscode pero sin los extras innecesarios de microsoft, esto es posible gracias a que MS “librero” el código de vscode.

https://vscodium.com/

Les recomiendo utilizar la pagina gitignore.io para generar si archivo git ignore mucho mas ordenado. solo deben colocar las tecnologias que van a usar y el autocompleta el archivo, luego solo deben copiar y pegar en su archivo

La extencion de VSC cCode Runner te permite ejecutar codigo directamente desde el editor sin usar una terminal aparte

Asíncronismo en JS - Notion

Estoy viendo que puedo usar Git Bash, y wsl (ubuntu) para hacer lo que dijo el profe.

Quiero un teclado como el del profe

Para quienes se encuentren en Linux, pueden instalar NVM (node version manager) para obtener las ultimas versiones de este y poder probar cosas nuevas incorporadas, tan solo tienes que ir a la documentacion de NVM

god

Hey como que falto decir que plugin como eslint y cosas que nos ayuden con js

Por si les aparece esto en WSL ‘bash\r’: No such file or directory

entren acá

Es importante el curso de dependencias npm, Oscar es un maestro…

Instalando Code Runner:

En Visual code ‘Ctrl + P’ y pega esto:

ext install formulahendry.code-runner