This repository has been archived by the owner on Apr 11, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
708 lines (466 loc) · 51.2 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
<!DOCTYPE HTML>
<html>
<head>
<script data-cfasync="false" type="text/javascript" src="//use.typekit.net/axj3cfp.js"></script>
<script data-cfasync="false" type="text/javascript">try{Typekit.load();}catch(e){}</script>
<meta charset="utf-8">
<title>Here we go! | Codin'</title>
<meta name="author" content="Jessie Nadler">
<meta name="description" content="Learning about programming and some other things along the way."> <meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/atom.xml" rel="alternate" title="Codin'" type="application/atom+xml">
<link rel="canonical" href="">
<link href="/favicon.png" rel="shortcut icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="/stylesheets/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.fancybox.pack.js"></script>
<script language="Javascript" type="text/javascript">
$(document).ready(
function() {
(function($) {
$(".fancybox[data-content-id]").each(function() {
this.href = $(this).data('content-id');
});
$(".fancybox").fancybox({
beforeLoad: function() {
var el,
id = $(this.element).data('title-id');
if (id) {
el = $('#' + id);
if (el.length) {
this.title = el.html();
}
}
if ($(this).data('content')) {
this.content = $(this).data('content');
}
},
helpers: {
title: {
type: 'inside'
}
}
});
})(jQuery);
}
);
</script>
</head>
<body>
<header id="header" class="inner"><h1><a href="/">Codin'</a></h1>
<h4>Here we go!</h4>
<nav id="main-nav"><ul>
<li><a href="/">Blog</a></li>
<li><a href="/about">About</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/archives">Archive</a></li>
<li><a href="http://github.com/nadlerjessie">Github</a></li>
</ul>
</nav>
<nav id="mobile-nav">
<div class="alignleft menu">
<a class="button">Menu</a>
<div class="container"><ul>
<li><a href="/">Blog</a></li>
<li><a href="/about">About</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/archives">Archive</a></li>
<li><a href="http://github.com/nadlerjessie">Github</a></li>
</ul>
</div>
</div>
<div class="alignright search">
<a class="button"></a>
<div class="container">
<form action="https://www.google.com/search" method="get">
<input type="text" name="q" results="0">
<input type="hidden" name="q" value="site:nadlerjessie.github.io">
</form>
</div>
</div>
</nav>
</header>
<div id="content" class="inner">
<article class="post">
<h2 class="title">
<a href="/blog/2015/11/29/when-rails-met-ember/">
When Rails Met Ember</a>
</h2>
<div class="entry-content">
<p>During the past week and a half at the Flatiron School I have been learning about Ember. The big brewing question in my mind while learning different features was, how does this work with Rails? I worked on labs where the back-end was done for me and I only had to build out the front-end to make requests to the Rails API. I know this is something we will cover next week but I was too eager to wait. Can you think of a better way to spend the day before Thanksgiving?!</p>
<p>The purpose of this blog post is to go through the basic steps of creating an App with a Rails front-end and an Ember back-end. This post assumes you know how to build apps in both Rails and Ember but need more information on how to connect them.</p>
<p><strong>Create a Rails app</strong> <br>
That’s easy enough! There are two ways to do this. I used rails new and later added the rails-api gem to my gemfile. Alternatively, you can install the gem in your terminal <code>gem install rails-api</code> and generate a new Rails::API with <code>rails-api new my_api</code>
This gem makes ApplicationController inherit from ActionController::API instead of ActionController::Base. If you generate your app the standard way, this is a change you will have to make manually to your app/controllers/application_controller.rb file. Be sure to comment out the protect_from_forgery line as well. For extra information on this gem, refer to the <a href= "https://github.com/rails-api/rails-api">README on github</a>. <br></p>
<p><strong>Add gems</strong> <br>
In additon to the rails-api gem, there are a few others needed to correctly configure your app as an API. The first is rack-cors. This is a piece of Rack Middleware. It will make which makes cross-origin AJAX possible by handling Cross-Origin Resource Sharing (CORS). This is critical because otherwise your Ember app won’t be able to make requests to your Rails app! Add <code>gem 'rack-cors', :require => 'rack/cors'</code> to your gemfile. In config/application.rb add the following inside YourApp::Application</p>
<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>
</pre></td><td class='code'><pre><code class=''><span class='line'>config.middleware.insert_before 0, "Rack::Cors" do
</span><span class='line'> allow do
</span><span class='line'> origins '*'
</span><span class='line'> resource '*', :headers => :any, :methods => [:get, :post, :options]
</span><span class='line'> end
</span><span class='line'> end</span></code></pre></td></tr></table></div></figure>
<p>The ‘*’ for origins is a wildcard that allows for requests to be made from any origin. If you know specifically which origin(s) you want to allow access from, maybe your localhost port or an existing web app, replace the star with the accepted URL(s). Refer to the <a href= "https://github.com/cyu/rack-cors">README on github</a> for more on rack-cors.</p>
<p>The other gem to include is active_model_serializers. This will allow you to serialize your ActiveModel/ActiveRecord objects into your desired format (ex: JSON). Include <code>ActionController::Serialization</code> in your application controller. <br></p>
<p><strong>Define associations</strong> <br>
Set up your schema and define your associations as you normally would in the models. There is also a folder for serialzers, which needs to be configured. You will need to specify which attributes and associations you want to include in the serialzed form. For example:</p>
<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>
</pre></td><td class='code'><pre><code class=''><span class='line'>class PostSerializer < ActiveModel::Serializer
</span><span class='line'> attributes :id, :title, :body
</span><span class='line'> has_many :comments
</span><span class='line'>end</span></code></pre></td></tr></table></div></figure>
<p>Having the full comment may not be ideal for your application. This will depend on how many associations you have and the size of your models. Adding <code>embed :ids, include: true</code> will embed the ids of the comments in the JSON response. For more, look at the <a href= "https://github.com/rails-api/active_model_serializers/tree/0-9-stable">README on github</a>. <br></p>
<p><strong>Create an Ember app</strong> <br>
Run <code>ember new my-app</code>. Set up your models to match the responses from the Rails side. For the example above, the app/models/post.js file would look like:</p>
<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>
</pre></td><td class='code'><pre><code class=''><span class='line'>import DS from 'ember-data';
</span><span class='line'>
</span><span class='line'>export default DS.Model.extend({
</span><span class='line'> title: DS.attr('string'),
</span><span class='line'> body: DS.attr('text'),
</span><span class='line'> comments: DS.hasMany('comments', {async: true})
</span><span class='line'>});</span></code></pre></td></tr></table></div></figure>
<p>Next you will need to install active-model-adapter. This will act as both an adapter and a serializer. Run <code>ember install active-model-adapter</code>. If you don’t already have an application adapter, generate one. It should be in app/adapters/application.js. Replace the content with the following:</p>
<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>
</pre></td><td class='code'><pre><code class=''><span class='line'>import ActiveModelAdapter from 'active-model-adapter';
</span><span class='line'>
</span><span class='line'>export default ActiveModelAdapter.extend({
</span><span class='line'> namespace: "api/v1",
</span><span class='line'> host: "http://localhost:3000"
</span><span class='line'>});</span></code></pre></td></tr></table></div></figure>
<p>The namespace should reflect any namespacing done in the Rails side. Though not explicitly stated above, it is convention to have the controllers to be in a namespace of API and the version number. <br></p>
<p><strong>Finish up the front-end</strong><br>
Define your models, add any components you may need, create your templates and do whatever else you need the front-end of your application to have!</p>
</div>
<div class="meta">
<div class="date">
<time datetime="2015-11-29T16:03:30-05:00" pubdate data-updated="true"></time></div>
<div class="tags">
<a class='category' href='/blog/categories/api/'>api</a>, <a class='category' href='/blog/categories/ember/'>ember</a>, <a class='category' href='/blog/categories/flatiron/'>flatiron</a>, <a class='category' href='/blog/categories/rails/'>rails</a>
</div>
</div></article>
<article class="post">
<h2 class="title">
<a href="/blog/2015/11/08/refactoring-my-first-rails-app/">
Refactoring My First Rails App</a>
</h2>
<div class="entry-content">
<p>Last week I worked in a group to create my first Rails app! I had only created one other app from scratch in the past, which was done in Sinatra. A group of fellow Flatiron students and I made a dinner party organizer, currently titled <a href = "https://github.com/nadlerjessie/dinner_party/tree/master/DinnerParty">Bring It</a>. I was really excited by the project and was ready to get some of the functionality going. Unfortunately, this caused me to write some code that wasn’t very DRY.</p>
<p>This project gave me a new appreciation for the refactoring process, which I hadn’t yet done on such a big scale. In this post I’ll take you through the cycle of just one section of code.</p>
<p><strong>The Problem:</strong><br>
I have a class called MenuItems, which belongs to a Dinner as well as a Dish. This means that each menu item would be for a specific dinner party as well as a specific dish with information about the food itself. However each dish also had a type of course: main dishes, salads, appetizers and desserts. On the views I wanted to group the dishes by their course so they could have appropriate headers, like a normal menu.</p>
<p><strong>Round 1: My Initial Code [class MenuItemsController]</strong><br>
In my controller I wrote the following code:</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="k">def</span> <span class="nf">index</span>
</span><span class='line'> <span class="vi">@main_dishes</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Main Dish"</span><span class="p">})</span>
</span><span class='line'> <span class="vi">@salads</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Salad"</span><span class="p">})</span>
</span><span class='line'> <span class="vi">@appetizers</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Appetizer"</span><span class="p">})</span>
</span><span class='line'> <span class="vi">@desserts</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Dessert"</span><span class="p">})</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>There are clearly a ton of issues with this code. A short list of issues:</p>
<p>1) When passing these instance variables to the views, I needed to have different HTML calls to iterate through each one<br>
2) It’s incredibly repetitive<br>
3) The database searches were happening in the controller<br>
4) The courses are hardcoded</p>
<p>But it worked and that was what I needed to get started! Red, green, refactor… right? The first bit of refactoring I did was to alleviate problem number 1 stated above. I wanted to remove the redundancy from the view.</p>
<p><strong>Round 2: A First Attempt to Refactor [class MenuItemsController]</strong></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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">index</span>
</span><span class='line'> <span class="n">main_dishes</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Main Dish"</span><span class="p">})</span>
</span><span class='line'> <span class="n">salads</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Salad"</span><span class="p">})</span>
</span><span class='line'> <span class="n">appetizers</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Appetizer"</span><span class="p">})</span>
</span><span class='line'> <span class="n">desserts</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="s2">"Dessert"</span><span class="p">})</span>
</span><span class='line'> <span class="vi">@all_dishes</span> <span class="o">=</span> <span class="o">[</span><span class="n">main_dishes</span><span class="p">,</span> <span class="n">salads</span><span class="p">,</span> <span class="n">appetizers</span><span class="p">,</span> <span class="n">desserts</span><span class="o">]</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>This was really no better on the controller side but it allowed me to iterate through @all_dishes in my index view rather than having separate code to display each course. At this point I wisened up and decided I didn’t want four separate calls and I didn’t want any of the database searches to be in the controller. In my MenuItem model I wrote the following:</p>
<p><strong>Round 3: Moving Code to the Model</strong><br>
In the MenuItem model I wrote:</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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="vc">@@courses</span> <span class="o">=</span> <span class="o">[</span><span class="s2">"Main Dish, Salad, Appetizer, Dessert"</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="k">def</span> <span class="nc">self</span><span class="o">.</span><span class="nf">index_by_course</span><span class="p">(</span><span class="n">dinner_id</span><span class="p">)</span>
</span><span class='line'> <span class="vc">@@courses</span><span class="o">.</span><span class="n">map</span> <span class="k">do</span> <span class="o">|</span><span class="n">course</span><span class="o">|</span>
</span><span class='line'> <span class="nb">self</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="n">course</span><span class="p">})</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>And in the MenuItemsController:</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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">index</span>
</span><span class='line'> <span class="vi">@menu_items_by_course</span> <span class="o">=</span> <span class="no">MenuItem</span><span class="o">.</span><span class="n">index_by_course</span><span class="p">(</span><span class="vi">@dinner</span><span class="o">.</span><span class="n">id</span><span class="p">)</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>This was definitely feeling like a step in the right direction. One remaining issue was that I was defining courses as a class variable in MenuItem even though it was a property of Dish. This got me into some trouble later. I had written similar code to organize all of the dishes by their course (as opposed to just dishes for this specific dinner menu, or menu items) and refactored similarly as well. All of a sudden on one of my pages I didn’t see the main dishes! I was already weary of my definition of courses, especially because I had it in two places. It turned out, I had typed one as “Main Dishes” and another as “Main Dish”. It was definitely time to remove this redundancy.</p>
<p><strong>Round 4: Adding a CONSTANT!</strong><br>
Course was defined as a property of a dish, so I wanted to add the constant there. The dish model became:</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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Dish</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
</span><span class='line'> <span class="n">has_many</span> <span class="ss">:menu_items</span>
</span><span class='line'> <span class="n">has_many</span> <span class="ss">:dish_assignments</span><span class="p">,</span> <span class="ss">through</span><span class="p">:</span> <span class="ss">:menu_items</span>
</span><span class='line'>
</span><span class='line'> <span class="no">COURSES</span> <span class="o">=</span> <span class="o">[</span><span class="s2">"Main Dishes"</span><span class="p">,</span> <span class="s2">"Sides"</span><span class="p">,</span> <span class="s2">"Appetizers"</span><span class="p">,</span> <span class="s2">"Desserts"</span><span class="p">,</span> <span class="s2">"Beverages"</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'> <span class="k">def</span> <span class="nc">self</span><span class="o">.</span><span class="nf">find_available_dishes</span><span class="p">(</span><span class="n">dinner_id</span><span class="p">,</span> <span class="n">menu_ids</span><span class="p">)</span>
</span><span class='line'> <span class="no">COURSES</span><span class="o">.</span><span class="n">map</span> <span class="k">do</span> <span class="o">|</span><span class="n">course</span><span class="o">|</span>
</span><span class='line'> <span class="no">Dish</span><span class="o">.</span><span class="n">select</span><span class="p">(</span><span class="s2">"dishes.*"</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">course</span><span class="p">:</span> <span class="n">course</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="o">.</span><span class="n">not</span><span class="p">(</span><span class="nb">id</span><span class="p">:</span> <span class="n">menu_ids</span><span class="p">)</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></code></pre></td></tr></table></div></figure>
<p>I was then able to update my menu_items_by_course class method to:</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='ruby'><span class='line'><span class="k">def</span> <span class="nc">self</span><span class="o">.</span><span class="nf">index_by_course</span><span class="p">(</span><span class="n">dinner_id</span><span class="p">)</span>
</span><span class='line'> <span class="no">Dish</span><span class="o">::</span><span class="no">Courses</span><span class="o">.</span><span class="n">map</span> <span class="k">do</span> <span class="o">|</span><span class="n">course</span><span class="o">|</span>
</span><span class='line'> <span class="nb">self</span><span class="o">.</span><span class="n">joins</span><span class="p">(</span><span class="ss">:dish</span><span class="p">)</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="ss">dinner_id</span><span class="p">:</span> <span class="n">dinner_id</span><span class="p">,</span> <span class="ss">dishes</span><span class="p">:</span> <span class="p">{</span><span class="ss">course</span><span class="p">:</span> <span class="n">course</span><span class="p">})</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><strong>Reviewing the Issues</strong><br>
Going back to my short list of issues with my initial code, I can see how those issues were resolved.</p>
<p>1) <em>When passing these instance variables to the views, I needed to have different HTML calls to iterate through each one</em> - <strong>I solved this one early on in my refactoring process. First by passing four different database calls into an array before passing the instance variable to the view and later by mapping results while iterating over courses.</strong><br>
2) <em>It’s incredibly repetitive</em> - <strong>Much of this repetitive nature has been reduced using iteration</strong><br>
3) <em>The database searches were happening in the controller</em> - <strong>Database searches were now moved to the model</strong><br>
4) <em>The courses are hardcoded</em> - <strong>While the courses are listed in the dish model, they are only listed in one place. This makes debugging easier and gives much more flexibility! I ended up changing the course options to Main Dishes, Sides, Appetizers, Desserts, and I added Beverages, which was all easy because they were defined in a single place. As a result of making my code more DRY I didn’t have to made modifications in the other models, controllers, or views!</strong></p>
<p>I know that I will always be able to refactor code after I write it but hopefully by reflecting on my refactoring process I will write cleaner code in earlier stages.</p>
</div>
<div class="meta">
<div class="date">
<time datetime="2015-11-08T16:41:39-05:00" pubdate data-updated="true"></time></div>
</div></article>
<article class="post">
<h2 class="title">
<a href="/blog/2015/10/23/capybara/">
Capybara</a>
</h2>
<div class="entry-content">
<p>In the last week I started to work with Sinatra and building my first web applications. Some of the labs I have done at the Flatiron School have used the Capybara gem as part of the test specs. Though I was interacting with Capybara, it was mostly indirectly. I didn’t need to look too closely at the Capybara functionality until a group I was working with needed to write some specs of our own.</p>
<p>Capybara is a framework that allows you to test your web-based applications. Capybara is a web-based automation tool; it will simulate how your users will interact with your application.</p>
<p>Capybara is loaded using the DSL (domain specific language) and has a number of capabilities similar to what a user might do when visiting a webpage. Some basic functions are listed below:</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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">visit</span><span class="p">(</span><span class="err">‘</span><span class="n">page_url</span><span class="err">’</span><span class="p">)</span> <span class="c1">#navigate to page</span>
</span><span class='line'><span class="n">click_link</span><span class="p">(</span><span class="err">‘</span><span class="n">id_of_link</span><span class="err">’</span><span class="p">)</span> <span class="c1">#click link</span>
</span><span class='line'><span class="n">click_button</span><span class="p">(</span><span class="err">‘</span><span class="n">link_text</span><span class="err">’</span><span class="p">)</span> <span class="c1">#click button</span>
</span><span class='line'><span class="n">click_on</span><span class="p">(</span><span class="err">‘</span><span class="n">link_text</span><span class="err">’</span><span class="p">)</span> <span class="c1">#this will look for either a link or a button</span>
</span><span class='line'><span class="n">fill_in</span><span class="p">(</span><span class="err">‘</span><span class="n">params_path</span><span class="err">’</span><span class="p">,</span> <span class="ss">:with</span> <span class="o">=></span> <span class="err">‘</span><span class="n">value</span><span class="err">’</span><span class="p">)</span> <span class="c1">#adds content to field</span>
</span><span class='line'><span class="n">choose</span><span class="p">(</span><span class="err">‘</span><span class="n">radio_button</span><span class="err">’</span><span class="p">)</span> <span class="c1">#checks radio button</span>
</span><span class='line'><span class="n">check</span><span class="p">(</span><span class="err">‘</span><span class="n">checkbox</span><span class="err">’</span><span class="p">)</span> <span class="c1">#selects checkbox</span>
</span><span class='line'><span class="n">uncheck</span><span class="p">(</span><span class="err">‘</span><span class="n">checkbox</span><span class="err">’</span><span class="p">)</span> <span class="c1">#removes existing checkbox selection</span>
</span></code></pre></td></tr></table></div></figure>
<p>These are super useful! Using Capybara your test spec can navigate to any page and make selections just like a user would make. Typically the last thing to check is whether or not the rendered page has the correct content. Capybara has a keyword ‘page’, which allows you to do just that!</p>
<p>Below is the code I used to confirm my webpage was working. First I created an instance variable to operate on (1). Next I navigated to the correct webpage (2) and filled in the name for a landmark (3). I saved the file (4) and confirmed that saving the page took me to the right URL (5). Last (6), I confirmed that the page had the content I added in step 3! Easy, right?</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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">describe</span> <span class="no">LandmarksController</span> <span class="k">do</span>
</span><span class='line'> <span class="n">it</span> <span class="s2">"changes landmark and saves changes"</span> <span class="k">do</span>
</span><span class='line'> <span class="vi">@landmark</span> <span class="o">=</span> <span class="no">Landmark</span><span class="o">.</span><span class="n">first</span> <span class="c1">#1</span>
</span><span class='line'> <span class="n">visit</span> <span class="s2">"/landmarks/</span><span class="si">#{</span><span class="vi">@landmark</span><span class="o">.</span><span class="n">id</span><span class="si">}</span><span class="s2">/edit"</span> <span class="c1">#2</span>
</span><span class='line'> <span class="n">fill_in</span><span class="p">(</span><span class="s1">'landmark[name]'</span><span class="p">,</span> <span class="ss">:with</span> <span class="o">=></span> <span class="s1">'Statue of Liberty'</span><span class="p">)</span> <span class="c1">#3</span>
</span><span class='line'> <span class="n">click_button</span><span class="p">(</span><span class="s1">'Save'</span><span class="p">)</span> <span class="c1">#4</span>
</span><span class='line'> <span class="n">expect</span><span class="p">(</span><span class="n">current_path</span><span class="p">)</span><span class="o">.</span><span class="n">to</span> <span class="n">eq</span> <span class="s2">"/landmarks/</span><span class="si">#{</span><span class="vi">@landmark</span><span class="o">.</span><span class="n">id</span><span class="si">}</span><span class="s2">"</span> <span class="c1">#5</span>
</span><span class='line'> <span class="n">expect</span><span class="p">(</span><span class="n">page</span><span class="p">)</span><span class="o">.</span><span class="n">to</span> <span class="n">have_content</span> <span class="s1">'Statue of Liberty'</span> <span class="c1">#6</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>Well, if it all works as expected, it’s easy. Unfortunately my group and I ran into some issues running this test. We were getting an issue that we weren’t seeing in our actual application. Because Capybara is running a hidden browser, we needed a way to confirm that our test was seeing the same thing we were seeing in our localhost.</p>
<p>Capybara has some awesome ways to do this. The browser is hidden but it doesn’t have to be. I learned about the gem ‘launchy’. According to the ReadMe for the gem, “Launchy is a helper class for launching cross-platform applications”. This means that no matter what your platform is, launchy will allow you perform applications you otherwise might need to specify in different syntaxes.</p>
<p>But back to Capybara. I needed to be able to open the page that Capybara was opening using the ‘visit’ keyword in order to debug. Capybara has a method save_and_open_page, which saves a current snapshot of the page and opens it. This allowed my group to see we had an issue with our ids because we hadn’t opened our Capybara DSL connection! After adding the following lines to the spec helper, we were off to the races.</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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="no">RSpec</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span> <span class="o">|</span><span class="n">config</span><span class="o">|</span>
</span><span class='line'> <span class="n">config</span><span class="o">.</span><span class="n">include</span> <span class="no">Capybara</span><span class="o">::</span><span class="no">DSL</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>There are some other web-based automation tools, such as <a href = "http://www.rubydoc.info/gems/selenium-webdriver/0.0.28/Selenium/WebDriver/Driver">Selenium</a> and <a href= "http://watir.com/">Watir</a>, which are worth looking into if Capybara doesn’t have everything you need. Unfortunately if you Google those you won’t get shown cute pictures of the animal :)</p>
<p><img class="center" src="/images/capybara.jpg"></p>
</div>
<div class="meta">
<div class="date">
<time datetime="2015-10-23T00:00:00-04:00" pubdate data-updated="true"></time></div>
</div></article>
<article class="post">
<h2 class="title">
<a href="/blog/2015/10/05/whats-the-difference-between-dot-dot-dot/">
What's the Difference Between...?</a>
</h2>
<div class="entry-content">
<p>As a new programmer I have frequently found myself asking the question, what’s the difference between these two methods? This is most common when it comes to enumerables. Here I’ll explain some differences between a few methods I find very useful. It is important to understand the differences so you can choose the best enumerable and create the most efficient code.</p>
<p>Before I dive in, it may be helpful to define an enumerable. Ruby-Doc defines the <code>Enumerable</code> module to provide collection classes with several traversal and searching methods, and with the ability to sort.</p>
<p>Enumerable methods allow you to loop over all of the members of a given collection. Each member will be passed to a block. Some enumerables will simply verify the truthiness of a statement and others will return a modified argument.</p>
<p>First let’s get some easy ones out of the way. What’s the difference between collect and map? Nothing, they’re aliases! What’s the difference between find and detect? Nothing!</p>
<p>Now that we’ve covered a few alias methods, let’s dig into some more complex comparisons.</p>
<p><strong>Select vs Collect</strong>
<em>Select</em> will iterate through each member and only return a given member if the information in the block is true. This returns a new 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>
<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">array</span> <span class="o">=</span> <span class="o">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">select</span><span class="p">{</span> <span class="o">|</span><span class="n">num</span><span class="o">|</span> <span class="n">num</span><span class="o">.</span><span class="n">even?</span> <span class="p">}</span>
</span><span class='line'><span class="o">=></span> <span class="o">[</span><span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p><em>Collect</em> will iterate through each member and return a new array with information based on the block. This could be an argument checking the truthiness or modifying the element, both shown below.</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='ruby'><span class='line'><span class="n">array</span> <span class="o">=</span> <span class="o">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">collect</span><span class="p">{</span> <span class="o">|</span><span class="n">num</span><span class="o">|</span> <span class="n">num</span><span class="o">.</span><span class="n">even?</span> <span class="p">}</span>
</span><span class='line'><span class="o">=></span> <span class="o">[</span><span class="kp">false</span><span class="p">,</span> <span class="kp">true</span><span class="p">,</span> <span class="kp">false</span><span class="p">,</span> <span class="kp">true</span><span class="p">,</span> <span class="kp">false</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p>The collect example above isn’t that helpful to grab the even numbers. Collect can also modify the element that goes to the return, shown below.</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='ruby'><span class='line'><span class="n">array</span> <span class="o">=</span> <span class="o">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">collect</span><span class="p">{</span> <span class="o">|</span><span class="n">num</span><span class="o">|</span> <span class="n">num</span><span class="o">/</span><span class="mi">2</span> <span class="k">if</span> <span class="n">num</span><span class="o">.</span><span class="n">even?</span> <span class="p">}</span>
</span><span class='line'><span class="o">=></span> <span class="o">[</span><span class="kp">nil</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="kp">nil</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="kp">nil</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p>A the most apparent difference is that collect can modify an element before passing it to the return array. Select can only return the elements from the existing array. A less obvious, but important, difference is that collect will always return the same number of elements as the argument the method is called on. If the block in the collect statement is a logic statement, nil will be used if the block is false. Most often, you won’t want to carry around these nil values!</p>
<p><strong>Select vs Find</strong>
<em>Select</em>, as discussed above, will select all of the elements that cause the block to return true. <em>Find</em> will pull the first element that returns the block to be true. The big difference here may be obvious: select will return all of the elements that return true when passed to the block. A more nuanced difference is that find returns the element based on its current class.</p>
<p>Starting with the example above, we see find returns the first instance that turns the block 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>
<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">array</span> <span class="o">=</span> <span class="o">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">find</span><span class="p">{</span> <span class="o">|</span><span class="n">num</span><span class="o">|</span> <span class="n">num</span><span class="o">.</span><span class="n">even?</span> <span class="p">}</span>
</span><span class='line'><span class="o">=></span> <span class="mi">2</span>
</span></code></pre></td></tr></table></div></figure>
<p>Looking at the class of the return value tells us more about find’s utility.</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>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">hash_array</span> <span class="o">=</span> <span class="o">[</span> <span class="p">{</span><span class="mi">1</span><span class="o">=></span><span class="s2">"one"</span><span class="p">},</span> <span class="p">{</span><span class="mi">1</span> <span class="o">=></span> <span class="s2">"one"</span><span class="p">,</span> <span class="mi">2</span> <span class="o">=></span> <span class="s2">"two"</span><span class="p">}</span> <span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="n">useSelect</span> <span class="o">=</span> <span class="n">hash_array</span><span class="o">.</span><span class="n">select</span> <span class="p">{</span><span class="o">|</span><span class="nb">hash</span><span class="o">|</span> <span class="nb">hash</span> <span class="k">if</span> <span class="nb">hash</span><span class="o">.</span><span class="n">keys</span><span class="o">.</span><span class="n">size</span> <span class="o">></span> <span class="mi">1</span><span class="p">}</span>
</span><span class='line'><span class="o">=></span> <span class="o">[</span> <span class="p">{</span><span class="mi">1</span><span class="o">=></span><span class="s2">"one"</span><span class="p">,</span> <span class="mi">2</span><span class="o">=></span><span class="s2">"two"</span><span class="p">}</span> <span class="o">]</span> <span class="c1">#useSelect.class => Array</span>
</span><span class='line'>
</span><span class='line'><span class="n">useFind</span> <span class="o">=</span> <span class="n">hash_array</span><span class="o">.</span><span class="n">find</span> <span class="p">{</span><span class="o">|</span><span class="nb">hash</span><span class="o">|</span> <span class="nb">hash</span> <span class="k">if</span> <span class="nb">hash</span><span class="o">.</span><span class="n">keys</span><span class="o">.</span><span class="n">size</span> <span class="o">></span> <span class="mi">1</span><span class="p">}</span>
</span><span class='line'><span class="o">=></span> <span class="p">{</span><span class="mi">1</span><span class="o">=></span><span class="s2">"one"</span><span class="p">,</span> <span class="mi">2</span><span class="o">=></span><span class="s2">"two"</span><span class="p">}</span> <span class="c1">#useFind.class => Hash</span>
</span></code></pre></td></tr></table></div></figure>
<p>This may be useful if you don’t want the element you’re looking to pull to be put in array. Of course if you do in fact want all of the arguments that return true the elements can be extracted from the array using methods like first, last or by index!</p>
</div>
<div class="meta">
<div class="date">
<time datetime="2015-10-05T21:14:33-04:00" pubdate data-updated="true"></time></div>
<div class="tags">
<a class='category' href='/blog/categories/flatiron/'>flatiron</a>, <a class='category' href='/blog/categories/school/'>school</a>
</div>
</div></article>
<article class="post">
<h2 class="title">
<a href="/blog/2015/09/28/my-first-post-on-octopress/">
My First Post on Octopress</a>
</h2>
<div class="entry-content">
<p>“Hello, World”</p>
</div>
<div class="meta">
<div class="date">
<time datetime="2015-09-28T19:43:50-04:00" pubdate data-updated="true"></time></div>
<div class="tags">
<a class='category' href='/blog/categories/flatiron/'>flatiron</a>, <a class='category' href='/blog/categories/school/'>school</a>
</div>
</div></article>
<nav id="pagenavi">
<div class="center"><a href="/archives">Blog Archives</a></div>
</nav></div>
<footer id="footer" class="inner">Copyright © 2016
Jessie Nadler
<br>
Powered by Octopress.
</footer>
<script src="/javascripts/slash.js"></script>
<script src="/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script> <!-- Delete or comment this line to disable Fancybox -->
</body>
</html>