Smashing 2014 Retrospektive

Norman Wehrleadesso Schweiz AG

SmashingConf Oxford

"real-life projects, workflows and hands-on insights"

Web Components

Web Components

Elemente sind gekapselt

<select>
    <option>Audi</option>
    <option>Mercedes</option>
    <option>Honda</option>
</select>

… sind konfigurierbar

<select id="vehicles">
    <option disabled>Audi</option>
    <option disabled>Mercedes</option>
    <option selected>Honda</option>
</select>

… kombinier/schachtelbar

<select>
    <optgroup label="German Cars">
        <option>Audi</option>
        <option>Mercedes</option>
    </optgroup>
    <option>Honda</option>
</select>

… programmierbar

var foo = mySelect.selectedIndex;

Komponente heute

Komponente heute

…dann bald

…und komplett

<html>
    <head>
        <link rel="import" href="google-map.html">
    </head>
    <body>
        <google-map lat="51.5171" lng="-0.1062" zoom="10"></google-map>
    </body>
</html>

Support

Polyfill

Spec

LIVE CODING!

CSS Color L4

Colors in HTML 3.2

Colors in CSS 2.1

Colors in CSS Color L3

Colors in CSS Color L4

Schon heute

Bilder auf Diät

JPG

WebP (Google)

JPEG XR (Microsoft)

JPEG 2000

Was wann?

Normans Workflow

imagemin: {
    all: {
        files: [
            {
                src: ['**/*.{png,jpg,gif}'],
                dest: 'dist/'
            }
        ]
    }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');

Flexbox

Ein Layoutmanager

Reif für den Einsatz

Properties

Vorteile

Einsatzfelder

Tipps zum Einsatz

Links

CSS tidbits

CSS calc-Function

Code

.thing {
    width: 90%; /* fallback if needed */
    width: calc(100% - 3em);
}
.other-thing {
    background-image: url(dog.png);
    background-position: calc(100% - 50px)
                         calc(100% - 20px);
}

Modernizr Alternativen

@supports not (display: flex) {
    div { float: left; } /* alternative styles */
}

Effekte

Vermischtes

Sonst so?