Automate all the things

Automate All the Front-End Development Things!

Kitt Hodsden • http://ki.tt • @kitt

Kitt Hodsden • @kitt • http://ki.tt/cfo 2

Kitt Hodsden • @kitt • http://ki.tt/cfo

Who are you?

And what do have we here?

http://ki.tt/cfo

Wait... what?

What are we talking about?

Wait... what?

What are we talking about?

You are invited to participate in group note taking at:

http://ki.tt/cfo14notes

Community knowledge!

Prerequisites!

node & ruby

We need node and ruby to use the tools we’re going to talk about.

Setup node by downloading the installer and running it.

http://nodejs.org

# mac / linux$ which ruby/usr/local/bin/ruby$ ruby --version ruby 2.0.0p195

# windows> where rubyC:\Ruby200\bin\ruby.exe> ruby --versionruby 2.0.0p451

Yay! Sass installed!See if you already have ruby installed

HOMEBREWhttp://mxcl.github.com/homebrew/$ brew install ruby

RVM RUBY VERSION MANAGERhttps://rvm.io/rvm/install

Install ruby in different ways on OSX

HOMEBREWhttp://mxcl.github.com/homebrew/$ brew install ruby

Install ruby in different ways on OSX

https://unfiniti.com/software/mac/jewelrybox

Ruby on OSX, I recommend JewelryBox, too.

APT / YUM$ sudo apt-get install ruby1.9.1$ sudo yum install ruby1.9.1

Install ruby in different ways on Linux

APT / YUM$ sudo apt-get install ruby1.9.1$ sudo yum install ruby1.9.1

Install ruby in different ways on Linux

RUBYINSTALLERhttp://rubyinstaller.org/downloads/

PIKhttps://github.com/vertiginous/pik

Install ruby in different ways on Windows

Windows

RUBYINSTALLERhttp://rubyinstaller.org/downloads/

PIKhttps://github.com/vertiginous/pik

Install ruby in different ways on Windows

Windows

CYGWINhttp://cygwin.com

http://ki.tt/cfo

Automate All the Front-End Development Things!

Make your Front-End Workflow AWESOME

1. Embrace the DRY principle

Guiding principles of making our workflows AWESOME

1. Embrace the DRY principle2. Make changes easy

1. Embrace the DRY principle2. Make changes easy3. Make finding mistakes easy

Implement a design or prototype

What magic do we do?

Implement a design or prototypeUpdate the designs

Implement a design or prototypeUpdate the designsMake sure it works in all browsers

Implement a design or prototypeUpdate the designsMake sure it works in all browsersMake it faster

We’re MAGICAL

How often do we have a blank slate, really?

change.click.

change.click.change.

click.change.

click.

change.click.

change.click. change.

click.change.

click.

change.click.

change.click.change.

click.change.

click.

Guiding principles!

LiveReload

http://livereload.com/

http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

http://ki.tt/LR

http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

http://ki.tt/LR

If you don’t use browser plugins, you need this JS for LiveReload

<cfoutput><script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script></cfoutput>

If you don’t use browser plugins, you need this JS for LiveReload

IE options

http://github.com/dvdotsenko/livereload_ie_extension

http://reloadit.codeplex.com/

LiveReload IE options

Guiding principles!

browser-sync

http://browsersync.io/

http://ki.tt/cfo

Node Package Manager for installng node packages

Open a new terminal or command window

In OSX, drag and drop the folder into the terminal window for the path.

In Windows, use right click cut and paste

// save this into run-server.jsvar connect = require('connect');connect.createServer( connect.static(__dirname)).listen(8080);

If you don’t have a local development environment, use this run-server.js

$ npm install connect...$ node run-server.js

# open http://localhost:8080/index.html# control-c to stop

If you don’t have a local development environment, install the connect package

> npm install connect...> node run-server.js

# open http://127.0.0.1:8080/index.html# control-c to stop

If you don’t have a local development environment on Windows, install the connect package

You can accept this local JS file running on node, turn it off later!

http://localhost:8080/index.html

http://127.0.0.1:8080/index.html

You can see the temporary site running locally!

browser-sync

http://browsersync.io/

$ npm install -g browser-sync

$ browser-sync$

$ browser-sync start --server --files "css/*.css"

bs-config.js

$ browser-sync init[BS] Config file created (bs-config.js)[BS] To use it, in the same directory run: browser-sync$

module.exports = { files: "css/*.css", proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true,};

https://github.com/shakyShane/browser-sync/wiki/options

module.exports = { files: "css/*.css", proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true,};

module.exports = { files: ["css/*.css", "**.*.html", "js/**/*.js"], proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true,};

$ browser-sync start

$ browser-sync start[BS] Copy the following snippet into your website, just before the closing </body> tag

[BS] Watching files...

MAGICAL

click.copy.scroll.click.paste.

Alfredhttp://alfredapp.com/

Quicksilverhttp://qsapp.com/

Launchbarhttp://www.obdev.at/products/launchbar/

Skylighthttp://www.candylabs.com/skylight

Launchyhttp://www.launchy.net/http://pylaunchy.sourceforge.net/docs/

Gnome Launch Boxhttps://live.gnome.org/

Gnome Dohttp://do.davebsd.com/

Launchyhttp://www.launchy.net/http://pylaunchy.sourceforge.net/

Alfred looking up jQuery.

Dash has a large number of document sets

Naïve way to open all the browsers at once

https://github.com/zenorocha/alfred-workflows/

https://github.com/aiyodk/Alfred-Extensions/tree/master/AlfredApp_2.x

https://github.com/willfarrell/alfred-workflows

Alfred Workflows

Can you feel the awesome?

Awwwwwwwww yissssssssssssssssssss!

$ npm install -g grunt-cli

Install the grunt package

Windows users, use PowerShell

$ npm install -g grunt-init

$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

$ grunt-init gruntfile

Download the grunt template files and generate the grunt config files ...

Or just download them.http://ki.tt/fgrf

package.jsonGruntfile.js

The two files grunt uses

{ "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.7.2", "grunt-contrib-watch": "~0.5.3", }}

This is what a package.json file looks like

$ npm install

With a package.json file, you can install the needed packages easily.

1. Watch for file changes2. Refresh the browser on change

What we want grunt to do.

module.exports = function(grunt) {

// Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });

// Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify');

// Default task(s). grunt.registerTask('default', ['uglify']);

A basic Gruntfile.js file

browser-sync

1. Find grunt plugin*2. Install with npm install --save-dev3. Add the task to our Gruntfile.js file4. Add the tasks to a command5. Run the command...7. Profit!

*write if you need to

How to add a task to grunt

http://npmjs.org

Where to find node and grunt packages

“grunt browser-sync”

What I searched for on npmjs.org

THIS IS OKAY.

Check for current state before downloading.

$ npm install grunt-browser-sync --save-dev

Installing the browser-sync grunt package

$ lsGemfile!! README.txt fonts node_modules template.phpGemfile.lock bs-config.js images package.json templatesGruntfile.js config.rb js screenshot.png theme.infoGuardfile! css logo.png scss widgets

"grunt-browser-sync": "~0.7.0"

browserSync: { bsFiles: { src: [ 'css/*.css', 'img/*', 'js/*.js', '*.html' ] }, options: { watchTask: true, proxy: { host: "localhost", port: 8082 }, server: false, } },

watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, scss: { files: ['scss/*.scss'], tasks: ['sass:dev'] }, js: { // watch for js changes except for script.min.js files: ['js/*.js', '!js/script.min.js'], tasks: ['uglify:dev'] } }

grunt.loadNpmTasks('grunt-browser-sync');

grunt.registerTask('default', ['browserSync', ‘watch’]);

grunt.registerTask('gogogo', ['browserSync', 'watch']);

$ grunt gogogo

Running the newly defined “gogogo” command

modern.ie

Javascript?

1. Find grunt plugin*2. Install with npm install --save-dev3. Add the task to our Gruntfile.js file4. Add the tasks to a command5. Run the command...7. Profit!

*write if you need to

$ npm install matchdep --save-dev

Installing the browser-sync grunt package

// load all the grunt modules instead of one each linerequire("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

grunt.registerTask('checkjs', ['jshint']);grunt.registerTask('watchjs', ['jshint', 'watch']);grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

jshint

npm install grunt-contrib-jshint --save-dev

Use jshint when editing your Gruntfile.js

https://github.com/gruntjs/grunt-contrib-jshint

jshint: { options: { ... }, gruntfile: { src: ‘Gruntfile.js’ }}

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.registerTask('checkjs', ['jshint']);grunt.registerTask('watchjs', ['jshint', 'watch']);grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

npm install grunt-contrib-qunit --save-dev

Javascript unit tests

https://github.com/gruntjs/grunt-contrib-qunit

npm install grunt-contrib-jasmine --save-dev

https://github.com/gruntjs/grunt-contrib-jasmine

npm install grunt-simple-mocha --save-dev

https://github.com/yaymukund/grunt-simple-mocha

1. Reduce file sizes2. Reduce the number of files3. Reduce content rendering time

Images

npm install grunt-contrib-imagemin --save-dev

Make pages load faster by reducing image sizes

imagemin: { prod: { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] }}

npm install grunt-svgmin --save-dev

Reduce SVG sizes, too

grunt.initConfig({ svgmin: { // Task options: { // Configuration that will be passed directly to SVGO plugins: [ { removeViewBox: false }, { removeUselessStrokeAndFill: false } ] }, dist: { // Target files: [{ // Dictionary of files expand: true, // Enable dynamic expansion. cwd: 'img/src', // Src matches are relative to this path. src: ['**/*.svg'], // Actual pattern(s) to match. dest: 'img/', // Destination path prefix. ext: '.min.svg' // Dest filepaths will have this extension. // ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg }] }});

grunt.loadNpmTasks('grunt-svgmin');grunt.registerTask('default', ['svgmin']);

Sample grunt-svgmin configuration

npm install grunt-responsive-images --save-dev

Responsive images by resizing

https://github.com/andismith/grunt-responsive-images

grunt.initConfig({ responsive_images: { myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'resize/{%= width %}/' }] } },});

Sample grunt-responsive-images configuration

npm install grunt-grunticon --save-dev

SVG with PNG fallbacks

https://github.com/filamentgroup/grunticon

Non-images

npm install grunt-contrib-cssmin --save-dev

Minimize CSS files

npm install grunt-csscss --save-dev

Minimize CSS files

npm install grunt-contrib-uglify --save-dev

Minimize javascript files

Sprites!

Making things easier with sprites!

WHOO!159

Creating them is EASY!

npm install grunt-montage --save-dev

Sprite your images

Change the font BLUE

Easiest change ever!

#6c869d ⇒ #212939

Easiest change ever!

Well, phooey. The ticket was reopened.

Soon, EVERYTHING is important!

Guiding principles!

Use a CSS preprocessor.

Saw that coming, didn’t you?

Sass / LESS / Stylus

Saw that coming, didn’t you?

Quick Check!

Did you go to Andy Matthews Sass session?

Are we passing GO?Are we collecting $200?

Sass ⟳ CSS

Getting started with Sass

Install it.

$ gem update --system$ gem install sass

$ sudo gem update --system$ sudo gem install sass

Yay! Sass installed!

COMPASS

Install Compass, too

http://compass-style.org/install/

$ gem update --system$ gem install compass

$ sudo gem update --system$ sudo gem install compass

Setting up tools. In this case, Compass.

CSS ⇒ Sass

Let us count the (3) ways.

How we get started with Sass in an existing project.

Move and rename files.

$ mkdir scss$ mv css/styles.css scss/styles.scss

Use sass-convert

$ sass-convert --helpUsage: sass-convert [options] [INPUT] [OUTPUT] $$ cd theme-dir$ sass-convert --recursive --from=css --to=scss css scss

Use http://css2sass.heroku.com

$variables

Quick! Sass in 5 slides!

$variable: value;

Before variables...

dev[405]% grep background-color * style.css: background-color: #edf5fa;style.css: background-color: #ddecf5;style.css: background-color: #e6f1f7;style.css: background-color: #d4e7f3;style.css: background-color: #edf5fa;style.css: background-color: #fcfce8;style.css: background-color: #fcf9e5;style.css: background-color: #fbf5cf;style.css: background-color: #fefefe;style.css: background-color: #f5f5f5;style.css: background-color: #fdf5e6;style.css: background-color: #fdf2de;style.css: background-color: #fbe4e4;style.css: background-color: #fbdbdb;style.css: background-color: #ffcccc;style.css: background-color: #ffffdd;style.css: background-color: #ddffdd;

Before variables...

$color-main: rgb(255,251,114);$color-second: rgb(70,87,204);$color-hilite: rgb(189,177,255);

.button { background-color: $color-main; ...}

See? Easy!

$font-times: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

$font-garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

Uses of variables: fonts

http://css-tricks.com/snippets/css/font-stacks/

$color-main: #ff0000;$border-main: 2px solid $color-main;.multivalue-example { border-top: $border-main;}

# compiles to.multivalue-example { border-top: 2px solid red;}

See? Easy!

Variable name best practice.

$ourBlue : #1f4363;$ourBlueLight : #355673;$ourBlueLighter : #6c869d;$ourBlueDark : #0e2c47;$ourBlueDarker : #212939;$ourBlueHover : #7e99b3;

$color_border $ourBlue;$color_link: $ourBlue;$table_header: $ourBlueLighter;

Use descriptive AND functional variable names

http://sachagreif.com/sass-color-variables

Nested syntax

.navigation {

display: block; padding: .5em; color: $color-link; border: none; } b {

font-size: .9em; } span { display: block; font-size: .8em; }

.navigation a {

display: block;

padding: .5em;

color: #444040;

border: none;

.navigation b {

font-size: .9em;

.navigation span {

display: block;

font-size: .8em;

Sass syntax, talking nesting

.navigation {

display: block; padding: .5em; &:hover {

color: $color-link; border: none; } } &>.first { padding-left: 0; }}

Sass syntax, talking nesting

@extend

Sass syntax, talking @extend

.box { padding: 2em; color: $color-text; background-color: $color-bg;}

.box-warning { @extend .box; border: 2px dotted $color-yikes;}

.box-success { @extend .box; border: 2px dotted $color-success;}

.box-info { @extend .box; border: 2px dotted $color-info;}

.box, .box-warning, .box-success, .box-info { padding: 2em; color: #333333; background-color: white;}

.box-warning { border: 2px dotted #cc0000;}

.box-success{ border: 2px dotted #33cc00;}

.box-info { border: 2px dotted #996633;}

@mixin@include

Sass syntax, @mixin

@mixin module($parent-color) { color: darken($parent-color, 50%); }

.main_module { @include module(#ccc); min-height: 3em;}

.sidebar_module { @include module(#444); min-height: 2em;}

When you can, use a Compass mixin.

Sass syntax, @mixin

@import "compass/css3/box-sizing";* { @include box-sizing(border-box); }

http://compass-style.org/reference/compass/css3/box_sizing/

@mixin vs @extend

Sass Overview

You’re awesome.

_partials.scss

Sass syntax, @mixin

@import "vars";@import "mixins";@import "layouts/*";

@if/@else

@functions (return a single value)

Media Queriesmade EASY

@mixin bp($point) { $bp-mobile: "(max-width: 600px)"; $bp-notso: "(max-width: 1250px)"; $bp-fullon: "(max-width: 1600px)";

@if $point == mq-fullon { @media #{$bp-fullon} { @content; } } @else if $point == mq-notso { @media #{$bp-notso} { @content; } } @else if $point == mq-mobile { @media #{$bp-mobile} { @content; } }}

h1 { font-size: 20px; font-family: $font-main; @include bp(mq-notso) { font-size: 30px; } @include bp(mq-fullon) { font-size: 60px; }}

h1 { font-size: 20px;}@media (max-width: 1250px) { h1 { font-size: 30px; }}@media (max-width: 1600px) { h1 { font-size: 60px; }}

Guiding principles!

More Information.

Sass for DesignersPragmatic Guide To Sass

Sass and Compass in Action

sass --watch --line-numbers --style expanded scss:css

Compass has its config.rb

compass config config.rb --sass-dir=scss \--css-dir=css --javascripts-dir=js \--output-style=expanded

How to create a compass conifig.rb file

$ compass watch

https://incident57.com/codekit/

http://compass.kkbox.com/

http://koala-app.com/

https://github.com/vladikoff/grunt-devtools

1. Watch for file changes2. Compile our Sass to CSS3. Refresh the browser on change

What we want grunt to do.

npm install grunt-contrib-compass --save-dev

Installing the compass compiling node package

grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } }});

grunt.initConfig({ watch: { scss: { files: ['**/*.scss'], tasks: ['compass'] } }, compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, }});

compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }

grunt.loadNpmTasks('grunt-contrib-compass');

grunt.registerTask('default', ['compass:dev', ‘watch’]);

@import "compass/utilities/sprites";

$sprites-spacing: 20px;@import “../img/sprites/*png”;

Creating sprite images with Compass

$orange-spacing: 20px;@import “../img/orange/*png”;

Sprite names are dependent on your directory name

$awesome-spacing: 20px;@import “../img/awesome/*png”;

Sprite names are dependent on your directory name

Using generated sprites

.footer-follow-us{ .twitter { @include awesome-sprite(follow-us-twitter); } .facebook { @include awesome-sprite(follow-us-fb); } .google { @include awesome-sprite(follow-us-google); } .pinterest { @include awesome-sprite(follow-us-pins); }}

.awesome-sprite,

.footer-follow-us .twitter,

.footer-follow-us .facebook,

.footer-follow-us .google,

.footer-follow-us .pinterest { background: url('../images/awesome-s34fe0604ab.png') no-repeat; }

.footer-follow-us .twitter { background-position: 0 -96px; }

.footer-follow-us .facebook { background-position: 0 0; }

.footer-follow-us .google { background-position: 0 -32px; }

.footer-follow-us .pinterest { background-position: 0 -64px; }

How do we check these?

Source Maps

http://code.tutsplus.com/tutorials/developing-with-sass-and-chrome-devtools--net-32805

Generating

sass --compass --sourcemap --watch scss:css

compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded', sourcemap: true } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }

Don’t deploy to production!

This works in > Firefox 29, right click to show CSS

Don’t nest more than 3 deep

http://css-tricks.com/sass-style-guide/

Avoid using tag selectorsUse class selectors if you can.

https://developers.google.com/speed/docs/best-practices/rendering

Regression testing

PhantomCSS

npm install grunt-phantomcss --save-dev

install details at

https://www.npmjs.org/package/grunt-phantomcss

phantomcss: { desktop: { options: { screenshots: 'test/visual/desktop/', results: 'results/visual/desktop', viewportSize: [1024, 768] }, src: [ 'test/visual/**.js' ] }, mobile: { options: { screenshots: 'test/visual/mobile/', results: 'results/visual/mobile', viewportSize: [320, 480] }, src: [ 'test/visual/**.js' ] } }

phantomcss grunt task

casper.start('http://cfobj.localhost:8082/').then(function() { phantomcss.screenshot('#region-branding', 'region-branding');}).then( function now_check_the_screenshots(){ phantomCSS.compareAll();});

phantomcss website flow

Seeing failures

http://tldr.huddle.com/blog/css-testing/

Triggering tests

git pre-commit hook

svn works, too!

Vagrant

Say Goodbye to “It works on my machine” with Chef

and Vagrant.Curt Gratz, 3pm this room

From the beginning!

Faster HTML

http://docs.emmet.io/

div#banner>div.logo+ul#navigation>li*4>a

http://www.thoughtdelimited.org/thoughts/post.cfm/zen-coding-a-faster-way-to-write-html-and-tag-based-cfml-in-cfbuilder-cfeclipse

http://ki.tt/cfoem

http://www.thoughtdelimited.org/thoughts/post.cfm/zen-coding-a-faster-way-to-write-html-and-tag-based-cfml-in-cfbuilder-cfeclipse

http://yeoman.io

Yeoman

npm install -g yo

Installing yeoman globally

# use a generator $ yo webapp

# start the server$ grunt server

# run tests$ grunt test

# run default$ grunt

# download new generator$ npm install generator-gruntplugin

# run the generator$ yo gruntplugin

# download new generator$ npm install generator-gruntfile

# run the generator$ yo gruntfile

Lots of generators available

http://yeoman.io/official-generators.html

# download new generator$ npm install generator-generator

# create the directory$ mkdir generator-bigred && cd $_

# run the generator$ yo generator

http://yeoman.io/generators.html#writing-your-first-generator

http://ki.tt/yog

Wow, that was fast.

I skipped over

BundlerManaging what ruby gems you have installed

http://bundler.io/

Creating your own Grunt tasks http://gruntjs.com/creating-tasks

Bowerhttp://bower.io/

Questions?

Thanks!

You’re awesome!

Automate all the things

Software

Transcript of Automate all the things

W T GOSPEL MEANS TO YOU - CalvaryCCH · 2017-12-08 · in the truth; 7 (jesus) bears all things, (jesus) believes all things, (jesus) hopes all things, (jesus) endures all things.

DF2UFL 2012: Top 10 Things to Automate

One Algorithm to Rule Them All: How to Automate Statistical Computation

Completely Automate All Business Process of Your Travel Enterprise !

Capistrano - automate all the things

Automate, Automate, Automate - Bridging the Gap Between Capture and Process

Love bears all things, believes all things, hopes all ...

CK 10 - Automate all the things 2.0

SWIFT Webinar Automate Universal Confirmations for all ...

All Things Trinity, All Things Conservation

Automate All the Things with Grunt

LOW BUDGET TIME LAPSE CAMERA - … · AUTOMATE BUTTON PRESS To automate the picture taking process, a simple 555 or transistor based circuit is enough. However, if more complex things

int communication 2 - ALL THINGS ASD - All Things ASD

CHARACTERISTICS OF LIFE All Living Things reproduce!!! All Living Things Have DNA!!!

All Things to All Men

How DevOps Can Boost Productivity - SUSECON · • Get things done (Agile and/or Lean) • Automate all the things! • Continuous delivery – 10 deployments per day should not be

Automate all the things - Sebastian Feldmann · Ansible Modules • Package management (apt, yum…) • Command execution (command, shell) • Service management (start, stop…)

Automate All AWS Things.key

All Things Electronic

SYSTEM OVERVIEW - Human Resources Management …AUTOMATE ALL OF YOUR HR-RELATED ACTIVITIES SYSTEM OVERVIEW MANAGE, MAINTAIN, COMMUNICATE AND AUTOMATE ALL OF YOUR HR-RELATED ACTIVITIES.