Tag: debugging

OSX Frontend Toolchain

by on Jan.30, 2013, under Dev

I’m currently in the middle of inventorying my machine so I can retire the time machine image that has spanned far too many years and far too many machines. Rather than stuffing this in Evernote to be used once I figured I’d post this to the community.

What other frontend tools are missing? Which ones have better alternatives?


Editors

  • SublimeText 2

    Common plugins include:

    • Package Control – Allows all other plugins to be installed
    • BracketHighlighter
    • Git
    • Handlebars.tmBundle
    • JsFormat
    • JsHint
    • PrettyJSON
    • Stylus
    • SublimeSaveOnBuild
    • TrailingSpaces

    Useful config options:

    {
      "bold_folder_labels": true,
      "draw_white_space": "all",
      "ensure_newline_at_eof_on_save": true,
      "file_exclude_patterns":
      [
        "*.tmproj",
        "*.sublime-workspace",
        "*.class",
        ".DS_Store"
      ],
      "folder_exclude_patterns":
      [
        ".svn",
        ".git",
        ".hg",
        "CVS",
        "node_modules"
      ],
      "highlight_line": true,
      "highlight_modified_tabs": true,
      "rulers":
      [
        100
      ],
      "tab_size": 2,
      "translate_tabs_to_spaces": true
    }
    

SCM

  • Git Command Line

    Your mileage may vary but by far the strongest git client out there.

    Most common git commands

    • git checkout -b $newBranchName
    • git stash
    • git pull --rebase (Warn do not do after a branch merge)

    Ensure that your version of git has completions enabled (this might require manual installation)

    Customizing your bash prompt for git status is also very helpful:

    This script whose origin has been lost will output the current branch and change status in your bash profile.

    function parse_git_branch {
      git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
    }
    function last_two_dirs {
      pwd |rev| awk -F / '{print $1,$2}' | rev | sed s_\ _/_
    }
    
    c_cyan=`tput setaf 6`
    c_red=`tput setaf 1`
    c_green=`tput setaf 2`
    c_sgr0=`tput sgr0`
    
    function proml {
      PS1='\h:$(last_two_dirs)\[$(branch_color)\]$(parse_git_branch)\[${c_sgr0}\] \u\$ '
    }
    function branch_color() {
      if git rev-parse --git-dir >/dev/null 2>&1
      then
        color=""
        git diff --quiet 2>/dev/null >&2
        if [[ $? -eq 0 ]]
        then
          color=${c_cyan}
        else
          color=${c_red}
        fi
      else
        return 0
      fi
      echo -ne $color
    }
    
    proml
        
  • Gitx

    GUI frontend on various commit related git operations. The staging view is very valuable for doing interactive commits and self-code review at commit time.

  • SourceTree

    General git repository viewer. Helpful for viewing stashed changes that may have accumulated on your local tree.

  • git-extras

    A collection of useful tools for doing higher level git commands such as delete-branch. When installing make sure that the command line tab completion tools to no error out as these are very helpful.

Debugging and Optimizing

  • Charles

    HTTP proxy and debugger with easy to use interface.

  • xScope

    Inspect/measure mocks and final rendered pages.

  • Gradient Scanner

    (Shameless plug) Extract CSS gradients from flatted mock images.

  • ImageAlpha/ImageOptim

    Image optimization tools. Performs both lossless and lossy compression of image assets.

Documents

  • Dropbox

    Easy way to backup remotely and share content across the team.

  • Evernote

    Free notetaking service.

  • MS Office

    Because somethings you can’t escape.

  • MS Remote Desktop Client

    Again somethings you can not escape.

Communication

  • Adium

    Chat over many protocols. Most common among the team are GTalk and AIM.

  • Propane

    Team chat. Setup growl notifications and stay connected.

  • Skype

    Sometimes you need to use your voice. Horrible at IM.

  • ScreenFlow

    Generate screen casts for sharing content with coworkers or debugging transient behaviors.

System

  • Alfred

    Search-based system launcher.

  • Growl

    Common notification system for Lumbar builds and Propane and others.

  • Divvy

    Window position manager

  • Stay

    Utility which will restore your windows when you connect or disconnect a monitor.

  • BetterTouchTool

    Keyboard/mouse/touchpad gesture mapper.

  • Cloud App

    Dirt simple screenshot sharing app. Useful for sharing screenshots and other local content over IM and email when attachments might not be supported or supported easily.

  • Homebrew

    OSS package manager.

  • nvm

    Node version switcher. Easily allows for switching between different versions of node.

    Current recommendations for the latest 0.8 node branch for running the development build stack as the watch issues on the 0.8 branch seem to have been resolved.

3 Comments :, , , more...

Quick: Firediff and Firefocus updated for 5.0 support

by on Jul.06, 2011, under Firediff, Firefocus

Both Firediff and Firefocus have been updated to increase the target application support up to Firefox 5.0.

Both of these are available from the update stream on this site. New installations are recommended to use the Firediff and Firefocus projects on AMO as these will be more responsive to the march of Firefox releases.

Comments Off on Quick: Firediff and Firefocus updated for 5.0 support :, , , , more...

Garbage Collection Gotchas in webOS

by on Apr.02, 2010, under Palm, webOS

Making the jump to mobile development from desktop and server development can lead to quite a few gotchas due to the resource constraints inherent to mobile environments. This became very clear to me today while debugging an intermittent failure in the Facebook application’s news and notifications scenes.

Like every other debugging session for intermittent issues there were quite a few choice words used in the process and many dead ends, but eventually it became apparent that some vital Mojo.Service.Request service requests were not calling any of their notification callbacks. Expecting the onComplete callback to occur at the very least, I was very perplexed until I spoke with some of my esteemed colleagues at Palm and they pointed me to the garbage collector as the possible culprit for this situation.

The code in question was instantiating Request objects but not maintaining references to these objects. This is fine up until the point that the garbage collector runs and the request object as well as all callbacks are collected. At this point these requests could no longer notify the application of their completion, blocking further processing of the queues associated with these requests.

After storing the instantiated Request objects until completion all of the calls that were previously disappearing into the ether began to return as expected.

The moral of the story is that you need to be very careful about what references are maintained when working with garbage-collected languages in memory-constrained environments. If you want something to stay around, like callback methods, you need to be certain that it is referenced somewhere. To ease this task for Mojo.Service.Request calls (controller.serviceRequest calls are safe as the controller maintains a reference to the request object or cancels the request prior to popping the scene), we implemented the following wrapper:

var ServiceRequestWrapper = Class.create({
    initialize: function() {
        this.requestId = 0;
        this.requests = {};
    },

    request: function(url, optionsIn, resubscribe) {
        Mojo.Log.info("Service request wrapper url: '%s' method: '%s' CALLED", url, optionsIn.method);
        var options = Object.clone(optionsIn),
            requestId = this.requestId++;
        options.onComplete = this.completeHandler.bind(this, url, optionsIn, requestId);

        this.requests[requestId] = new Mojo.Service.Request(url, options, resubscribe);
        return this.requests[requestId];
    },

    completeHandler: function(url, optionsIn, requestId, response) {
        Mojo.Log.info("Service request wrapper url: '%s' method: '%s' requestId: %d COMPLETE", url, optionsIn.method, requestId);
        delete this.requests[requestId];

        optionsIn.onComplete && optionsIn.onComplete(response);
    }
});

By instantiating this on a location that will not be collected during the application’s lifetime and using the request method rather than direct Mojo.Service.Request calls for all requests that the result is necessary you can avoid this problematic scenario as well as save the choice words for a later time :)

7 Comments :, , , more...

Visit our friends!

A few highly recommended friends...