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

6. 2010

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
11. None

12. 10. Menos imágenes innecesarias

13. None
14. None

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

33. None

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

40. None

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

60. None
61. None
62. None

63. HTML5 forms • Validaciones nativas  E-mail  Required 

    … • Type number • Type date @evaferreira92

64. 2. Node

65. @evaferreira92

66. 1.

67. 1. Developer tools

68. None

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
72. None

73. ¡Estamos en un momento increíble! Es el mejor momento para

    comenzar a estudiar desarrollo web.
74. None
75. None
76. None
77. None

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

79. Push Notifications

80. @evaferreira92

81. None

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

    la tecnología.

83. Cookie banner

84. @evaferreira92

85. GDPR

86. None

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”

89. None

90. Accesibilidad

91. None

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. …

95. None

96. Fun fact: Dijeron que fue un error.

97. None
98. None
99. None

100. @evaferreira92

101. ¿Por qué?

102. None

103. ¿Nos estamos olvidando del usuario?

104. ¿O simplemente estamos cansados?

105. La falta de accesibilidad no es maldad

106. None

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
109. None

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

114. None