Upgrade to Pro — share decks privately, control downloads, hide ads and more …

No More Tools

No More Tools

As creatives we constantly search for ways to optimise and streamline workflows. Currently we’re being bombarded with more tools than ever. But how do we know that we reached a tipping point, when the apparatus we pick introduces more complexity and wastes way more time that it was supposed to save? As craftspeople, how do we maintain simplicity and learn to rely on bare-bones solutions? We’ll have a look at up-to-date front-end tooling and analyse alternative approaches to compiling, building and automation processes.

Karolina Szczur

November 19, 2014
Tweet

More Decks by Karolina Szczur

Other Decks in Programming

Transcript

  1. NO MORE TOOLS

    View Slide

  2. We have a plethora of tools that are
    bound to make our lives easier and
    tasks completed faster.

    View Slide

  3. “Creatives aren’t good at their art
    because of their tools; their talent
    stems from the skills and knowledge
    they’ve acquired while using their tools.”
    “The Good Creative”—Paul Jarvis

    View Slide

  4. SIMPLICITY

    View Slide

  5. We live in superabundance of information and
    the most crucial skill isn’t multi-tasking but
    single-threading our attention.

    View Slide

  6. The strive for simplicity is superficial.

    View Slide

  7. “Complexity is a fact of the
    world, simplicity is in the mind.”
    “Living with Complexity”—Don Norman

    View Slide

  8. TESLER’S LAW OF
    CONSERVATION OF SIMPLICITY
    Every application has an inherent amount of
    irreducible complexity. The only question is
    who will have to deal with it.

    View Slide

  9. AUTOMATION

    View Slide

  10. We need to automate tasks to stay productive
    and focus on problem-solving that simply
    cannot be delegated.

    View Slide

  11. AUTOPREFIXER
    postcss/autoprefixer
    Worry-free vendor prefixing.

    View Slide

  12. LINTING
    csslint/csslint
    Checking for bad patterns

    View Slide

  13. MEDIA OPTIMISATION
    jamiemason/imageoptim-cli
    svg/svgo
    addyosmani/tmi
    Strip unnecessary bytes

    View Slide

  14. MINIFICATION
    jakubpawlowicz/clean-css
    jbleuzen/node-cssmin
    Strip unnecessary characters

    View Slide

  15. CODE BLOAT
    giakki/uncss
    geuis/helium-css
    Search and remove unused declarations

    View Slide

  16. TESTING PERFORMANCE
    zeman/perfmap
    adyedinborough/stress-css
    Find specific elements hindering performance

    View Slide

  17. TESTING PERFORMANCE
    YSlow, Chrome Developer Tools Audit, Google
    Page Speed

    View Slide

  18. DEBUGGING LAYOUT ISSUES
    pesticide.io
    Find problems with the box model

    View Slide

  19. GUIs FOR AUTOMATION
    Hammer for Mac
    CodeKit
    Livereload

    View Slide

  20. NPM

    View Slide

  21. npm provides a native ecosystem for
    task automation.

    View Slide

  22. “The current support in npm for front-
    end packaging isn’t good enough. npm
    loves you, front-enders, and we care
    about your use cases.”
    Npm and front-end packaging—

    View Slide

  23. `
    `
    "scripts": {
    "start": "npm run watch-styles & npm run watch-
    jade & npm run server",
    "watch-styles": "stylus -w ./assets/styl/ -o ./
    assets/ static/css/",
    "watch-jade": "jade --watch ./assets/jade/
    index.jade --out ./assets/static/"
    }

    View Slide

  24. bit.ly/leveldb-example
    bit.ly/npm-task-automation

    View Slide

  25. GULP & GRUNT

    View Slide

  26. `
    `
    var gulp = require(‘gulp’);
    var jshint = require(‘gulp-jshint’);
    gulp.taks(‘test’, function() {
    return gulp
    .src(‘./sample.js’)
    .pipe(jshint())
    .pipe(jshint.reporter(‘jshint-stylish’));
    });

    View Slide

  27. MAKE

    View Slide

  28. `
    `
    build: all
    all: index.html public/css/main.min.css
    public/css/main.min.css: public/css/main.css
    cssmin public/css/main.css > public/css/main.min.css
    public/css/main.css: public/styl/main.styl $(STYLUS_FILES)
    stylus -u ./ public/styl/main.styl -u autoprefixer-stylus
    -o public/css

    View Slide

  29. bit.ly/building-static

    View Slide

  30. COLLABORATION

    View Slide

  31. Technology is a mean to an end but it will fail
    miserably if people can’t work together, feel
    empowered to contribute and grow.

    View Slide

  32. Every single person joins a team with their own
    set of biases, predispositions and preferences.

    View Slide

  33. “Knowledge makes everything simpler.”
    “Living with Complexity”—Don Norman

    View Slide

  34. Breaking down data in modules makes it
    more digestible and controllable.

    View Slide

  35. Good tools, especially command line
    based, don’t fail nor succeed silently.

    View Slide

  36. The aim to build bullet-proof software is
    profound but almost impossible to achieve.

    View Slide

  37. It’s relatively easy to build
    overcomplicated solutions but it’s hard to
    maintain them.

    View Slide

  38. It’s easy to introduce unnecessary
    complexity by adding tools that manage
    other tools.

    View Slide

  39. “brew install python easyinstall pip install
    bower install npm install -g fuck-you”
    @lewiscowper

    View Slide

  40. The right set of tools or lack thereof sets
    apart a craftsman from an operator.

    View Slide

  41. View Slide

  42. THANK YOU

    View Slide