Save 37% off PRO during our Black Friday Sale! »

Oda a la década++

Oda a la década++

32b23faedcb33ad2079ad33658ac56bb?s=128

Eva Ferreira

October 19, 2019
Tweet

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. None
  95. Fun fact: Dijeron que fue un error.

  96. None
  97. None
  98. None
  99. @evaferreira92

  100. ¿Por qué?

  101. None
  102. ¿Nos estamos olvidando del usuario?

  103. ¿O simplemente estamos cansados?

  104. La falta de accesibilidad no es maldad

  105. None
  106. Burnout

  107. 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
  108. None
  109. ¡El falso full-stack developer es algo bueno!

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

  111. Cuidar al usuario

  112. Cuidarnos entre nosotros

  113. None