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

Modern UX Dev Tools

Ryan Joy
February 22, 2013

Modern UX Dev Tools

Ryan Joy

February 22, 2013
Tweet

More Decks by Ryan Joy

Other Decks in Technology

Transcript

  1. Who am I? Web developer / UX developer Developer Evangelist

    @ Microsoft Local meetup organizer. Come talk to me about Refresh Austin, Austin Windows App Developers, Austin Geek Lunch, Austin Web Design & Developer Meetup. Loves JavaScript Find me on Twitter at @atxryan or ryanjoy.com
  2. About this talk. • Rebecca Murphey gave an awesome talk

    at TXJS last year. This talk is inspired by her listing of the baseline skills she considers a part of modern JavaScript development. • PSA – TXJS tickets go on sale again today at 11am CT. • This talk is geared toward front-end developers looking to take their skills past simple jQuery plugins. You may be managing large projects, writing single page applications, or just want to level up.
  3. Git and Github You don’t have to use Git and

    GitHub for your personal projects, but you’d be remiss to not understand these things. Most open-source projects of interest make their home on Github. Cloning a repo to try it out should be second-nature to you.
  4. Git • Make sure you know how to create a

    new repo, clone, branch, and merge locally. • Next, look at collaboration workflow, pull requests, code reviews • Do you use SVN or something else at work? Try using git-svn on your own machines. • Create a Git repository for your code snippets, project folder, playground, etc.
  5. JavaScript You want to know: • prototypal inheritance, • closures

    & function scope, • MV* patterns You should understand • data structures like objects and arrays; functions • call and apply • You should understand patterns.
  6. Modularity • We don’t manage dependencies by adding one more

    script or style tag. • RequireJS lets you develop with small, modular JS and CSS files • It concatenates and minifies them via its optimization tool for production use. • Not convinced of modules? At least use tools like UglifyJS, Closure Compiler, or even YUI compressor that will minify your code, and then concatenate those minified files for production.
  7. CSS Preprocessing SASS, Stylus, Compass, and/or LESS These tools give

    you features like variables, math, logic, mixins and they can also help smooth over the CSS property prefix mess.
  8. Debugging Make sure you’re using and understand `console.log`, `console.dir`, the

    Network tab, Firebug, Internet Explorer dev tools, or Chrome dev tools. Learn how to set breakpoints & step debugging. Look at performance profilers and the DOM Inspector. Check out timelines.
  9. Templating Servers used to respond to XHRs with a snippet

    of HTML. Now we send JSON or other data. Or, we should. Client-side templating libraries let you maintain templates that, when mixed with some data model, turn into a string of HTML.
  10. Improve: Process automation Software developers have been using build tools

    and other process automation for a long time. Things like ant and make. You may have used rake on a Rails project. Take those skills into your front-end workflow!
  11. Dependency management • npm – Node Package Manager • brew

    – Homebrew on OS X • gem – Ruby gems on OS X • pip – Python Package Index • NuGet – Package manager within Visual Studio • Bower – Browser-based package manager from Twitter
  12. Testing • Force yourself to write tests – perhaps before

    you even write the code • It will help you organize your thinking and your code. • QUnit • Jasmine • Mocha • Selenium • JSHint <- integrates into your editor! • Testing is easy when your code is modular and loosely coupled. • Code that’s not well organized can be difficult or impossible to test.
  13. Frameworks • All this talk of plain vanilla JavaScript and

    using a module system doesn’t mean you shouldn’t use Frameworks. • They follow most of the tools and patterns we’ve talked about. At the very least, they’re a great learning tool! Whole package • BootStrap • Foundation HTML5 • HTML5 Boilerplate CSS • OOCSS • SMACSS JavaScript • Backbone • Ember.js • Angular • Knockout • …
  14. Command line A lot of the tools I mention use

    command line. Get used to it. ssh to log in to another machine or server ack or grep to find files in a project that contain a string or pattern git to do add, commit, status, and pull brew to use Homebrew to install packages npm to install Node packages gem to install Ruby packages If there are commands you use frequently, create an alias. Edit your .bashrc or .profile or .zshrc or .thingy
  15. Stay thirsty, my friend. • Rapid prototyping • Wireframing •

    Server-side frameworks and templating • Node.js • Compile to JavaScript languages like CoffeeScript or TypeScript • Importance of your IDE / text editor • Backups besides VCS • Other DVCS like Mercurial • Environment tools like virtualenv, nave, or Vagrant