- Видео 314
- Просмотров 239 628
FixterGeek
Мексика
Добавлен 18 май 2018
Te enseño a crear una animación Marquee, con React 🫨
Te explico paso a paso cómo usar Framer-Motion para crear animaciones con Velocity, Scroll y Animation frames. 🤩
🤩 Únete a la lista de espera y no te pierdas el estreno del curso, ¡sé de los primeros!:
animaciones.fixtergeek.com/
🪄 Código:
github.com/blissito/agenda/blob/main/app/components/animated/Marquee.tsx
📺 Demo:
denik.me/blissmo/banners/simple
🔥 Pasa tu diseño de Figma a HTML:
ruclips.net/video/x-Rr4t-RA8U/видео.html
👩🏻💻 Un curso genial:
fixtergeek.com/courses/react-desde-cero/detail
🤩 Únete a la lista de espera y no te pierdas el estreno del curso, ¡sé de los primeros!:
animaciones.fixtergeek.com/
🪄 Código:
github.com/blissito/agenda/blob/main/app/components/animated/Marquee.tsx
📺 Demo:
denik.me/blissmo/banners/simple
🔥 Pasa tu diseño de Figma a HTML:
ruclips.net/video/x-Rr4t-RA8U/видео.html
👩🏻💻 Un curso genial:
fixtergeek.com/courses/react-desde-cero/detail
Просмотров: 44
Видео
Te muestro cómo uso el fetcher de React router v7 😱
Просмотров 145День назад
Necesito cargar datos asíncronos y con fetcher es muy fácil. Te enseño cómo puedes usarlo tú también. 🤓 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
React Router v7 | Introducción con un CRUD usando Prisma y Vite
Просмотров 15114 дней назад
En este pequeño curso te voy a enseñar cómo usar las herramientas de la nueva versión de React Router 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
Primer vistazo a React Router v7 🤯
Просмотров 69514 дней назад
Te muestro cómo probar React router v7 paso a paso 🤓 Mi post de blog: fixtergeek.com/blog/primer_vistazo_a_react_router_v7_1zfd9 Docs oficiales: reactrouter.com/dev/guides/start/installation 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
Te explico las rutas de Remix de forma sencilla ✅
Просмотров 8921 день назад
En este video te explico poco a poco todas las opciones en ruteo que tenemos en Remix 💿 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
Te muestro un componente animado con el scroll
Просмотров 6528 дней назад
Hay muchas formas de emplear Framer Motion, aquí te muestro una muy sencilla. 🤩 Código: github.com/marianaLz/fun-components/pull/2 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
Te muestro cómo tipar onChange y onSubmit
Просмотров 108Месяц назад
Te muestro dónde está toda la info para tipar todos los eventos en React. 🤯 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
Te muestro que crear una página web es muy sencillo
Просмотров 80Месяц назад
Tú puedes crear una página web usando solamente VSCode: code.visualstudio.com/ 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/Intro-a-CSS/detail
Te muestro cómo publicar tu sitio Astro en Github Pages
Просмотров 340Месяц назад
Creo un nuevo proyecto Astro y también el repo en Github, luego el workflow con sus actions; te lo muestro todo. ✅ Código Fuente: github.com/blissito/astro_github_pages_ejemplo Post de blog: fixtergeek.com/blog/astro_github_pages_lcerp Llaves SSH en Github: docs.github.com/es/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account Los docs de Astro: docs.astro.b...
Te muestro cómo uso los iconos de Figma en React
Просмотров 73Месяц назад
En Figma exportamos en formato SVG y en React creamos un componente con el código de ese SVG. ✅ 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
Te muestro cómo utilizo useForm con Remix y Zod con TypeScript.
Просмотров 1172 месяца назад
Si buscas «la mejor manera de hacerlo» hazle caso a los de Vercel. Aquí yo hago artesanías web con las herramientas que se me pega la gana. 😌 💎 Zod Docs: zod.dev/ 🔥 Pasa tu diseño de Figma a HTML: ruclips.net/video/x-Rr4t-RA8U/видео.html 👩🏻💻 Un curso genial: fixtergeek.com/courses/react-desde-cero/detail
Te muestro cómo diseñé un custom hook para detectar clicks
Просмотров 732 месяца назад
Te muestro cómo diseñé un custom hook para detectar clicks
Cómo publicar en Cloudflare con Prisma, MongoDB y Vite usando el plugin de Remix 💿
Просмотров 1272 месяца назад
Cómo publicar en Cloudflare con Prisma, MongoDB y Vite usando el plugin de Remix 💿
Te comparto mi código y te doy un pequeño paseo mientras lo echo a andar en CodePen 😝
Просмотров 972 месяца назад
Te comparto mi código y te doy un pequeño paseo mientras lo echo a andar en CodePen 😝
Te enseño cómo usar Framer Motion para crear animaciones con el scroll 📃
Просмотров 7243 месяца назад
Te enseño cómo usar Framer Motion para crear animaciones con el scroll 📃
Te enseño cómo publicar tu sitio web al hacer push a main 🎈
Просмотров 913 месяца назад
Te enseño cómo publicar tu sitio web al hacer push a main 🎈
Remix vs React Router, ¿cuál desaparecerá? 🍿
Просмотров 1853 месяца назад
Remix vs React Router, ¿cuál desaparecerá? 🍿
Cómo iniciar un proyecto web moderno y con base de datos, listo para producción y muy fácilmente.
Просмотров 8993 месяца назад
Cómo iniciar un proyecto web moderno y con base de datos, listo para producción y muy fácilmente.
La manera más fácil de truncar un texto ✍🏻🔥
Просмотров 2614 месяца назад
La manera más fácil de truncar un texto ✍🏻🔥
Te platico sobre algunas actualizaciones de React 19.beta 🤯
Просмотров 1115 месяцев назад
Te platico sobre algunas actualizaciones de React 19.beta 🤯
Te enseño a crear esta animación de movimiento infinito ♾️
Просмотров 1,5 тыс.5 месяцев назад
Te enseño a crear esta animación de movimiento infinito ♾️
Componentes animados con TailwindCSS 🔥
Просмотров 7406 месяцев назад
Componentes animados con TailwindCSS 🔥
Animando el scroll horizontal con Vanilla.js
Просмотров 3416 месяцев назад
Animando el scroll horizontal con Vanilla.js
Te muestro cómo creo una Navbar responsive con TailwindCSS
Просмотров 9147 месяцев назад
Te muestro cómo creo una Navbar responsive con TailwindCSS
Practicando con TailwindCSS. Construyo una pequeña Sidebar.
Просмотров 8417 месяцев назад
Practicando con TailwindCSS. Construyo una pequeña Sidebar.
5 tips de tailwind que debes saber 🎨🔥
Просмотров 8587 месяцев назад
5 tips de tailwind que debes saber 🎨🔥
Estos son los 3 grandes cambios en React 19. 🤩
Просмотров 6268 месяцев назад
Estos son los 3 grandes cambios en React 19. 🤩
Construye 5 cards con Tailwind CSS 🤓
Просмотров 1,7 тыс.8 месяцев назад
Construye 5 cards con Tailwind CSS 🤓
Te explico en qué consiste el pattern de React más interesante del momento.
Просмотров 1788 месяцев назад
Te explico en qué consiste el pattern de React más interesante del momento.
Oye, explicas súper bien, sin prisas y paso a paso. Pero apenas me sales hoy en las búsquedas de YT... Espero subas más contenido!
¡Gracias por el video sobre cómo crear una interfaz web con Figma! Me ha inspirado a seguir explorando el mundo del diseño web. Últimamente me he interesado en programación y encontré cursos en CodigoHeroe, ¡todo está en español!
Gran video, crees que se pueda descargar tambien archivos zip? En el mismo contexto
Depende a qué te refieras, (zips del server? No. Zips con los resources del cliente? Maybe) 🤔
que software usas para visualizar de esa forma?
Ninguno, solo codepen.io 😬
Ya lo aprendi a puro prueba y error desde la documentacion jaja. Me suscribo porque tambien ando interesado en usar Remix para mis futuros proyectos .
No hay mejor forma de aprender Jaluk ;) Gracias! 🙏
Hola, en la empresa donde trabajo estamos implementando un front dentro de un back. Queremos usar React e hydratate, mi pregunta es, para que corra el client si o si se tiene q hacer build? y si usamos lo q hiciste en el video, se podra usar un script donde corra nodemon y ver cambios sin necesidad de tumbar y levantar el server?? saludos...
Siempre se puede entregar un simple script al cliente sin hacer build. Siempre y cuando no sean demasiados megas. Y sí, si es para desarrollo, puedes usar nodemon, pero si ya estás en eso de una vez puedes hacer el cliente independiente con Vite + Hydrate. Mi intento de respuesta es: Sí, sigue experimentando, si se puede, entonces puedes. Y así es como mejor aprenderás cómo funciona esto: intentando. Éxitos. 🤓
@@fixtergeek8057 gracias crack!
naaaa maestro 10/10
Naaaa tumero! 10/10 gracias por mirar 🤗
Buenisimo , que grande Hector , vine a ver si había algo de animaciones y encontré diamante, agradecido
Pérate, pérate mano! 🤚 Que ya se me avecina el cursito completo! ya estoy a poquiiiito! 😬
@@fixtergeek8057 ❤️
Demasiado util este video!!! Millon de gracias, nuevo suscriptor por aqui
¡Qué gusto que te sirviera Leo. Gracias a ti y boenvenido! 🤩
Fix, sabes como solucionar un problema con Eslint que al momento de hacer commit, los archivos de rutas dinamicas como estos -> padre.hijo_.$Dinamica.tsx no los procesa correctamente y confunde la parte $Dinamica con una variable no definida. Como podemos solucionar esto?
Que Linux es ese?
Solo es iTerm sobre OSX 🤷🏻♀️
Gracias por el contenido Hector
Seguro! 🧷
React Router 7 ya es Remix? Supe que Remix sería React Router.
Dos nombres pa la misma cosa ya. 👍🏼
O sea que si quiero usar prisma debo instanciarlo en cada loader de mi app ?
Cada petición en el edge, es una ejecución limpia de una simple función JS. Es decir, no existe un servidor "corriendo" con tu app, sino una ejecución de tu app (que es solo una función). Por tanto, sí, hay que conectarse a tu DB en cada ejecución. Lo que presenta el problema más común en el edge: la conexión a la DB toma mucho tiempo (TCP). He ahí el negocio de planetScale (bases de datos HTTP only).
@@fixtergeek8057 graciasss
gracias!! mas de remix pleease jeje
Pero por su pollo! 🐥
Excelente video!!! sigue subiendo contenido de este tipo por favor, son pocos lo que lo hace, siempre que veo videos van armando como si fuera de la nada. Tiendo el diseño en figma es diferente!! Genial
Gracias @danielmatamala7921 😊 seguiremos subieron contenido
Epale me salvaste mucho para subir mi página , mil gracias ❤
Epale que chido! 😎 Gracias a ti Romina 🫡
Muchas gracias, me funciono
Que bien!! Gracias Johan!
gracias por compartir tu conocimiento, oye una duda, si no conozco nada sobre remix me recomiendas aprenderlo en algún curso de la web o esperarme a que router v7 se estabilice para ponerle foco a eso, me causa duda como va funcionar esto de remix, router v7 en vite. Es decir será lo mismo ?
Será lo mismo. Yo digo que te mires los videos sobre Remix del canal en lo que sale la versión estable. Publicaremos un par de cursitos próximamente, así que mantente cerca. 😉
hola... a mi aun no me funciona
Hola, checa el dominio que es lo que luego resulta estar algo mal, si no, échame tu repo y lo observamos: fixtergeek@gmail.com
Gracias por el video, justo a tiempo para probar RR7! Tu comunidad y yo te agradeceríamos que continuaras con los temas avanzados para ser expertos en routing 💪🏻
Seguro! es el que sigue 😉
Hector , justo lo que queria , a ver cuando suben mas animaciones con tailwind y de estas con framer motion <3
Ya ando en eso! :D y el curso ya mero :B Gracias Deus.
@@fixtergeek8057 buenísimo , agradecido 🌟
amigo, explicas muy bien, te felicito.
Me esfuerzo :P Mil gracias Kuro!
Eres un maquina!! continua asi.
🤖 Así me dicen: el máquina. Hanocierto. Gracias Jorge. 😇
Que video más bacano. 🎉🎉🎉
Que gusto que te gustara Fus! 🙌🏻
que haces cuando la imagen se deforma ?
Puedes usar object-cover o aspect-video 👾
@@fixtergeek8057Si lo hice pero pasa una de dos. O queda la imagen muy chica o se ve solo la mitad del contenido de la imagen. Igual al final use tu card de modelo y la adapte para que me sirviera. Mil gracias.
mil gracias, sos crack
Pa na, grax a ti por el comment 🙂↕️
Muchas gracias me sirvió el video mucho se gano su like caballero
Muchas gracias buen mozo 🥳
Super Bliss 🤜
Cómo andas bro?! 🤛🏼
@@fixtergeek8057 excelente bro pegandole al estudio
Excelente tutorial, me ha ayudado bastante, una pregunta. No me quedo claro porque esa cantidad de margen para las columnas? me cuesta entender cuánto debo de poner para crear el contenedor. Hay paginas que son muy amplias y otras muy angostas como la que haces. Ojalá pudieras ayudarme a aclarar eso porque no he encontrado quién lo explique, muchas gracias y excelentes videos!! me he suscrito!
Hola @karikakahuate, hablando de los márgenes es una convención usar la base 8, porque es un número par, fácil de multiplicar y dividir que nunca nos dará números decimales o medios píxeles y además hace que la escala de espaciados de suficiente aire entre los elementos mientras que 6 o 10 separarían poco o mucho nuestros elementos generando problemas de legibilidad o proximidad. Si quieres saber más al respecto, aquí te dejo un post de blog sobre el tema www.fixtergeek.com/blog/reticula-8pt-que-es-y-por-que-utilizarla-2023 Y en cuando al número de columnas por convención usamos 12 para web, 8 para tablet y 4 para Mobile, igual por la escalabilidad y divisibilidad de las mismas. Pero también puedes usar 12 columnas en Mobile, o incluso crear tu propio grid en función de la estructura de tu sitio web. Por ejemplo, como lo mencionó en el video, puedes establecer que el contenido de tu sitio web va a escalar hasta 1280px y que a partir de allí el espacio se quedara en “blanco”, o que tu contenido escalará indefinidamente en función del tamaño del device respetando un margen horizontal de 240px, tú puedes definir tu propio grid en los diferentes tamaños de pantalla en función de tu contenido y estructura. 😄
Gracias amigo. Lo que andaba buscando. Voy a ver qué tal me funciona. Lo explicaste muy claro, así que nada debería malir sal.
Estamos seguros de que todo te balio sien!
Iralo
👀
Estoy haciendo un backend con nodejs pero hay una parte que manejo con sockets ( no quiero contratar una vps que no auto escale ) y (aws no es claro con sus tarifas jaja) ¿Crees que pueda hacer deploy en Cloudflare y poder trabajar con mi socket?
Si, pero estarías usando una herramienta no adecuadamente. Si son sockets lo que realmente quieres usar, the edge no es la mejor opción. Usa Containers. 🫙 developers.cloudflare.com/workers/runtime-apis/tcp-sockets/
Muy buen video, gracias
¡Gracias! Y mañana se estrena otro =P ruclips.net/video/DNiqBXCnz78/видео.html
lo use con astro , solo que no me muestra los estilos
A ver, chécate este: ruclips.net/video/DNiqBXCnz78/видео.html
Gracias por el video bro, consulta, que tema de vscode estás usando 😅
Uso dos: Dracula y el oficial de freeCodeCamp ;)
Buen video Fix
Gracias Nopeman30!
Osea que ya no es recomendable usar remix o como? 😢
Solo se fusiona con RR7 que ya funciona con la dataApi. no worries. 😉
buen video mi bro
Gracias carnal 🤟🏼
No, no funciona, me aparece en blanco
Vuelve a intentar ;) Programar a veces se trata más de no rendirse que de "saber" o que salga a la primera. Crear (publicar) a veces es resiliencia.
graxie
con guxtie :3
Gracias, estaba tascado y tu video me ayudó a aclarar dudas comprare tu curso muy pronto.... me gusta el metodo tuyo de enseñanza
Gracias Valentino, el chiste es se uno mismo y ya. 🫢
Excelente !! Ni te imaginas lo que me ilustró esta explicación del manejo del box model. Clarísima. Muchas gracias. 👍👍
yeah!
Eres un crack me sirvio mucho gracias!!
Tú eres el crack si te sirvió! 🥳
muy buena chabon!!
😳 Gracias mijo.
Que bueno verte por aqui bro 🤟🏻
Gracias por su aporte, me ayudo muchisimo
Que gusto saberlo! 🤩 Gracias a ti.
Si son archivos estáticos y usas Cloudflare Pages no Workers, puedes subirlo directamente con el draw and drop, de la página en Cloudflare sin usar la CLI de Wrangler (más fácil), yo en localhost (laragon usando windows) creo wordpress local, exporto los estáticos con plugin Staatic, los subo a CF Pages y página web completa en pocos minutos sin código
Hola amigo, como estas? Hace poco decidí cambiarme de hosting de Hostinger al de github, ya que me salía mas barato, pero no me deja configurar el subdominio, he intentado de todo pero dice que hay error de DNS, tengo el cname tango en la raiz de la pagina, como dns
Github no es la mejor opción para administrar sub dominios prueba con firebase o fly ;)
@@fixtergeek8057 Ya logre solucionarlo, Gracias. Igualmente lo tendré en cuenta
¿Alguien sabe cómo subir código a GitHub y publicar las respectivas páginas usando React.js? He utilizado gh-pages en varias ocasiones, pero hoy, al subir un pequeño proyecto, surgió un error al recargar la página. ¿Podría ser porque usé rutas con react-router-dom?
Sí. react-router-dom no funciona en gh-p, por eso en este video recomiendo el <BrowserRouter>, suerte. 🍀
@@fixtergeek8057 aun no lo e probado estapa ocupado pero mañana lo intenetar con eso que dices del createhastRouter
bro hay alguna opcion con vite? es 2024 y no se si haya otra forma para no usar Webpack/Babel
Sí que sí. Cómo iniciar un proyecto web moderno y con base de datos, listo para producción y muy fácilmente. ruclips.net/video/_8JsdKtDYkA/видео.html
@@fixtergeek8057 esta bien, pero lo necesito con react y express