Apps/DeveloperScreenGallery
Gallery of Web Developer Screenshots
Web developers: please grab a screenshot of your development machine as it appears while you are developing web stuff, embed it here, and add a few sentences about the most valuable / important / coolest tools or techniques you use.
ndesaulniers
This screenshot shows off debugging an app in Firefox Nightly using the Responsive Design Tool, part of Firefox's Web Developer Tools. I'm also using the Web Console, another one of Firefox's Web Developer Tools. Notice, I've mistakenly added a semi colon in a property list. Oops!
Now that I've fixed an error in my JavaScript, I'd like to try out my packaged app in the desktop emulator. Note: this packaged app is part of gaia, and requires a rebuilt profile, so it's install process is different than what's expected of third party developers. Here's my terminal. I use iTerm2 for OSX as my terminal emulator. I also prefer it to be in fullscreen mode, but when I need to type up code as I read code from something like a webpage, I can revert from fullscreen mode with command-enter. When it's not fullscreen, I like to use a program called Divvy to make the terminal window hug the top of the screen. And hotkeys to bring the terminal to the front are a must.
I prefer zsh over bash for my shell; installing it with oh-my-zsh made it easy and it auto updates frequently. Within my terminal, I like to split up panes over creating new tabs or windows. This can be done using command-d and command-shift-d to split panes vertically and horizontally.
In the the top left pane I've cleared the current line. I find ctrl-L faster than typing clear. In the bottom left pane, you can see how zsh's default git plugin knows I'm in a versioned repo, and tells me what branch I'm on, and that I have local modifications. I've also colorized my git output through global git configuration. Modified and untracked files are red, added and deleted files are green.
In the right pane, I'm within the b2g emulator directory, where the binary is located. This one line unix command is a series of commands separated by double ampersands, which means if the previous command did not return a failure code, run this next. The cd hyphen means change to the directory I was previously in. If one of the commands in the chain failed, I could cd - back to the starting directory and try again. You can't see it here, but my previous working directory was my custom branch of gaia. Make clean removes the previous build. NOTFU stands for no first time use; if you're running a custom gaia profile, it can get annoying to go through the first ten or so screens the first time you ever run a new profile, so it's nice to be able to skip it after each make clean. MAKECMDGOALS is a custom environmental variable I need for my current app, is not typical of third party development workflow. Speaking of environmental variables, using them in front of a command like this sets them only for the duration of the command. If I were to echo $MAKECMDGOALS, we'd see it's not defined. Once I'm done building my custom gaia profile, I switch back to my previous working directory, and run the binary and specify that I'd like to use a custom build of gaia with the emulator, instead of the default version of gaia that ships with the emulator. Notice how I could have used a hyphen again to specify the my previous working directory and the profile within it as -/profile. Maybe next time!
bwalker
Here I'm using Sublime Text Beta 3 to edit my single-page app built with volo, mortar, Underscore.js and Bootstrap JS+CSS; I'm running a local, dev copy of MySQL and the Rails server that provides my REST API in a Terminal window; I have another Terminal window where I use my command history to run "volo build" and copy the build into my Rails server directory hierarchy. I have Firefox tabs open to the Bootstrap and Underscore help content.
