-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
480 lines (356 loc) · 41.5 KB
/
atom.xml
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
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Bits on Bits on Bits]]></title>
<link href="http://bitsonbitsonbits.com/atom.xml" rel="self"/>
<link href="http://bitsonbitsonbits.com/"/>
<updated>2015-11-05T13:38:45-06:00</updated>
<id>http://bitsonbitsonbits.com/</id>
<author>
<name><![CDATA[Alex Lau]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Using Multiple Chrome Profiles]]></title>
<link href="http://bitsonbitsonbits.com/blog/using-multiple-chrome-profiles/"/>
<updated>2015-07-24T15:50:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/using-multiple-chrome-profiles</id>
<content type="html"><![CDATA[<p>One of the most beneficial changes I’ve made to my workflow in the past couple years is to use <a href="http://www.howtogeek.com/207614/everything-you-need-to-know-about-google-chromes-profile-switcher/">multiple profiles</a> in chrome. Basically what this does is allow you to run chrome for multiple users at the same time.</p>
<p>You may be thinking, “Ok, that’s kind of nice – but I can already <a href="https://support.google.com/accounts/answer/1721977?hl=en">sign in to different gmail accounts</a> within the same browser window. So what does this really buy me?” The <em>real</em> advantage to maintaining these profiles is that each profile gives you a <strong>separate</strong>, <strong>isolated</strong> chrome environment. That means that all of your bookmarks, history, chrome extensions, saved usernames, etc. all stay within the context of one profile.</p>
<p>As a developer, this is a godsend. I can have one profile linked to my personal email, and one linked to my work email. The work one has an uncluttered list of bookmarks that only pertain to work, remembers my test account usernames, only uses extensions that are relevant to work, and doesn’t auto-typeahead to sites like ‘Pandora’ when I am keying in a url.</p>
<p>Really what you’re doing by setting up multiple profiles is separating your concerns for how your browser experience is organized. By just having one chrome profile, it’s easy for browser data to get out of hand – especially with regard to having too many bookmarks and extensions. Adopting multiple profiles allows you to keep what’s most relevant at hand, without having to open different browsers at the same time.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[D3 Lessons Learned: Hover Lock Button]]></title>
<link href="http://bitsonbitsonbits.com/blog/d3-tutorial-hover-lock-button/"/>
<updated>2015-06-19T13:23:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/d3-tutorial-hover-lock-button</id>
<content type="html"><![CDATA[<p>As an exercise in sharpening my d3 skills, I set out to create a button that mimics the <a href="http://kudosplease.com/">kudos widget</a> seen on various blogs.</p>
<p>The idea is to only take action once a user has hovered over the icon for a certain period of time. It’s a nice, animated alternative to simply clicking a ‘Like’ button. Here’s how my version turned out:</p>
<iframe style="width: 200px; height: 150px" src="http://bl.ocks.org/MrAlexLau/raw/1189ed49f998421f29af/"></iframe>
<p>You can see the full source code and example <a href="http://bl.ocks.org/MrAlexLau/1189ed49f998421f29af">here</a>.</p>
<p>Though this example may seem trivial, there are a couple of important principles it demonstrates:</p>
<h3>Svg Element Ordering</h3>
<p>The z-index css property is ineffective for svg’s. Instead, layers are rendered in the order they are drawn – elements drawn first appear <em>behind</em> elements drawn afterward.</p>
<p>So for my example, drawing the circles goes as follows:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'> <span class="nx">outerCircle</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'circle'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'class'</span><span class="p">,</span> <span class="s1">'locked-on-circle'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'cy'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'cx'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'r'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">'fill'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">defaultColor</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">whitespaceCircle</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'circle'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'class'</span><span class="p">,</span> <span class="s1">'locked-on-circle'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'cy'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'cx'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'r'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span> <span class="o">-</span> <span class="mi">5</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">'fill'</span><span class="p">,</span> <span class="s1">'#FFFFFF'</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">loadingCircle</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'circle'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'r'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">startingRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'cy'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'cx'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'fill'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">defaultColor</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>Note that the outer ring is actually 2 circles: a larger one drawn first with a background color, and a slightly smaller white one drawn inside.</p>
<h3>Animation Easing</h3>
<p>You might have noticed that when you hover over the circles, the middle circle grows a little bit smaller before it gets bigger. The rate and size of this animation is controlled by its <a href="https://github.com/mbostock/d3/wiki/Transitions#ease">easing function</a>.</p>
<p>In this example in particular, I’m using <code>ease('back')</code>. You can use different easing functions to make animations occur at different rates over time. For an excellent interactive demo of easing functions, check out this <a href="http://bl.ocks.org/hunzy/9929724">bl.ock</a>.</p>
<h3>Cancelling D3 Animations</h3>
<p>If you begin hovering over the circle, but pull the cursor away from it the icon transitions back to its original size and color. Before working on this demo I wasn’t sure if I would have to call something like <code>transition().cancel()</code>, but it turns out that you can simply start a new animation to cancel an existing one.</p>
<p>So in my example, I’m using this animation to grow the middle circle when a user hovers over it:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">loadingCircle</span>
</span><span class='line'> <span class="p">.</span><span class="nx">transition</span><span class="p">()</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'fill'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">lockedColor</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'r'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span> <span class="o">-</span> <span class="mi">10</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">ease</span><span class="p">(</span><span class="s1">'back'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">duration</span><span class="p">(</span><span class="mi">1500</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>
<p>And to cancel my animation on the mouseleave event, I simply transition back to the original size and color:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'> <span class="nx">loadingCircle</span>
</span><span class='line'> <span class="p">.</span><span class="nx">transition</span><span class="p">()</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'r'</span><span class="p">,</span> <span class="mi">15</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'fill'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">defaultColor</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<h3>Animation Callbacks</h3>
<p>The last trick I picked up was that animations have a callback which is triggered after they complete. Look at the <code>end</code> event here:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'> <span class="nx">loadingCircle</span>
</span><span class='line'> <span class="p">.</span><span class="nx">transition</span><span class="p">()</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'fill'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">lockedColor</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'r'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">outerRadius</span> <span class="o">-</span> <span class="mi">10</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">ease</span><span class="p">(</span><span class="s1">'back'</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">duration</span><span class="p">(</span><span class="mi">1500</span><span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="s1">'end'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">isLocked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">outerCircle</span>
</span><span class='line'> <span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">'fill'</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">lockedColor</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="s1">'.notification'</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">500</span><span class="p">);</span>
</span><span class='line'> <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>The <code>end</code> event’s callback only gets executed if the animation completes. This plays out nicely in our example since we only want to display a “done” label if the user hovers for a certain amount of time.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[D3 Training Wheels]]></title>
<link href="http://bitsonbitsonbits.com/blog/d3-training-wheels/"/>
<updated>2015-06-09T16:28:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/d3-training-wheels</id>
<content type="html"><![CDATA[<p>I’ve been working with d3 quite a bit lately. It’s a subject I’ve been interested in for a while, but never had a passion project to really use it with until I had a project at work that required it. Putting this post together as a reference to some resources I wish I had known about when I first started.</p>
<h2><a href="https://github.com/mbostock/d3/wiki/Gallery">D3 Gallery</a></h2>
<p>Mike Bostock is the creator of d3 – and is basically a visualization god. This page on the d3 wiki is a collection of charts and graphs. It’s a great starting place to see exactly what’s possible, and most of the examples provide source code.</p>
<h2><a href="https://www.dashingd3js.com/">Dashing D3</a></h2>
<p>This tutorial took me from zero to sixty with d3. It does an amazing job at organizing sections into consumable portions. Not only is it the best walkthrough of d3 I’ve come across to date, it’s also one of the best tutorials I’ve ever read, period.</p>
<h2><a href="http://bl.ocks.org/">Bl.ocks.org</a></h2>
<p>Another creation from Mike Bostock. I discovered this site by seeing it frequently referenced on StackOverflow. What you do is create a <a href="https://gist.github.com/">github gist</a>, apply the same path to bl.ocks.org, and the bl.ocks website will automagically display your visualization.</p>
<p>For example, Mike has created a gist at <a href="https://gist.github.com/mbostock/1353700.">https://gist.github.com/mbostock/1353700.</a> Since this gist has a file named <code>index.html</code>, bl.ocks is smart enough to display a preview of the visualization at <a href="http://bl.ocks.org/mbostock/1353700.">http://bl.ocks.org/mbostock/1353700.</a> (Note that <code>/mbostock/1353700/</code> is the same in both urls.)</p>
<p>I prefer this to jsfiddle/codepen when dealing with d3 examples since it’s easier to read longer bits of code in the longform that bl.ocks displays them in. And because each example is a github gist under the covers, forking and modifying examples in my local dev environment is trivial.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Revisiting an Old Ruby Program]]></title>
<link href="http://bitsonbitsonbits.com/blog/refactoring-monty-hall/"/>
<updated>2014-10-06T19:49:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/refactoring-monty-hall</id>
<content type="html"><![CDATA[<p>As an exercise in coding, I recently rewrote an <a href="https://github.com/MrAlexLau/monty_hall/blob/original_program/montyHall.rb">old ruby program</a> into <a href="https://github.com/MrAlexLau/monty_hall">a new one</a>. Functionally the code for the new program does the exact same thing as the old one – both programs run simulations for the <a href="http://en.wikipedia.org/wiki/Monty_Hall_problem">Monty Hall Problem</a>. But the new one was written with the intention of being easier to read and DRY’er.</p>
<p>The original program was from when I was first learning ruby, and was definitely painful to read at times. Going straight down the program, here’s a self-critique of some of the code.</p>
<h4>Complaint #1: lack of inline boolean expressions</h4>
<p>This is <em>supposed to</em> read a command line argument, and set it to a boolean <code>true</code> if the argument is the string “true”:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">show_details_option</span> <span class="o">=</span> <span class="kp">false</span> <span class="k">if</span> <span class="n">show_details_option</span> <span class="o">!=</span> <span class="s2">"true"</span>
</span></code></pre></td></tr></table></div></figure>
<p>The danger in this is that <code>show_details_options</code> would not be set at all if the <code>if</code> condition isn’t met. It doesn’t in this case since it was already initialized on the line before, but there’s no use in taking this risk if it’s perfectly avoidable.</p>
<p>My new version ditches the <code>if</code> statement altogether:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">show_details</span> <span class="o">=</span> <span class="no">ARGV</span><span class="o">[</span><span class="mi">1</span><span class="o">]</span> <span class="o">==</span> <span class="s1">'true'</span>
</span></code></pre></td></tr></table></div></figure>
<h4>Complaint #2: using <code>and</code> and <code>or</code> instead of <code>&&</code> and <code>||</code></h4>
<p><code>and</code> and <code>or</code> are meant for flow control, not to be used as boolean operators.</p>
<p>What can I say? I was young, I was naive, I hadn’t read <a href="http://devblog.avdi.org/2010/08/02/using-and-and-or-in-ruby/">this blog post by Avdi Grimm</a>.</p>
<h4>Complaint #3: not using built in array methods</h4>
<h5>Example 1</h5>
<p>Take this snippet:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">possible_open_doors</span> <span class="o">=</span> <span class="o">[]</span>
</span><span class='line'><span class="k">for</span> <span class="n">i</span> <span class="k">in</span> <span class="mi">1</span><span class="o">.</span><span class="n">.total_number_of_doors</span>
</span><span class='line'> <span class="k">if</span> <span class="n">i</span> <span class="o">!=</span> <span class="n">contestants_guess</span> <span class="ow">and</span> <span class="n">i</span> <span class="o">!=</span> <span class="n">number_of_door_with_car</span>
</span><span class='line'> <span class="n">possible_open_doors</span> <span class="o"><<</span> <span class="n">i</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>The purpose of this was to build a new array from 1 to <code>total_number_of_doors</code> while excluding specific values, namely <code>contestants_guess</code> and <code>possible_open_doors</code>.</p>
<p>My approach was to build a brand new array, while checking to make sure the new values being appended to the new array were neither <code>contestants_guess</code> nor <code>number_of_door_with_car</code>. That works, but the same effect can be achieved much more concisely with some built in array functions in ruby. The refactored result is much shorter:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">revealable_doors</span> <span class="o">=</span> <span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="n">.total_number_of_doors</span><span class="p">)</span><span class="o">.</span><span class="n">to_a</span> <span class="o">-</span> <span class="o">[</span><span class="n">number_of_door_with_car</span><span class="p">,</span> <span class="n">contestants_guess</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p>Note that you can convert a range into an array in ruby (eg – <code>(1..4).to_a</code> becomes <code>[1, 2, 3, 4]</code>). The array difference operator (aka array subtraction) allows us to easily exclude particular values. If I wanted to exclude 1 and 4 from the array of 4 I can say <code>[1, 2, 3, 4] - [1, 4]</code> – which seems trivial with hardcoded values but becomes handy with variable values which need to be excluded.</p>
<h5>Example 2</h5>
<p>Here I’m selecting a random value from an array:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">possible_open_doors</span><span class="o">[</span><span class="nb">rand</span><span class="p">(</span><span class="mi">0</span><span class="o">.</span><span class="n">.possible_open_doors</span><span class="o">.</span><span class="n">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p>When <a href="http://ruby-doc.org/core-2.1.3/Array.html#method-i-sample">Array’s “sample” method</a> already does precisely the same thing:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">possible_open_doors</span><span class="o">.</span><span class="n">sample</span>
</span></code></pre></td></tr></table></div></figure>
<h4>Complaint #4: methods that took way too many lines of code</h4>
<p>My <a href="https://github.com/MrAlexLau/monty_hall/blob/original_program/montyHall.rb#L41-L129">original method</a> used to run a simulation was 86 lines of code long. Just <em>a few</em> more than Sandi Metz’s <a href="http://rubyrogues.com/087-rr-book-clubpractical-object-oriented-design-in-ruby-with-sandi-metz/">five lines per method rule</a>. The body of the revised version is a little closer at 9 lines (excluding whitespace):</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">run</span>
</span><span class='line'> <span class="vi">@all_doors</span> <span class="o">=</span> <span class="n">set_up_doors</span>
</span><span class='line'>
</span><span class='line'> <span class="n">contestants_initial_guess</span> <span class="o">=</span> <span class="n">contestants_first_guess</span>
</span><span class='line'> <span class="n">revealed_door_number</span> <span class="o">=</span> <span class="n">reveal_door</span><span class="p">(</span><span class="n">contestants_initial_guess</span><span class="p">,</span> <span class="vi">@door_with_prize</span><span class="p">)</span>
</span><span class='line'> <span class="n">final_guess</span> <span class="o">=</span> <span class="n">contestants_second_guess</span><span class="p">(</span><span class="n">contestants_initial_guess</span><span class="p">,</span> <span class="n">revealed_door_number</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'> <span class="n">prize_found</span> <span class="o">=</span> <span class="vi">@all_doors</span><span class="o">[</span><span class="n">final_guess</span> <span class="o">-</span> <span class="mi">1</span><span class="o">][</span><span class="ss">:value</span><span class="o">]</span> <span class="o">==</span> <span class="ss">:car</span>
</span><span class='line'> <span class="n">contestant_switched</span> <span class="o">=</span> <span class="p">(</span><span class="n">contestants_initial_guess</span> <span class="o">!=</span> <span class="n">final_guess</span><span class="p">)</span>
</span><span class='line'> <span class="n">switching_wouldve_helped</span> <span class="o">=</span> <span class="p">(</span><span class="vi">@door_with_prize</span> <span class="o">!=</span> <span class="n">contestants_initial_guess</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'> <span class="n">display_game_results</span><span class="p">(</span><span class="n">final_guess</span><span class="p">,</span> <span class="vi">@door_with_prize</span><span class="p">,</span> <span class="n">prize_found</span><span class="p">,</span> <span class="n">switching_wouldve_helped</span><span class="p">)</span>
</span><span class='line'> <span class="n">set_result</span><span class="p">(</span><span class="n">prize_found</span><span class="p">,</span> <span class="n">contestant_switched</span><span class="p">)</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Not only is this less lines of code, but also reads a lot better… going down the line of methods being called you see “set_up_doors”, “contestants_first_guess”, “reveal_door”, etc. and can see exactly how the flow of the simulation works.</p>
<h4>Conclusion</h4>
<p>I was hesitant to even look at my original program because I knew that there would be lots of cringe-worthy moments to be had. But it’s satisfying to be able to quickly identify elegant solutions to problems that used to give me a hassle – I’d recommend it as an exercise to anyone.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Autoloading Sass in Sinatra]]></title>
<link href="http://bitsonbitsonbits.com/blog/autoloading-sass-in-sinatra/"/>
<updated>2014-10-02T22:40:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/autoloading-sass-in-sinatra</id>
<content type="html"><![CDATA[<p>You can use <a href="http://css-tricks.com/style-injection-is-for-winners/">style injection</a> when developing sinatra apps, allowing you to see css/sass changes <em>without</em> refreshing your browser.</p>
<p>This is especially helpful when doing responsive design, since you can have different sized browser windows open at the same time and see how each changes affects a particular viewport.</p>
<h3>Getting Set Up</h3>
<ol>
<li>Clone and bundle <a href="https://github.com/MrAlexLau/sinatra_autoload_sass_demo">a preconfigured sample application</a> that I created</li>
<li>Install the appropriate livereload <a href="http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-">browser extension</a> – there’s one for Chrome, Firefox, and Safari</li>
<li>From the public/css directory, run <code>sass --watch style.scss:style.css</code> (this command could change as more sass files are added to the project)</li>
<li>From the project root directory, run <code>guard</code></li>
<li>From the project root directory, run <code>rackup</code></li>
<li>You’re done! Now anytime you save a change <code>style.scss</code>, the <code>style.css</code> file gets updated and your browser will show its changes without reloading the page.</li>
</ol>
<p>There’s a more detailed version of this writeup on the project <a href="https://github.com/MrAlexLau/sinatra_autoload_sass_demo/blob/master/README.md">readme</a>. Special thanks to Matt Brictson’s <a href="http://blog.55minutes.com/2013/01/lightning-fast-sass-reloading-in-rails-32/">excellent blog post</a>, without which this tip would not be possible.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[launchctl "nothing found to load"]]></title>
<link href="http://bitsonbitsonbits.com/blog/launchctl-overrides/"/>
<updated>2014-09-09T22:15:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/launchctl-overrides</id>
<content type="html"><![CDATA[<p>When you get the error “nothing found to load” after running <code>launchctl load</code>. Example:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>> launchctl load ~/Library/LaunchAgents/org.virtualbox.vboxwebsrv.plist
</span><span class='line'>nothing found to load
</span></code></pre></td></tr></table></div></figure>
<p>First check to make sure the package isn’t listed as disabled in the global overrides file:
<code>/private/var/db/launchd.db/com.apple.launchd/overrides.plist</code></p>
<p>If the package isn’t listed in the overrides file, <a href="http://launchd.info/">launchd documentation</a> offers another file it may be located in.
First get your user id by running <code>id</code> on the command line:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>> id -u
</span><span class='line'>201
</span></code></pre></td></tr></table></div></figure>
<p>Now look in this file:
/var/db/launchd.db/com.apple.launchd.peruser.<strong><em>201</em></strong>/overrides.plist. The override entry should be listed in this file.</p>
<p>In the example given above for virtualbox, you would remove these lines from that overrides.plist file:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><key>org.virtualbox.vboxwebsvc</key>
</span><span class='line'><dict>
</span><span class='line'> <key>Disabled</key>
</span><span class='line'> <<span class="nb">true</span>/>
</span><span class='line'></dict>
</span></code></pre></td></tr></table></div></figure>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[RubyGems Versioning]]></title>
<link href="http://bitsonbitsonbits.com/blog/rubygems-versioning/"/>
<updated>2014-03-18T20:17:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/rubygems-versioning</id>
<content type="html"><![CDATA[<p>From the <a href="http://guides.rubygems.org/patterns/#semantic_versioning">RubyGems guide</a>:</p>
<blockquote><p><strong>PATCH</strong> 0.0.x level changes for implementation level detail changes, such as small bug fixes</p>
<p><strong>MINOR</strong> 0.x.0 level changes for any backwards compatible API changes, such as new functionality/features</p>
<p><strong>MAJOR</strong> x.0.0 level changes for backwards incompatible API changes, such as changes that will break existing users code if they update</p></blockquote>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Gmail Snooze]]></title>
<link href="http://bitsonbitsonbits.com/blog/gmail-snooze/"/>
<updated>2014-03-17T00:00:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/gmail-snooze</id>
<content type="html"><![CDATA[<p>I’m a huge fan of the app <a href="http://www.mailboxapp.com/">Mailbox</a> for IOS. In my opinion, its killer feature is the ability to ‘snooze’ emails, so that they are hidden for the time being, but reappear when they are relevant again.</p>
<p>I wanted to have the same functionality through the Gmail web interface, and while googling I stumbled upon a Gmail <a href="http://gmailblog.blogspot.com/2011/07/gmail-snooze-with-apps-script.html">blog post that explains just how to do that</a>. It turns out that this has actually been available for quite some time (since 2011).</p>
<p>What surprised me even more is that you can write custom javascript scripts to process your email, and that these scripts can be executed on a recurring basis.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[My 4 Stages of Version Control]]></title>
<link href="http://bitsonbitsonbits.com/blog/my-4-stages-of-version-control/"/>
<updated>2013-11-04T00:00:00-06:00</updated>
<id>http://bitsonbitsonbits.com/blog/my-4-stages-of-version-control</id>
<content type="html"><![CDATA[<p>Version control – it’s great. It’s also amazing how you don’t realize how much better it <em>can</em> be until you use a better tool. Personally, I like to think I’ve gone through 4 main “stages” of version control, each stage being a more useful and effective addition to my workflow than the previous.</p>
<h2>Stage 1 – Local Backups</h2>
<p><em>“Hmmmm, I’m planning on making a lot of change to this code, better make a copy of the file <strong>hello.cpp</strong>. I’ll call it <strong>hello2.cpp</strong>! I’m a genius!”</em></p>
<p>Stage 1 is every n00b’s favorite, just making another copy of the file. Something go horribly wrong while you were in that 4am coding frenzy? You’ve always got that copy lying around, assuming you had the foresight to make it.</p>
<h2>Stage 2 – Offsite Backups</h2>
<p><em>“Hey (insert programming partner’s name here), we’re going to need to share our code somehow! How about I work on it Friday night, then email you a zip file of my progress? Then you can work on it Saturday!”</em></p>
<p>Stage 2 is only slightly better than stage 1. As least you (and your partner) have a copy of the code the next time you spill some hot chocolate on your laptop.</p>
<h2>Stage 3 – Centralized Version Control</h2>
<p><em>“Wow, svn is really cool! You can make savepoints in your code?! Other people can get your code too, and contribute to it?!”</em></p>
<p>Using an <strong>actual</strong> version control system for the first time is mindblowing in the omg-why-didn’t-I-know-about-this-before kind of way. Once you realize how to commit and branch code, there’s no turning back.</p>
<h2>Stage 4 – Distributed Version Control</h2>
<p><em>“I don’t really get what the big deal is with git. I mean it’s pretty much the same as – oh wait, oh wait no it’s not. Ok. Yes. This is really cool. LET FREEDOM RING.”</em></p>
<p>Just when I was telling my friends how great svn is, git came along and changed everthing. Changes are stored extremely efficiently, making the act of pulling changes quick even when there are a lot of files modified. Branches with git are “cheap” in that they are easily mergeable with other branches. With git, life is good. With github, life is great. I’ll go into that more in another post.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Autostarting Homebrew Packages]]></title>
<link href="http://bitsonbitsonbits.com/blog/autostarting-homebrew-packages/"/>
<updated>2013-10-27T19:48:00-05:00</updated>
<id>http://bitsonbitsonbits.com/blog/autostarting-homebrew-packages</id>
<content type="html"><![CDATA[<p><a href="http://brew.sh">Homebrew</a> has made my life a lot easier when setting up new mac development environments. To install a new package is as easy as typing <code>brew install mysql</code> on the command line. (Other programs I commonly install with Homebrew are git, mongodb, and postgresql.)</p>
<p>Sometimes you want a program to start a daemon (background) process when you log in. For example, I can start mongodb’s daemon with the <code>mongod</code> command, but it’d be nicer if it just started automatically.</p>
<p>Fortunately Homebrew has a way to do this! Simply type <code>brew info mongo</code>. If mongod isn’t set up to run automatically, the last bit of output will look like this:</p>
<pre><code>To have launchd start mongodb at login:
ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents
Then to load mongodb now:
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist
Or, if you don't want/need launchctl, you can just run:
mongod
</code></pre>
<p>Note how you not only see how to start mongodb upon login, but also it shows you the name of mongo’s daemon process, mongod.</p>
]]></content>
</entry>
</feed>