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.

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