Slide 1

Slide 1 text

JÖRG NEUMANN | NeoGeeks FRONTEND MAGIC MIT CSS HOUDINI @JOERGNEUMANN

Slide 2

Slide 2 text

THEMEN  AI Development  Business App Development  Frontend Technologies  Development, Consulting, Coaching, Training KONTAKT  Mail: [email protected]  LinkedIn: www.linkedin.com/in/jörgneumann  X: @JoergNeumann  Web: www.neogeeks.de JÖRG NEUMANN Founder & CEO NeoGeeks GmbH Azure OpenAI Service, Azure Machine Learning Platform

Slide 3

Slide 3 text

DEMOS https://tinyurl.com/5n6st9su

Slide 4

Slide 4 text

CSS nervt! ;) WAS IST DAS PROBLEM?

Slide 5

Slide 5 text

CSS RENDERING PIPELINE HTML/CSS Parser DOM CSSOM Render Layout Paint Composite Screen

Slide 6

Slide 6 text

MANIPULATION HTML/CSS Parser DOM CSSOM Render Layout Paint Composite Screen

Slide 7

Slide 7 text

MANIPULATION MIT HOUDINI HTML/CSS Parser DOM CSSOM Render Layout Paint Composite Screen

Slide 8

Slide 8 text

Highlevel API Lowlevel API Worklets

Slide 9

Slide 9 text

IsHoudiniReadyYet.com

Slide 10

Slide 10 text

WORKLETS HINTERGRUND  Logik in Form einer JavaScript Klasse  Wird im Browser registriert und läuft in seinem eigenen Kontext  Läuft nur auf lokalem Server oder über HTTPS in Produktion  Fremde Worklets entweder als Package lokal installieren oder über ein CDN verlinken  Weitere Infos hier

Slide 11

Slide 11 text

CSS PAINT API HINTERGRUND  Mit eigener Logik in den Rendering-Prozess eingreifen  Rendern von background, background-image, border-image, mask-image  Zur Manipulation steht ein Subset der Canvas API zu Verfügung W3C STATUS  Status: Candidate Recommendation

Slide 12

Slide 12 text

DEMO Paint API

Slide 13

Slide 13 text

HOUDINI PAINT API POLYFILL  Einbinden:  Repo: https://github.com/GoogleChromeLabs/css-paint-polyfill

Slide 14

Slide 14 text

CSS LAYOUT API HINTERGRUND  Mit eigener Logik in den Layout-Prozess eingreifen  Logik wird ebenfalls in Form von Worklets implementiert und registriert W3C STATUS  Status: First Public Working Draft

Slide 15

Slide 15 text

CSS LAYOUT API class FancyLayout { static get inputProperties() { return ['--exampleVariable']; } static get childrenInputProperties() { return ['--exampleChildVariable']; } static get layoutOptions() { return { childDisplay: 'normal', sizing: 'block-like' }; } intrinsicSizes(children, edges, styleMap) { /* ... */ } layout(children, edges, constraints, styleMap, breakToken) { /* ... */ } }); registerLayout('fancyLayout', FancyLayout );

Slide 16

Slide 16 text

CSS LAYOUT API body { display: layout(masonry); --padding: 5; --columns: 4; } if (CSS.layoutWorklet) { CSS.layoutWorklet.addModule(fancylayout.js'); }
Worklet im Browser registrieren Layout zuweisen und konfigurieren

Slide 17

Slide 17 text

DEMO Layout API

Slide 18

Slide 18 text

FAZIT HOUDINI ROCKT!  Erweiterung des CSS Standards  Custom Properties  Custom Paintings  Custom Layouts  Custom Animations  Typisierter Zugriff auf CSS  Mehr Symantik  mehr Flexibilität im Design

Slide 19

Slide 19 text

&

Slide 20

Slide 20 text

RESSOURCEN  Houdini Specifications https://drafts.css-houdini.org  Google Chrome Labs Houdini Samples https://github.com/GoogleChromeLabs/houdini-samples https://googlechromelabs.github.io/houdini-samples  CSS Properties & Values API https://web.dev/css-props-and-vals  CSS Paint Polyfill https://github.com/GoogleChromeLabs/css-paint-polyfill  Tutorials & Worklet Library https://houdini.how