Frontend moderno

Post on 07-Apr-2017

140 views 0 download

Transcript of Frontend moderno

Front-end Moderno

Como alguns devs back-end se veem

Como alguns devs back-end veem os devs front-end

css é muito facil CSS3 é fácil

css é muito facil

background: rgba(248,80,50,1);background: -moz-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));background: -webkit-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background: -o-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background: -ms-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );

css é muito repetitivo

DE NOVO, DE NOVO...

http://sass-lang.com/

http://lesscss.org/

http://stylus-lang.com/

http://compass-style.org/

CSS3

Box shadow, media querie, flexbox,

animation, border radius

HTML5

SVG, Canvas, Vídeo, Áudio,

Picture, Section, Footer

JS

ecmascript 6, novidade

=)

Não existe arquitetura em projetos js

Angular, Ember,

Backbone, Spine,

knockoutjs, Jasmine

“Comunidade não é ativa...”

Editores

https://www.sublimetext.com/

https://atom.io/

http://brackets.io/

Photoshop

Precisamos saber mexer...

Ferramentas do dia-a-dia

http://gulpjs.com/

http://gruntjs.com/

http://bower.io/

https://git-scm.com/

API

Fim =)