the flash no front-end

The Flash no FRONT-END

Cezar Luiz

<!doctype html>

<video> <audio> <picture> <web-components> srcset <section> <article> <aside> <header> <footer> <meta charset=utf-8> <hgroup> websocket <maisde8000>

Imagens retinas

<img src=“logo.png” srcset=“[email protected] 2x”>

Inputs

email search phone date color text range number tel time week datetime

required autofocus min max pattern step

CSScansei de ser sexy

#header { color: red; }

.section { background: red; }

.title-section { color: red; }

Why?SASS, LESS,

Stylus…

// SASS $alert: red;

.alert { background: $alert; }

// SASS @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }

.box { @include border-radius(10px); }

variáveis flexbox gradients border radius box shadow

text shadow normalize reset sprites (tools ftw) transitions

animations IE10+ !important CSS3 everywhere!

JavaScript

jQuery? Será que preciso?

$(‘.post’) vs

document.querySelectorAll(‘.post’)

// IE8+

$(‘#header’).addClass(‘fixed')

vs header.classList.add(‘fixed')

// IE10+

$(‘#header’) vs

document.querySelector(‘#header’)

// IE8+

API’s

geolocation vibration canvas dragndrop filesystem indexeddb shadowdom websocket webgl webrtc battery ajax2 network information page visibility full screen getusermedia storing

data

Tá… Mas eu já sabia disso… Cade o “flash”?

NODEJS + NPM + COMUNIDADE

= MÁGICA

HAPPENS

mais especificament

e…

Grunt / Gulp + Bower + Yeoman

Grunt / Gulp

Automatizadores de tarefas - concatenam, minificam,

otimizam imagens, livereload, autoprefixer, sass

ou less - tudo isso automagicamente

Bower

Gerenciador de dependências front-end

npm install jquery angular normalize-css animate-css

fastclick --save

Yeoman

Generators - criam toda a estrutura para você em um

simples comando, já incluindo o grunt / gulp, bower, bootstrap ou o

generator que você quiser

Yeoman

Generators para wordpress, angular, jquery, ionic,

backbone, polymer, express, chromeapp, bootstrap… to

infinity and beyond

Escolheu sua aplicação?

yo gulp-webapp

autoprefixer jshint jslint otimizar imagens

livereload sass minificação contatenação

htaccess wiredep

gulp watch

Acabou de desenvolver?

Pronto sir! Toda sua aplicação acabou de ser

otimizada!

live demo

dá tempo?

thanks!

the flash no front-end

Internet