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
110
Oda a la década++
Eva Ferreira
October 19, 2019
Tweet
Share
More Decks by Eva Ferreira
See All by Eva Ferreira
Good intentions gone bad
evaferreira
0
140
Bulletproof your Design System
evaferreira
0
86
Tales of Accessibility Failures
evaferreira
0
33
Tales of Accessibility Failures
evaferreira
0
160
La accesibilidad de todos los días - HackAcademy
evaferreira
0
110
Rescue the Dead Horse
evaferreira
0
120
De 45 a 85
evaferreira
0
88
Take on me
evaferreira
3
540
Video edition with CSS & JavaScript
evaferreira
1
240
Other Decks in Programming
See All in Programming
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
【Go言語】ジェネリクス
tomo1227
0
170
Introduction to GitOps
hwchiu
0
110
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
CSC307 Lecture 05
javiergs
PRO
0
210
Temporalを取り巻く仕様を整理する
sajikix
0
110
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Featured
See All Featured
Clear Off the Table
cherdarchuk
89
320k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Atom: Resistance is Futile
akmur
261
25k
How to name files
jennybc
67
96k
Fireside Chat
paigeccino
25
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
GraphQLとの向き合い方2022年版
quramy
36
13k
Designing the Hi-DPI Web
ddemaree
276
34k
The Invisible Side of Design
smashingmag
294
50k
Typedesign – Prime Four
hannesfritz
37
2.2k
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