forked from twitter/opensource-website
-
Notifications
You must be signed in to change notification settings - Fork 1
/
what-we-use.html
208 lines (185 loc) · 19 KB
/
what-we-use.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>What We Use [ brack3t ]</title>
<meta name="description" content="">
<meta name="author" content="Brack3t, aka Kenneth Love and Chris Jones">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/ico" href="./brack3t-theme/assets/favicon.ico">
<link href="./feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="brack3t ATOM Feed">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="http://fonts.googleapis.com/css?family=Exo:200,300,500,700,900,200italic,300italic,500italic,700italic,900italic" rel="stylesheet">
<link href="./brack3t-theme/assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="./brack3t-theme/assets/github.css" rel="stylesheet">
<link href="./brack3t-theme/assets/bootstrap/css/brack3t.css" rel="stylesheet">
<script>
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-4642386-4"]);
_gaq.push(["_trackPageview"]);
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
var disqus_identifier = "what-we-use.html";
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://brack3t.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span8">
<header id="logo" role="banner">
<h1><a href="/">Brack3t</a></h1>
<p>Two guys… and Python.</p>
</header>
</div>
<aside class="span2" id="sidebar" role="complementary">
<nav>
<ul class="unstyled">
<li><a href="./pages/projects.html">Projects</a></li>
<li><a href="./archives.html">Archives</a></li>
<li><a href="./tags.html">Tags</a></li>
</ul>
</nav>
</aside>
</div>
<div class="row-fluid">
<div class="span7 offset1" id="main" role="main">
<article>
<header>
<h1><a href="./what-we-use.html" class="slabtext">What We Use</a></h1>
<h6><span class="permalink">Published: <a href="./what-we-use.html">06-26-2012</a></span>
<span class="author">by <strong>Kenneth</strong></span>
<span class="tags">tags: <a href="./tag/workflow.html">workflow</a> <a href="./tag/tools.html">tools</a> </span>
</h6>
</header>
<p>We've noticed several people publishing lists of what they use to do their work lately, so we thought we'd join in.
Below are the tools we use nearly every day to do our work. If you don't know, our work is the entire stack,
from setting up servers, to <a class="reference external" href="http://djangoproject.com">Django</a> and <a class="reference external" href="http://python.org">Python</a> programming, to front-end web development and design. Obviously,
with such a large area of work, we end up using a lot of different products and libraries, so, below is a list of our
most common items.</p>
<div class="contents topic" id="contents">
<p class="topic-title first">Contents</p>
<ul class="simple">
<li><a class="reference internal" href="#vim" id="id5">VIM</a></li>
<li><a class="reference internal" href="#firefox" id="id6">Firefox</a></li>
<li><a class="reference internal" href="#iterm-2" id="id7">iTerm 2</a></li>
<li><a class="reference internal" href="#tmux" id="id8">Tmux</a></li>
<li><a class="reference internal" href="#homebrew" id="id9">Homebrew</a></li>
<li><a class="reference internal" href="#skype" id="id10">Skype</a></li>
<li><a class="reference internal" href="#screen-sharing" id="id11">Screen Sharing</a></li>
<li><a class="reference internal" href="#balsamiq" id="id12">Balsamiq</a></li>
<li><a class="reference internal" href="#favorite-libraries-and-frameworks" id="id13">Favorite libraries and frameworks</a></li>
<li><a class="reference internal" href="#summary" id="id14">Summary</a></li>
</ul>
</div>
<div class="section" id="vim">
<h2><a class="toc-backref" href="#id5">VIM</a></h2>
<p>Do I really need to say anything about VIM? It's an amazing text editor and handles everything we need it to handle, from Django to HTML to <a class="reference external" href="http://lesscss.org">LESS</a> to Javascript and these blog posts (which are all done in <a class="reference external" href="http://docutils.sourceforge.net/rst.html">RestructuredText</a> and published with <a class="reference external" href="http://pelican.readthedocs.org/en/2.7.2/index.html">Pelican</a>). Yes, it has a steep learning curve but that can be pretty easily mitigated by starting with a GUI version (like <a class="reference external" href="http://www.vim.org/download.php#pc">gVim</a> or <a class="reference external" href="https://github.com/b4winckler/macvim">MacVim</a>) and mapping controls to settings you're used to. Use nothing else for a week or two and you'll be back to your old speed, if not faster.</p>
<p>There are a few plugins that we want to highlight, too.</p>
<div class="section" id="plugins">
<h3>Plugins</h3>
<p>First up is <a class="reference external" href="https://github.com/kien/ctrlp.vim">Ctrl-P</a>. It's a fuzzy file finder that'll search your tree. One of the handiest features is the <tt class="docutils literal">ctrlp_working_path_mode</tt> setting when it's set to <tt class="docutils literal">2</tt>, which makes the search start at the nearest ancestor with a version control file/folder in it, such as the <tt class="docutils literal">.git</tt> folder. It will ignore files you tell it to ignore and can search based on most-recently-used or through ctags, which would let you find a file based on classes or methods it contains.</p>
<p>Next is the complementary plugin, <a class="reference external" href="https://github.com/scrooloose/nerdtree">NERDTree</a>. We don't use it as much as we used to, now that we've switched to Ctrl-P, but it still gets a fair amount of usage. It's basically equivalent to TextMate or Sublime Text 2's project browser feature. Not much to explain here, but we do end up spending a fair amount of time in it.</p>
<p>We also use <a class="reference external" href="https://github.com/jeetsukumaran/vim-buffergator">Buffergator</a> a lot since we tend to jump between a lot of files throughout the day. Buffergator lets you quickly see all of your buffer, sorted in a couple of different ways (MRU and buffer number are the two modes we use most) and will let you preview a buffer without switching to it, which is pretty handy when you find out that all of our apps contain two view files named <tt class="docutils literal">backend.py</tt> and <tt class="docutils literal">frontend.py</tt> and two urls files named the same and, potentially, two files of APIs named the same too (we like naming schemes, OK?).</p>
<p>For eye-candy, we also love the <a class="reference external" href="https://github.com/Lokaltog/vim-powerline">Powerline</a> plugin. It gives an awesome statusline effect and makes you feel cool, which is so rare for us nerdy types. Right, guys? Right?</p>
<p>Since we write a lot of different languages, having syntax checking is really important. We use <a class="reference external" href="https://github.com/scrooloose/syntastic">Syntastic</a> to check all of our files for erros, and that requires us to have PyFlakes or PyLint installed system-wide, for checking Python. We also install Tidy (from Homebrew) for checking HTML and gjslist (Google's JSLint) or the standard JSLint installed for checking Javascript.</p>
</div>
</div>
<div class="section" id="firefox">
<h2><a class="toc-backref" href="#id6">Firefox</a></h2>
<p>I know, I know, Chrome is the big browser on the block. And Safari is master of the mobile arena. But we both really like Firefox. Two main reasons, I think. One, <a class="reference external" href="http://getfirebug.com/">Firebug</a> is still the best inspector on the market, at least in my experience (and the Web Developer Toolbar's option to turn off cache isn't replicated in Safari at all). Secondly, <a class="reference external" href="http://dactyl.sourceforge.net/pentadactyl/">Pentadactyl</a> is unmatched in any other browser, bar none.</p>
<p>That said, we both use Chrome and Safari for testing sites, holding on to multiple logins, and testing out Socket.IO and the like. We just use Firefox for standard browsing.</p>
<p>Chris doesn't make use of it, but I definitely use the hell out of Firefox's tab groups, too. If you haven't tried out this feature, hit <tt class="docutils literal"><span class="pre">Cmd-Shift-E</span></tt> (or likely <tt class="docutils literal"><span class="pre">Ctrl-Shift-E</span></tt> for you PC types) and check it out. Amazingly handy when you work on a lot of projects or need to keep several browsing trains of thought running at the same time. I really wish they had a way to unload a group of tabs from memory, though. That's all it's missing.</p>
<div class="section" id="addons">
<h3>Addons</h3>
<p>As mentioned, we both use the hell out of Firebug. We also use Pentadactyl a lot. You all should know Firebug, so I'll talk about Pentadactyl for a bit. Since we're both big VIM users, Pentadactyl lets us use our keyboards for most of the browsing we do. We can open new tabs with <tt class="docutils literal">t</tt> or just go to a new URL in the current one with <tt class="docutils literal">o</tt>. We both set <a class="reference external" href="http://duckduckgo.com">DuckDuckGo</a> as our default search engines, too, so a quick <tt class="docutils literal">t</tt> followed by <tt class="docutils literal">!django <search term here></tt> lets us quickly look up documentation.</p>
<p>I mentioned the <a class="reference external" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Toolbar</a> earlier too. We don't make extensive use of all of its features, but we do use the cache disable and browser resizing features. Before Firebug and some other addons were around, though, it was a killer addon to have for its ability to inspect CSS.</p>
<p>The last addon that we made a lot of use of is <a class="reference external" href="http://lackoftalent.org/michael/blog/json-in-firefox/">JSONovich</a> which enables a pretty display of JSON in Firefox. If you end up having to look at a lot of JSON all day long (like, say, when you're working with Tastypie), it's really useful to have a nice view.</p>
</div>
</div>
<div class="section" id="iterm-2">
<h2><a class="toc-backref" href="#id7">iTerm 2</a></h2>
<p>The terminal that comes with Mac OS X Lion is great, but we both had some display weirdnesses when it was coupled with Tmux and our VIM setups. <a class="reference external" href="http://www.iterm2.com/">iTerm</a> didn't have any of those issues (but it did bring around a new one with the pastebin). It looks good, works well, and supports native splitting. The newest version introduced support for a custom version of Tmux, but neither of us have tried that out yet. If/when we do, we'll probably write something about it.</p>
</div>
<div class="section" id="tmux">
<h2><a class="toc-backref" href="#id8">Tmux</a></h2>
<p>Ah, <a class="reference external" href="http://tmux.sourceforge.net/">Tmux</a>. If you don't know what it is, you should. It's a terminal multiplexer with is a long way of saying it lets you split one terminal window into lots of terminal windows, both as whole new windows (groups of panes) and individual panes. We end up running several servers to do our work, so being able to see and control all the servers in one Tmux window is amazingly handy.</p>
<p>I use <a class="reference external" href="https://github.com/aziz/tmuxinator">Tmuxinator</a>, too, to automate the creating of windows and panes for projects. You write a YAML file with rules for what windows and panes you want and what you want ran in each pane, then run <tt class="docutils literal">tmuxinator start <project name></tt> and you're up and running.</p>
<p>Also, when working on servers, Tmux makes it really easy to attach to an existing session and you can watch or work in tandem with another developer.</p>
</div>
<div class="section" id="homebrew">
<h2><a class="toc-backref" href="#id9">Homebrew</a></h2>
<p><a class="reference external" href="http://mxcl.github.com/homebrew/">Homebrew</a> is probably something we don't even need to mention. It's like <tt class="docutils literal"><span class="pre">apt-get</span></tt> or <tt class="docutils literal">pacman</tt> for your Mac, which means it'll let you install UNIX and Linux packages for your Mac through an easy command-line interface. You can even, with a bit of tinkering, install libraries that already come with your Mac, so if you need that bleeding-edge version of Ruby or Python, it's simple to install or uninstall.</p>
<p>We've written a couple of Homebrew recipes for internal use at our main client and that has definitely helped with keeping the team using the same packages and versions, regardless of machine or technical aptitude.</p>
</div>
<div class="section" id="skype">
<h2><a class="toc-backref" href="#id10">Skype</a></h2>
<p>I won't bother to link to Skype, I'm sure you already have it installed. We use it all day every day, though, since Chris and I pair program probably 98% of the day. Skype is how we conduct almost all of our client meetings and we talk through it all day ourselves. It's not a perfect system but it works really well and is less taxing on our machines than Google Hangouts.</p>
</div>
<div class="section" id="screen-sharing">
<h2><a class="toc-backref" href="#id11">Screen Sharing</a></h2>
<p>Yes, the built-in Screen Sharing on your Mac (go find it in your Finder, it's at <tt class="docutils literal">System > Library > CoreServices</tt> and stick it in your Dock). This, combined with Skype, a VPN or DynDNS url, and a couple of opened ports and you have a quick and easy way to do pair programming remotely. Set it to start in Observe Mode and you don't have to worry about disturbing the person you're working with either.</p>
<div class="section" id="dyndns">
<h3>DynDNS</h3>
<p>Chris and I each have a free domain name with <a class="reference external" href="http://dyndns.org">DynDNS</a> that we point to our machines through our routers and open up for web hosting (port 80) and screen sharing (the typical VNC ports). That way we can just point screen sharing to the URL and we're connected, no remembering IPs or having to look them up through the Network control panel or the terminal. Not a ground-breaking hint by any means but definitely one that has saved us time.</p>
</div>
</div>
<div class="section" id="balsamiq">
<h2><a class="toc-backref" href="#id12">Balsamiq</a></h2>
<p>We use <a class="reference external" href="http://www.balsamiq.com/">Balsamiq</a> for mocking up interfaces before we build them. Most of our work currently is replacing existing interfaces, used by a fair-sized team for years, with new, better, smarter ones. We plan out most of them before we start to build them and vet them with the people that will be using them. Balsamiq gives us a great, low-fidelity version we can show people that doesn't lead them to make too many assumptions about appearance or advanced functionality.</p>
</div>
<div class="section" id="favorite-libraries-and-frameworks">
<h2><a class="toc-backref" href="#id13">Favorite libraries and frameworks</a></h2>
<p>As far as favorite frameworks go, I'll give you three guesses which one is our favorite and the first two guesses don't count. We use Django for pretty much everything and haven't seen a reason to move away from it yet. But we don't live or work in a vacuum, so we've had to add a lot of other items to our repetoire.</p>
<p><a class="reference external" href="http://nginx.org">Nginx</a> is our web server of choice. It's fast, lightweight, and really easy to set up. We'll write up our crazy workflow with Nginx, Lua, Redis, and Scrapy soon.</p>
<p>For DOM manipulation, we use jQuery. It's solid and dependable.</p>
<p>For Javascript MVC, we use <a class="reference external" href="http://backbonejs.org">BackboneJS</a>. It may not be the newest or most fancy of the MVC frameworks, but we've come to understand it somewhat well, it works reliably with <a class="reference external" href="http://tastypieapi.org">Tastypie</a>, and uses the awesome Underscore.js library. Sadly, we haven't been able to make extensive use of Backbone yet, but we hope to change that in the near future.</p>
<p>Last but not least, for design, we both definitely love the Twitter <a class="reference external" href="http://twitter.github.com/bootstrap">Bootstrap</a> collection. It's a great starting point for web design and really helps you get to creating the product instead of worrying about what it looks like.</p>
</div>
<div class="section" id="summary">
<h2><a class="toc-backref" href="#id14">Summary</a></h2>
<p>I think that pretty much covers the tools and libraries we end up touching in our day-to-day work. Our work and requirements are constantly changing, though, so this post might be one that we need to revist every six months or year. If you have any suggestions for new products to check out, or ways we can make our current favorites even better, let us know on Twitter or in the comments below. Thanks for reading.</p>
</div>
</article>
<section>
<header>
<h1>Comments</h1>
</header>
<div id="disqus_thread"></div>
</section>
</div>
</div>
<footer><p>© Brack3t. All rights reserved. <a href="./feeds/all.atom.xml">ATOM feed</a></p></footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./brack3t-theme/assets/jquery-1.8.2.min.js"></script>
<script src="./brack3t-theme/assets/modernizr.js"></script>
<script src="./brack3t-theme/assets/jquery.slabtext.min.js"></script>
<script src="./brack3t-theme/assets/jquery.fittext.js"></script>
<script src="./brack3t-theme/assets/highlight.pack.js"></script>
<script>
$(function() {
$(".slabtext").slabText({
"maxFontSize": 200,
"viewportBreakpoint": 768
});
$(".highlight pre").each(function(i, e) {hljs.highlightBlock(e, " ")});
});
</script>
</body>
</html>