-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1043 lines (732 loc) · 71.7 KB
/
index.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
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
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$', '$'] ],
displayMath: [ ['$$', '$$']],
processEscapes: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
},
messageStyle: "none",
"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] }
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>chrisblogs</title>
<meta name="author" content="Chris Guthrie">
<meta name="description" content="I’m a big fan of Geocaching. If you are unfamiliar with it, it’s a worldwide activity, where by using a GPS you can search out hidden containers. …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://caguthrie.github.io">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="/atom.xml" rel="alternate" title="chrisblogs" type="application/atom+xml">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body >
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:caguthrie.github.io" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">
<span class="blue_light">
chrisblogs
</span>
</a></li>
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/about">About me and Projects</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div class="blog-index">
<article>
<header>
<h1 class="entry-title"><a href="/blog/2014/05/04/i-programed-my-way-into-a-mud-cave/">I Programmed My Way Into a Mud Cave</a></h1>
<p class="meta">
<time datetime="2014-05-04T19:59:46-04:00" pubdate data-updated="true">May 4<span>th</span>, 2014</time>
</p>
</header>
<div class="entry-content"><p>I’m a big fan of Geocaching. If you are unfamiliar with it, it’s a worldwide activity, where by using a GPS you can search out
hidden containers. These containers contain a logbook and usually other small toys and trinkets. There are over a million
geocaches worldwide in over 200 countries and territories. Learn more about it <a href="http://www.geocaching.com">here</a>.</p>
<p>This post is about geocaching, programming, and the surprise I found when I was able to make them intersect. A special “puzzle”
geocache that I came across required you to unscramble <a href="http://imgcdn.geocaching.com/cache/large/5fde6914-cd6d-4869-b4b9-57ccb20bdfde.jpg">this encrypted message</a> using <a href="http://imgcdn.geocaching.com/cache/large/492970f4-9a6b-40df-a038-610204ff92f5.jpg">this fuzzy picture</a> and the coordinates N32° 40.990 W117° 11.025 as hints. I knew the real location for the cache was somewhere in the deserts of San Diego county, and I had to solve the puzzle to find the coordinates. </p>
<p><img class="left" src="https://farm8.staticflickr.com/7317/14108703315_8dee144405_z.jpg" width="320" height="250" title="'Down into the abyss'" /></p>
<p>I had figured out the methodology to the decryption and that another word was required as a key. From that, I knew that once I
had found the key, the manual process of decrypting that whole message could take hours. Enter coding. I wrote a program that
accepted any key and decoded the message with the inputted key. Not yet knowing what the key was, I attempted to cheat and
iterate through the entire dictionary to see if anything comprehensible was returned. That failed, and my corner cutting
mission was thwarted. Therefore, I knew that the key was not a normal dictionary word. </p>
<p>You can find the program on Github <a href="https://github.com/caguthrie/tombraider_geocache">here</a>.</p>
<p><img class="right" src="https://farm6.staticflickr.com/5502/13922089900_eaec5db590_z.jpg" width="320" height="250" title="'In the cave'" /></p>
<p>I don’t want to give anything away, but I eventually figured it out. Anyone can figure it out, it isn’t necessary to go to
those coordinates, so give it a shot and run it through my program if you think you’ve got it. </p>
<p>The program was relatively simple, and all I did was extend the String class by adding a method that returned the ASCII value
of the character. This made the rest of the program easy, as it was just arithmetic from there on out. </p>
<div class="bogus-wrapper"><notextile><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="ruby"><span class="line"><span class="k">class</span> <span class="nc">String</span>
</span><span class="line"> <span class="k">def</span> <span class="nf">to_num</span>
</span><span class="line"> <span class="nb">self</span><span class="o">.</span><span class="n">downcase</span><span class="o">.</span><span class="n">bytes</span><span class="o">[</span><span class="mi">0</span><span class="o">]</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></notextile></div>
<p><img class="left" src="https://farm3.staticflickr.com/2936/14109093254_9847367727_z.jpg" width="250" height="320" title="'Found it!'" /></p>
<p>Once the puzzle was solved, the trek to the Arroyo Tapiado mud caves in the Anza-Borrego desert was a one filled with
anticipation. After a grueling hike through the low ceilings and narrow passageways of this mud cave, we emerged, climbed up a
few more small mountains, and located the cache. An amazing adventure all around. An adventure with a big assist from code.</p>
<p>If anyone knows of any other caches what were solved with code, or knows of any amazingly adventurous caches such as this,
please let me know. I’d love to do them.</p>
<p><img src="http://i.minus.com/i6oC7Id9ijSe1.JPG" width="890" height="280" title="Anza Borrego" /></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2014/04/18/why-does-it-feel-so-good-to-optimize/">Memoization and Why Does It Feel So Good to Optimize?</a></h1>
<p class="meta">
<time datetime="2014-04-18T11:14:58-04:00" pubdate data-updated="true">Apr 18<span>th</span>, 2014</time>
</p>
</header>
<div class="entry-content"><p>Recently I was faced with a challenge from <a href="http://projecteuler.net/">Project Euler</a> and asked how I would
best optimize the solution I wrote. Thinking for a little bit, I made a few changes, but none were as efficient as memoization.</p>
<p>Memoization is the idea of storing data in memory so it is available to be referenced again at a later time, instead of
running logic that you have already ran with the same inputs. I’ll show you how we can use memoization and a little bit of
basic math to optimize a different problem from Project Euler.</p>
<p><strong>Project Euler Problem #21: Amicable Numbers</strong></p>
<div class="bogus-wrapper"><notextile><figure class="code"><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>
</pre></td><td class="code"><pre><code class=""><span class="line">Let d(n) be defined as the sum of proper divisors of n (numbers less than n which divide evenly into n).
</span><span class="line">If d(a) = b and d(b) = a, where a ≠ b, then a and b are an amicable pair
</span><span class="line">and each of a and b are called amicable numbers.
</span><span class="line">
</span><span class="line">For example, the proper divisors of 220 are 1, 2, 4, 5, 10, 11, 20, 22, 44, 55 and 110;
</span><span class="line">therefore d(220) = 284. The proper divisors of 284 are 1, 2, 4, 71 and 142; so d(284) = 220.
</span><span class="line">
</span><span class="line">Evaluate the sum of all the amicable numbers under 10000.</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>You can find my first solution <a href="https://github.com/caguthrie/pe21/blob/master/amicable.rb">here</a>. Obviously,
the most expensive operations in an program are those which iterate or recurse. In this case, we have one different
loop that looks particularly expensive:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="k">def</span> <span class="nf">find_sum_of_divisors</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class="line"> <span class="n">sum</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class="line"> <span class="n">num</span><span class="o">.</span><span class="n">times</span> <span class="k">do</span> <span class="o">|</span><span class="n">i</span><span class="o">|</span>
</span><span class="line"> <span class="n">sum</span> <span class="o">+=</span> <span class="p">(</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span> <span class="k">if</span> <span class="n">num</span> <span class="o">%</span> <span class="p">(</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span> <span class="o">==</span> <span class="mi">0</span> <span class="o">&&</span> <span class="n">num</span> <span class="o">!=</span> <span class="p">(</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span>
</span><span class="line"> <span class="k">end</span>
</span><span class="line"> <span class="n">sum</span>
</span><span class="line"><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Here, we attempt to divide each number by each number smaller than it. If we are calling this loop on
<script type="math/tex">n</script> elements, then this will loop <script type="math/tex">t</script> times
for every <script type="math/tex">n_t</script>, for a time complexity of <script type="math/tex">O(n^2)</script>. </p>
<p>As the problem states, we need to compare the sum of the proper divisors to the proper divisors of the sum itself.
Therefore, we call the above method twice in this method:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="k">def</span> <span class="nf">is_amicable?</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class="line"> <span class="n">a</span> <span class="o">=</span> <span class="n">find_sum_of_divisors</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class="line"> <span class="n">b</span> <span class="o">=</span> <span class="n">find_sum_of_divisors</span><span class="p">(</span><span class="n">a</span><span class="p">)</span>
</span><span class="line"> <span class="k">if</span> <span class="n">num</span> <span class="o">==</span> <span class="n">b</span> <span class="o">&&</span> <span class="n">a</span> <span class="o">!=</span> <span class="n">b</span>
</span><span class="line"> <span class="kp">true</span>
</span><span class="line"> <span class="k">else</span>
</span><span class="line"> <span class="kp">false</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></notextile></div>
<p>So, we wrote this program. Let’s see how long it takes:</p>
<div class="bogus-wrapper"><notextile><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="bash"><span class="line">This took 5.733192 seconds
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Ok, let’s try to do better. First of all, let’s think of a math way to fix that find_sum_of_divisors method. No ruby
magic here. Since there are no integers less than 2 that divide into any number to come up with a proper divisor, all
the numbers <script type="math/tex">a</script> given an <script type="math/tex">n</script> in
$n\ge a\gt n/2$ do not need to be evaluated as those <script type="math/tex">n/a</script> will
always be $\gt2$. So instead of num.times in ruby, we can change it to:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="k">def</span> <span class="nf">find_sum_of_divisors</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class="line"> <span class="n">sum</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class="line"> <span class="p">(</span><span class="n">num</span><span class="o">/</span><span class="mi">2</span><span class="p">)</span><span class="o">.</span><span class="n">times</span> <span class="k">do</span> <span class="o">|</span><span class="n">i</span><span class="o">|</span> <span class="c1"># num is now num/2</span>
</span><span class="line"> <span class="n">sum</span> <span class="o">+=</span> <span class="p">(</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span> <span class="k">if</span> <span class="n">num</span> <span class="o">%</span> <span class="p">(</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span> <span class="o">==</span> <span class="mi">0</span> <span class="o">&&</span> <span class="n">num</span> <span class="o">!=</span> <span class="p">(</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span>
</span><span class="line"> <span class="k">end</span>
</span><span class="line"> <span class="n">sum</span>
</span><span class="line"><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Now let’s try running the program again:</p>
<div class="bogus-wrapper"><notextile><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="bash"><span class="line">This took 2.88388 seconds
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>We’ve, predictably, sliced our running time in half. Great! But we can do better. Remember memoization? Let’s do
that.</p>
<p>When we run this problem, it is very possible that we will be running find_sum_of_divisors on the same number multiple
times. Because this is a posibility, we can try storing the result of each method call in a hash and referencing
it if we need it again, instead of calling the same method again.</p>
<p>To do this, let’s initialize an empty hash each time we instantiate a new Amicable object.</p>
<div class="bogus-wrapper"><notextile><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="ruby"><span class="line"><span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">max</span><span class="p">)</span>
</span><span class="line"> <span class="vi">@max</span> <span class="o">=</span> <span class="n">max</span>
</span><span class="line"> <span class="vi">@hash</span> <span class="o">=</span> <span class="p">{}</span> <span class="c1">#<--- Add this line</span>
</span><span class="line"><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Finally, every time we go to call the find_sum_of_divisors method, we should check to see if we already have for a
given number. If we do, we can just use that data and not call the method, saving valuable time:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="k">def</span> <span class="nf">is_amicable?</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class="line"> <span class="vi">@hash</span><span class="o">[</span><span class="n">num</span><span class="o">]</span> <span class="o">||=</span> <span class="n">find_sum_of_divisors</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class="line"> <span class="vi">@hash</span><span class="o">[</span><span class="vi">@hash</span><span class="o">[</span><span class="n">num</span><span class="o">]]</span> <span class="o">||=</span> <span class="n">find_sum_of_divisors</span><span class="p">(</span><span class="vi">@hash</span><span class="o">[</span><span class="n">num</span><span class="o">]</span><span class="p">)</span>
</span><span class="line"> <span class="k">if</span> <span class="n">num</span> <span class="o">==</span> <span class="vi">@hash</span><span class="o">[</span><span class="vi">@hash</span><span class="o">[</span><span class="n">num</span><span class="o">]]</span> <span class="o">&&</span> <span class="vi">@hash</span><span class="o">[</span><span class="n">num</span><span class="o">]</span> <span class="o">!=</span> <span class="vi">@hash</span><span class="o">[</span><span class="vi">@hash</span><span class="o">[</span><span class="n">num</span><span class="o">]]</span>
</span><span class="line"> <span class="kp">true</span>
</span><span class="line"> <span class="k">else</span>
</span><span class="line"> <span class="kp">false</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></notextile></div>
<p>Great, now instead of calling a method, we can refernce data in a hash. Let’s see how much faster we made it:</p>
<div class="bogus-wrapper"><notextile><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="bash"><span class="line">This took 1.997799 seconds
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Just under two seconds, awesome! I’m sure there’s even more optimizations possible. Submit a pull request to my code
if you want to try. You can check out my Github repo for the problem <a href="https://github.com/caguthrie/pe21">
here</a>.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2014/04/04/passing-ruby-data-to-javascript/">Passing Ruby Data to Javascript</a></h1>
<p class="meta">
<time datetime="2014-04-04T15:36:42-04:00" pubdate data-updated="true">Apr 4<span>th</span>, 2014</time>
</p>
</header>
<div class="entry-content"><p>Using more front-end APIs and frameworks, I’ve found it useful to be able to, at times, pass data from ruby to my
Javascript files. The first time I ran into this problem was in <a href="http://avoid.caguthrie.com">Avoid</a>, the
NYC restaurant and health violations lookup tool I helped create. In this app, I used the Google Maps API to
dynamically update the geographic coordinates of restaurants in bad shape on a google map. I found this diffucult to
do as you can’t normally access Ruby data from Javascript. I’ve since found out a few ways to do so, and I’ll tell you
about them now.</p>
<p><strong>Data Attributes</strong></p>
<p>One of the simplest ways to pass a very limited amount of data is to use a data attribute on an HTML tag. For example,
if I wanted to pass a longitude and latitude from my rails app to Javascript by extracting it through the DOM with
jQuery:</p>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption><span>index.html.erb</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="html"><span class="line"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"latlong"</span> <span class="na">data-latitude=</span><span class="s">"32.796283"</span> <span class="na">data-longitude=</span><span class="s">"-117.129574"</span><span class="nt">></span>Something that doesn't matter<span class="nt"></span></span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<div class="bogus-wrapper"><notextile><figure class="code"><figcaption><span>coords.js</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="javascript"><span class="line"><span class="nx">$</span><span class="p">(</span><span class="s2">".latlong"</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"latitude"</span><span class="p">);</span> <span class="c1">//= "32.796283"</span>
</span><span class="line"><span class="nx">$</span><span class="p">(</span><span class="s2">".latlong"</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"longitude"</span><span class="p">);</span> <span class="c1">//= "-117.129574"</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>As you can see, this is realatively simple and straight forward. It doesn’t matter what is inside whatever
tag you have used to store your data, you’re just referencing the attributes of the tag itself. Also, it could be
any type of tag. This is easy when the data you need to access isn’t an object, but it a more primative data type,
or string.</p>
<p><strong>Gon Gem</strong></p>
<p>The <a href="https://github.com/gazay/gon">Gon Gem</a> is another way to do this, and it is generally more useful
when you are trying to pass more complex data-types, such as objects. Very simply, just install Gon:
<div class=’bogus-wrapper’><notextile><figure class="code"><figcaption><span>Gemfile.rb</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">gem</span> <span class="s1">'gon'</span> <span class="c1"># Put this in your Gemfile</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
Then, in your conroller, or really wherever in your app you want to store your data for Javascript use:
<div class=’bogus-wrapper’><notextile><figure class="code"><figcaption><span>Users_Controller.rb</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">gon</span><span class="o">.</span><span class="n">last_three_users</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">order</span><span class="p">(</span><span class="nb">name</span><span class="p">:</span> <span class="ss">:desc</span><span class="p">)</span><span class="o">.</span><span class="n">limit</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<div class=’bogus-wrapper’><notextile><figure class="code"><figcaption><span>users.js</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">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Welcome our three newest users!"</span><span class="p">);</span>
</span><span class="line"><span class="k">for</span><span class="p">(</span> <span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">gon</span><span class="p">.</span><span class="nx">last_three_users</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span> <span class="p">){</span>
</span><span class="line"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">gon</span><span class="p">.</span><span class="nx">last_three_users</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">"!"</span><span class="p">);</span>
</span><span class="line"><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
Simple enough. That saves a lot of time and cleans up your views nicely. No more Javascript hanging out in .html.erb
files.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2014/03/25/building-a-solid-foundation/">Building a Solid Foundation</a></h1>
<p class="meta">
<time datetime="2014-03-25T22:18:56-04:00" pubdate data-updated="true">Mar 25<span>th</span>, 2014</time>
</p>
</header>
<div class="entry-content"><p>I’m a math guy, a numbers dude, and and analytical person at my core. The one thing about web design that scared
me the most is the front-end. Have you seen my artistic side? One time I drew a stick figure and the paper exploded.
True story. Thankfully, things like Twitter Bootstrap and Foundation exist for artistically inept people such as
myself to look like we majored in a liberal art.</p>
<p>For those who don’t know, Foundation is basically just a huge CSS library that makes your website actually look
visually appealing. You can add class attributes to your HTML elements for control over your layout and other
basic functions. For a rails app, here is the long and tedious process to install Foundation:</p>
<div class="bogus-wrapper"><notextile><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">gem</span> <span class="s1">'foundation-rails'</span> <span class="c1"># Add this to your Gemfile</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Then, on your command line, run ‘bundle install’ and ‘rails g foundation:install’ to generate the Javascript
and CSS files it needs. You’re done! Phew!</p>
<p>Foundation will add a few files to your /assets/javascript and /assets/stylesheets directories. The main one
you should care about is the foundation_and_overrides file in the stylesheets directory.</p>
<p>The main thing you should know when styling your page with Foundation, is that each “row” is split up into 12 the width of 12 columns. All the neat features are in classes you add as attributes to your tags. For example:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="html"><span class="line"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
</span><span class="line"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"small-4 columns"</span><span class="nt">></span>
</span><span class="line"> This is some text on the first third of the page, vertically.
</span><span class="line"> <span class="nt"></div></span>
</span><span class="line"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"small-8 columns"</span><span class="nt">></span>
</span><span class="line"> This is some text on the latter two-thirds of the page, vertically.
</span><span class="line"> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.google.com"</span> <span class="na">class=</span><span class="s">"button"</span><span class="nt">></span>This button goes to Google<span class="nt"></a></span>
</span><span class="line"> <span class="nt"></div></span>
</span><span class="line"><span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>As you can see, the number of columns in a row add up to 12, as should be. You can also nest rows and columns
inside other rows and columns. For a stylistically challenged person such as myself, this simplicity is
invaluable. </p>
<p>But let’s say you want to style your links so that text link fonts are red. Remember that foundation_and_overrides
file I talked about earlier? Go to that file and look for anchor tag styling … ah, here it is!</p>
<div class="bogus-wrapper"><notextile><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="c1">// We use these to style anchors</span>
</span><span class="line"><span class="c1">// $anchor-text-decoration: none;</span>
</span><span class="line"><span class="c1">// $anchor-font-color: $primary-color;</span>
</span><span class="line"><span class="c1">// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Now all you do is uncomment the font color and replace it with hex red:</p>
<div class="bogus-wrapper"><notextile><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="c1">// We use these to style anchors</span>
</span><span class="line"><span class="c1">// $anchor-text-decoration: none;</span>
</span><span class="line"><span class="nx">$anchor</span><span class="o">-</span><span class="nx">font</span><span class="o">-</span><span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="nx">f00</span><span class="p">;</span>
</span><span class="line"><span class="c1">// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Pretty easy huh. You can still go and define your own CSS if you want, but this process makes things much
easier.</p>
<p>One thing I was most worried about when getting the front-end all nice and pretty was the navigation bar. With
foundation, key in a few div tags and you’re done.</p>
<div class="bogus-wrapper"><notextile><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="html"><span class="line"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"contain-to-grid sticky"</span><span class="nt">></span>
</span><span class="line"> <span class="nt"><nav</span> <span class="na">class=</span><span class="s">"top-bar"</span> <span class="na">data-topbar</span><span class="nt">></span>
</span><span class="line"> <span class="c"><!-- Left Nav Section --></span>
</span><span class="line"> <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"left"</span><span class="nt">></span>
</span><span class="line"> <span class="nt"><li></span><span class="err"><</span>%= link_to "App Name", root_url %><span class="nt"></li></span>
</span><span class="line"> <span class="nt"></ul></span>
</span><span class="line"> <span class="c"><!-- Right Nav Section --></span>
</span><span class="line"> <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"right"</span><span class="nt">></span>
</span><span class="line"> <span class="nt"><li></span><span class="err"><</span>%= link_to "Products", products_path %><span class="nt"></li></span>
</span><span class="line"> <span class="nt"><li</span> <span class="na">class=</span><span class="s">"has-dropdown"</span><span class="nt">></span>
</span><span class="line"> User Info
</span><span class="line"> <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
</span><span class="line"> <span class="nt"><li></span><span class="err"><</span>%= link_to "Sign-In", login_path %><span class="nt"></li></span>
</span><span class="line"> <span class="nt"><li></span><span class="err"><</span>%= link_to "Sign-Up", new_login_path %><span class="nt"></li></span>
</span><span class="line"> <span class="nt"></ul></span>
</span><span class="line"> <span class="nt"></li></span>
</span><span class="line"> <span class="nt"></ul></span>
</span><span class="line"> <span class="nt"></nav></span>
</span><span class="line"><span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>The div class sticky makes it so if you scroll down, the nav bar remains fixed to the top of your screen. I don’t
like that, but I thought I’d show you anyway. Everything else is pretty intuitive, just make sure you add the right
class to your tags and you’re good to go.</p>
<p>In all, Foundation is a quick way to make your website actually visually appealing in no time at all. And if you’re
artistically retarded such as myself, it makes you passable for at least starving-artist status.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2014/03/12/geocoder-and-my-very-first-gem/">Geocoder and My Very First Gem Attempt Part 1</a></h1>
<p class="meta">
<time datetime="2014-03-12T13:28:18-04:00" pubdate data-updated="true">Mar 12<span>th</span>, 2014</time>
</p>
</header>
<div class="entry-content"><p>I’ve always been weirdly into maps and geography. Back in 2010 I was introduced to Geocaching
and, from then on, suspciously looking around from tupperware was one of my new hobbies. A week
ago, I presented the web app I worked on for The Flatiron School’s meetup. The app showed the
restaurants with the most health code violations in a zip code. I was able to implement a gem
I found, called Geocoder, to convert addresses to geographic coordinates for use in the Google Maps
API so I could show the exact location of offending restaurants on a map. I didn’t really know too
much about Geocoder and was only able to implement one method to find coordinates:</p>
<div class="bogus-wrapper"><notextile><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="no">Geocoder</span><span class="o">.</span><span class="n">coordinates</span><span class="p">(</span><span class="s2">"11 broadway, new york, ny"</span><span class="p">)</span> <span class="c1">#=> [40.7055269, -74.014346]</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>But there is a much cooler way to use Geocoder: with ActiveRecord.</p>
<p>If you want to geocode your table en masse, you can add both a latitude and longitude
column in your database table connected with ActiveRecord. Then, in your model, add the following lines:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="kp">extend</span> <span class="o">::</span><span class="ss">Geocoder</span><span class="p">:</span><span class="ss">:Model</span><span class="o">::</span><span class="no">ActiveRecord</span>
</span><span class="line"><span class="n">geocoded_by</span> <span class="ss">:address</span>
</span><span class="line"><span class="n">after_validation</span> <span class="ss">:geocode</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>That first line apparently provides you with the methods you are using on the next two lines. When you add
the geocoded_by line, the geocoder uses the column you designate as the input to be geocoded. I’m not exactly
sure what after_validation does, but it seems like that it designates the direction of gecoding. Meaning here
we are specifying we want to convert an address into coordinates, as Geocoder also can convert coordinates into
and address.</p>
<p>So each time I save an element in my table, the geocoder gets the address and fills in the latitude and longitude
automatically. I did all these, ran my program, and got this error:</p>
<div class="bogus-wrapper"><notextile><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="bash"><span class="line">Google Geocoding API error: over query limit.
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>You have apparently have to be gentle. So I told my program to wait 5 seconds in-between each geocode so Google
wouldn’t be upset at me. It may work with a smaller number of seconds, but 5 seemed to work fine for me. </p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="k">def</span> <span class="nf">seed_db</span>
</span><span class="line"> <span class="no">JSON</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="no">RestClient</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="n">url</span><span class="p">))</span><span class="o">[</span><span class="s2">"data"</span><span class="o">].</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">line</span><span class="o">|</span>
</span><span class="line"> <span class="k">next</span> <span class="k">if</span> <span class="n">line</span><span class="o">.</span><span class="n">last</span> <span class="o">==</span> <span class="s2">"Borough"</span>
</span><span class="line"> <span class="n">f</span> <span class="o">=</span> <span class="no">Firehouse</span><span class="o">.</span><span class="n">create</span>
</span><span class="line"> <span class="n">f</span><span class="o">.</span><span class="n">address</span> <span class="o">=</span> <span class="s2">"</span><span class="si">#{</span><span class="n">line</span><span class="o">[</span><span class="mi">9</span><span class="o">]</span><span class="si">}</span><span class="s2"> </span><span class="si">#{</span><span class="n">line</span><span class="o">[</span><span class="mi">10</span><span class="o">]</span><span class="si">}</span><span class="s2">, NY"</span>
</span><span class="line"> <span class="n">f</span><span class="o">.</span><span class="n">save</span>
</span><span class="line"> <span class="nb">puts</span> <span class="s2">"Geocoding: </span><span class="si">#{</span><span class="n">f</span><span class="o">.</span><span class="n">address</span><span class="si">}</span><span class="s2">"</span>
</span><span class="line"> <span class="nb">sleep</span> <span class="mi">5</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></notextile></div>
<p>So we’re good! Now we have a database full of addresses and their coordinates.</p>
<p>One more thing I found cool with Geocoder was that you can pass it an external IP address and it also returns
coordinates! But don’t think you can stay spying on everyone now, the coordinates that it returns have a margin
of error which I found pretty significant for NYC, about a half a mile. For the gem I’m attempting to write, I
have used the user’s external IP address as the default starting location for directions to the nearest firehouse.</p>
<p>Speaking of which, I am attemping to use this program as an educational experience in my first gem. Using the
near function in Geocoder, I can pass geocoder a location (IP, physical address, landmark, etc.) and
it can return the nearest location in our geocoded database. I have the program working, but the transition
into a gem has been difficult and clunky. Integrating other gems and using bundler has proved to be a thorn in my
gem creation’s side. This is the error I’ve been receiving:</p>
<div class="bogus-wrapper"><notextile><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="bash"><span class="line">/Users/caguthrie/.rvm/gems/ruby-2.0.0-p353/gems/bundler-1.5.2/lib/bundler/shared_helpers.rb:24:in <span class="sb">`</span>default_gemfile<span class="err">'</span>: Could not locate Gemfile <span class="o">(</span>Bundler::GemfileNotFound<span class="o">)</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>I’ve been pointing directly to the Gemfile in the gemspec and it doesn’t seem to care. Interestingly enough,
the gem works if I run it in the directory where my source files are. However, it does not if I attempt
to run it outside that folder. The search continues, I will surely, shortly figure out the solution, then
people everywhere around NYC can get google maps’ walking directions to the nearest firehouse. Soon enough.</p>
<p>Wait for part 2 of this blog post when I finally figure out how to create a proper gem.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2014/02/27/smooth-as-sinatra/">Smooth as Sinatra</a></h1>
<p class="meta">
<time datetime="2014-02-27T11:10:24-05:00" pubdate data-updated="true">Feb 27<span>th</span>, 2014</time>
</p>
</header>
<div class="entry-content"><p><em>The best revenge is massive success.<br />-Frank Sinatra</em><br /><br />Even in death, Sinatra is continuing to make people swoon. Sinatra is a web framework for Ruby applications and it makes creating and deploying them super simple. As a Sinatra beginner, I have been looking into the documentation to find some neat tricks with this framework and I’d like to share them with you. So come fly with me, let’s fly away …</p>
<p><br /><b><h3>Sinatra Splat</b></h3><br /><p>Sintra is flexible in that there are many ways to implement wildcards in pathnames. For example:</p>
<div class=’bogus-wrapper’><notextile><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="ruby"><span class="line"><span class="n">get</span> <span class="s1">'/favorite_singer/*/favorite_album/*'</span> <span class="k">do</span>
</span><span class="line"> <span class="c1"># example: /favorite_singer/frank_sinatra/favorite_album/come_fly_with_me</span>
</span><span class="line"> <span class="n">params</span><span class="o">[</span><span class="ss">:splat</span><span class="o">]</span> <span class="c1"># => ["frank_sinatra", "come_fly_with_me"]</span>
</span><span class="line"><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></notextile></div></p>
<p>Here, you can let your user go to any sub-path where your wildcards are and get those sub-path names back to you in a handy array using the :splat symbol key in the params hash. This could be useful in a product catalog, or in any case where there could be a large number of keys that could return data from a database. There are other useful ways to use splats in pathnames, like for downloads:</p>
<div class="bogus-wrapper"><notextile><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="ruby"><span class="line"><span class="n">get</span> <span class="s1">'/download/*.*'</span> <span class="k">do</span>
</span><span class="line"> <span class="c1"># goes to /download/path/file.zip</span>
</span><span class="line"> <span class="n">params</span><span class="o">[</span><span class="ss">:splat</span><span class="o">]</span> <span class="c1"># => ["path/file", "zip"]</span>
</span><span class="line"><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>If you wanted a custom page for your users to look at while they download a file, you could easily do something similar to that. Sites like cnet.com and download.com may use Sinatra as they similar downloader pages.</p>
<p><br /><b><h3>Multiple gets for a sub-path</b></h3><br /><p>Sometimes you want to have a specific sub-path case, with a catch-all, psuedo-else get method if a different sub-path is chosen. Looking back at unnecessary complexity of the previous sentence, that may make zero sense to some people. So, I have an easy example below:</p>
<div class=’bogus-wrapper’><notextile><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>
</pre></td><td class=’code’><pre><code class="ruby"><span class="line"><span class="n">get</span> <span class="s1">'/the_capital_of/california/:cap'</span> <span class="k">do</span>
</span><span class="line"> <span class="n">pass</span> <span class="k">if</span> <span class="n">params</span><span class="o">[</span><span class="ss">:cap</span><span class="o">].</span><span class="n">downcase</span> <span class="o">!=</span> <span class="s2">"sacramento"</span>
</span><span class="line"> <span class="s2">"Correct!!"</span>
</span><span class="line"><span class="k">end</span>
</span><span class="line">
</span><span class="line"><span class="n">get</span> <span class="s1">'/the_capital_of/california/*'</span> <span class="k">do</span>
</span><span class="line"> <span class="s2">"Your knowledge of 3rd grade US geography is disasterous!"</span>
</span><span class="line"><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></notextile></div></p>
<p>Using the pass method in sinatra, the rest of the logic in the first get block is not executed and the next get method fitting the path parameters is executed. It’s another added bonus of the lazy ruby interpreter.</p>
<p><br /><b><h3>Browser Redirect</b></h3><br /><p>Lastly, you may want to redirect a user to a different path after you’ve taken some action. Maybe, for example, after you’ve filled out a form or shown a quick advertisment. The redirect method is a quick way to do that, and you can implement it like so:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="n">get</span> <span class="s1">'/restricted_area'</span> <span class="k">do</span>
</span><span class="line"> <span class="s2">"Why are you here!? Go away!"</span>
</span><span class="line"> <span class="nb">sleep</span> <span class="mi">2</span>
</span><span class="line"> <span class="n">redirect</span> <span class="n">to</span><span class="p">(</span><span class="s1">'/public_area'</span><span class="p">)</span>
</span><span class="line"><span class="k">end</span>
</span><span class="line">
</span><span class="line"><span class="n">get</span> <span class="s1">'/public_area'</span> <span class="k">do</span>
</span><span class="line"> <span class="s2">"Welcome!"</span>
</span><span class="line"><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>So pull up a fine leather chair, a glass of scotch, and enjoy the classiness that Sinatra has to offer you. If there’s a problem in a web app you need solving, old blue eyes has you covered.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2014/02/12/enumberable-is-enumermazing/">Enumberable Is Enumermazing</a></h1>
<p class="meta">
<time datetime="2014-02-12T13:35:30-05:00" pubdate data-updated="true">Feb 12<span>th</span>, 2014</time>
</p>
</header>
<div class="entry-content"><p>Coming from lower-level languages, the vast spectrum of built-in classes, modules, and methods in Ruby is absolutely mind-blowing. One of the most amazing of these is Enumerable. Enumerable is a mixin, which means that it adds functionality to the class that uses it. Oh, and functionality there is. The two most common objects that can call Enumerable methods are arrays and hashes. It is robust and adds some methods that do exactly what you think they would. For example:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="n">find</span>
</span><span class="line"><span class="n">any?</span>
</span><span class="line"><span class="kp">include</span><span class="p">?</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>The functionality I have found most useful are the searching and sorting methods. I’ll tell you about three of my favorites now.</p>
<p><b><h3>sort</h3></b></p>
<p>The sort method might seem like a shy, simplistic wallflower, but, with the power of blocks in ruby, sort transforms into a something any high school prom king would tremble at the sight of. Take this example:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="n">favorite_people</span> <span class="o">=</span> <span class="p">{</span>
</span><span class="line"> <span class="ss">:poet</span> <span class="o">=></span> <span class="s2">"Walt Whitman"</span><span class="p">,</span>
</span><span class="line"> <span class="ss">:baseball_player</span> <span class="o">=></span> <span class="s2">"Tony Gwynn"</span><span class="p">,</span>
</span><span class="line"> <span class="ss">:jeopardy_champion</span> <span class="o">=></span> <span class="s2">"Ken Jennings"</span><span class="p">,</span>
</span><span class="line"> <span class="ss">:billionaire</span> <span class="o">=></span> <span class="s2">"Bill Gates"</span><span class="p">,</span>
</span><span class="line"> <span class="ss">:dean</span> <span class="o">=></span> <span class="s2">"Avi Flombaum"</span>
</span><span class="line"> <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Let’s say you have this hash of favorite people and wish to sort it into an array, based on alphabetical order of their last name. Is that description of what I want to do longer than the code?</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="n">favorite_people</span><span class="o">.</span><span class="n">sort</span><span class="p">{</span> <span class="o">|</span><span class="n">a</span><span class="p">,</span> <span class="n">b</span><span class="o">|</span> <span class="n">a</span><span class="o">[</span><span class="mi">1</span><span class="o">].</span><span class="n">split</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span><span class="o">.</span><span class="n">last</span> <span class="o"><=></span> <span class="n">b</span><span class="o">[</span><span class="mi">1</span><span class="o">].</span><span class="n">split</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span><span class="o">.</span><span class="n">last</span><span class="p">}</span>
</span><span class="line">
</span><span class="line"><span class="c1">#=> [[:dean, "Avi Flombaum"],</span>
</span><span class="line"><span class="c1"># [:billionaire, "Bill Gates"],</span>
</span><span class="line"><span class="c1"># [:baseball_player, "Tony Gwynn"],</span>
</span><span class="line"><span class="c1"># [:jeopardy_champion, "Ken Jennings"],</span>
</span><span class="line"><span class="c1"># [:poet, "Walt Whitman"]]</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Yep.</p>
<p>When used on a hash, sort converts your hash to an array of arrays of length 2, where each sub-array is a key/value pair. This is defined in the hash’s each method, a method I will talk more about a little later. Enumerable’s sort function uses these return values to sort your input. The great thing about the sort method is that you can sort it however you tell your program to. No more iterating though your entire data structure. This is even more relevant because if you have an object you would like to use with Enumerable, all you have to do is define an each method in your class which yields each value you would like Enumerable to operate on.</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="k">class</span> <span class="nc">DeliciousFood</span>
</span><span class="line">
</span><span class="line"> <span class="kp">include</span> <span class="no">Enumerable</span>
</span><span class="line">
</span><span class="line"> <span class="k">def</span> <span class="nf">yum</span>
</span><span class="line"> <span class="o">[</span><span class="s2">"Tangerine"</span><span class="p">,</span> <span class="s2">"Burrito"</span><span class="p">,</span> <span class="s2">"Cake"</span><span class="p">,</span> <span class="s2">"Artisanal Pizza"</span><span class="p">,</span> <span class="s2">"Bacon Grease"</span><span class="o">]</span>
</span><span class="line"> <span class="k">end</span>
</span><span class="line">
</span><span class="line"> <span class="k">def</span> <span class="nf">each</span>
</span><span class="line"> <span class="n">yum</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">y</span><span class="o">|</span>
</span><span class="line"> <span class="k">yield</span> <span class="n">y</span>
</span><span class="line"> <span class="k">end</span>
</span><span class="line"> <span class="k">end</span>
</span><span class="line"><span class="k">end</span>
</span><span class="line">
</span><span class="line"><span class="no">DeliciousFood</span><span class="o">.</span><span class="n">new</span><span class="o">.</span><span class="n">sort</span> <span class="p">{</span> <span class="o">|</span><span class="n">a</span><span class="p">,</span> <span class="n">b</span><span class="o">|</span> <span class="n">a</span> <span class="o"><=></span> <span class="n">b</span> <span class="p">}</span> <span class="c1">#=> ["Artisanal Pizza", "Bacon Grease", "Burrito", "Cake", "Tangerine"]</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>You want your class to be Enumermazing? Just like that, it’s as easy as defining an each method.</p>
<p><b><h3>grep</h3></b></p>
<p>The method grep is, just as you command line monkeys would think, a function that allows you to search through your data and find what matches your search parameter(s). Just like sort, and many other methods in Enumerable, grep can take a block to create your own custom searches. Let’s return to our DeliciousFood class above and try searching for each piece data that includes the letter “k” or “z”, because I only eat food that contains at least one of those letters:</p>
<div class="bogus-wrapper"><notextile><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="no">DeliciousFood</span><span class="o">.</span><span class="n">new</span><span class="o">.</span><span class="n">grep</span><span class="p">(</span><span class="sr">/(k|z)/</span><span class="p">)</span> <span class="p">{</span> <span class="o">|</span><span class="n">a</span><span class="o">|</span> <span class="s2">"I ate some "</span> <span class="o">+</span> <span class="n">a</span> <span class="p">}</span> <span class="c1">#=> ["I ate some Cake", "I ate some Artisanal Pizza"]</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p><b><h3>partition</h3></b></p>
<p>Lastly, a fun, easy, and quick way to put things into two different arrays. The partition method takes in some data, and outputs it in an array of two arrays. If the block passed into it evaluates as true, it gets placed in the first sub-array. If not, it gets placed in the second sub-array. Lets say I’m hungry but I’m confused about what to eat from my kitchen table:</p>
<div class="bogus-wrapper"><notextile><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>
</pre></td><td class="code"><pre><code class="ruby"><span class="line"><span class="n">food</span> <span class="o">=</span> <span class="o">[</span><span class="s2">"Tangerine"</span><span class="p">,</span> <span class="s2">"Burrito"</span><span class="p">,</span> <span class="s2">"Cake"</span><span class="p">,</span> <span class="s2">"Artisanal Pizza"</span><span class="p">,</span> <span class="s2">"Bacon Grease"</span><span class="o">]</span>
</span><span class="line"><span class="n">not_food</span> <span class="o">=</span> <span class="o">[</span><span class="s2">"Concrete"</span><span class="p">,</span> <span class="s2">"Fedora"</span><span class="p">,</span> <span class="s2">"Silica Gel"</span><span class="p">,</span> <span class="s2">"Cigarette Butt"</span><span class="o">]</span>
</span><span class="line">
</span><span class="line"><span class="n">my_kitchen_table</span> <span class="o">=</span> <span class="o">[</span><span class="s2">"Concrete"</span><span class="p">,</span> <span class="s2">"Tangerine"</span><span class="p">,</span> <span class="s2">"Burrito"</span><span class="p">,</span> <span class="s2">"Fedora"</span><span class="p">,</span> <span class="s2">"Cake"</span><span class="o">]</span>
</span><span class="line">
</span><span class="line"><span class="n">output</span> <span class="o">=</span> <span class="n">my_kitchen_table</span><span class="o">.</span><span class="n">partition</span> <span class="p">{</span> <span class="o">|</span><span class="n">item</span><span class="o">|</span> <span class="n">food</span><span class="o">.</span><span class="n">include?</span><span class="p">(</span><span class="n">item</span><span class="p">)</span> <span class="p">}</span> <span class="c1">#=> [["Tangerine", "Burrito", "Cake"],["Concrete","Fedora"]]</span>
</span><span class="line"><span class="nb">puts</span> <span class="n">output</span><span class="o">[</span><span class="mi">0</span><span class="o">]</span> <span class="c1">#=> ["Tangerine", "Burrito", "Cake"]</span>
</span></code></pre></td></tr></table></div></figure></notextile></div>
<p>Thankfully Enumerable and partition saved me from eating concrete or my fedora. What can’t Ruby do?</p>
</div>
</article>
<div class="pagination">
<a href="/blog/archives">Blog Archives</a>
</div>
</div>
<aside class="sidebar">
<section>
<h1>About Me</h1>
<div style="margin-top:15px; ">
<img style="" class="left" src='http://i.minus.com/iGpwixQhqCcO5.jpg'/>
<p><a href="http://caguthrie.github.io">Chris Guthrie</a><br/>
Developing Ruby Developer, Poker Enthusiast<br>New York, NY</p>
</div>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/blog/2014/05/04/i-programed-my-way-into-a-mud-cave/">I Programmed My Way Into a Mud Cave</a>
</li>
<li class="post">
<a href="/blog/2014/04/18/why-does-it-feel-so-good-to-optimize/">Memoization and Why Does It Feel So Good to Optimize?</a>
</li>
<li class="post">
<a href="/blog/2014/04/04/passing-ruby-data-to-javascript/">Passing Ruby Data to Javascript</a>
</li>
<li class="post">
<a href="/blog/2014/03/25/building-a-solid-foundation/">Building a Solid Foundation</a>
</li>
<li class="post">
<a href="/blog/2014/03/12/geocoder-and-my-very-first-gem/">Geocoder and My Very First Gem Attempt Part 1</a>
</li>