The FUTURE of WEB PROGRAMMING: View Transitions API 🤯
Рет қаралды 90,426
Күн бұрынDiscover the incredible potential of the View Transitions API and delve into the future of web programming. Explore how this revolutionary technology transforms the user experience by providing smooth and stunning transitions between views. Learn how to implement these transitions easily and efficiently, and get ready to take your web projects to the next level. 😼
▶ Don't miss more live streams at: / midudev
▶ Repository for my demo: github.com/midudev/view-trans...
Video Timestamps:
0:00 Intro
1:13 Hand movements
2:10 Setting up ESLint/Prettier
4:55 Viewing Project
5:33 Installing TailwindCSS
6:31 Heading
7:36 Components in Astro Build
10:13 Remaining components
10:39 Props in Astro Build
15:18 Dynamic pages with Astro 1
16:40 Moving Books to Data
18:45 Astro 404 Page
21:14 Continued dynamic pages with Astro...
25:00 Flowbite
28:18 Our progress 😼
28:37 Introduction to View Transitions API
35:05 Returning text with Fetching
36:39 Regex
39:11 Using View Transitions API
43:23 Refactoring JS Script
47:49 Improving the transition
54:00 Text animation
1:02:30 End
#webdevelopment #frontend #javascript
@lautiplug Жыл бұрын
El claro ejemplo de que las animaciones pueden quedar perfectas siempre y cuando las sepas usar, un abrazo Midu
@midulive Жыл бұрын
Totalmente! Gracias!
@santidionis5020 Жыл бұрын
lo vi en twitch ahora y no me canso de verlo increíble
@midulive Жыл бұрын
Gracias, Santi! 🤗
@ricardoevz2624 3 сағат бұрын
Pero que video 🤯🤯 !!! Muchas gracias por compartir midu
@davidgras783 Жыл бұрын
Que rapidez🎉 ayer en Twitch y hoy ya en KZfaq!! Mis dieses
@midulive Жыл бұрын
🎉 Vamoooooos!
@marianojorajuria7761 Жыл бұрын
ME VUELVO LOCO!! Gracias por compartir esta info!! Saludos desde Argentina!
@marcemelgar Жыл бұрын
brillante video Midu! gracias de nuevo por tus aportes a la comunidad. Por aquí sumo un voto a tu idea de hacer el plugin de astro para que instale todas las dependencias de ESlint 💪
@rodrigojuarez6123 8 ай бұрын
Muy bueno el contenido Midu !! Muy claro y sencillo. Me parece super interesante View Transition Api. Ya mismo lo quiero probar en proyectos personales.
@chaboxx159c Жыл бұрын
Increible Midu . Gracias por tu contenido ayuda mucho a la comunidad.
@josemiguelbg305 3 күн бұрын
Ya lo implementarse con React?? Me gustaría un vídeo relacionados con React para aprender como puedo implementar View transition en React. Por cierto, excelente video, muy buena explicación y la página quedó espectacular!!
@GinoCiancia Жыл бұрын
Excelente Midu, muy buen contenido! un Abrazo
@Deus-lo-Vuilt 8 ай бұрын
Me gustó un Monton Astro , comencé a usarlo con el proyecto de Spotify de Twitch pero me gustó muchisimo usarlo , Gracias Midu!
@ZonikGraF Жыл бұрын
Nunca disfruté tanto un tuto !! Gracias.
@antonionavarrro Жыл бұрын
¡Gracias por compartir este valioso contenido!
@simonbriceno6623 Жыл бұрын
Midu siempre haciendo contenido de calidad, muchas gracias, a dominar esta nuevo api 💪🏻
@midulive Жыл бұрын
🙌 gracias!
@matiassantiago4205 Жыл бұрын
Midu siempre un paso adelante! saludos desde Argentina
@danLaOvejaNegra 11 ай бұрын
totalmente de acuerdo, esto es el futuro. Gracias por el dato, voy con todo a ver como lo aplico a los proyectos... slds.
@rauljauregi6615 Жыл бұрын
¡Genial! ¡¡muchas gracias!! ¿¿Podrías hacer un tuto o cursillo de WordPress headless y con el frontend hecho con Astro??
@pablowbk Жыл бұрын
tremenda explicación midu!
@Narfiam Жыл бұрын
Estos vídeos son muy top siempre
@midulive Жыл бұрын
Gracias! 🤗
@larts Жыл бұрын
Buenisimo Midu, explicacio genial en twitch
@imikepena Жыл бұрын
Chulada, para aplicarlo en mi portafolio
@francofiorotto Жыл бұрын
Hola Midu, muchas gracias por el contenido! tremendo. Me quedó una duda sobre la parte que comentas de que es muy similar a una SPA. Es literalmente lo mismo? Así funcionan las SPA o hay alguna diferencia?
@juniorr.9693 Жыл бұрын
Hola Midu, siempre con contenido muy Top!! Una pregunta, puedo usar Astro con Django ?
@LocalGhost_8080 Жыл бұрын
Pero que cosa! esto es oro!
@SonGoku-pc7jl Жыл бұрын
genial clase!
@genaroibc 11 ай бұрын
El futuro del desarrollo web
@luisfelipeevilla8504 Жыл бұрын
durísimo el ejemplo de las transiciones con las imágenes 🤯🤯
@midulive Жыл бұрын
Gracias!!! 🤗
@1mariocampbell 11 ай бұрын
Excelente video! Gracias. Podrías hacer un video sobre nano store vanilla en astro. Gracias nuevamente. Saludos
@tutoletras2400 Жыл бұрын
Es impresionante, espero algún día programar como vos
@midulive Жыл бұрын
Gracias 🤗
@Foo678 Жыл бұрын
La probé en django y funciona bien, no refresca la pagina, pero no funciona al enviar formularios (no envia el formulario, se queda en la misma pagina). Buen video Midu 😊
@jeancleon Жыл бұрын
Que plugin usas para ver las salidas de las consola en las lineas del studio code?
@juantorrag Жыл бұрын
Me encantaria tener el conocimiento que tiene midu, hasta ahora empece a aprender desarrollo web 😢.
@TheAlexis0070 Жыл бұрын
Gracias 😃
@luisberoiza227 6 ай бұрын
Hola Midu, acabo de terminar de ver este video. quedé alucinado con esta api, no la conocía. solo me quedó dando vuelta algo. Cuando agregas el interceptor usas fetch para traer el contenindo del body de la siguiente pagina (usando regEx). Pero qué pasa con los estilos CSS de los componentes que estas trayendo? habría problemas? Saludos
@weistrass Жыл бұрын
Esto es como la transición más reciente de powerpoint, muy guapo
@kriollo_dev 11 ай бұрын
esto no serviria para framework o librerias, que trabajan con virtual dom? ya que despuees de hacer el innerhtml ya no me funkan los botones, muchas gracias por el video, siempre con buenos tips
@OtakuPentecostal Жыл бұрын
presente maestro!
@pablorostirolla5859 Жыл бұрын
Midu algún día podrías enseñar a como hacer un plugin de eslint + prettier? es que cada proyecto que empiezo tengo que ponerme a configurar esto y me hace perder el tiempo, estaría bueno que haciendo un yarn o npm install my-config-eslint te instalara todo de una vez!
@DeberiasTenerUnGato Жыл бұрын
Estaría increible, en el video lo dice. Espero se haga ese plugin🤯
@devdariill Жыл бұрын
Para el deploy se configura un adapter tipo netlify. se enlaza el github y fin
@krejcikpetr 9 ай бұрын
Alguien sabe como han hecho la transicion del texto en el ejemplo de la web con playlists? Lo que intentaba Midu pero no le salia animar bien el titulo y al final ha hecho el workaround con `scale`. Me gustaria que se anime el `font-size`.
@Mahebo86 11 ай бұрын
Grande midu, gracias por el contenido de calidad que opinas en comparación con lo que es hoy en día barba.js teniendo en cuenta que los view transitions API no están al 100% compatibles
@jorgev5392 Жыл бұрын
¿En que terminal de comandos se mete el codogo de astro? ¿La de la Pc o Visual? Gracias
@joseeavr Жыл бұрын
Midu grande. Podrías hacer un video como se haría esto con nextjs? Un abrazo grande.
@JAKETV 8 ай бұрын
Astro está shido!
@ssaaamuuu 11 ай бұрын
Da gusto verlo programar, va volando
@rodediaz9730 Жыл бұрын
Saludos desde Panamá
@midulive Жыл бұрын
Saludos, crack!
@eatrigos8051 Жыл бұрын
excelente barbaro
@amadojesusmartin9532 Жыл бұрын
Flutter agilizó ese nuevo feature ❤️
@matiasvillegas4102 Жыл бұрын
eres un crack
@tomaslanger3257 4 ай бұрын
Hola midu, he intentando sin exito aplicarlo en React, como sera posible integrar las view transitions en un proyecto de react utilizando vite ? agradeceria mucho tu ayuda. Saludos desde Chile, mucho éxito
@diegoandresmoralesfranco6581 Ай бұрын
Implemente lo que hace en el vídeo en una web hecha con WordPress. Aparentemente todo va bien. Tuve que copiar algunos estilos para que se pierdan al momento de cambiar de página. Ya que se está cambiar solo el body. Pero no pasa lo mismo con los script. Todo lo que requiera javascript deja de funcionar. Sabes que puede ser?
@RubenEAcosta 11 ай бұрын
Se puede usar View Transitions API en una single aplication? Lo estoy intentando con react pero el event.intercept no detiene la navegación y de allí en adelante no me funciono 😭
@tudev234 Жыл бұрын
Que buen vídeo midu, está aplicándolo en react pero no me sale con el View transition name
@yohrdyedwardguevaralescano6254 Жыл бұрын
Como se implementaria en en NextJs? Seria todo usando "use client" no?
@dantov1 Жыл бұрын
Se podra utilizar para celulares?
@xingfucoder2627 Жыл бұрын
Gran video Miguel, me recuerda al hero animation de flutter 😀
@midulive Жыл бұрын
Al final es la idea de animaciones nativas que llevan tiempo en móvil... pero en web
@xingfucoder2627 Жыл бұрын
@@midulive Totalmente. Por cierto, tengo pendiente ver tus videos del curso de TS, y ver si cubres conditional types, infer, etc. si no estaría super si hicieras un curso o contenido específico de tipos avanzados. Gracias por la gran labor que haces para la comunidad!!! 🚀
@xBugzilla Жыл бұрын
Sinceramente, el Hero de flutter con texto va mucho peor que estas animaciones. Esta muy lograda esta API aunque al principio va a costar acostumbrarse a tanto movimiento
@ji156_ Жыл бұрын
Los avisos que salen en el min 3:32 que plugin es?
@JimyDrive Жыл бұрын
Eres tremendo
@midulive Жыл бұрын
Gracias majo 🤗
@chrissmejia 11 ай бұрын
Lo intenté en Vue/Ionic pero el fetch o axios me da 404 :/ voy a seguir investigando, pero una luz vendría super bien.
@enanoalbino1038 9 ай бұрын
hola midu es genial lo que mostras, una pregunta esa animacion funciona solamente para astro? o se puede hacer con html, css y js puro?
@domingouribe 9 ай бұрын
Según yo entiendo es una implementación de API del navegador, por lo tanto sí se puede.
@abdiascuevas Жыл бұрын
necesitamos un curso de astro, si ya has hecho uno quiero😔 el link
@LUISANGEL27 Жыл бұрын
para el proximo video como hacer tu propio paquete eslint para astro
@danielthomann1074 Жыл бұрын
Te quiero felicitar por todo tu trabajo. Me gustaría que puedas sacarme una duda. En PHP, si usas un framework, puedes saber que tiempo de mantenimiento tiene las version; tanto una estable como la de desarrollo, ahora ¿ Como puedo saberlo en estos boom de framework Javascript ?
@naisdnb Жыл бұрын
leyendo la documentacion del framework
@Edwinil 11 ай бұрын
Lo hice en mi página, en la versión ^2.10 de astro ya tiene soporte. M
@jhonfreddyperezguerrero4324 Жыл бұрын
saludos me encanta los contenidos, únicamente tuve inconveniente con iniciar el proyecto con astro intente por todos los medios y versiones de node y no tuve éxito, alguien mas tuvo inconvenientes al iniciar el proyecto? agradecería la colaboración muchas gracias
@cheogomezmora1077 Жыл бұрын
esto es igual que el hero de flutter que interesante
@ShofiGames-wk4rl 6 ай бұрын
Hola, Midu ¿Con astro se pueden hacer paginas dinámicas con consultas a base de datos?
@midulive 6 ай бұрын
Sin problemas
@ramonsorto5107 Жыл бұрын
seria genial que lo hagas en directo el plugin seria interesante
@juanjzb Жыл бұрын
Se me antojo mover las manitos con Astro!
@midulive Жыл бұрын
Totalmente, es lo máximo!
@victorarangurendev Жыл бұрын
También se puede implementar con react?
@midulive Жыл бұрын
Claro, sin problema!
@desk6173 Жыл бұрын
Esas animaciones entre paginas lo hacia con framer motion
@AlexdobleU Жыл бұрын
👀👀
@juanesteban3738 Жыл бұрын
Lo subí a mi portafolio así como proyectos que e subido de varios tutoriales, siempre aprendiendo, pero me dicen falso desarrollador :( porque no hago mis propios proyectos.
@jmdev4583 Жыл бұрын
Adáptalos a como lo harías tú. Así tendrá un toque personal. Cambia todo! Colores, tipo de letra, imágenes, descripciones! Así serán tuyos. Hoy en día no tenemos que crear todo. Ya existen ayuda para todo. Todas estas secciones de ayuda de @midulive, velos como componentes que puedes usar en tus proyectos! Es como usar un Framework o librería! Asi que te te desanimes!
@gilbertmatosortiz1522 Жыл бұрын
Hola. Estoy haciendo un sitio con Astro, integré la librería de React e insnstalé la dependencia de React-icons para los íconos. Utilizo los íconos como normalmente lo utilizaría en un proyecto React. Pasa que cuando ejecuto el comando npm run build, salta un error que dice que los íconos (componentes de React) no se están exportando. Necesito ayudaaa
@midulive Жыл бұрын
Mejor en Discord con posibilidad de ver el código: discord.gg/midudev canal #react
@juandev5348 Жыл бұрын
x2
@gilbertmatosortiz1522 Жыл бұрын
Vale
@matic7188 2 ай бұрын
midu para instalar facil eslint y prettier
@josetrinidadmirandalopez6274 Жыл бұрын
Brillante midu, esto funciona solo para web estáticas o también web dinámicas?
@MiguelSilva-ur9xd Жыл бұрын
Alguien más quisiera que midu use un filtrado de audio cada vez que silba al sesear ?
@alexey1231 Жыл бұрын
Se parece mucho a vue 3
@jesielpalacios Жыл бұрын
Holaaaa, estoy implementando esta View Transitions API en una app de React. funciona normal, pero a la hora de implementar las transisiones nombradas con 'view-transition-name' o viewTransitionName como propiedad en los atributos de etiquetas de imágenes de páginas diferentes sigue haciendo la misma transición por defecto en todos los elementos, no me sale como a tí.
@miguelrivas9687 Жыл бұрын
en mi caso funciono asi: style={{ viewTransitionName : `project-image-${info.id}` }} espero te sirva
@tudev234 Жыл бұрын
@@miguelrivas9687 amigo hice lo mismo pero no me funciono, podrías compartir el código en codesandbox o repo por favor , te lo agradecería muxo
@TecnoRepair Жыл бұрын
Se ve en peligro las Apps Mobile jejeje
@MuStevenPlay 10 ай бұрын
A mi la verdad que el charset en el local server no me resuelve nada
@Pundonoor Жыл бұрын
Midu esto se podría hacer con Next Js?
@lautaromendez4610 Жыл бұрын
que pregunta es esa jajaja
@jaredgilbon Жыл бұрын
hubieras puesto en el thumbnail "Lo cambia todo!" jajajaja
@losunicorniosnacenenyoutube Жыл бұрын
con framer-motion ya se podia hacer eso desde hace mucho tiempo
@DeberiasTenerUnGato Жыл бұрын
Pero, aquí no ocupas nada de eso lo cual lo hace super increíble rey 🤯
@benjaminzapata367 Жыл бұрын
Gente, ¿como se llama el autocomplete de codigo que usa Midu en VSC? Se agradece la respuesta
@midulive Жыл бұрын
GitHub Copilot
@benjaminzapata367 Жыл бұрын
@@midulive Ni termine de ver el video que ya respondiste. Te agradezco por todo el contenido y mas aun por la atención a tus seguidores. El mas grande lejos, saludos midu 🫂
@emanuelbass4878 Жыл бұрын
astro es basicamente un vue ? o soy yo
@leonidascrypto Жыл бұрын
Eso no es nuevo... Lo vi en Windows SDK hace 6 años . Interesante como es que en react apenas se está viendo eso. Se llama Fluent System.
@pauserratgutierrez Жыл бұрын
Astro es un framework sustituto de vue.js?
@midulive Жыл бұрын
No exactamente. Con Astro puedes usar Vue, por ejemplo. Es simplemente un framework con todo lo que necesitas para crear páginas web. Puedes usar en él React, Vue, Preact, Svelte...
@pauserratgutierrez Жыл бұрын
Vale, entiendo. Como he visto que se puede crear templates e importarlos y todo, igual que en vue, he pensado que era lo mismo. Gracias y felicidades por el contenido, muy divertido y didactico, como siempre!
@nahueljj Жыл бұрын
es seo friendly?
@midulive Жыл бұрын
Claro, en el vídeo lo explicamos que sí
@nahueljj Жыл бұрын
@@midulive gracias midu te amo
@Djoako22 Жыл бұрын
la compatibilidad😢
@rinconfede Жыл бұрын
Me siento estafado.... bueno no tanto, pero leeme y entenderas... Porque usaste Astro?? De ingenuo, me meti a intentar replicar esto mismo con vite, y literalmente no hay manera de obtener el codigo html para poder comparar y lograr la animacion... Porque Astro si da el html completo y no un script para generarlo ??
@EstudioDocumentales 11 ай бұрын
Hola Midu! Te cuento que estoy haciendo este proyecto; pero resulta que en la instalación me está fallando los 4:20 segundos que tienes del video no me permite seguir porque hice los procesos de copiar y pegar de acuerdo al package Json, .prettierrc.js, .eslintrc y no me da para hacer el siguiente paso que es: pnpm install, porque en la consola me dice: pnpm : No se puede cargar el archivo C:\Users\Juan Fer\AppData\Roaming pm\pnpm.ps1 porque la ejecución de scripts está deshabilitada en este sistema. Para obtener más información, consulta el tema about_Execution_Policies en https:/go.microsoft.com/fwlink/?LinkID=135170. Aunque yo ya los instalé en el proyecto el pnpm con npm install -g pnpm y se supone que ya con esto me debería de funcionar; y no. Me puedes ayudar para saber qué debo de hacer para que no me quede en estos primeros 4:20 que es solo la instalación. No he hecho nada del proyecto y si estoy enchicharronado con esta parte.
@Mahebo86 11 ай бұрын
Grande midu, gracias por el contenido de calidad que opinas en comparación con lo que es hoy en día barba.js teniendo en cuenta que los view transitions API no están al 100% compatibles
Beyond Fireship
Рет қаралды 241 М.
midudev
Рет қаралды 85 М.
Gentleman Programming
Рет қаралды 26 М.
notebook-31
Рет қаралды 116 М.
Tokparty
Рет қаралды 1,8 МЛН