Herramientas front
•Download as PPTX, PDF•
0 likes•267 views
Herramientas que utilizo a diario como desarrollador front-end, que se han vuelto totalmente imprescindibles en mi día a día.
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (15)
Similar to Herramientas front
Similar to Herramientas front (20)
Recently uploaded
Recently uploaded (20)
Herramientas front
- 1. HERRAMIENTAS FRONT SIN LAS QUE NO PUEDO VIVIR
- 3. “Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.”
- 4. package.json { "name": "prueba", "version": "0.0.1", "dependencies": { "express":"3.1.0", "mongoose":"3.4.x", "q":"*" } } comandos $ npm install $ node app.js
- 5. GRUNT “The JavaScript Task Runner” Why use a task runner? In one word: automation
- 6. GRUNT comandos Gruntfile.js jade: { dist: { files: [{ dest: './dist/', src: '{,*/}*.jade', ext: '.html' }] } } grunt.registerTask('dev', ['jade:dev','compass:dev','livereload‘] ); grunt.registerTask('build', ['jade:dist','uglify','compass:dist'] ); $ grunt dev $ grunt build
- 8. BOWER “A package manager for the web”
- 9. BOWER bower.json $ bower install { "name": "prueba", "version": "0.0.1", "dependencies": { "angular": "~1.2.0", "jquery": "~2.0.3" } } comandos index.html <script src="bower_components/angular/angular.js"></script> <script src="bower_components/jquery/jquery.js"></script>
- 10. “robust, elegant, feature rich template engine for nodejs”
- 11. !!! 5 html(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>
- 13. $brand-color: rgb(255,0,0) $accent-color: darken($brand-color, 10%) $width: 960px body { width: 940px; } h1 { @import 'constants' body width: $width - 2 * 10px h1 color: $brand-color section h1 color: $accent-color a color: white &:hover color: blue color: red; } section h1 { color: #cc0000; } a { color: white; } a:hover { color: blue; }
- 14. “Compass is an open-source CSS Authoring Framework”
- 15. @import "compass/reset/utilities" @import "compass/css3/border-radius" +global-reset .btn +border-radius(4px) 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; }