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
140
Oda a la década++
Eva Ferreira
October 19, 2019
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Cryptography for lovers 💖
evaferreira
0
17
Bulletproof your Design system
evaferreira
0
38
Good intentions gone bad
evaferreira
0
250
Bulletproof your Design System
evaferreira
0
130
Tales of Accessibility Failures
evaferreira
0
63
Tales of Accessibility Failures
evaferreira
0
220
La accesibilidad de todos los días - HackAcademy
evaferreira
0
140
Rescue the Dead Horse
evaferreira
0
140
De 45 a 85
evaferreira
0
99
Other Decks in Programming
See All in Programming
TDD 実践ミニトーク
contour_gara
1
290
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
5.5k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
0
170
Design Foundational Data Engineering Observability
sucitw
3
190
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
AI時代のUIはどこへ行く?
yusukebe
16
8.7k
testingを眺める
matumoto
1
140
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
390
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
速いWebフレームワークを作る
yusukebe
5
1.7k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.9k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Into the Great Unknown - MozCon
thekraken
40
2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A designer walks into a library…
pauljervisheath
207
24k
Context Engineering - Making Every Token Count
addyosmani
1
23
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Speed Design
sergeychernyshev
32
1.1k
Designing for Performance
lara
610
69k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Facilitating Awesome Meetings
lara
55
6.5k
Agile that works and the tools we love
rasmusluckow
330
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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