$ history | grep ‘querySelector’ Search your command-line history $ echo 'Hello World!' | pbcopy Copy to clipboard $ sudo !! Run the last command with sudo $ top -o vsize Discover what’s eating your memory $ unzip -l images.zip Unzip an archive to the current directory $ mdfind Use Spotlight to search from command-line Tooling can be weird..and wonderful.
ImageOptim (Mac) or PNGGauntlet (Windows) Optimise sites with little to no configuration..* Ngx PageSpeed / Mod PageSpeed Smaller for CSS/JS/HTML (Mac) * we’ll talk about Grunt, Gulp and npm soon
Before you get started • Download and install NodeJS · Available for all major operating systems • Install Gulp as a global utility Prerequisites $ npm install -g gulp
! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Optionally declare dependencies gulp.task(name, [dep], fn) Registers a task name with a function
! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Take a file system glob (set of files) and emit files that match gulp.src(glob)
! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Piped files are written to the file system gulp.dest(folder)
Before you get started • Download and install NodeJS · Available for all major operating systems • Install Grunt CLI as a global utility, run from any path. Prerequisites $ npm install -g grunt-cli
grunt vs grunt-cli ! “In a typical Grunt-based dev workflow, the CLI is installed once per system, while the lib is installed once per project.” ! “The relatively high proportion of CLI installs implies that many devs are using Continuous Integration, where both the CLI and core lib get installed every time.”
Install package dependencies $ npm install grunt-contrib-jshint grunt-contrib-cssmin —save-dev Install one or more tasks contrib tasks are officially maintained
How are they different? ! Based on files Configuration over code Independent tasks, strong I/O connection 3600 packages > 2 years old Widely used ! Based on streams Code over configuration Tasks run a sequence of methods. Less I/O 800 plugins > 1 year old Increasingly used
Sizing up the average Bootstrap page MINIFIED ORIGINAL STYLES UNCSS + MINIFICATION 120KB 110KB 11KB (1) ~ 90% improvement (2) Based on average improvements reported by UnCSS users
Just render visible content! 1. One RTT render for above the fold 2. Fast server response. No redirects 3. Must optimize critical rendering path a. Inline critical CSS b. Remove any blocking JavaScript Don’t render the whole page!
Working with Web Components? Concatenates HTML Imports into a single file Vulcanize https://www.polymer-project.org/articles/concatenating-web-components.html grunt-vulcanize gulp-vulcanize
Grunt-PerfBudget http://cognition.happycog.com/article/grunt-plugins-reviewed $ npm install grunt-perfbudget Install 1 2 3 Budget in ms for render, KB for page weight Over budget? Task fails and reports an error. GitHub PRs will show the build failed
Old way of doing things ! 1. jQuery is out of date. Let’s update! 2. Open up the site 3. Download the lib 4. Copy from ~/Downloads 5. Paste to app folder 6. Wire in with script tags
Newer hotness • Download and install NodeJS · Available for all major operating systems • Install Bower as a global utility Package manager for the web $ npm install -g bower
! $ yo ! [?] What would you like to do? ›❯ Install a generator Run the Angular generator Run the Backbone generator Run the Blog generator Run the jQuery generator Run the Gruntfile generator (Move up and down to reveal more choices) Remembers what you like to use
LibSass, PostCSS 2014 Trends? 2015 ES6 Modules (transpiled) npm for front-end package management * Web Components, virtual-dom / React Angular 2.0, Ember * If we’re able to address outstanding issues making Bower a better choice for today + Browserify Custom Elements & HTML Imports will be big. + persistent data structures
addyosmani
shinmiy
coe401_
rinchsan
dalinaum
yui_knk
mukky620
makenowjust
skume
sagawa23
konokenj
umizaru
tenderlove
palkan
sonatard
mza
bluesmoon
lauravandoore
dougneiner
yeseniaperezcruz
kneath
jonyablonski
kastner
kevinliebholz