Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Oda a la década++
Search
Eva Ferreira
October 19, 2019
Programming
1
130
Oda a la década++
Eva Ferreira
October 19, 2019
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Bulletproof your Design system
evaferreira
0
21
Good intentions gone bad
evaferreira
0
230
Bulletproof your Design System
evaferreira
0
120
Tales of Accessibility Failures
evaferreira
0
45
Tales of Accessibility Failures
evaferreira
0
200
La accesibilidad de todos los días - HackAcademy
evaferreira
0
130
Rescue the Dead Horse
evaferreira
0
130
De 45 a 85
evaferreira
0
95
Take on me
evaferreira
3
580
Other Decks in Programming
See All in Programming
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
150
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.8k
Agent Rules as Domain Parser
yodakeisuke
1
450
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
880
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
290
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.2k
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
11
2.1k
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
1.8k
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
810
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
350
Perlで痩せる
yuukis
1
670
Passkeys for Java Developers
ynojima
2
780
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
The Cost Of JavaScript in 2023
addyosmani
49
8.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Six Lessons from altMBA
skipperchong
28
3.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing for humans not robots
tammielis
253
25k
The Invisible Side of Design
smashingmag
299
50k
Done Done
chrislema
184
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Transcript
Oda a la década++ Eva Ferreira – Colombia, 2019
¡Hola! Soy Eva :)
¡Hola! Soy María Evangelina Ferreira Kuzminski
Haciendo sitios desde 2008
@evaferreira92
2010
¿Por qué querés estudiar esto? Pasión y entusiasmo por sobre
méritos académicos
“Quiero conectar personas y la web me permite eso” Eva
a los 18 años.
Pasaron los años…
Top 10 De las cosas más lindas que vi crecer
en la web
None
10. Menos imágenes innecesarias
None
None
Degradados versión 2009 .element { background-image: url('gradient.png'); background-repeat: repeat-x; }
@evaferreira92
@evaferreira92
@evaferreira92
Border-radius versión 2009 .element::after { /* Inserte aquí mucho código
*/ } @evaferreira92
“¡Puedo hacer círculos!” @evaferreira92
@evaferreira92
@evaferreira92 Clip-path, shapes y SVG
Menos imágenes innecesarias • Menos requests al servidor • Mejor
código • Ya no todo es rectángulos dentro de rectángulos Clip-path @evaferreira92
9. Todo ES6
Funciones flechita elemento.addEventListener('click', function (e){ // Inserte aquí su código
}); @evaferreira92 elemento.addEventListener('click’, (e) => { // Inserte aquí su código });
Funciones flechita elemento.addEventListener('click', function (e){ // Inserte aquí su código
}); @evaferreira92 elemento.addEventListener('click’, e => { // Inserte aquí su código });
Funciones flechita @evaferreira92 elemento.addEventListener('click', () => console.log('Hola')); unArray.map(item => item
* 2);
8. Layout revolution
Floats
Grids & Flexbox @evaferreira92
¿Grids Vs. Flexbox?
Grids junto a Flexbox
@evaferreira92
None
@evaferreira92
Jen Simmons Rachel Andrew
7. Fetch
Fetch • XMLHttpRequest renovado • Nunca más tipear eso. •
Pero gracias a XHR Aprendí los mensajes HTTP @evaferreira92
https://www.google.com/teapot
@evaferreira92
None
@evaferreira92
6. Picture element
Picture element • Facilita trabajar con imágenes responsive • Evita
gastarle datos innecesarios al usuario • Permite entregar distintos formatos de imagen @evaferreira92
Picture element <picture> <source srcset="logo-big.png" media="(min-width: 1000px)"> <img src="logo-small.png" alt="">
</picture> @evaferreira92
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/
@evaferreira92
@evaferreira92
5. Componetización
Componetización • Angular • React • Vue • Svelte @evaferreira92
Componetización • Hermosa arquitectura • Fácilmente escalable • Elementos reutilizables
• Trabajo en conjunto con diseño @evaferreira92
4. Animaciones
Animaciones circa 2008
Animaciones circa 2008
Animaciones hoy • CSS Transitions Animations • JavaScript
GSAP Web Animations API … • SVG all the things @evaferreira92
Chris Gannon - @chrisgannon
Julia Muzafarova - @miocene
Rachel Nabors - @rachelnabors
3. HTML5 forms
¿Validar direcciónes de e-mail? Regex
None
None
None
HTML5 forms • Validaciones nativas E-mail Required
… • Type number • Type date @evaferreira92
2. Node
@evaferreira92
1.
1. Developer tools
None
Firebug
Developer tools hoy • HTML / CSS / JavaScript ¡Psst!
CSS es más feliz con Firefox • Diseñar en el navegador • Accesibilidad • PWA @evaferreira92
Developer tools hoy • Performance • Memoria Charla de
Katie Fenn https://nordicjs.com/2019 • Frameworks • ¡Muuuchas cosas más! @evaferreira92
None
¡Estamos en un momento increíble! Es el mejor momento para
comenzar a estudiar desarrollo web.
None
None
None
None
“Veníamos bien… pero pasaron cosas” Presidente de Argentina
Push Notifications
@evaferreira92
None
Primero creamos la tecnología, después creamos la tecnología para bloquear
la tecnología.
Cookie banner
@evaferreira92
GDPR
None
https://privacyinternational.org/long-read/3196/no- bodys-business-mine-how-menstruation-apps-are- sharing-your-data
“Si el producto es gratis el producto sos vos”
None
Accesibilidad
None
The WebAIM million 97.8% de las páginas fallaron WCAG
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
…
None
Fun fact: Dijeron que fue un error.
None
None
None
@evaferreira92
¿Por qué?
None
¿Nos estamos olvidando del usuario?
¿O simplemente estamos cansados?
La falta de accesibilidad no es maldad
None
Burnout
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
None
¡El falso full-stack developer es algo bueno!
La web es hermosa Tenemos que cuidarla un poco más.
Cuidar al usuario
Cuidarnos entre nosotros
None