Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Oda a la década++

Oda a la década++

Eva Ferreira

October 19, 2019
Tweet

More Decks by Eva Ferreira

Other Decks in Programming

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

    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