Tools and Workflow - London Web Standards

@jonthanfielding #FrontendTooling Tools and Workflow Jonathan Fielding - @jonthanfielding

@jonthanﬁelding #FrontendTooling With responsive design, our jobs as developers is
getting harder

@jonthanﬁelding #FrontendTooling

@jonthanﬁelding #FrontendTooling It’s important we get the most out of
our workﬂow

@jonthanfielding #lwsanifont What tools can I use to enhance my
web development? Where do these tools fit in a development workflow?

@jonthanﬁelding #FrontendTooling The problem was…

@jonthanﬁelding #FrontendTooling I found a sea of tools

@jonthanﬁelding #FrontendTooling But how do I sift between them all?

@jonthanﬁelding #FrontendTooling How do I know which tools suit the
way I work?

@jonthanﬁelding #FrontendTooling First we can split them into the parts
of our workﬂow

@jonthanﬁelding #FrontendTooling Scaffolding

@jonthanﬁelding #lwsanifont What do scaffolding tools do? • Setup a
boilerplate • Install dependencies and sometimes - • conﬁgure build tools • setup source control

@jonthanﬁelding #lwsanifont What tools can I use for scaffolding Grunt-init
Yeoman

@jonthanﬁelding #lwsanifont Yeoman

@jonthanﬁelding #lwsanifont Install Yeoman

@jonthanﬁelding #lwsanifont Install a Yeoman Generator

@jonthanﬁelding #lwsanifont Scaffold with a Yeoman Generator

@jonthanﬁelding #lwsanifont Project structure

@jonthanﬁelding #lwsanifont Grunt-init

@jonthanﬁelding #lwsanifont Install Grunt-init

@jonthanﬁelding #lwsanifont Install Grunt-init template

@jonthanﬁelding #lwsanifont Run Grunt-init

@jonthanﬁelding #FrontendTooling Project structure

@jonthanﬁelding #FrontendTooling Abstractions

@jonthanﬁelding #lwsanifont What are abstractions? • Abstract away from the
languages of the web • Aim to make development quicker, simpler • Compile to the browsers native language

@jonthanﬁelding #lwsanifont Examples of abstractions • CSS Preprocessors   e.g
Sass, Stylus and Less • HTML Abstractions   e.g HAML, Markdown • Javascript Abstractions   e.g Typescript, CoffeeScript, Dart

@jonthanﬁelding #FrontendTooling CSS Preprocessors

@jonthanﬁelding #lwsanifont Features of CSS Preprocessors • Variables • Nesting
• Import stylesheets • Mixins • Functions

@jonthanﬁelding #lwsanifont What CSS Preprocessors are available Less Sass

@jonthanﬁelding #lwsanifont

@jonthanﬁelding #lwsanifont What is Sass? An abstraction of CSS called
a   CSS pre-processor which is written in Ruby

@jonthanﬁelding #lwsanifont Install Sass

@jonthanfielding #lwsanifont Sass Syntax @import “variables"; @import “mixins"; .class-name {
background: #000; p { @include font-size(14px); color: $text-color; span { color: #eee; } } } Import other Sass files Use mixin to generate CSS Nesting Use variable to define color

@jonthanﬁelding #lwsanifont Compile Sass

@jonthanﬁelding #lwsanifont Compiled CSS /* line 1, ../sass/screen.scss */ .class-name
{ background: #000; } /* line 3, ../sass/screen.scss */ .class-name p { font-size: 14px; color: #fff; } /* line 6, ../sass/screen.scss */ .class-name p span { color: #eee; }

@jonthanﬁelding #lwsanifont What is Less? An abstraction of CSS called
a   CSS pre-processor which is written in JavaScript

@jonthanﬁelding #lwsanifont Install Less

@jonthanﬁelding #lwsanifont Less Syntax @import “variables.less”; @import “mixin.less” .class-name {
background: #000; p { .font14(); color: #fff; span { color: #eee; } } } Import other Sass ﬁles Use mixin to generate CSS Nesting

@jonthanﬁelding #lwsanifont Compile Less

@jonthanﬁelding #lwsanifont Compiled CSS .class-name { background: #000; } .class-name
p { font-size: 14px; color: #fff; } .class-name p span { color: #eee; }

@jonthanﬁelding #FrontendTooling HTML Abstractions

@jonthanﬁelding #lwsanifont What is Markdown? A text formatting engine that
can be compiled into other languages, commonly used to generate HTML

@jonthanﬁelding #lwsanifont Install Markdown

@jonthanﬁelding #lwsanifont Markdown Syntax #Main Heading ##Secondary Heading Integer posuere
erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. ###Todo List * Compile markdown Heading 1 Paragraphs Heading 2 Heading 3 List

@jonthanﬁelding #lwsanifont Compile Markdown

@jonthanﬁelding #lwsanifont Compiled HTML <h1>Main Heading</h1> <h2>Secondary Heading</h2> <p>Integer posuere
erat a ante venenatis dapibus posuere velit aliquet.</p> <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <h3>Todo List</h3> <ul> <li>Compile markdown</li> </ul>

@jonthanﬁelding #FrontendTooling Iteration

@jonthanﬁelding #lwsanifont What is Iteration? • Every time we save
our code and view it in our browser we are creating an iteration of the site • We save, refresh our browser, go back to our editor

@jonthanﬁelding #lwsanifont What are iteration tools? • Tools that enable
us to quickly iterate by automating steps we need to take after each save

@jonthanﬁelding #lwsanifont What tools can I use for iterating Grunt
Bower

@jonthanﬁelding #lwsanifont Grunt

@jonthanﬁelding #lwsanifont What is Grunt? Grunt is a task runner
which enables us to automate tasks by deﬁning tasks it should run

@jonthanﬁelding #lwsanifont What tasks can Grunt run? • Compilation of
Abstractions • Unit Testing • Linting • Concatenation • Miniﬁcation • and many more

@jonthanﬁelding #lwsanifont Installing Grunt Grunt comes in two parts: Install
Command Line Tool Globally Install grunt locally

@jonthanfielding #lwsanifont Create a Gruntfile.js module.exports = function(grunt) { //Grunt
configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), }); };

@jonthanﬁelding #lwsanifont Setting up a task In the console

@jonthanfielding #lwsanifont Setting up a task In the Gruntfile.js grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), compass: { dev: { options: { sassDir: 'sass', cssDir: 'css', imagesDir: 'images', environment: 'development', httpGeneratedImagesPath: ' images' } } } }); Task Target

@jonthanﬁelding #lwsanifont Setting up a task In the Gruntﬁle.js grunt.loadNpmTasks(‘grunt-contrib-compass’);
grunt.registerTask('default', ['compass:dev']);

@jonthanﬁelding #lwsanifont Bower

@jonthanﬁelding #lwsanifont What is Bower? Bower is a package manager
that enables us to install dependencies

@jonthanﬁelding #lwsanifont Install Bower

@jonthanﬁelding #lwsanifont Install a package using Bower

@jonthanﬁelding #FrontendTooling Splitting out the tools into steps of our
workﬂow is great

@jonthanﬁelding #FrontendTooling But tools don’t always ﬁt into one part
of our process

@jonthanﬁelding #FrontendTooling Any questions?

@jonthanﬁelding #FrontendTooling Check out my new book • Learn how
to make your sites responsive • Chapter on development tools and workﬂow • http://bitly.com/NXusZn • Discount code: 30HT14

@jonthanﬁelding #lwsanifont Beamly is hiring • Looking for a Junior
Developer • Grab me if your interested

Tools and Workflow - London Web Standards

Tools and Workflow - London Web Standards

More Decks by Jonathan Fielding

Other Decks in Programming

Featured

Transcript