The Modern Web Developer's Toolkit

Presented at Peers Conference 2013

http://sass-lang.com
http://compass-style.org
http://gruntjs.com
http://mxcl.github.io/homebrew/
http://feedback.livereload.com/knowledgebase/articles/86242

Transcript

1. The Modern Web Developer’s Toolkit Rob Sanchez Web Developer TOKY Branding + Design
2. The Command-line • A succinct way of solving complicated (and often annoying) problems • If you are into keyboard shortcuts--you should embrace the CLI • GUIs can obscure problems and be harder to debug
3. Key Advantages • Automation • Portability • Standardization • Efficiency
4. Automation • Reduce repetitive tasks • Make fewer omissions • Spend more time coding/designing
5. Portability • Multi-environment server-side configuration • Set up a local development environment as quickly as possible • Dependency management
6. Standardization • Working in teams • Flow from one project to the next • Reduce the pain of turnover • Keep a boilerplate repo
7. Efficiency • Reduce time getting reoriented • Reduce time starting up a project
8. Skipping to the end git clone git@github.com/rsanchez/foo cd foo bundle install npm install grunt watch
9. Package/Dependency Management • bundler/gems, npm, composer, bower • Gemfile, package.json, composer.json, etc. • config ALL the things!!!
10. Homebrew • http://mxcl.github.io/homebrew • Package management for Mac • brew install <package>
11. .profile • Located in your home directory, eg. /Users/ yourname/ • shell script that gets executed every time you open a terminal • $PATH
12. Installing Node.js and NPM • brew install node • add node path to your .profile • export PATH="$PATH:/usr/ local/share/npm/bin"
13. Installing Ruby & bundler • brew install ruby (or don’t) • gem install bundler (might need sudo) •export PATH="/usr/local/opt/ ruby/bin:$PATH"
14. Reducing asset size and # of HTTP requests • minification • concatenation • image optimization
15. Starting a new project • bundle init - (generate a Gemfile) • npm init - (generate a package.json file) • compass init - (generate a config.rb file)
16. SASS • Ruby-based CSS preprocessor • add gem 'sass' to your Gemfile • bundle install
17. SASS Concatenation
18. SASS Mixins @mixin opacity($opacity) { -webkit-opacity: $opacity; -moz-opacity: $opacity; opacity: $opacity; }
19. SASS Variables $red: #990000; p { color: $red; }
20. SASS Nesting nav { width: 100%; ul { list-style: none; li { display: inline-block; } } }
21. Compass • SASS extension • CSS3, typography, image mgmt. • add gem 'compass' to your Gemfile
22. Compass Inline Images .header { background-image: inline-image("texture.jpg"); background-repeat: repeat; }
23. Compass Image Dimensions .block { background: url(../images/block-bg.png); width: image-width("block-bg.png"); height: image-height("block-bg.png"); }
24. Compass CSS3 Vendor Prefixing .callout { @include transition(all 0.3s linear); @include opacity(0.8); &:hover { @include opacity(1); } }
25. Compass Sprites @import "icon/*.png"; @include all-icon-sprites; ul { li { @include icon-sprite("arrow"); } }
26. Compass rgbapng plugin • add gem 'rgbapng' to your Gemfile • add require 'rgbapng' to your config.rb
27. Compass rgbapng plugin .sidebar { @include rgba-background-inline(rgba(#555, 0.7)); }
28. Compass on the command-line • compass init - create a config.rb file • compass compile - compile to CSS • compass watch - watch for file changes & compile
29. Grunt • task runner / build tool • concat/minify JS • optimize images • run sass/compass • watch for file changes + livereload
30. Installing Grunt • npm install -g grunt-cli (install globally) • npm install grunt --save-dev (install locally, add to package.json)
31. Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ concat: { all: { src: [ '_src/js/plugins/*.js', '_src/js/modules/*.js', '_src/js/templates/*.js', '_src/js/site.js' ], dest: 'assets/js/site.js' } },
32. Gruntfile.js uglify: { all: { src: 'assets/js/site.js', dest: 'assets/js/site.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', [ 'concat', 'uglify']); };
33. Running Grunt • grunt - run the default task • grunt concat - run the concat task • grunt compass:development - run the compass development sub-task • grunt watch - run the watch task
34. Grunt JSHint • lint your code (aka check for syntax errors) • npm install grunt-contrib- jshint --save-dev • add grunt.loadNpmTasks('grunt- contrib-jshint'); to your Gruntfile
35. Grunt JSHint grunt.initConfig({ jshint: { all: [ 'Gruntfile.js', '_src/js/modules/*.js', '_src/js/templates/*.js', '_src/js/site.js' ] } });
36. Grunt Concat • combine files into one • npm install grunt-contrib- concat --save-dev • add grunt.loadNpmTasks('grunt- contrib-concat'); to your Gruntfile
37. Grunt Concat grunt.initConfig({ concat: { all: { src: [ '_src/js/plugins/*.js', '_src/js/modules/*.js', '_src/js/site.js' ], dest: 'assets/js/site.js' } } });
38. Grunt Uglify • compress/minify your JS • npm install grunt-contrib- uglify --save-dev • add grunt.loadNpmTasks('grunt- contrib-uglify'); to your Gruntfile
39. Grunt Uglify grunt.initConfig({ uglify: { all: { src: 'assets/js/site.js', dest: 'assets/js/site.js' } } });
40. Grunt Imagemin • optimize your raster graphics • npm install grunt-contrib- imagemin --save-dev • add grunt.loadNpmTasks('grunt- contrib-imagemin'); to your Gruntfile
41. grunt.initConfig({ imagemin: { all: { options: { optimizationLevel: 4 }, files: [{ expand: true, cwd: 'assets/images/', src: ['*.png', '*.jpg', '*.jpeg'], dest: 'assets/images/' }] } } });
42. Grunt Compass • compile your SASS/Compass with grunt • npm install grunt-contrib- compass --save-dev • add grunt.loadNpmTasks('grunt- contrib-compass'); to your Gruntfile
43. grunt.initConfig({ compass: { options: { require: ['rgbapng'], httpPath: '/', cssDir: 'assets/css', sassDir: '_src/sass', imagesDir: 'assets/images', javascriptsDir: '_src/js', outputStyle: 'compressed', noLineComments: true } } });
44. Grunt Watch • http://feedback.livereload.com/ knowledgebase/articles/86242 • watch for file changes + livereload • npm install grunt-contrib- watch --save-dev • add grunt.loadNpmTasks('grunt- contrib-watch'); to your Gruntfile
45. grunt.initConfig({ watch: { options: { livereload: true }, compass: { files: [ '_src/sass/**/*.{sass,scss}', '_src/sprites/**/*.png'], tasks: ['compass'] }, js: { files: ['_src/js/**/*.js'], tasks: ['jshint', 'concat'] },
46. html: { files: ['*.php', '*.html'] }, imagemin: { files: [ 'images/**/*.{png,jpg,jpeg}' ], tasks: ['imagemin'] } } });
47. Other Grunt plugins • grunt-grunticon • grunt-webfont • grunt-imagemagick • grunt-svgmin • grunt-contrib-qunit, grunt-contrib-nodeunit
48. Thank you! • @_rsan • https://github.com/rsanchez • info@robsanchez.com