15
HERRAMIENTAS FRONT SIN LAS QUE NO PUEDO VIVIR
HERRAMIENTAS FRONTSIN LAS QUE NO PUEDO VIVIR
BORJA ANDRÉSFRONT-END DEVELOPER
@borya09
http://es.linkedin.com/in/borjaandres/
http://www.borjaandres.com
“Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network
applications.”
package.json comandos
{ "name": "prueba", "version": "0.0.1", "dependencies": {
"express":"3.1.0","mongoose":"3.4.x","q":"*"
} }
$ npm install $ node app.js
“The JavaScript Task Runner”
Why use a task runner?
In one word: automation
GRUNT
Gruntfile.js comandos
grunt.registerTask('dev', ['jade:dev','compass:dev','livereload‘] ); grunt.registerTask('build', ['jade:dist','uglify','compass:dist'] );
$ grunt dev $ grunt build
GRUNT
jade: { dist: {
files: [{ dest: './dist/', src: '{,*/}*.jade', ext: '.html'
}] }
}
Plugins disponibles …
¡¡¡O prográmatelo a medida!!!
GRUNT
“A package manager for the web”
BOWER
bower.json comandos
BOWER
index.html
{ "name": "prueba", "version": "0.0.1", "dependencies": {
"angular": "~1.2.0", "jquery": "~2.0.3"
} }
$ bower install
<script src="bower_components/angular/angular.js"></script> <script src="bower_components/jquery/jquery.js"></script>
“robust, elegant, feature rich template engine for nodejs”
!!! 5html(lang="en") head title= pageTitle body h1 Jade #container.col if isJade p You are amazing else p Get on it! p. Jade is a terse
{ pageTitle: ‘Demo', isJade: true}
<!DOCTYPE html> <html lang="en"> <head> <title>Demo</title> </head> <body> <h1>Jade</h1>
<div id="container" class="col"><p>You are amazing</p><p>Jade is a terse </p>
</div> </body> </html>
“CSS with superpowers”
body {
width: 940px; } h1 {
color: red; } section h1 {
color: #cc0000; } a { color: white; } a:hover {
color: blue; }
$brand-color: rgb(255,0,0) $accent-color: darken($brand-color, 10%) $width: 960px
@import 'constants'
body width: $width - 2 * 10px
h1 color: $brand-color
section h1 color: $accent-color
a color: white &:hover
color: blue
“Compass is an open-source CSS Authoring Framework”
html, body, div, span, applet, object, iframe, h1, h2, ... {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
} article, aside, details, figcaption, … {
display: block; } body {
line-height: 1; } …
.btn{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
@import "compass/reset/utilities" @import "compass/css3/border-radius"
+global-reset .btn
+border-radius(4px)
