$30 off During Our Annual Pro Sale. View Details »

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

More Decks by Karolina Szczur

Other Decks in Programming



  2. We have a plethora of tools that are bound to

    make our lives easier and tasks completed faster.
  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

  5. We live in superabundance of information and the most crucial

    skill isn’t multi-tasking but single-threading our attention.
  6. The strive for simplicity is superficial.

  7. “Complexity is a fact of the world, simplicity is in

    the mind.” “Living with Complexity”—Don Norman

    inherent amount of irreducible complexity. The only question is who will have to deal with it.

  10. We need to automate tasks to stay productive and focus

    on problem-solving that simply cannot be delegated.
  11. AUTOPREFIXER postcss/autoprefixer Worry-free vendor prefixing.

  12. LINTING csslint/csslint Checking for bad patterns

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

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

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

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

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

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

  19. GUIs FOR AUTOMATION Hammer for Mac CodeKit Livereload

  20. NPM

  21. npm provides a native ecosystem for task automation.

  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—
  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/" }
  24. bit.ly/leveldb-example bit.ly/npm-task-automation

  25. GULP & GRUNT

  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’)); });
  27. MAKE

  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
  29. bit.ly/building-static


  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.
  32. Every single person joins a team with their own set

    of biases, predispositions and preferences.
  33. “Knowledge makes everything simpler.” “Living with Complexity”—Don Norman

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

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

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

    impossible to achieve.
  37. It’s relatively easy to build overcomplicated solutions but it’s hard

    to maintain them.
  38. It’s easy to introduce unnecessary complexity by adding tools that

    manage other tools.
  39. “brew install python easyinstall pip install bower install npm install

    -g fuck-you” @lewiscowper
  40. The right set of tools or lack thereof sets apart

    a craftsman from an operator.
  41. None