WEB DEVELOPER
*
PRODUCT ENGINEER
DESIGN SYSTEMS LEAD
DOCUMENTATION & DEV REL STUFF
LANDING PAGES
BRAND GUIDELINES
PROMOTIONAL AND MOVIE SITES
SOCIAL INITIATIVE PROGRAMS
ひらがな
هيراغانا
FULL OF HACKS
UNMANTAINABLE CODE
SLOW LOADING TIMES
BAD PERFORMANCE
CSS NOW
CSS WHEN I NEEDED IT A DECADE AGO
*
*
APPLIES TO JAVASCRIPT TOO
The new defaults of the modern web
import
{
me
}
from './speakers'
JEREMIAS MENICHELLI
@jeremias.codes
on bluesky
jeremias.codes
on the internets
DOCUMENTATION AND
DEV REL
👉
STORYBLOK
📍 BARCELONA
FULL HEIGHT PANEL
Problem: BROWSER'S UI ELEMENTS
👎
👍
Dynamic VIEWPORT UNITS
https://modern-web-standards.netlify.app/units/
SCROLL ANIMATION
Problem: ANIMATING SCROLL ON MAIN THREAD
👎
👍
SCROLL BEHAVIOR
https://modern-web-standards.netlify.app/scroll-behavior/
SCROLL SNAPPING
Problem: Hack, USER EXPERIENCE COMPROMISE
👎
👍
SCROLL SNAP
https://modern-web-standards.netlify.app/scroll-snap/
SCROLL INTERCEPTION
Problem: MAIN THREAD OVERLOAD, PERFORMANCE
👎
👍
INTERSECTION OBSERVER
https://modern-web-standards.netlify.app/
intersection-observer
/
WEB ANIMATIONS
Problem: NOT HARDWARE ACCELERATED
👎
👍
WEB ANIMATION API
https://modern-web-standards.netlify.app/web-animation/
LAYOUT AND TEXT BALANCE
*
Problem: SPECIFICITY AND RENDERING Performance
ひらがな
Donaudampfschifffahrtsgesellschaftskapitän
CSS LOGICAL PROPERTIES
TEXT-WRAP BALANCE
TEXT-WRAP PRETTY
GRID & SUBGRID
VIEW TRANSITIONS
Problem: FRAMEWORK ONLY OPTION
👎
👍
VIEW TRANSITIONS
https://modern-web-standards.netlify.app/view-transitions/
https://modern-web-standards.netlify.app/
https://github.com/jeremenichelli/modern-web-standards
THANKS!
The New Defaults of the Modern Web
Jeremias Menichelli
https://jeremias.codes
Made with Slides.com