Oda a la década++

Transcript

1. Oda a la década++
   Eva Ferreira – Colombia, 2019
   

   View Slide

2. ¡Hola!
   Soy Eva :)
   

   View Slide

3. ¡Hola!
   Soy María Evangelina
   Ferreira Kuzminski
   

   View Slide

4. Haciendo sitios desde 2008
   

   View Slide

5. @evaferreira92
   

   View Slide

6. View Slide

7. ¿Por qué querés estudiar esto?
   Pasión y entusiasmo por sobre méritos académicos
   

   View Slide

8. “Quiero conectar
   personas y la web me
   permite eso”
   Eva a los 18 años.
   

   View Slide

9. Pasaron los años…
   

   View Slide

10. Top 10
    De las cosas más lindas que vi crecer en la web
    

    View Slide

11. View Slide

12. 10.
    Menos imágenes
    innecesarias
    

    View Slide

13. View Slide

14. View Slide

15. Degradados versión 2009
    .element {
    background-image: url('gradient.png');
    background-repeat: repeat-x;
    }
    @evaferreira92
    

    View Slide

16. @evaferreira92
    

    View Slide

17. @evaferreira92
    

    View Slide

18. Border-radius versión 2009
    .element::after {
    /* Inserte aquí mucho código */
    }
    @evaferreira92
    

    View Slide

19. “¡Puedo hacer círculos!”
    @evaferreira92
    

    View Slide

20. @evaferreira92
    

    View Slide

21. @evaferreira92
    Clip-path, shapes y SVG
    

    View Slide

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
    

    View Slide

23. 9.
    Todo ES6
    

    View Slide

24. Funciones flechita
    elemento.addEventListener('click', function (e){
    // Inserte aquí su código
    });
    @evaferreira92
    elemento.addEventListener('click’, (e) => {
    // Inserte aquí su código
    });
    

    View Slide

25. Funciones flechita
    elemento.addEventListener('click', function (e){
    // Inserte aquí su código
    });
    @evaferreira92
    elemento.addEventListener('click’, e => {
    // Inserte aquí su código
    });
    

    View Slide

26. Funciones flechita
    @evaferreira92
    elemento.addEventListener('click', () => console.log('Hola'));
    unArray.map(item => item * 2);
    

    View Slide

27. 8.
    Layout revolution
    

    View Slide

28. Floats
    

    View Slide

29. Grids & Flexbox
    @evaferreira92
    

    View Slide

30. ¿Grids Vs. Flexbox?
    

    View Slide

31. Grids junto a Flexbox
    

    View Slide

32. @evaferreira92
    

    View Slide

33. View Slide

34. @evaferreira92
    

    View Slide

35. Jen Simmons Rachel Andrew
    

    View Slide

36. 7.
    Fetch
    

    View Slide

37. Fetch
    • XMLHttpRequest renovado
    • Nunca más tipear eso.
    • Pero gracias a XHR
     Aprendí los mensajes HTTP
    @evaferreira92
    

    View Slide

38. https://www.google.com/teapot
    

    View Slide

39. @evaferreira92
    

    View Slide

40. View Slide

41. @evaferreira92
    

    View Slide

42. 6.
    Picture element
    

    View Slide

43. Picture element
    • Facilita trabajar con imágenes responsive
    • Evita gastarle datos innecesarios al usuario
    • Permite entregar distintos formatos de imagen
    @evaferreira92
    

    View Slide

44. Picture element
    
    
    
    
    @evaferreira92
    

    View Slide

45. Formato webp
    
    
    
    
    
    https://css-tricks.com/using-webp-images/
    

    View Slide

46. @evaferreira92
    

    View Slide

47. @evaferreira92
    

    View Slide

48. 5.
    Componetización
    

    View Slide

49. Componetización
    • Angular
    • React
    • Vue
    • Svelte
    @evaferreira92
    

    View Slide

50. Componetización
    • Hermosa arquitectura
    • Fácilmente escalable
    • Elementos reutilizables
    • Trabajo en conjunto con diseño
    @evaferreira92
    

    View Slide

51. 4.
    Animaciones
    

    View Slide

52. Animaciones circa 2008
    

    View Slide

53. Animaciones circa 2008
    

    View Slide

54. Animaciones hoy
    • CSS
     Transitions
     Animations
    • JavaScript
     GSAP
     Web Animations API
     …
    • SVG all the things
    @evaferreira92
    

    View Slide

55. Chris Gannon - @chrisgannon
    

    View Slide

56. Julia Muzafarova - @miocene
    

    View Slide

57. Rachel Nabors - @rachelnabors
    

    View Slide

58. 3.
    HTML5 forms
    

    View Slide

59. ¿Validar direcciónes de e-mail?
    Regex
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. HTML5 forms
    • Validaciones nativas
     E-mail
     Required
     …
    • Type number
    • Type date
    @evaferreira92
    

    View Slide

64. 2.
    Node
    

    View Slide

65. @evaferreira92
    

    View Slide

66. 1.
    

    View Slide

67. 1.
    Developer tools
    

    View Slide

68. View Slide

69. Firebug
    

    View Slide

70. Developer tools hoy
    • HTML / CSS / JavaScript
    ¡Psst! CSS es más feliz con Firefox
    • Diseñar en el navegador
    • Accesibilidad
    • PWA
    @evaferreira92
    

    View Slide

71. Developer tools hoy
    • Performance
    • Memoria
     Charla de Katie Fenn https://nordicjs.com/2019
    • Frameworks
    • ¡Muuuchas cosas más!
    @evaferreira92
    

    View Slide

72. View Slide

73. ¡Estamos en un
    momento increíble!
    Es el mejor momento para comenzar a estudiar desarrollo web.
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. “Veníamos bien…
    pero pasaron cosas”
    Presidente de Argentina
    

    View Slide

79. Push Notifications
    

    View Slide

80. @evaferreira92
    

    View Slide

81. View Slide

82. Primero creamos la
    tecnología, después
    creamos la tecnología
    para bloquear la
    tecnología.
    

    View Slide

83. Cookie banner
    

    View Slide

84. @evaferreira92
    

    View Slide

85. GDPR
    

    View Slide

86. View Slide

87. https://privacyinternational.org/long-read/3196/no-
    bodys-business-mine-how-menstruation-apps-are-
    sharing-your-data
    

    View Slide

88. “Si el producto es gratis el
    producto sos vos”
    

    View Slide

89. View Slide

90. Accesibilidad
    

    View Slide

91. View Slide

92. The WebAIM million
    97.8% de las páginas fallaron WCAG
    

    View Slide

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
    

    View Slide

94. …
    

    View Slide

95. View Slide

96. Fun fact:
    Dijeron que fue un error.
    

    View Slide

97. View Slide

98. View Slide

99. View Slide

100. @evaferreira92
     

     View Slide

101. ¿Por qué?
     

     View Slide

102. View Slide

103. ¿Nos estamos olvidando del usuario?
     

     View Slide

104. ¿O simplemente estamos cansados?
     

     View Slide

105. La falta de accesibilidad no es maldad
     

     View Slide

106. View Slide

107. Burnout
     

     View Slide

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
     

     View Slide

109. View Slide

110. ¡El falso full-stack developer
     es algo bueno!
     

     View Slide

111. La web es hermosa
     Tenemos que cuidarla un poco más.
     

     View Slide

112. Cuidar al usuario
     

     View Slide

113. Cuidarnos entre
     nosotros
     

     View Slide

114. View Slide