Одну секунду
Что-то сучилось. Попробуйте еще раз.
Midudev смотреть последние обновления за сегодня на .
Con esta técnica vas a aprender cómo manejar correctamente errores en JavaScript. Crearás tus propios errores y evitarás que los problemas de tu infraestructura lleguen al cliente. Con estas buenas prácticas vas a mejorar la mantenibilidad y escalabilidad de tu código. ▶ No te pierdas más directos en: 🤍
Éste vídeo es un clip del Episodio 1 de TheCommitShow: 🤍 - MiduDev: 🤍 - También tienes este episodio en: 🎙 Spotify: 🤍 Conviértete en miembro de este canal para disfrutar de ventajas: 🤍 👾 Redes sociales 👾 ► Twitter: 🤍 ► Instagram: 🤍 ► Canal Secundario: 🤍 ► Discord: 🤍 👨🏼🏫 MIS CURSOS 👨🏼🏫 👽 Curso de iniciación a la programación con JavaScript: ► 🤍 👽 Curso de desarrollo backend con NodeJS y Express: ► 🤍 👕 MERCHANDISING DEL CANAL: ► Tienda YouTube: 🤍 ► Tienda Teespring: 🤍 ⭐️ AFILIADOS ⭐️ 🎵 TODA la música es de EpidemicSound: ► 🤍 ✉️ CONTACTO PROFESIONAL: ► Respuesta no garantizada: bettatechyt🤍gmail.com 📚 LIBROS 📚 Design Patterns ► 🤍 Head First Design Patterns ► 🤍 Refactoring ► 🤍 Clean Architecture ► 🤍 Clean Code ► 🤍 Introduction to Algorithms ► 🤍 Cracking the Coding Interview ► 🤍
Bienvenidos a The Commit Show! En el primer episodio, traemos al gran MiduDev, que ha creado una de las comunidades más grandes de desarrollo de habla Hispana. Vamos a charlar sobre senority, charlas, inteligencia artificial y, cómo no, de los despidos masivos que ha habido en Tech. Todo eso y mucho más, hoy, en The Commit Show. En este Podcast aparece: MiduDev: 🤍 🤍 🤍 Escúchalo en Spotify: 🤍 Mail para contacto: bettatechyt🤍gmail.com Conviértete en miembro de este canal para disfrutar de ventajas: 🤍 👾 Redes sociales 👾 ► Twitter: 🤍 ► Instagram: 🤍 ► Canal Secundario: 🤍 ► Discord: 🤍 👨🏼🏫 MIS CURSOS 👨🏼🏫 👽 Curso de iniciación a la programación con JavaScript: ► 🤍 👽 Curso de desarrollo backend con NodeJS y Express: ► 🤍 👕 MERCHANDISING DEL CANAL: ► Tienda YouTube: 🤍 ► Tienda Teespring: 🤍 ⭐️ AFILIADOS ⭐️ 🎵 TODA la música es de EpidemicSound: ► 🤍 ✉️ CONTACTO PROFESIONAL: ► Respuesta no garantizada: bettatechyt🤍gmail.com 📚 LIBROS 📚 Design Patterns ► 🤍 Head First Design Patterns ► 🤍 Refactoring ► 🤍 Clean Architecture ► 🤍 Clean Code ► 🤍 Introduction to Algorithms ► 🤍 Cracking the Coding Interview ► 🤍
¡Bienvenidos a nuestra mesa redonda épica sobre los frameworks de JavaScript más populares del momento! En este apasionante debate, reunimos a los expertos líderes en desarrollo web para discutir las virtudes y ventajas de React, Vue, Svelte y Angular. Cada uno de nuestros invitados es un experto destacado en su respectiva tecnología, lo que garantiza una discusión profunda y perspectivas valiosas. Escucha las opiniones convincentes de la experta de React, Mus, quien destacará su enfoque modular y su gran comunidad de desarrolladores. Descubre las razones por las cuales la experto en Vue, Diana Nerd, considera que su framework tiene una sintaxis elegante y un enfoque intuitivo para construir interfaces de usuario interactivas. Nuestro experto en Svelte, Oscar Barajas, te explicará por qué este framework de última generación merece tu atención, con su enfoque innovador en la compilación a tiempo de construcción y su rendimiento sorprendente. Y, por supuesto, no podemos olvidarnos del experto en Angular, Nicobytes, quien te mostrará por qué este robusto framework de Google ha ganado un lugar destacado en el desarrollo empresarial, con su poderosa estructura y su sólido soporte. Durante esta mesa redonda, nuestros invitados debatirán acaloradamente sobre los puntos fuertes y débiles de cada framework. Analizarán el rendimiento, la curva de aprendizaje, la escalabilidad y la comunidad de cada uno, proporcionando una visión profunda y detallada de los aspectos clave que debes considerar al elegir tu herramienta de desarrollo web favorita. No te pierdas este emocionante debate donde nuestros expertos en React, Vue, Svelte y Angular discuten sobre las ventajas de cada tecnología. Prepárate para aprender, debatir y tomar decisiones informadas mientras exploramos las fortalezas y los desafíos de estos frameworks. ¡Suscríbete, activa las notificaciones y únete a la conversación en esta mesa redonda imperdible para los amantes del desarrollo web! ▶ No te pierdas más directos en: 🤍
Te explico por qué NO debes utilizar Strings en tu código de JavaScript y cómo mejorar esta práctica. Los llamados "Magic Strings" pueden ser una tentación fácil para muchos programadores, pero a largo plazo, pueden ser una fuente de errores y problemas en el código. En este tutorial, te enseño una forma más efectiva y segura de evitar los Magic Strings y hacer tu código más legible y fácil de mantener. Aprenderás los conceptos clave detrás de esta técnica y cómo aplicarla en tu propio código. ¡No te pierdas esta oportunidad de mejorar tus habilidades de programación en JavaScript! 00:00 - ¿Qué son los Magic Strings? 00:45 - Crea una constante para evitarlo 01:30 - Crea un diccionario para mejorar 02:44 - Ventajas 02:50 - Uso de Símbolos en JavaScript 04:07 - Inmutabilidad
Te voy a contar mi historia de cómo empecé en la programación. No fue bien. Pero aquí estoy, 15 años después, siendo una de las pasiones de mi vida. ¿Cómo es eso? Suscríbete al canal 🔔 ► 🤍 📚 El libro con el que hice "click" pero te aviso que es bastante antiguo: "Thinking in Java" de Bruce Eckel: 🤍 0:00 Introducción 0:06 Mis desastrosos inicios en la programación 3:33 Clase Ficha Clase Puntuación 5:01 Quinto día programando 5:33 Séptimo día programando 6:38 Primer día de clase 6:47 Segunda semana 6:52 Un mes después 8:59 Clase Ficha Clase Tablero 9:54 NO tienes que saber matemáticas para desarrollar software 10:34 Evita malos profesores y busca un buen mentor
🗣️ "Das cursos gratis pero no hay títulos ni certificados en eso. Todo lo gratis también tiene un precio y TÚ lo que haces NO AYUDA". Contesto en directo a este mensaje y te cuento mi opinión sobre este tipo de pensamiento que a veces me llega como mensaje por mis diferentes redes sociales. 💬 ¿Tú qué opinas? ¿No ayuda el contenido gratuito? ¿Tiene algún valor? ¿Es más importante el conocimiento demostrable o las certificaciones? Puedes seguirme en: Instagram: 🤍 Twitter: 🤍 YouTube: 🤍
¡No las hagas si quieres hacer un código más sostenible. 💾 Guarda el reel para no cometerlas!!! Y es que hablamos mucho de buenas prácticas pero no de lo que deberíamos evitar en nuestro código. Algunas de las ideas son muy antiguas pero hoy en día ya no tienen sentido. ¡Espero que te ayude a mejorar tu código! 💬 ¿Ya las estabas siguiendo? #shorts
Te explico algunos puntos clave que debes considerar en tu camino para pasar de Junior a Senior en el mundo de la programación. 💶 -85% de descuento en Elsa Speak: 🤍 🇬🇧 Prueba Elsa Speak gratis: 🤍 📖 Libro "El Arte de Presentar": 🤍 Patrones de Diseño: 🤍 🤍 Determinar cuándo uno se convierte en un programador web Senior puede ser algo subjetivo, ya que puede variar según la empresa, la industria y las expectativas individuales. Sin embargo, aquí hay algunas señales y habilidades clave que pueden indicar que has alcanzado el nivel Senior: - Experiencia: Tienes varios años de experiencia trabajando en el desarrollo web y has participado en una amplia variedad de proyectos de diferentes niveles de complejidad. - Conocimientos técnicos sólidos: Dominas varios lenguajes de programación, frameworks, herramientas y tecnologías relacionadas con el desarrollo web. Además, estás familiarizado con las mejores prácticas, patrones de diseño y principios de arquitectura. - Resolución de problemas complejos: Eres capaz de analizar y resolver problemas técnicos difíciles de manera eficiente, y puedes proponer soluciones innovadoras y escalables para los desafíos del proyecto. - Autonomía: Puedes trabajar de manera independiente y tomar decisiones técnicas sin depender constantemente de la supervisión o aprobación de otros. También eres capaz de planificar, estimar y ejecutar proyectos desde el inicio hasta la finalización. - Liderazgo y trabajo en equipo: Puedes liderar proyectos, guiar y apoyar a los miembros del equipo Junior, y contribuir al éxito del equipo mediante la colaboración y la comunicación efectiva. - Habilidades blandas: Tienes habilidades de comunicación efectiva, tanto verbal como escrita, y puedes presentar ideas y soluciones de manera clara y concisa a compañeros de trabajo, clientes y partes interesadas. - Aprendizaje continuo: Demuestras un compromiso constante con el aprendizaje y el crecimiento profesional, y te mantienes actualizado sobre las últimas tendencias y tecnologías en el campo del desarrollo web. Mejora de procesos y calidad: Eres consciente de las metodologías y prácticas ágiles y puedes contribuir a la mejora de los procesos de desarrollo, la eficiencia del equipo y la calidad del producto final. Cuando cumples con la mayoría de estos criterios, es probable que hayas alcanzado el nivel de programador web Senior. Sin embargo, es importante recordar que el desarrollo profesional es un proceso continuo, y siempre hay espacio para seguir creciendo y mejorando. Segmentos 00:00 - Introducción 00:22 - Mejora tu inglés con Elsa Speak 01:17 - Los años de experiencia 02:16 - Refuerza tus habilidades técnicas 04:08 - Recursos para aprender Patrones de Diseño 05:47 - Habilidades blandas 07:00 - Recomendación de dos libros 08:00 - Ir más allá del código 08:50 - Testing 10:00 - Mentorización a compañeros
¡Hacemos una prueba técnica para REACT real para perfiles Junio y Trainee! Gracias a David Huertas por animarse a pasar el simulacro y que, pese a los nervios, lo hizo genial. 00:00 - Introducción 01:00 - Mostramos el ejercicio 06:50 - Inicializar proyecto con React 12:41 - Creando el primer componente 15:48 - Creando el primer useEffect 18:27 - Primer ejercicio con la API 28:10 - Revisando la documentación de MDN 34:04 - A por el segundo ejercicio con la API de Gifs 42:31 - Mostrando la imagen en pantalla 47:30 - Preguntas técnicas de la solución
Cuando tenemos muchas condiciones pensamos que usar Switch es la mejor opción. ¿Lo es? Te voy a enseñar una forma para mejorar tu código JavaScript cuando tienes que lidiar con este tipo de código. Suscríbete al canal 🔔 ► 🤍 A ver, no pasa nada con usar switch pero a veces lo usamos por encima de nuestras posibilidades. 🤣 🤥 Y es que intentamos "arreglar" el hecho de concatenar muchos condicionales para ir a peor pensando que usar switch es la mejor forma. 🤭 Al final hay una forma mucho más simple que te permite controlar este tipo de funcionalidades. 🤗 De hecho, este patrón lo puedes usar, no sólo para strings, si no para cuando tienes que ejecutar diferentes funciones dependiendo del valor de una variable. ¡Tiene muchos usos! 💬 ¿Ya lo usas? ¿Qué te parece la idea? ¡Dime en los comentarios! ✅ Mejora tu código JavaScript con parámetros nombrados 🤍
Curso de React desde cero. ¿Qué es? ¿Por qué deberías aprenderlo? ¿Cómo crear tu primera aplicación? Todo lo que necesitas saber para empezar lo tienes en este vídeo. 👨💻 Repositorio de código: 🤍 💬 ¿Dudas de React? Pregunta aquí: 🤍 🔴 No te pierdas más directos en: 🤍 SEGMENTOS 00:00 - Introducción 01:30 - ¿Qué es React? 04:23 - Aviso sobre la documentación 07:10 - ¿De dónde sale React? 09:39 - 7 razones para aprender React 18:50 - ¿Por qué React? Creando un botón sin React 26:38 - Cómo usar React sin dependencias 30:00 - Crea tu primer elemento 31:45 - Elemento con atributos 34:30 - Fragment 36:00 - JSX desde cero 44:00 - Crea tu primera aplicación con React 54:00 - Crear componentes en React 58:20 - Tu primer proyecto práctico con React 01:02:50 - Estilos en React 01:09:29 - Reutilización de componentes: Props 01:14:15 - Estila contenedor para separaciones y no componentes 01:15:50 - Pasando booleanos como props 01:18:30 - Pasando funciones como props 01:21:20 - Elementos como props 01:23:10 - Diferencia entre elemento y componente 01:24:50 - Las props son inmutables 01:26:50 - La prop especial children 01:34:00 - Pasar objeto como props 01:36:27 - State en React
Si vas a aplicar a un trabajo de programador que use React, tienes que hacer y practicar esta prueba técnica. Es muy común que te pidan hacer código asíncrono y ver cómo manejas estados que dependen unos de otros. Esta prueba técnica es sencilla y está pensada para Juniors y Trainees. 🔗 Repositorio con todo el código: 🤍 Segmentos 00:00 - Introducción 04:15 - Enunciado de la prueba técnica 08:30 - Iniciamos el proyecto 11:25 - Instalando dependencias básicas 13:30 - Punto de entrada de nuestra aplicación 15:00 - JSX 16:20 - ¡Instala el linter! Es un momento 18:50 - Crear el componente React 20:30 - Crear nuestro primer estado 24:20 - Estrategia al afrontar la prueba y las APIs 30:35 - Preguntas del chat 37:25 - Seguimos con el segundo enunciado 43:45 - Sobre usar console.log en entrevistas 49:30 - Cuando te piden más cosas en la entrevista... ▶ No te pierdas más directos en: 🤍
Aprende a crear una API REST con Node.js, Express y tipos, gracias a TypeScript. Clase basada en el original FullStack Open que tiene toda la atribución al contenido de la clase: 🤍 🔷 ¿No sabes TypeScript? ¡Revisa la clase anterior! 🤍 📚 Todas las clases del FullStack Bootcamp JavaScript: 🤍 00:00:00 Intro a la magia de TS 00:08:35 Creando la App con TS 00:08:45 useState con TS 00:12:00 Renderizando el JSX con TS 00:15:50 Creando Interface de TS 00:18:00 Comprendiendo errores de TS 00:19:15 Arrays en TS 00:21:00 Recomendación de Midu sobre el State 00:23:20 Diferencias archivos .tsx y .ts 00:24:20 Props con TS 00:29:05 Tipado de Functional Components 00:33:47 Usando render list 00:37:37 Eventos en TS con formulario 00:41:40 Handle change & Event con TS 00:49:35 Reutilizar Interfaces y uso de archivo types.d.ts 00:54:40 Props de formulario 01:01:35 UseRef con TS 01:04:14 Diferencia entre Type e Interface (Explicado por milésima vez por Midu) lol 01:10:50 UseReducer con TS 01:19:40 UseReducer como custom Hook 01:22:39 Fetching de Datos con Fetch 01:34:59 Fetching de Datos con Axios 01:37:15 Documentación TS Cheat Sheets React 01:43:45 Clean Architecture
¡Guía para pasar paso a paso una Prueba Técnica Real de React! Buenas prácticas, ideas, trucos y consejos. Además, aprenderás para qué sirven y cómo usar los hooks useMemo, useCallback y useRef de React. 👨💻 Repositorio de código: 🤍 📹 Lista de vídeos: 🤍 💬 ¿Dudas de React? Pregunta aquí: 🤍 🔴 No te pierdas más directos en: 🤍 SEGMENTOS 00:00 - Introducción 02:38 - Inicializamos el proyecto 04:50 - Truco sobre los estilos 06:20 - Empezamos a escribir código 08:44 - Estilos básicos de nuestra app 11:45 - Truco al usar APIs 18:24 - ¡No hagas esto en React! 23:40 - Evita depender del contrato de la API 26:00 - Crea un custom hook useMovies 30:40 - Manejar formularios y hook useRef 37:37 - Usa formData para recuperar todos los datos del formulario 41:20 - Controlar formularios con React 46:45 - Cuidado con leer estados previos 50:00 - Estilar inputs según errores 52:14 - Volvemos a explicar useRef 54:10 - Extraer a useSearch a Custom Hook 56:45 - Usar useRef para detectar cuando es la primera vez 01:03:15 - Estilar como grid los resultados 01:10:55 - Fetching de datos 01:18:10 - Extraer lógica a servicio 01:25:35 - Evitar la misma búsqueda con useRef 01:34:05 - Ordenar películas por año de lanzamiento 01:39:00 - Cómo usar useMemo para mejorar rendimiento y evitar cálculos 01:45:10 - Usar useMemo para evitar recrear función en cada render 01:52:30 - Cómo usar useCallback 01:57:00 - Crear una función debounce desde cero ▶ No te pierdas más directos en: 🤍
¡Todo el mundo quiere mejorar su salario en programación! Pero... ¿hay que programar más y mejor y ya está? ¡PUES NO! 💶 -85% de descuento en Elsa Speak: 🤍 🇬🇧 Prueba Elsa Speak gratis: 🤍 📖 Libro "El Arte de Presentar": 🤍 Te dejo 5 consejos que a mi me han servido para llegar a ganar más de 80.000 € al año en España. 00:00 - Introducción 00:30 - Consejo 1 01:51 - Consejo 2 02:52 - Consejo 3 03:59 - Consejo 4 06:07 - Consejo 5 07:45 - Tomas falsas
Usa este método para encontrar si un elemento de un Array cumple una condición. Es la forma correcta de hacerlo, la más corta y fácil de leer y mantener. ¡Así mejorará tu código! 👍
Aprende a crear un donut spinner 🍩 sólo usando CSS y en menos de un minuto. Perfecto para frontenders impacientes ⏲️. HTML + CSS: 🤍 ▶ Suscríbete al canal: 🤍 #css #spinner
El operador spread nos permite crear copias de elementos de un array y objetos de una forma muy sencilla en JavaScritp... PERO... ▶ SUSCRÍBETE para próximos retos: 🤍 ¿Qué pasa si hay un array o un objeto anidado? Pues que tienes que tener cuidado porque quizás no va a funcionar como esperas. 😱 Imagina que hacemos una copia de un array con el spread operator y este array tiene otro array anidado dentro. Y lo que hacemos es modificar un elemento de ese array anidado en la copia que hemos hecho. ¿QUÉ PASA? Pues te lo explico en el vídeo, a ver si aciertas. ¿Has acertado 💡? ¡Deja tus ideas en los comentarios y compártelo con tus amigos! #retoJavascript #retoJS
En este vídeo te enseño a crear un clon de TIKTOK en menos de 8 horas con JavaScript y React. Lo hacemos desde cero y explicando paso a paso También usamos como empaquetador Vite y como backend con autenticación tenemos Supabase.
¡Aprende a usar useContext, useReducer y useId en tus aplicaciones de React! 👀 Todas las clases: 🤍 👨💻 Repositorio de código: 🤍 💬 ¿Dudas de React? Pregunta aquí: 🤍 🔴 No te pierdas más directos en: 🤍 useContext. Este hook nos permite crear un estado global de nuestra aplicación sin necesidad de pasar datos a través de múltiples componentes. Al crear un contexto, podemos almacenar datos en él y luego acceder a ellos desde cualquier componente que consuma ese contexto. useReducer: Hook nos permite manejar estados complejos y es una alternativa a useState. Nos permite definir acciones que cambian el estado de forma más controlada. Al utilizar useReducer, definimos una función reducer que toma un estado actual y una acción y devuelve un nuevo estado. SEGMENTOS 00:00 - Introducción, iniciar proyecto e instalación dependencias 02:40 - Limpiar el código que viene por defecto 03:25 - Copia de iconos 03:55 - Listar Productos de la tienda 10:40 - Añadir filtros de la tienda 19:12 - Estilando los filtros 20:54 - Mejorando filtro rango 22:15 - Hacer que los filtros funcionen 29:46 - Prop Drilling 32:30 - useId, para crear identificadores 37:50 - useContext, crear contextos en React y para qué sirve 55:42 - ¿Cuándo usar useContext? 57:15 - Evitar prop drilling con useContext 01:00:10 - Dos fuentes de la verdad. ¿Qué es y cómo arreglarlo? 01:09:41 - Creación de un carrito desde cero 01:12:50 - Crear menú flotante con CSS 01:16:50 - Crear Contexto para el Carrito de la Tienda 01:27:21 - Mostrar visualmente que el producto está añadido al carrito 01:34:34 - Mostrar la info del carrito 01:38:55 - ¿Qué es el método bind y para qué sirve? 01:40:11 - useReducer, manejando estados más complejos
No dejes Visual Studio Code tal y como te lo encontraste. ¡Mejora su funcionamiento cambiando estas configuraciones! Mucha gente no saben ni que existen y hace que puedas mejorar mucho tu productividad cambiando sus valores por defecto. O, al menos, dejarlo más bonito. Que también es importante. ¡Déjame en los comentarios cuál ha sido tu favorita!
📚 La sucesión o serie de Fibonacci es, seguramente, uno de los ejercicios más típicos en entrevistas de trabajo o de universidad. 🤔 Muchas veces se resuelve con recursividad pero lo cierto es que no es la mejor más óptima. 🤣 Con un simple bucle puede sacar el resultado sin los problemas de rendimiento de la recursividad y quedas genial porque entiendes exactamente el problema. 👀 Eso sí. ESTA NO ES LA SOLUCIÓN MÁS ÓPTIMA (aunque es mejor que la de recursividad). La más óptima sería usando la fórmula de Binet: 🚀 ¡Y así mejoras tu lógica de programación! 💬 ¿Qué te parece? ¿Qué otro problema podríamos hacer? #shorts
Construimos una pequeña aplicación que hace fetching de datos a una API y muestra los datos en pantalla. Luego la desplegamos a producción totalmente gratis para que cualquier persona pueda acceder a ella. El vídeo es para gente que está empezando a aprender programación y quieren crear un proyecto desde cero, paso a paso, y luego tener una URL donde otra gente pueda ver lo que ha creado. Para la aplicación usamos la API de RapidAPI: ➡️ 🤍
Es super fácil de hacer. Sólo tienes que crear un botón y dentro 3 divs vacíos. Cada div es uno de los palitos del menú. Luego al hacer hover animamos los tres palitos. Dos los rotamos y el del medio lo hacemos desaparecer. ¡Queda genial y es muy fácil! ¿Te animas a hacerlo? #shorts
#Shorts 📖 Las configuraciones son muy personales... pero yo me he pasado años intentando mejorar la mía al detalle. 🤩 Con este theme, fuente, configuraciones y extensiones creo que he llegado a un poco de mucha comodidad. 👨💻 Así he programado y he sido super productivo durante mucho tiempo. ¡Así que no creo que cambie pronto! ⚙️ Obviamente, cambia los parámetros que consideres y usa lo que prefieras. Al final lo bueno de estas preferencias es que se pueden amoldar a cada persona. 💬 ¡Y comparte en los comentarios las tuyas para que otra gente se inspire contigo!
Segunda clase del Bootcamp FullStack gratuito para ver qué es Javascript, algunas de sus características e iniciarnos en React.js. Suscríbete al canal 🔔 ► 🤍 En esta parte, nos familiarizaremos con la librería React, que usaremos para escribir el código que se ejecuta en el navegador. También veremos algunas características de JavaScript que son importantes para comprender React. ¿Lo quieres ver en directo? Todos los domingos a las 8PM (hora Española) en Twitch: 🤍 Segmentos: 00:00 - Introducción y bienvenida 04:56 - Requerimientos para seguir las clases 06:15 - Inicio con JavaScript 10:15 - Variables en JavaScript 17:45 - Qué tipos existen en JavaScript 19:30 - Tipos mutables e inmutables 26:50 - Objetos en JavaScript 32:50 - Funciones en JavaScript 44:15 - Empezamos la sección de React 47:12 - Creando el proyecto de React desde cero 01:02:36 - Curso de React desde cero GRATIS 01:04:45 - Evaluación de JavaScript en React 01:08:45 - ¿Por qué JSX? ¿Qué es JSX? 01:11:30 - Creando Components en React 01:20:30 - EL ANSIA jajajaja 01:33:00 - Guardando los cambios en un repositorio de GitHub 01:46:30 - Ejercicios de React 01:58:47 - Preguntas y respuestas finales Clase basada en el FullStack Open: 🤍
Curso desde cero para aprender todo lo que necesitas sobre Next.js 13: 00:00 - Introducción al curso y resumen de las novedades 05:45 - Empezando nuestro proyecto desde cero 07:12 - Configuración inicial para Next.js 13 08:15 - Instalando el linter 11:00 - Creando la ruta prinicipal 13:30 - Nuestro primer layout 15:33 - Rutas anidadas con directorios 17:00 - Enlaces a páginas internas 22:30 - Cargando estilos globales 23:50 - Estilos locales con CSS Modules 26:50 - Respondiendo preguntas 32:40 - Rutas dinámicas en el path 35:25 - Fetching de datos pero... 37:48 - React Server Components 43:45 - Cómo crear componentes en el cliente para React en Next 13 52:00 - Creando páginas estáticas o getStaticProps 53:30 - Creando páginas con server side o getServerSideProps 56:05 - Incremental Static Regeneration 59:05 - El estado de los layouts se mantiene 01:02:00 - Respondiendo preguntas de la comunidad 01:04:10 - getStaticProps vs getServerSideProps vs ISR 01:09:35 - Ruta anidada para los comentarios 01:15:28 - Archivo loading.jsx para streaming de HTML 01:21:28 - Control de errores con error.jsx 01:26:18 - Agrupar rutas para compartir layout 01:28:30 - Probando Turbopack 01:35:30 - Cargando fuentes con next/font 01:43:45 - Usando el componente de Image 01:51:35 - Resumen final ▶ No te pierdas más directos en: 🤍
Hacer este tipo de ejercicios puede ayudarte a mejorar tu agilidad cuando te encuentres problemas de este tipo en JavaScript. ☕ Y es que buscar datos, transformarlos y ordenarlos es muy típico en cualquier aplicación. 👌 Este problema nos lo ha compartido un compañero en Discord: ➡️ 🤍 ¡Todos los problemas siempre tienen más de una solución! Así que deja la tuya en los comentarios. 💬
¡Estos problemas mejoran tu lógica de programación! Y es que Uber y otras empresas hacen estas pruebas para ver cómo las resuelves. Muchas empresas de tecnología utilizan este tipo de problemas en sus procesos de selección de personal para evaluar la capacidad de los candidatos para resolver problemas y desarrollar algoritmos eficientes. En este caso te piden que busques el número positivo más pequeño que falta en un array de números desordenados. ¡Hay un montón de formas de solucionarlo! La que cuento es una, pero aunque es fácil de leer, no sería la más óptima en cuanto a tiempo de ejecución. ¡Te reto a que lo intentes tú! Lo importante es estar preparado para enfrentar este tipo de problemas en una entrevista técnica y ser capaz de desarrollar soluciones eficientes y efectivas. ¡La práctica hace al maestro! #programacion #programador #programadores #software #informatica
¿Quieres mejorar la legibilidad y extensibilidad de tus funciones en JavaScript? Te voy a mostrar una buena práctica que debes considerar para que tu código aguante mejor el paso del tiempo. Suscríbete al canal 🔔 ► 🤍 👨💻 Normalmente usamos argumentos posicionados. Esto quiere decir que la función mira la posición del argumento para saber a qué te refieres. ✌️ Esto está bien para funciones con uno o dos parámetros. Si tienes más de dos o piensas que la función va a evolucionar... ¡mejor usa otra cosa! 🙃 Tiene un montón de ventajas. Desde que no te molesten los parámetros opcionales a que sea más sencillo entender lo que hace la función y los parámetros que necesita. 🔥 Además este tipo de funciones con parámetros nombrados evoluciona muuuucho mejor, ya que puedes ir añadiendo parámetros sin preocuparte de cambiar su posición. 💬 ¿Ya lo usabas? ¡Espero que si no lo hacías lo hagas ahora!
Aprende a crear una API REST con Node.js, Express y tipos, gracias a TypeScript. Clase basada en el original FullStack Open que tiene toda la atribución al contenido de la clase: 🤍 🔷 ¿No sabes TypeScript? ¡Revisa la clase anterior! 🤍 📚 Todas las clases del FullStack Bootcamp JavaScript: 🤍
🤩 MEJORA tu VISUAL STUDIO CODE activando las ligaduras. ¡Te enseño cómo! ✍️ Las ligaduras son una característica de algunas fuentes que combinan varios caracteres en un sólo símbolo. 🤯 Por ejemplo, los = pasan a ser un sólo símbolo. O la flecha del arrow function también se junta para que se vea claramente la forma de flecha. ¡Hay un montón de ejemplos! ☝️ No todas las fuentes lo soportan y el editor, por defecto, lo tiene desactivado. ¡En el vídeo te explico cómo puedes lograr activarlo y qué fuente puedes usar para conseguirlo! 💬 ¿Ya las tienes activadas? ¿Prefieres con ligaduras o sin ligaduras? #shorts
React Native te permite desarrollar una aplicación para iOS, Android y Web, compartiendo el código entre los diferentes dispositivos. Lo mejor ese que si ya sabes React, no tienes que aprender mucho más. Clase basada en el original FullStack Open que tiene toda la atribución al contenido de la clase: 🤍 En este curso de 4 horas vamos a crear una aplicación de React Native desde cero para iOS, aunque el código podría funcionar para diferentes dispositivos. 00:00 Intro React-Native 03:10 Expo 05:10 Creando la app 10:07 Configurando iOS simulator 12:26 react-native-debugger 15:40 Linter 17:30 Text, View, Touchable 25:00 StatusBar y expo-constants 29:30 Mostrando los repositorios 32:37 ScrollView y FlatList 40:15 Desactivando reglas linter 41:00 StyleSheet, theme y estilos 54:38 FlexBox. Alineando texto y stats 01:02:00 ParseThousands 01:04:19 Estilando language 01:07:05 alignSelf: flex-start 01:08:10 BorderRadius y overflow 01:08:40 Image. Mostrando repo image 01:11:00 FlexBox. Mostrando image side by side 01:18:20 MarginHorizontal y MarginVertical 01:19:20 AppBar 01:25:00 react-router-native 01:28:30 Problemas con react-router-native 01:29:30 Solucion: webpack-config 01:34:50 Ruteando 01:40:50 Scroll para las tabs 01:49:00 Preguntas 02:07:40 Inicio clase 2 02:11:30 StatusBar 02:14:25 Plarform.select 02:26:00 Sign in con Formik 02:40:25 Formik: useField 02:45:15 Masking the password 02:46:15 Preguntas 02:50:30 Validacion de formulario 02:57:40 Validación con yup 03:04:00 Configurando el backend 03:09:15 Queries a la REST API 03:13:30 global.fetch y globalThis 03:14:30 custom hook useRepositories 03:17:50 Arreglando errores por localhost 03:20:20 ApolloClient 03:23:35 GraphQL 03:26:45 Usando graphQL en el custom hook 03:30:00 Preguntas
Usar async/await 🔀 es genial para código asíncrono pero... ¿qué pasa si usas async con un método que es síncrono? Pues que tienes que tener mucho cuidado porque quizás no funciona como esperabas. ▶ SUSCRÍBETE para próximos retos: 🤍 En este reto podemos ver cuál sería el resultado de ejecutar un código que, parece síncrono, pero que al usar async en él cambia completamente. ¿Has acertado? ¡Deja tus ideas en los comentarios! #retoJavascript #retoJS
Centrar un div, durante mucho tiempo, ha sido un trabajo muy complicado en CSS. ¡Pero estamos en 2022! Y existen diferentes formas para conseguirlo. Usando flex, grid o absolute, dependiendo de lo que quieras lograr, lo puedes hacer. En este vídeo de #shorts te enseño cómo lo puedes conseguir.
Node.js te permite ejecutar JavaScript en el lado del servidor. En este vídeo vas a aprender a crear tu primera API y además descubrirás Express. Suscríbete al canal 🔔 ► 🤍 🔗 Links: Instalar Node.js: 🤍 Instalar Node.js con nvm: 🤍 Artículo para instalar Node.js: 🤍 Express: 🤍 Código: 🤍 Segmentos: 00:00 - Introducción y bienvenida 02:15 - Instalando Node.js 03:25 - REPL de Node.js 04:20 - npm, el administrador de paquetes de Node.js 07:00 - Hola Mundo desde Node.js 09:15 - Primer servidor con Node.js 21:12 - Instalando nodemon 25:05 - ¿Qué es y por qué usar Express? 28:00 - Semantic Versioning en dependencias de npm 33:39 - Creando un servidor con Express 45:00 - Devolviendo otros Status Code desde servidor de Express 47:05 - Añadiendo DELETE a nuestra API 49:41 - Postman e Insomnia para probar nuestra API 54:53 - REST Client Extensión de VisualStudio Code 56:31 - Crear un recurso con POST 01:13:00 - Para la próxima clase... Clase basada en el FullStack Open: 🤍
¿Quieres darle vida a tu editor de código preferido? ¡Te enseño mis 5 temas favoritos para el editor de Microsoft! Para que tu código se vea INCREÍBLE. 🦇 Dracula, para que le hinques el diente a tu código. 🪐Andromeda, para el código de otra galaxia. 🔮 Synthwave 84', regresa al futuro en la programación. 🟣 Shades of Purple, para dejar de menospreciar al lila. 🥇 One Dark Pro, mi favorito. Desde Atom Editor acompañándome en las buenas y las malas. #shorts
Desde la versión 1.63.0 de Visual Studio Code puedes probar rápidamente temas de colores sin instalarlos. ¡Te enseño rápidamente cómo! ⌨️ Control K + Control T en Windows y Linux Cmd K + Cmd T en macOS #shorts
No uses más create-react-app. React ya no lo recomienda en su documentación. Usa las alternativas que decimos en el vídeo, ya que lleva más de un año sin actualizaciones. Segmentos 00:00 - INTRODUCCIÓN 00:10 - FRAMEWORKS RECOMENDADOS 00:35 - ¿DÓNDE ESTÁ VITE? 01:10 - EVAN YOU SE ENFADA 01:50 - ADIÓS CREATE REACT APP 02:20 - INSTALACIÓN CON NEXT, REMIX o GATSBY
.svg){kind=small}
![Curso de React [2023]: De cero hasta crear tus primeros componentes con estado](https://i.ytimg.com/vi/7iobxzd_2wY/mqdefault.jpg "Curso de React [2023]: De cero hasta crear tus primeros componentes con estado")
![Aprende a pasar una Prueba Técnica de React. Entiende useMemo, useCallback y useRef [Curso de React]](https://i.ytimg.com/vi/GOEiMwDJ3lc/mqdefault.jpg "Aprende a pasar una Prueba Técnica de React. Entiende useMemo, useCallback y useRef [Curso de React]")
