The Modern Web Developer's Toolkit

Slide 1

Slide 1 text

The Modern Web Developer’s Toolkit Rob Sanchez Web Developer TOKY Branding + Design

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Key Advantages • Automation • Portability • Standardization • Efﬁciency

Slide 4

Slide 4 text

Automation • Reduce repetitive tasks • Make fewer omissions • Spend more time coding/designing

Slide 5

Slide 5 text

Portability • Multi-environment server-side conﬁguration • Set up a local development environment as quickly as possible • Dependency management

Slide 6

Slide 6 text

Standardization • Working in teams • Flow from one project to the next • Reduce the pain of turnover • Keep a boilerplate repo

Slide 7

Slide 7 text

Efﬁciency • Reduce time getting reoriented • Reduce time starting up a project

Slide 8

Slide 8 text

Skipping to the end git clone git@github.com/rsanchez/foo cd foo bundle install npm install grunt watch

Slide 9

Slide 9 text

Package/Dependency Management • bundler/gems, npm, composer, bower • Gemﬁle, package.json, composer.json, etc. • conﬁg ALL the things!!!

Slide 10

Slide 10 text

Homebrew • http://mxcl.github.io/homebrew • Package management for Mac • brew install

Slide 11

Slide 11 text

.proﬁle • Located in your home directory, eg. /Users/ yourname/ • shell script that gets executed every time you open a terminal • $PATH

Slide 12

Slide 12 text

Installing Node.js and NPM • brew install node • add node path to your .proﬁle • export PATH="$PATH:/usr/ local/share/npm/bin"

Slide 13

Slide 13 text

Installing Ruby & bundler • brew install ruby (or don’t) • gem install bundler (might need sudo) •export PATH="/usr/local/opt/ ruby/bin:$PATH"

Slide 14

Slide 14 text

Reducing asset size and # of HTTP requests • miniﬁcation • concatenation • image optimization

Slide 15

Slide 15 text

Starting a new project • bundle init - (generate a Gemfile) • npm init - (generate a package.json file) • compass init - (generate a config.rb file)

Slide 16

Slide 16 text

SASS • Ruby-based CSS preprocessor • add gem 'sass' to your Gemﬁle • bundle install

Slide 17

Slide 17 text

SASS Concatenation

Slide 18

Slide 18 text

SASS Mixins @mixin opacity($opacity) { -webkit-opacity: $opacity; -moz-opacity: $opacity; opacity: $opacity; }

Slide 19

Slide 19 text

SASS Variables $red: #990000; p { color: $red; }

Slide 20

Slide 20 text

SASS Nesting nav { width: 100%; ul { list-style: none; li { display: inline-block; } } }

Slide 21

Slide 21 text

Compass • SASS extension • CSS3, typography, image mgmt. • add gem 'compass' to your Gemﬁle

Slide 22

Slide 22 text

Compass Inline Images .header { background-image: inline-image("texture.jpg"); background-repeat: repeat; }

Slide 23

Slide 23 text

Compass Image Dimensions .block { background: url(../images/block-bg.png); width: image-width("block-bg.png"); height: image-height("block-bg.png"); }

Slide 24

Slide 24 text

Compass CSS3 Vendor Preﬁxing .callout { @include transition(all 0.3s linear); @include opacity(0.8); &:hover { @include opacity(1); } }

Slide 25

Slide 25 text

Compass Sprites @import "icon/*.png"; @include all-icon-sprites; ul { li { @include icon-sprite("arrow"); } }

Slide 26

Slide 26 text

Compass rgbapng plugin • add gem 'rgbapng' to your Gemﬁle • add require 'rgbapng' to your conﬁg.rb

Slide 27

Slide 27 text

Compass rgbapng plugin .sidebar { @include rgba-background-inline(rgba(#555, 0.7)); }

Slide 28

Slide 28 text

Compass on the command-line • compass init - create a config.rb file • compass compile - compile to CSS • compass watch - watch for file changes & compile

Slide 29

Slide 29 text

Grunt • task runner / build tool • concat/minify JS • optimize images • run sass/compass • watch for ﬁle changes + livereload

Slide 30

Slide 30 text

Installing Grunt • npm install -g grunt-cli (install globally) • npm install grunt --save-dev (install locally, add to package.json)

Slide 31

Slide 31 text

Gruntﬁle.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' } },

Slide 32

Slide 32 text

Gruntﬁle.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']); };

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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 Gruntﬁle

Slide 35

Slide 35 text

Grunt JSHint grunt.initConfig({ jshint: { all: [ 'Gruntfile.js', '_src/js/modules/*.js', '_src/js/templates/*.js', '_src/js/site.js' ] } });

Slide 36

Slide 36 text

Grunt Concat • combine ﬁles into one • npm install grunt-contrib- concat --save-dev • add grunt.loadNpmTasks('grunt- contrib-concat'); to your Gruntﬁle

Slide 37

Slide 37 text

Grunt Concat grunt.initConfig({ concat: { all: { src: [ '_src/js/plugins/*.js', '_src/js/modules/*.js', '_src/js/site.js' ], dest: 'assets/js/site.js' } } });

Slide 38

Slide 38 text

Grunt Uglify • compress/minify your JS • npm install grunt-contrib- uglify --save-dev • add grunt.loadNpmTasks('grunt- contrib-uglify'); to your Gruntﬁle

Slide 39

Slide 39 text

Grunt Uglify grunt.initConfig({ uglify: { all: { src: 'assets/js/site.js', dest: 'assets/js/site.js' } } });

Slide 40

Slide 40 text

Grunt Imagemin • optimize your raster graphics • npm install grunt-contrib- imagemin --save-dev • add grunt.loadNpmTasks('grunt- contrib-imagemin'); to your Gruntﬁle

Slide 41

Slide 41 text

grunt.initConfig({ imagemin: { all: { options: { optimizationLevel: 4 }, files: [{ expand: true, cwd: 'assets/images/', src: ['*.png', '*.jpg', '*.jpeg'], dest: 'assets/images/' }] } } });

Slide 42

Slide 42 text

Grunt Compass • compile your SASS/Compass with grunt • npm install grunt-contrib- compass --save-dev • add grunt.loadNpmTasks('grunt- contrib-compass'); to your Gruntﬁle

Slide 43

Slide 43 text

grunt.initConfig({ compass: { options: { require: ['rgbapng'], httpPath: '/', cssDir: 'assets/css', sassDir: '_src/sass', imagesDir: 'assets/images', javascriptsDir: '_src/js', outputStyle: 'compressed', noLineComments: true } } });

Slide 44

Slide 44 text

Grunt Watch • http://feedback.livereload.com/ knowledgebase/articles/86242 • watch for ﬁle changes + livereload • npm install grunt-contrib- watch --save-dev • add grunt.loadNpmTasks('grunt- contrib-watch'); to your Gruntﬁle

Slide 45

Slide 45 text

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'] },

Slide 46

Slide 46 text

html: { files: ['*.php', '*.html'] }, imagemin: { files: [ 'images/**/*.{png,jpg,jpeg}' ], tasks: ['imagemin'] } } });

Slide 47

Slide 47 text

Other Grunt plugins • grunt-grunticon • grunt-webfont • grunt-imagemagick • grunt-svgmin • grunt-contrib-qunit, grunt-contrib-nodeunit

Slide 48

Slide 48 text

Thank you! • @_rsan • https://github.com/rsanchez • info@robsanchez.com