Save 37% off PRO during our Black Friday Sale! »

What Zelda Taught Me about Front End Engineering

911466eedb687b909f7e66816223ceb2?s=47 Matt Steele
December 06, 2012

What Zelda Taught Me about Front End Engineering

Writing good JavaScript is hard. You're locked in a neverending battle against browser quirks and copy/pasted spaghetti code.

Know what else is hard? The Legend of Zelda.

The similarities run deeper than you'd think.

Video: https://vimeo.com/54993676

911466eedb687b909f7e66816223ceb2?s=128

Matt Steele

December 06, 2012
Tweet

Transcript

  1. Treating JavaScript Like a Real Language Or: What Zelda taught

    me about Front End Engineering
  2. Matt Steele •@mattdsteele •http://matthew-steele.com

  3. JavaScript is Fraught With Peril

  4. Anti-Patterns Everywhere

  5. None
  6. The browser is the most hostile software engineering environment imaginable.

    - Douglas Crockford
  7. None
  8. Its famous difficulty demanded so much, not just from my

    hands but from my entire ragged nervous system, even from my temper, my character. It never explained itself and so conjured, via ingenious online components, a community as helpful and treacherous as any group of humans. Tevis Thompson http://tevisthompson.com/saving-zelda/
  9. None
  10. None
  11. None
  12. To win at JavaScript, we have to treat it like

    a real language.
  13. Learn the language Use appropriate tooling Unit test Use build

    tools
  14. None
  15. Learn the Language

  16. “JavaScript is the only language that I’m aware of that

    people feel they don’t need to learn before they start using it.” Douglas Crockford
  17. None
  18. None
  19. js-assessment

  20. None
  21. Code Katas

  22. None
  23. Tools

  24. None
  25. As an engineer, there is a short list of tools

    that you must be rabid about. Rabid. Foaming at the mouth crazy. Rands http://www.randsinrepose.com/archives/2009/11/02/ the_foamy_rules_for_rabid_tools.html
  26. Learn your editor

  27. None
  28. Emmet (zen coding)

  29. Arguments over style are pointless. There should be a style

    guide, and you should follow it. Rebecca Murphy https://github.com/rwldrn/idiomatic.js/
  30. “use strict”;

  31. ;

  32. jsHint Your First Unit Test

  33. None
  34. http://nicknisi.com/blog/blog/2012/11/12/lint-javascript-on-commit/

  35. Watch other people’s workflow

  36. None
  37. Testing

  38. None
  39. ⌘+R

  40. Lincoln

  41. Omaha

  42. Jasmine

  43. None
  44. None
  45. None
  46. Use a Build Tool

  47. •Run tests •Apply linting •Concatenate & Minify •Compile •Remove debugging

    statements •Precompile templates
  48. http://gruntjs.com/

  49. •CSS linting •Compress images •auto-watching •Create documentation •Download & maintain

    dependencies
  50. http://yeoman.io/

  51. http://jenkins-ci.org Continuous Integration

  52. None
  53. CoffeeScript