-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsubl-floo-tutorial.html
More file actions
266 lines (217 loc) · 19 KB
/
subl-floo-tutorial.html
File metadata and controls
266 lines (217 loc) · 19 KB
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE HTML>
<!--
Twenty by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Sublime & Floobits Tutorial - Adrian Wan</title>
<meta charset="utf-8" />
<meta name="description" content="A tutorial on setting up and using Floobits, a cross-editor real-time collaboration tool, via Sublime Text." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/keys.css" type="text/css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!-- Google analytics script -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69121908-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="no-sidebar">
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1 id="logo"><a href="index.html">Adrian <span>Wan</span></a></h1>
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Welcome</a></li>
<li class="submenu">
<a href="#">More</a>
<ul>
<li><a href="resume.html">Resumé</a></li>
<li class="submenu">
<a href="#">Posts</a>
<ul>
<li><a href="posts.html">Top</a></li>
<li><a href="vim-tricks.html">Vim Tricks</a></li>
<li><a href="success-in-swat-cs.html">Success in Swat CS</a></li>
<li><a href="subl-floo-tutorial.html">Floobits & Sublime</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contact.html" class="button special">Contact Me</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<article id="main">
<header class="special container">
<span class="icon fa-code"></span>
<h2><strong>Floobits</strong> & <strong>Sublime</strong></h2>
<p>The best way to pair-program since VIM. (2014-03-17)</p>
</header>
<!-- One -->
<section class="wrapper style4 container">
<!-- Content -->
<div class="content">
<section>
<header>
<h2 id="preamble">Preamble</h2>
</header>
<p>
Have you ever wished you could write code at the same time as your partner? Now with <a href="http://www.floobits.com">Floobits</a>, that dream is a reality. Floobits is like Google Docs for code: you write code, and it shows up on your partner's screen. Your partner highlights code to talk about a potential syntax problem - you don't have to look away from your screen to see what they're talking about.
</p>
<p>
It gets better. Imagine having Google Docs, but you get to use your own choice of editor. Now imagine a text editor that is pretty much completely customizable, <strong>that can type in multiple places at the same time.</strong> You've just imagined <a href="http://www.sublimetext.com">Sublime</a>, a Python-based (read: "new and awesome") editor with tons of features, such as auto-completion and code folding. Sublime just so happens to work the best with Floobits, and so this tutorial (which should take 30 minutes tops) will get you set up with both tools.
</p>
<p>
<a href="images/subl-floo/subl-screen.png">
<img src="images/subl-floo/subl-screen.png" alt="My Sublime 3 setup with two panes, tabs, and a theme on display" title="My Sublime 3 setup" width=100%/>
<br /></a>
</p>
<h2 id="notes">Notes</h2>
<p>I <strong>do not</strong> recommend Floobits for inexperienced programmers. Floobits is intended to help teams work more efficiently together; it is not meant to help you shirk the responsibility of understanding everything that your partnership does. I recommend that Swat CS students stay away from Floobits until after CS21, CS35, and CS31 - classic one-person-at-a-time pair-programming is the most sure-fire way to learn in those classes.</p>
<p>Floobits <strong>is not</strong> a substitute for careful planning and good top-down design. Floobits is a tool by which <strong>good programming</strong> can be done more efficiently. Being able to code twice as fast does you no good if it helps you make twice as many errors.</p>
<p>Floobits doesn't have version control. Luckily, you can use Floobits with Git pretty easily - point Floobits' local copy to a Git repository (see <tt>Using the workspace</tt> in <a href="#floo">the Floobits section</a>) and you're good to go.</p>
<h2 id="instl">Be Sublime, my friend</h2>
<p>Sublime is capable of so many things, and I guarantee you'll keep discovering things that you can do with it. For now, let's get set up with your own personal copy of Sublime.</p>
<p>Sublime is not free: there is an unlimited trial period, but an individual license costs about $70. In effect this means that you can keep using Sublime until you fall deeply enough in love with it to buy a license.</p>
<h3>Installation</h3>
<p>First, download <a href="http://www.sublimetext.com/3">Sublime Text 3</a> as a tarball using the Ubuntu 64 bit version (I use Sublime 3 in this tutorial. If it matters to you, go ahead and do all this for Sublime 2. No guarantees about how well this will work though). Save this somewhere that you can find - your home directory or your Desktop is fine.</p>
<p>If you don't already have a bin directory in your home path, make one now:</p>
<pre>$ mkdir ~/bin</pre>
<p>Then move the tarball you downloaded into this folder and un-tar it:</p>
<pre>$ cd <br>#assuming you downloaded to home <br>$ mv sublime_text_3_(...).tar.bz2 ./bin <br>$ cd bin<br>$ tar xvjf sublime_text_3_(...).tar.bz2 </pre>
<p>And now you have a fully functional copy of Sublime 3 on your computer! It's in the new <tt>sublime_text_3</tt> directory. Wasn't that easy? </p>
<h3>Configuration</h3>
<p>To be able to run Sublime from the command line, two things must be done:</p>
<p>1) Check that the bin folder in your home directory is in your PATH. Run</p>
<pre>$ echo $PATH</pre>
<p>and if you see <tt>/home/(your usrname)/bin</tt> or <tt>$HOME/bin</tt> you're all set. Otherwise, open <tt>~/.bashrc</tt> in your favorite (non-Sublime) editor and add this line in there:</p>
<pre>export PATH="$HOME/bin:$PATH"</pre>
<p>This adds the <tt>~/bin</tt> directory to the system <tt>PATH</tt> variable. You'll need to run <tt>$ source ~/.bashrc</tt> on the command line to reload the <tt>.bashrc</tt> file.</p>
<p>2) Make a symbolic link to the executable file in the <tt>bin</tt> folder: in your <tt>~/bin</tt> folder run</p>
<pre>$ ln -s sublime_text_3/sublime_text .</pre>
<p>Now <tt>sublime_text</tt> is a command-line-executable command.</p>
<a href="images/subl-floo/subl1.png"><img src="images/subl-floo/subl1.png" alt="Sublime's editor window on first start" title="You've installed Sublime!" width=100%/></a>
<p>On most of the lab computers, the following error screen pops up when you try to run Sublime after installing Package Control:</p>
<pre>
>> error: Package Control
>>
>> Your system's locale is set to a value that can not handle non-ASCII
>> characters. Package Control can not properly work unless this is fixed.
>>
>> On Linux, please reference your distribution's docs for information on properly
>> setting the LANG environmental variable. As a temporary work-around, you can
>> launch Sublime Text from the terminal with:
>>
>> LANG=en_US.UTF-8 sublime_text
</pre>
<p>To solve this, we simply take the popup window's advice and run Sublime with the extra options given. The easiest way to do this is to define an alias in your <tt>.bashrc</tt> or <tt>.bash_aliases</tt> file: open <tt>~/.bashrc</tt> in your favorite (non-Sublime) editor and add the following line to it somewhere near the other aliases in there:</p>
<pre>alias subl="LANG=en_US.UTF-8 sublime_text"</pre>
<p>Then run <tt>$ source ~/.bashrc</tt> to reload the file. Now you should be able to hit <tt>$ subl</tt> to start Sublime.</p>
<h2 id="floo">Floobits</h2>
<p>
Floobits is the package that allows you to upload files to the cloud and edit them simultaneously from different editors. Let's get you set up.
</p>
<h3>Installation</h3>
<p>With Package Control installed, installing Floobits is easier than pie. Open the command palette with <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>p</kbd> then start typing <tt>install</tt> - select <tt>Package Control: Install Packages</tt>. Once Package Control starts up, type <tt>Floobits</tt>, and install the Floobits package. You're done! </p>
<a href="images/subl-floo/floo-instl.png"><img src="images/subl-floo/floo-instl.png" width=100% alt="Starting Package Control from the command palette" title="After opening the command palette"/></a>
<a href="images/subl-floo/floo-instl2.png"> <img src="images/subl-floo/floo-instl2.png" width=100% alt="Installing Floobits from Package Control" title="The Floobits Package"/></a>
<h3>Setting up a workspace</h3>
<p>Right after you install Floobits, you'll be redirected to make an account with Floobits. Go ahead and follow the instructions on the Floobits page, and your copy of Sublime will be linked to your Floobits account. </p>
<p>Once you've made an account, there's one more thing to do. By default, free accounts can only make public workspaces. This means that your code is visible to anyone on the Internet, even if they don't have a Floobits account. That's no good! Luckily, Floobits offers 3 private workspaces for free for users with a .edu account. Follow <a href="https://floobits.com/edu">this link</a> to link your Floobits account with your @swat account, and rack up 3 free private workspaces!</p>
<p>Now to set up your first workspace. <em>Only one person should do this part!</em> On the Floobits webpage, click <tt>Create a Workspace</tt> up top, and fill in the <tt>Name</tt> field, e.g. <tt>csXX_labY</tt>. Check "Secret" and uncheck all the "Everyone can" boxes (see the image below). Create the workspace, then in the search for user box, find your partner by username and select them. Hit save. Now your partner can collaborate on this code.</p>
<a href="images/subl-floo/floo-perms.png"><img src="images/subl-floo/floo-perms.png" width=100% alt="Me adding my partner to the workspace" title="Adding my long-suffering partner after creating the workspace"/></a>
<h3>Using the workspace</h3>
<p>Now your workspace exists on the Floobits servers. What now? </p>
<p>This is where Sublime comes back in. We want to access the workspace from Sublime so that we can edit the code there. <em>One partner should do this part.</em></p>
<p>In Sublime, press <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>j</kbd> (or find <tt>Floobits - Join Workspace</tt> in the command palette) to open up the <tt>Workspace URL</tt> bar at the bottom. Fill in the URL with the URL of your newly-created workspace, e.g. <tt>https://floobits.com/awan/csXX_labY</tt>, and hit enter.</p>
<a href="images/subl-floo/floo1.png" ><img src="images/subl-floo/floo1.png" width=100% alt="The Workspace URL bar" title="Entering my workspace URL"/></a>
<p>The bar will change to prompt you for a local directory. <em>THIS PART IS IMPORTANT.</em> If you have already started on a lab, <em>insert the path of that directory here</em>. This will initialize the workspace with the existing files. Otherwise, just put it somewhere that you'll be able to find it again.</p>
<a href="images/subl-floo/floo2.png"><img src="images/subl-floo/floo2.png" width=100% alt="Saving to a local directory" title="Saving to a local directory with existing files"/></a>
<p>Now in the side-bar you should see your existing files pop up. If not, navigate to <tt>File->Open Folder</tt> and open your lab folder up. Finally, to tell Floobits to sync this to the workspace, right click on the top level folder and choose <tt>Floobits->Add to Workspace</tt>. You should see it upload at the bottom of the screen (where it says <tt>Connected to yourname/workspacename as yourname</tt>). Once this is complete, your files have been added to the Floobits server!</p>
<a href="images/subl-floo/floo-new.png"><img src="images/subl-floo/floo-new.png" width=100% alt="Existing files appearing in side-bar" title="Existing files in side-bar"/></a>
<p>Once this is all done, your partner should Join the workspace as well, and sync it to an empty local directory (syncing it to an existing directory could be fine but it's easier to replace the existing directory with the new Floobits-synced one) following the same steps above. Now test it out - if you are both connected to the workspace, you should be able to see each other's edits on your own screen. Happy coding!</p>
<h3>Subsequent Projects</h3>
<p>If you enjoyed using Floobits and Sublime for pair-programming, you'll want to keep hosting your lab projects on Floobits workspaces. However, unless you pay for more, students only get 3 private workspaces total. I recommend deleting the workspace from the Floobits website after you've handed your lab files in. This frees up space for a new project, and doesn't change any local files offline - it just stops you from editing the same files at the same time online.</p>
<h2 id="more">More on Sublime</h2>
<p>Sublime is getting buckets of love for some really great features:</p>
<h3>Packages</h3>
<p>Package Control that we encountered earlier unlocks a wealth of user-generated packages that have amazing functionality. Pretty much everything is open-source so you can contribute too! And all packages can be installed from inside Sublime using the command palette, so there's no harm in experimenting!</p>
<p>Some really good packages to check out:
<tt>Vintageous</tt> gives great VIM emulation (so you can use your <a href="http://www.vim-adventures.com">hard-learned</a> VIM movements to the fullest).
<tt>DocBlockr</tt> implements block commenting functionality.
Some sweet low-contrast theme like <tt>Solarized</tt> (install <tt>Solarized Toggle</tt> to switch between light and dark Solarized by pressing <kbd>f12</kbd>!) or <tt>Zenburn</tt> makes programming easier on the eyes.
</p>
<p>And if you ever find yourself wishing that some functionality was implemented, do a quick Google search for it. Chances are, there's a package for it.</p>
<h3>Multi-cursors</h3>
<p>Multi-cursoring is the new best thing. Put cursors in multiple locations by holding <kbd>ctrl</kbd> and clicking, or select the next instance of the current highlighted text with <kbd>ctrl</kbd>+<kbd>d</kbd>. Select all instances of the current text with <kbd>alt</kbd>+<kbd>f3</kbd>. Any edits you make will happen at all your cursors simultaneously!</p>
<p>For more information, check out the Sublime documentation <a href="http://sublime-text-unofficial-documentation.readthedocs.org/en/sublime-text-3/">here</a>.</p>
<h3>User Preferences</h3>
<p>Being built on Python, user preferences are as easy to define as rewriting entries of a Python dictionary. Open up the command palette (<kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>p</kbd> is your new best friend), start typing <tt>user</tt> look for <tt>Preferences: Settings - User</tt>. If you select that, you'll open up the preferences file, in which you can define lots of cool things (check out <tt>"caret_style": "phase"</tt>!) that make coding easier on you. Here are my preferences:</p>
<pre>{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"caret_style": "phase",
"color_scheme": "Packages/Color Scheme - Default/Solarized (Dark).tmTheme",
"fade_fold_buttons": false,
"font_face": "Courier New",
"font_size": 10,
"highlight_line": true,
"ignored_packages":
[
"Vintage"
],
"rulers":
[
80
],
"tab_size": 2,
"translate_tabs_to_spaces": true,
"vintage_start_in_command_mode": true,
"vintageous_use_ctrl_keys": true
}</pre>
<p>See what works for you!</p>
<h2 id="thanks">Acknowledgments</h2>
<p>A huge thank-you to Jeff Knerr for his feedback and help with the .edu accounts, without whom I would still be taking turns with my partner to type. A shout-out to the Matchbot team (Sam, Stella, Rita, and Luis) for introducing me to this in the first place. </p>
</section>
</div>
</section>
</article>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<!-- <li><a href="#" class="icon circle fa-twitter"><span class="label">Twitter</span></a></li> -->
<!-- <li><a href="#" class="icon circle fa-facebook"><span class="label">Facebook</span></a></li> -->
<li><a href="http://www.linkedin.com/in/adrianwan2" class="icon circle fa-linkedin"><span class="label">LinkedIn</span></a></li>
<!-- <li><a href="#" class="icon circle fa-google-plus"><span class="label">Google+</span></a></li> -->
<li><a href="http://www.github.com/awan1" class="icon circle fa-github"><span class="label">Github</span></a></li>
<li><a href="http://stackoverflow.com/users/2452770/a-wan" class="icon circle fa-stack-overflow"><span class="label">StackOverflow</span></a></li>
<li><a href="https://soundcloud.com/adrian-wan" class="icon circle fa-soundcloud"><span class="label">Soundcloud</span></a></li>
</ul>
<ul class="copyright">
<li>© Adrian Wan 2015--2018</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollgress.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>