⬤Intersections
⬤ of
New Web APIs

This talk is a
love letter
to complexity.

⚽ 🚨 🚀

HTML

CSS

JavaScript

CSS Grid

Web Animations

Web Components

CSS Custom Properties

This talk is a love letter to complexity.

When I was a child I fascinated by rube goldberg machines.

They are these quirky machines with many interlocking parts of very different Technology

I used to spend hours with marbles, pipes, string, playing cards and dolls and all the other toys in my toybox to build these amazing contraptions.

Front end web development is complex.

Between CSS, HTML and JavaScript there are many different parts which behave very differently.

The features in the web platform are growing day-by-day, it feels I have been learning the web platform my entire life and I still discovering new toys or get new toys added to my toybox.

This talk I am going to introduce 4 new-ish toys we have to play with and explore how they work together:

CSS Grid
Web Animations
Web Components
Custom CSS Properties

Each one is a deep complex topic it's own right so I can't go into depth about them.

Learning to use them effectively will take some research, practise and time.

The goal of this talk is to show how they can work together.

When they are used in conjunction it feels like super powers for front end web development.

Hopefully will change the way we think about front end web deveopment.

CSS

Grid

You don’t need a framework to use CSS Grid.
CSS Grid is a framework.

— Rachel Andrew (@rachelandrew)

This page is intentionally left blank

Flexbox works from the content out…
Grid works from the layout in.

— Rachel Andrew (@rachelandrew)

It was a layout that I figured would take maybe half a day of wrangling CSS.

I used CSS grid and I was done in five minutes.
That’s not an exaggeration. It was literally five minutes.

— Jeremy Keith (@adactio)

CSS Grid is a Framework for doing 2D layout in the web
You can place objects intentionally in the grid.
If nothing else it saves you 250k to download a grid library
You can place items precisely in a grid but not only that
Allows you to use space intentionally, make use of white space.
Remove Layout elements.
This main feature is one of the things that makes grid powerful.
If you find making layouts with CSS a bit like this gif, grid is probably the answer to your trouble

WebAnimations

⚽

Another super powered framework built into the browser!
KeyFrames, KeyFrameOptions
KeyFrameOptions provides lots of handy functionality.

<web-components>

Shadow DOM

Scoped css

JS Callbacks

Lego Street Repairs by Jan Vormann

Component Engine
Hide HTML into the shadow DOM, including style and link tags so you can add style to the elment.
The result of this encapsulation solves our div soup problem. Elements for appearance are hidden in the internals of our element.
Styles added this way are encapsualted to the element.
In addition callbacks to the element life cycle allow us to respond to the element being changed dynamically.
We can make a set of isolated components we can plug together just like lego bricks.
This allows us to use custom elements within any framework because it is *just* html.

CSSCustom
Properties

Custom properties bring variables to CSS by letting you define your own properties.
They are a small part of the large houdini spec which is steadily coming to browsers.
Make CSS more programatic.
Explicitly label how stuff works, i.e. --padding
They can be accessed using the var() method.
And even used in calc() methods.
Most importantly is that they work in the cascade too.
Here is how you can take advantage of it.

<web-components &
style="--custom-properties: 🦄;" >

Custom properties in the cascade
Custom properties pierce the shadow DOM
Set values on --host to define default values
These can be overridden using the stylesheet or on the element directly

CSS

Grid

♥

<web-
components>


<div class="head">
    <header>
        <h1>My thing</h1>
    </header>
</div>
<div class="left-column">
    <div class="widget">
        <div class="widget-description">
            <p>lorem ipsum</p>
        </div>
        <button class="widget-button">lol</button>
    </div>
</div>
<div class="right-column">
    <main>
        <p>Hello world</p>
    </main>
</div>


<div class="head">
    <header>
        <h1>My thing</h1>
    </header>
</div>
<div class="left-column">
    <div class="widget">
        <div class="widget-description">
            <p>lorem ipsum</p>
        </div>
        <button class="widget-button">lol</button>
    </div>
</div>
<div class="right-column">
    <main>
        <p>Hello world</p>
    </main>
</div>


<div class="head">
    <header>
        <h1>My thing</h1>
    </header>
</div>
<div class="left-column">
    <div class="widget">
        <div class="widget-description">
            <p>lorem ipsum</p>
        </div>
        <button class="widget-button">lol</button>
    </div>
</div>
<div class="right-column">
    <main>
        <p>Hello world</p>
    </main>
</div>

<Web Components> & CSS Grid bring
Clarity to Complexity

CSS Grid removes layout cruft
Web Components remove visual element cruft
Syntactic and Readable HTML
All elements have syntactic meaning, describes behaviour using the HTML

CSSGrid
×
Custom
Properties

Clarify Responsive Design
i.e. shrink the gutters
Place elements into a different column/row by bulk

Custom
Properties
+
WebAnimations

Easing as Custom Property
Responsive design & low motion, with custom properties
Animating custom properties

Thank You
for Listening 💖

Web Components -> Custom Properties
Grid -> Web Components
Grid -> Custom Properties
Web Animation -> Custom Properties