Oda a la década++

Transcript

1. Oda a la década++ Eva Ferreira – Colombia, 2019
2. ¡Hola! Soy Eva :)
3. ¡Hola! Soy María Evangelina Ferreira Kuzminski
4. Haciendo sitios desde 2008
5. @evaferreira92
7. ¿Por qué querés estudiar esto? Pasión y entusiasmo por sobre méritos académicos
8. “Quiero conectar personas y la web me permite eso” Eva a los 18 años.
9. Pasaron los años…
10. Top 10 De las cosas más lindas que vi crecer en la web
12. 10. Menos imágenes innecesarias
15. Degradados versión 2009 .element { background-image: url('gradient.png'); background-repeat: repeat-x; } @evaferreira92
16. @evaferreira92
17. @evaferreira92
18. Border-radius versión 2009 .element::after { /* Inserte aquí mucho código */ } @evaferreira92
19. “¡Puedo hacer círculos!” @evaferreira92
20. @evaferreira92
21. @evaferreira92 Clip-path, shapes y SVG
22. Menos imágenes innecesarias • Menos requests al servidor • Mejor código • Ya no todo es rectángulos dentro de rectángulos  Clip-path @evaferreira92
23. 9. Todo ES6
24. Funciones flechita elemento.addEventListener('click', function (e){ // Inserte aquí su código }); @evaferreira92 elemento.addEventListener('click’, (e) => { // Inserte aquí su código });
25. Funciones flechita elemento.addEventListener('click', function (e){ // Inserte aquí su código }); @evaferreira92 elemento.addEventListener('click’, e => { // Inserte aquí su código });
26. Funciones flechita @evaferreira92 elemento.addEventListener('click', () => console.log('Hola')); unArray.map(item => item * 2);
27. 8. Layout revolution
28. Floats
29. Grids & Flexbox @evaferreira92
30. ¿Grids Vs. Flexbox?
31. Grids junto a Flexbox
32. @evaferreira92
34. @evaferreira92
35. Jen Simmons Rachel Andrew
36. 7. Fetch
37. Fetch • XMLHttpRequest renovado • Nunca más tipear eso. • Pero gracias a XHR  Aprendí los mensajes HTTP @evaferreira92
38. https://www.google.com/teapot
39. @evaferreira92
41. @evaferreira92
42. 6. Picture element
43. Picture element • Facilita trabajar con imágenes responsive • Evita gastarle datos innecesarios al usuario • Permite entregar distintos formatos de imagen @evaferreira92
44. Picture element <picture> <source srcset="logo-big.png" media="(min-width: 1000px)"> <img src="logo-small.png" alt=""> </picture> @evaferreira92
45. Formato webp <picture> <source srcset="gatito.webp" type="image/webp"> <source srcset="gatito.jpg" type="image/jpeg"> <img src="gatito.png" alt=""> </picture> https://css-tricks.com/using-webp-images/
46. @evaferreira92
47. @evaferreira92
48. 5. Componetización
49. Componetización • Angular • React • Vue • Svelte @evaferreira92
50. Componetización • Hermosa arquitectura • Fácilmente escalable • Elementos reutilizables • Trabajo en conjunto con diseño @evaferreira92
51. 4. Animaciones
52. Animaciones circa 2008
53. Animaciones circa 2008
54. Animaciones hoy • CSS  Transitions  Animations • JavaScript  GSAP  Web Animations API  … • SVG all the things @evaferreira92
55. Chris Gannon - @chrisgannon
56. Julia Muzafarova - @miocene
57. Rachel Nabors - @rachelnabors
58. 3. HTML5 forms
59. ¿Validar direcciónes de e-mail? Regex
63. HTML5 forms • Validaciones nativas  E-mail  Required  … • Type number • Type date @evaferreira92
64. 2. Node
65. @evaferreira92
66. 1.
67. 1. Developer tools
69. Firebug
70. Developer tools hoy • HTML / CSS / JavaScript ¡Psst! CSS es más feliz con Firefox • Diseñar en el navegador • Accesibilidad • PWA @evaferreira92
71. Developer tools hoy • Performance • Memoria  Charla de Katie Fenn https://nordicjs.com/2019 • Frameworks • ¡Muuuchas cosas más! @evaferreira92
73. ¡Estamos en un momento increíble! Es el mejor momento para comenzar a estudiar desarrollo web.
78. “Veníamos bien… pero pasaron cosas” Presidente de Argentina
79. Push Notifications
80. @evaferreira92
82. Primero creamos la tecnología, después creamos la tecnología para bloquear la tecnología.
83. Cookie banner
84. @evaferreira92
85. GDPR
87. https://privacyinternational.org/long-read/3196/no- bodys-business-mine-how-menstruation-apps-are- sharing-your-data
88. “Si el producto es gratis el producto sos vos”
90. Accesibilidad
92. The WebAIM million 97.8% de las páginas fallaron WCAG
93. Errores más comunes • Bajo contraste • Falta texto alternativo en imágenes • Links vacíos • Falta de labels en formularios • Falta de definición del idioma en el HTML @evaferreira92
94. …
96. Fun fact: Dijeron que fue un error.
100. @evaferreira92
101. ¿Por qué?
103. ¿Nos estamos olvidando del usuario?
104. ¿O simplemente estamos cansados?
105. La falta de accesibilidad no es maldad
107. Burnout
108. Tengo que saber X. Todos saben sobre X menos yo. Soy una impostora y se nota. Se van a dar cuenta de que no se tanto. X parece tan fácil pero yo no
110. ¡El falso full-stack developer es algo bueno!
111. La web es hermosa Tenemos que cuidarla un poco más.
112. Cuidar al usuario
113. Cuidarnos entre nosotros