Front End Dev Tech

Summary

Working on the web front end may leave you reeling with the panoply of available technologies. The truth is there are many great frameworks out there and it's an incredibly exciting time to be working with the web. Choice is a good thing. Here's my selection.

Lists!

This list is organic and inevitably changes over time, where time greater than 45 seconds.

Not everything is linked, somewhat arbitrarily.

JavaScript

  • React
  • ClojureScript / Om
  • elm-lang - "the best of functional programming in your browser"
  • Typescript
  • Facebook Flow
  • Require
  • Backbone
  • jshint, eslint, csslint
  • Grunt, Gulp
  • Flux
  • D3.js
  • three.js
  • Phaser
  • Lo-Dash
  • DOJO Toolkit
  • npm
  • WebPack, Browserify, Broccoli

CSS

  • BEM, SMACSS, OOCSS - these things will save your css from turning into a spaghetti nightmare.
  • less, sass/scss - in the wrong hands, these will turn your css into a spaghetti nightmare. I've seen it happen first hand.
  • Normalize
  • Pure CSS
  • Bootstrap
  • Zurb Foundation

Mobile / Cross Platform

Editors

  • Intellij IDEA Ultimate / Webstorm

    Jetbrains really understand developers and IDEs. The tools they provide are excellent. I found however that I was hitting bugs and performance issues at times, so I moved on to Emacs, somewhat randomly.

  • Emacs [free]

    Emacs does everything, quite well. The benefits of swooping from your console, to your build log output to a project file with simple keystrokes cannot be underestimated. Emacs is a joy to use, after you figure out how to set it up to be a joy to use :-)

  • Visual Studio Code [free]

    I've used this extensively and for some jobs it beats out Emacs. The real killer applications for VSCode for me have been, typescript development. NodeJS debugging. PlantUML diagram generation. Converting markdown to PDF using github stylesheets. Authoring markdown documents.

  • ATOM.io [free]

  • Brackets [free]

    I love the Quick Edit feature it provides. Very slick when you're working with an ideal project structure.

  • Light Table [free]

    Buggy on windows, but has some killer features for JS developers, such as live variable watches.

Testing

  • Selenium WebDriver
  • webdriverio - node.js bindings for webdriver
  • phantomjs - not just good for testing, but also for automation, screenshots, scraping.
  • BrowserStack - Great because you can push your selenium scripts and run your automated tests on multiple browsers all at once.
  • DOH Robot - unparalleled ui testing tool, in particular when testing mouse interactions.