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
/
atom.xml
440 lines (347 loc) · 47.8 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Codin']]></title>
<link href="http://nadlerjessie.github.io/atom.xml" rel="self"/>
<link href="http://nadlerjessie.github.io/"/>
<updated>2016-01-18T15:50:21-05:00</updated>
<id>http://nadlerjessie.github.io/</id>
<author>
<name><![CDATA[Jessie Nadler]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[When Rails Met Ember]]></title>
<link href="http://nadlerjessie.github.io/blog/2015/11/29/when-rails-met-ember/"/>
<updated>2015-11-29T16:03:30-05:00</updated>
<id>http://nadlerjessie.github.io/blog/2015/11/29/when-rails-met-ember</id>
<content type="html"><![CDATA[<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>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Refactoring My First Rails App]]></title>
<link href="http://nadlerjessie.github.io/blog/2015/11/08/refactoring-my-first-rails-app/"/>
<updated>2015-11-08T16:41:39-05:00</updated>
<id>http://nadlerjessie.github.io/blog/2015/11/08/refactoring-my-first-rails-app</id>
<content type="html"><![CDATA[<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>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Capybara]]></title>
<link href="http://nadlerjessie.github.io/blog/2015/10/23/capybara/"/>
<updated>2015-10-23T00:00:00-04:00</updated>
<id>http://nadlerjessie.github.io/blog/2015/10/23/capybara</id>
<content type="html"><![CDATA[<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="http://nadlerjessie.github.io/images/capybara.jpg"></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[What's the difference between...?]]></title>
<link href="http://nadlerjessie.github.io/blog/2015/10/05/whats-the-difference-between-dot-dot-dot/"/>
<updated>2015-10-05T21:14:33-04:00</updated>
<id>http://nadlerjessie.github.io/blog/2015/10/05/whats-the-difference-between-dot-dot-dot</id>
<content type="html"><![CDATA[<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>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[My First Post On Octopress]]></title>
<link href="http://nadlerjessie.github.io/blog/2015/09/28/my-first-post-on-octopress/"/>
<updated>2015-09-28T19:43:50-04:00</updated>
<id>http://nadlerjessie.github.io/blog/2015/09/28/my-first-post-on-octopress</id>
<content type="html"><![CDATA[<p>“Hello, World”</p>
]]></content>
</entry>
</feed>