-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
382 lines (279 loc) · 59.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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>antonio's blog</title>
<link href="antonioortiz.github.io/atom.xml" rel="self"/>
<link href="antonioortiz.github.io/"/>
<updated>2017-02-09T12:37:26-05:00</updated>
<id>antonioortiz.github.io</id>
<author>
<name>antonio ortiz</name>
<email>17antonio.ortiz@gmail.com</email>
</author>
<entry>
<title>Aria!</title>
<link href="antonioortiz.github.io/Aria"/>
<updated>2016-10-08T00:00:00-04:00</updated>
<id>antonioortiz.github.io/Aria</id>
<content type="html"><p>This post is partly about wanting to shout on the top of a mountain, (ala Ron Burgandy) that my wife Barbara and I welcomed our daughter Aria Marie Pavicevac-Ortiz, on Tuesday August 16th at 2:31PM in the year 2016, to the world!!!</p>
<!--more-->
<p>As you can see from the date of this post and from the date of my previous post, I have been busy! Fear not friends, I have been steadliy learning what I can–when I can!</p>
<p>Lately my studies bring me to a course on PluralSight <a href="https://www.pluralsight.com/courses/nodejs-express-web-applications">Building Web Applications with Node.js and Express 4.0 by Jonathan Mills</a>. He really goes into the tooling of your project (using <a href="https://bower.io/">bower</a> and <a href="https://www.npmjs.com/">npm</a> and <a href="http://gulpjs.com/">gulp</a> for task-running), templating your views, integrating a database and utilizing a service. All the while getting you cozy with Express.js and Node.js. If you remember, from my previous posts I have been adamant about sticking with &ldquo;Vanilla JS&rdquo; and staying clear of frameworks and the like. I am happy to report my friends, I think I&rsquo;ve finally graduated to one&hellip;<a href="http://expressjs.com/"><i>Express.js</i></a>.</p>
<p>Why the change of heart? After working with Express.js for a bit, I think what I like about it is its core methods remind me of the fundamental interaction of the <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol">Hypertext Transfer Protocol
</a>. And—working with Node.js makes me feel I am learning JavaScript all over again but with a emphasis on Asynchronicity*.</p>
<p>Speaking of podcasts, I ran into one of which is apropos of the news I disclosed earlier. Linda Liukas a Finnish computer programmer, was on the <a href="http://hanselminutes.com/547/hello-ruby-with-linda-liukas">HanselMinutes podcast</a> discussing her children&rsquo;s book <a href="http://www.helloruby.com">Hello Ruby</a>.
To give you some background, in 2014 Linda raised $380,000 on Kickstarter becoming the platform&rsquo;s most highly funded children&rsquo;s book. The story and Linda&rsquo;s exuberance is so inspiring and Scott does a terrific job (as usual) of asking questions which seem to make the guests shine. Since having Aria, I regularly daydream about what she&rsquo;ll be interested in, and what will her passions be? And what kind of future she&rsquo;ll be a part of? Forgive me if I am making this sound epic—but I really think this book is giving us a glimpse of the sensibilites of this future age. I promptly put it on my todo to purchase ;) I love you Aria!!</p>
<p><small>*Kyle Simpson one of my favorite speakers on JavaScript gives a lot to chew on about the subject on the <i><a href="http://softwareengineeringdaily.com/2016/06/12/2610/">Software Engineering Daily podcast</a></i> </small>.</p>
</content>
</entry>
<entry>
<title>Just build something!</title>
<link href="antonioortiz.github.io/Just-build-something"/>
<updated>2016-07-10T00:00:00-04:00</updated>
<id>antonioortiz.github.io/Just-build-something</id>
<content type="html"><p>Since about January of this year, I&rsquo;ve really tried to stick with learning things which center around &ldquo;Vanilla JS&rdquo;. </p>
<!--more-->
<p>I&rsquo;ve have been trying to remain disciplined, and not mess around with any frameworks. That has been tough, as their alure is hard to resist. </p>
<p>Almost all of them have great abstractions and make working with API&rsquo;s easier. They&rsquo;re especially hard to ignore since a lot of companies have utlized them, making knowing some frameworks as important as knowing JavaScript itself. </p>
<p>I suppose that&rsquo;s what it was like when jQuery was new to the scene. It helped with cross-browser problems and made working with XHR/AJAX easier. And those animations must have been like Cat-nip! And like I&rsquo;ve mentioned previously, folks new to programming want to see results right away.</p>
<p>Well the cool thing is I finally have been able to use some plain ole JavaScript to actually create something useful for work!</p>
<p>Behold! Essentially at work we would get these HTML pages which we had to repurpose. Anyway, they had some specific href tags that needed their respective target attributes set to self and all others set to blank.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">URLChecker</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="nx">iffe</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">publicAPI</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">getURL</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="s1">'foo'</span><span class="p">:</span> <span class="s1">'http://foo.rye.foo.com'</span><span class="p">,</span>
<span class="s1">'foodev'</span><span class="p">:</span> <span class="s1">'http://foodev.rye.avon.com'</span><span class="p">,</span>
<span class="s1">'blargh_sans_w'</span><span class="p">:</span> <span class="s1">'http://blargh.com'</span><span class="p">,</span>
<span class="s1">'blargh'</span><span class="p">:</span> <span class="s1">'http://www.blargh.com'</span><span class="p">,</span>
<span class="s1">'blargh2'</span><span class="p">:</span> <span class="s1">'http://www2.blargh.com'</span>
<span class="p">}[</span><span class="nx">arguments</span><span class="p">[</span><span class="nx">i</span><span class="p">]];</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">searchURL</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">l</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">l</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">href</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">publicAPI</span><span class="p">.</span><span class="nx">getURL</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">find</span> <span class="nb">document</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s2">"target"</span><span class="p">,</span> <span class="s2">"_blank"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">publicAPI</span><span class="p">;</span>
<span class="p">})();</span></code></pre></div>
<p>That was my first crack at it, and after some helpful guidenece from people on stackoverflow it has evolved to this:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MarkUpChecker</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="nx">iffe</span><span class="p">()</span> <span class="p">{</span>
<span class="s1">'use strict'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">URLS</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">'foo'</span><span class="p">:</span> <span class="s1">'http://foo.rye.foo.com'</span><span class="p">,</span>
<span class="s1">'foodev'</span><span class="p">:</span> <span class="s1">'http://foodev.rye.avon.com'</span><span class="p">,</span>
<span class="s1">'blargh_sans_w'</span><span class="p">:</span> <span class="s1">'http://blargh.com'</span><span class="p">,</span>
<span class="s1">'blargh'</span><span class="p">:</span> <span class="s1">'http://www.blargh.com'</span><span class="p">,</span>
<span class="s1">'blargh2'</span><span class="p">:</span> <span class="s1">'http://www2.blargh.com'</span>
<span class="p">},</span>
<span class="nx">publicAPI</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">getURL</span><span class="p">()</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">URLS</span><span class="p">[</span><span class="nx">arguments</span><span class="p">[</span><span class="nx">i</span><span class="p">]];</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">publicAPI</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">addURL</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">URLS</span><span class="p">[</span><span class="nx">arguments</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">[</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">];</span>
<span class="p">}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">dir</span><span class="p">(</span><span class="nx">URLS</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">URLS</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">searchURL</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">link</span><span class="p">,</span> <span class="nx">url</span><span class="p">,</span> <span class="nx">parser</span><span class="p">,</span> <span class="nx">newPathName</span> <span class="o">=</span> <span class="s1">''</span><span class="p">,</span>
<span class="nx">newstr</span> <span class="o">=</span> <span class="s1">''</span><span class="p">,</span>
<span class="nx">doc</span> <span class="o">=</span> <span class="nb">document</span><span class="p">,</span>
<span class="nx">container</span><span class="p">,</span>
<span class="nx">container_links</span><span class="p">,</span>
<span class="nx">documentTableWrapper</span><span class="p">,</span>
<span class="nx">docBodyFirstChild</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">doc</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'container'</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">container</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span> <span class="s1">'container'</span><span class="p">);</span>
<span class="nx">container_links</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'a'</span><span class="p">);</span>
<span class="nx">documentTableWrapper</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'table'</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">documentTableWrapper</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'container-news'</span><span class="p">;</span>
<span class="nx">docBodyFirstChild</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">;</span>
<span class="nx">doc</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">container</span><span class="p">,</span> <span class="nx">docBodyFirstChild</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">container_links</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'container'</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'a'</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">url</span> <span class="o">=</span> <span class="nx">getURL</span><span class="p">(</span><span class="nx">arguments</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">jlen</span> <span class="o">=</span> <span class="nx">container_links</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span> <span class="o">&lt;</span> <span class="nx">jlen</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">link</span> <span class="o">=</span> <span class="nx">container_links</span><span class="p">[</span><span class="nx">j</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">link</span><span class="p">.</span><span class="nx">href</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">parser</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'a'</span><span class="p">);</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">link</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'target'</span><span class="p">,</span> <span class="s1">'_self'</span><span class="p">);</span>
<span class="nx">newPathName</span> <span class="o">=</span> <span class="nx">parser</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">newPathName</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="sr">/Executive|District|Division|National/</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">newPathName</span> <span class="o">=</span> <span class="nx">newPathName</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'/'</span><span class="p">).</span><span class="nx">pop</span><span class="p">();</span>
<span class="nx">newstr</span> <span class="o">=</span> <span class="nx">newPathName</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">newstr</span> <span class="o">=</span> <span class="nx">newPathName</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">newstr</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">link</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'target'</span><span class="p">,</span> <span class="s1">'_blank'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">publicAPI</span><span class="p">;</span>
<span class="p">})();</span></code></pre></div>
<p>What I loved about this was I was able to take advantage of some cool design patterns I learned. Like using <a href="https://toddmotto.com/deprecating-the-switch-statement-for-object-literals/">object literals</a> instead of switch statements for evaluating expressions and working with the revealing
<a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&amp;%20closures/ch5.md#modules">module pattern.</a> With the later I was able to actually get it to store URLS too.</p>
<p>I suppose this post was more part pat on the back for myself :) and to get across to just build something so you can get some practice with some problem solving and to most of all have some fun!</p>
</content>
</entry>
<entry>
<title>The window is an Object (part 2)!</title>
<link href="antonioortiz.github.io/The-window-is-an-Object-part-two"/>
<updated>2016-03-06T00:00:00-05:00</updated>
<id>antonioortiz.github.io/The-window-is-an-Object-part-two</id>
<content type="html"><p>Finally the epic conclusion to this long drawn out post!</p>
<!--more-->
<p>So waaaay back at the end of &lsquo;part 1&rsquo;, I said
understanding the <code>window</code> was just one big ole object, helped me understand scope, the this keyword and the call/apply methods&hellip;</p>
<p>For example, people usually say something like, the function and variable below were declared in the global scope.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">///what is the global scope?</span>
<span class="kd">var</span> <span class="nx">bar</span> <span class="o">=</span> <span class="s1">'i am a property on the big ole object'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">baz</span><span class="p">(){</span>
<span class="k">return</span> <span class="nx">bar</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">foo</span><span class="p">()();</span> <span class="c1">// returns 'i am a property on the big ole object';</span></code></pre></div>
<p>To me if it was illustrated these declarations are in fact inside a container, an actual thing, it would feel more tangible. It would be like understanding our planet is inside of a solar system, which inside of a galaxy etc&hellip;</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">windowObject</span> <span class="o">=</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">bar</span> <span class="o">=</span> <span class="s1">'i am a property on the big ole object'</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">foo</span><span class="p">(){</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">baz</span><span class="p">(){</span>
<span class="k">return</span> <span class="nx">bar</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">foo</span><span class="p">()();</span> <span class="c1">// returns 'i am a property on the big ole object';</span>
<span class="p">};</span></code></pre></div>
<p>Another arena where this might come in handy is in understanding the &#39;this&rsquo; keyword. Most people are perplexed when seeing a function like so return the &rsquo;[object Window]&rsquo;.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">//global scope</span>
<span class="kd">function</span> <span class="nx">baz</span><span class="p">(){</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
<p>I&rsquo;d expect a reference to the function itself.
But you wouldn&rsquo;t if was illustrated differently from the beginning. Like most people can clearly see what&rsquo;s going on in the following.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">someObj</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">someProp</span> <span class="p">:</span> <span class="s1">'some value'</span><span class="p">,</span>
<span class="na">someObjFn</span> <span class="p">:</span> <span class="kd">function</span> <span class="p">(){</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">someProp</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></div>
<p>Lastly the call and apply methods would make more sense too, because if you were doing some like this:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">person1</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span> <span class="p">:</span> <span class="s1">'Antonio'</span><span class="p">},</span>
<span class="nx">person2</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span><span class="s1">'Barbara'</span><span class="p">};</span>
<span class="kd">function</span> <span class="nx">getName</span><span class="p">(){</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getName</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">person1</span><span class="p">);</span> <span class="c1">// returns 'Antonio'</span>
<span class="nx">getName</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">person2</span><span class="p">);</span> <span class="c1">// returns 'Barbara'</span></code></pre></div>
<p>You&rsquo;d see immediately why such methods would be helpful because the it would spell out context and see getName is a function on the global scope er I mean&rsquo;t the global Object ;)</p>
</content>
</entry>
<entry>
<title>The window is an Object (part 1.5*)!</title>
<link href="antonioortiz.github.io/The-window-is-an-Object-part-one-and-a-half"/>
<updated>2016-01-24T00:00:00-05:00</updated>
<id>antonioortiz.github.io/The-window-is-an-Object-part-one-and-a-half</id>
<content type="html"><p>Sorry I didn&rsquo;t get to the second* part of this post sooner. That was actually fortuitious in a way, because I found some great resources I&rsquo;d like to share which I believe will help get my point across!</p>
<!--more-->
<p>A few weeks after I wrote the previous post, I decided to check out <a href="https://www.pluralsight.com/">pluralsight</a>. You see—and I may have mentioned this in another post, but I am learning Web Development in perhaps, not the most straightforward sort of way.</p>
<p>I have a wife (Barbara), dog (Charly) and mortgage payments (the man) I have to make. So I can&rsquo;t really just quit my full-time job and do a boot-camp**. Essentially my method of learning has been via blogposts, podcasts and my favorite&hellip;videos!</p>
<p>BTW, speaking of vidoes, Pluralsight has a course called &lsquo;Advanced JavaScript&rsquo; by <a href="http://getify.me/">Kyle Simpson***</a>. If you gobbled up codecademy, code school and lynda.com courses and want to get deeper into JS, I&rsquo;d check it out.</p>
<p>And in a nut shell, after thinking about it for a while, I think this best describes where I am coming from&hellip;</p>
<p>There comes a time after you have gotten your feet wet in those aforementioned interactive environments, and have some of the basics down in your respective language. So I believe any further learning should be with your resource e.g. book, youtube video, code-site etc. and essentiallly your real tools e.g. text editor, command-line, browser etc. Now, I finally appreciate what a lot of authors suggest—TYPE THINGS OUT!</p>
<p>I feel I am so lucky because in JS all you need to do is pop open the console and essentially you can have an environment with little effort!</p>
<p><small>
* Actually like the title says, this is episode 1.5, much like <a href="https://en.wikipedia.org/wiki/George_Lucas">George Lucas</a> I have decided to alter the normal temporal mechanics of things and squeeze in another post
<br>
** Just to be clear, Bootcamps are awesome and if they fit your life dynamics—go for it! :)<br>
** Kyle also has a terrific series of books called <a href="http://shop.oreilly.com/product/0636920026327.do">&#39;You don&rsquo;t know JS&rsquo;</a></p>
<p></small></p>
</content>
</entry>
<entry>
<title>The window is an Object!</title>
<link href="antonioortiz.github.io/The-window-is-an-Object"/>
<updated>2015-09-05T00:00:00-04:00</updated>
<id>antonioortiz.github.io/the-window-is-a-Object</id>
<content type="html"><p>I am sure everyone knows that—mostly, but for people who just started learning JS—especially when getting introduced to concepts regarding <code>scope</code>, and how the <code>this</code> keyword works, I think if we explicity showed the Window is just an Object right from the start, it would help getting the aforementioned concepts.</p>
<!--more-->
<p>So here goes! Open up your text editor or better yet let&rsquo;s crack open your developer tools from your favorite browser; I use chrome, but use whatever you want. Anyway, if you do <code>command + option + j</code>(in chrome on a mac, probably <code>ctrl + alt + j</code> on a pc ) you&rsquo;ll get right to the javascript console. Basically below is what I actually entered in the developer tools,</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">//object declared in global scope</span>
<span class="kd">var</span> <span class="nx">starship</span> <span class="o">=</span> <span class="p">{</span>
<span class="c1">//properties</span>
<span class="na">name</span> <span class="p">:</span> <span class="s2">"enterprise"</span><span class="p">,</span>
<span class="na">registry</span> <span class="p">:</span> <span class="s2">"1701"</span><span class="p">,</span>
<span class="na">sovereignty</span> <span class="p">:</span> <span class="s2">"federation"</span><span class="p">,</span>
<span class="c1">//methods</span>
<span class="na">hail</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'This is the starship '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">' of the United '</span> <span class="o">+</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sovereignty</span> <span class="o">+</span> <span class="s1">' of planets..'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">//function declaration in global scope</span>
<span class="kd">function</span> <span class="nx">omniPresentCommunication</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'This sector is full of worm-holes, starships beware!'</span><span class="p">);</span>
<span class="p">}</span>
<span class="kc">undefined</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s1">'starship'</span><span class="p">),</span> <span class="nb">window</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s1">'omniPresentCommunication'</span><span class="p">);</span>
<span class="kc">true</span></code></pre></div>
<p>What is the most interesting aspect of what we entered was, when we called the <code>hasOwnProperty*</code> method on the window object, first using the <code>starship</code> object and then the <code>omniPresentCommunication</code> function. We get <code>true</code> back. That is because since those entities were declared in the global scope, we have just essentially added them as properties and methods to the big ole global object! Not only that, but if we passed the <code>window</code> object to <code>console.dir(window)</code>, like so, you&rsquo;ll will find them there, with a ton of other properties and methods.</p>
<p>To me, that makes understanding the <code>this</code> keyword, <code>scope</code> and the <code>call</code> and <code>apply</code> methods much easier to understand&hellip;That&rsquo;ll be next!</p>
<p><small>*The<code>hasOwnProperty()</code> method returns a boolean indicating whether the object has the specified property.</small></p>
</content>
</entry>
<entry>
<title>What the heck is a JS framework anyway?!</title>
<link href="antonioortiz.github.io/FOUTWT-JS"/>
<updated>2015-07-25T00:00:00-04:00</updated>
<id>antonioortiz.github.io/js-frameworks</id>
<content type="html"><p>You&rsquo;re going to discover pretty quickly, they&rsquo;re a ton of JavaScript Frameworks to choose from. Hopefully at the very least this post will give you some background information, so you can know what all the hubub is about. </p>
<!--more-->
<p>Let me share the perspective of a person who is still fairly new to JavaScript (and programming in general). </p>
<p>Once I had a handle on some basics, I started to seek various resources to keep informed on the goings on (<a href="http://teamtreehouse.com/library/the-treehouse-show">The Treehouse Show,</a> <a href="http://javascriptissexy.com/">JavaScript.isSexy Blog</a> <a href="http://dailyjs.com/">DailyJS</a>) in the community. Suddenly, I was inundated with various catchy nouns with &ldquo;.js&rdquo; appended to them and they all made me feel like I had to know about all of them all at once! </p>
<p>Before we go any further, It might be helpful if we define what a framework is? I really loved this explanation from (<a href="https://stackoverflow.com/questions/2964140/what-is-a-framework-what-does-it-do-why-do-we-need-a-framework/12733126#12733126">Stack Overflow member Neha Choudhary</a>):</p>
<blockquote>
<p>If I told you to cut a piece of paper with dimensions 5m by 5m then surely you would do that. But then I ask you to cut 1000 pieces of paper of the same dimensions. Then you won&rsquo;t do the measuring 1000 times, obviously you would make a frame of 5m by 5m and then with the help of it you would be able to cut 1000 papers in less time. So, what you did is made a framework which would do that type of task. So, instead of performing the same type of task again and again for the same type of applications, what you do is create a framework having all those facilities together in one nice packet, hence providing the abstraction for your application and more importantly many applications.</p>
</blockquote>
<p>Again, to a beginner we might be under the impression we should get into all of them. I suppose it would be like anything you <em>&ldquo;get into&rdquo;</em>. For example, let&rsquo;s say you wanted an outlet to give your artistic side some expression. You can probably picture yourself being excited, finding a place where they offered various arenas where you could focus this energy. In the end you pick Illustrative painting.</p>
<p>So let&rsquo;s picture we are in that class one early Saturday morning—let&rsquo;s say it&rsquo;s the fourth class. Anyway, after a morning of painting the instructor decides to have a critique of a few samples of what each has done thus far. We soon notice when comparing our work to our classmates our work lacks something. Despite our paints being mixed properly, and our gesso applied in the most meticulous fashion to our canvas, our paintings seems to lack an underpinning. When the class convenes the instructor realizes our frustration and makes some inquires as what kind of work we have made <em>before</em> taking the class&hellip;As you can probably guess the answer is not much. It is at that point the venerable instructor recommends a fantastic <a href="http://www.powells.com/book/bridgmans-complete-guide-to-drawing-from-life-9781402766787/7-1">book</a> which will help with what is so obviously missing—<em>stucture</em>. </p>
<p>I like this analogy because I think it hammers home two of the important facets with JavaScript frameworks. First—in the application or the using of a medium—in this case—paint, felt like the way certain JavaScript frameworks would premptively make a lot of decisions for you. How? Well, imagine your next project was to convey a beautiful autumn afternoon in a small town in Vermont. Oil paints <em>might</em> be a great way to get the most of that sensibility and mood. However—water colors could easily fill the bill too. Basically we&rsquo;d have to realize each medium would start with contraints and a way of working which would be vastly different from each other. Secondly this conveys the idea without the background of drafting and experience with composition, we might end up with Illustations which lack interest and dynamism.</p>
<p>You might be saying—&quot;Antonio, bring it home with a example with JavaScript!&ldquo; Ok, here goes!! You&rsquo;re working in Node to build a web app, so one could say Node is comparable to the starting point of wanting to do an Illustrative type of painting, and a framework, let&rsquo;s say Express.js would be the &quot;way&rdquo; you would go about accomplishing the work. Essentially these are agreed upon <em>conventions</em> made by a group or person which you must adhere to for the undertaking, i.e. you can&rsquo;t use mud in place of water for water color painting.</p>
<p>If you&rsquo;d like a more real world explanation of all this, I highly recommend a podcast which goes a step further into this very subject <a href="http://softwareengineeringdaily.com/2016/06/12/2610/">Software engineering daily, JavaScript Concurrency with Kyle Simpson</a>. It also goes into the rational why one should throughly learn the language a framework is based on. Happy Frameworking!</p>
</content>
</entry>
<entry>
<title>One Month Rails!</title>
<link href="antonioortiz.github.io/one-month-rails"/>
<updated>2015-07-20T00:00:00-04:00</updated>
<id>antonioortiz.github.io/omr</id>
<content type="html"><p>The most obvious, or maybe the most generic question asked after finishing the <a href="https://onemonth.com/courses/one-month-rails">OMR</a> course, is probably:</p>
<blockquote>
<p><em>&ldquo;Do you feel you are a Rails Developer now?&rdquo; &ldquo;D&#39;oy, of course not. (I had to answer it)&hellip;&rdquo;</em></p>
</blockquote>
<!--more-->
<p>O.K. maybe nobody is going to ask that, but it might be some variant of it.
Do you think you could apply what you learned to build another project? Hmmm.</p>
<p>For me, it turns out, one of the best practices &ldquo;Mattan Griffel&rdquo; suggested (he is the instructor/guide through the course, and one of the founders of One Month) I had been doing already! In my case that was utilizing <a href="http://stackexchange.com/users/1383310/antonio-ortiz?tab=top">*Stack Overflow</a>. Which was a teriffic confidence booster. Because lets face it. If you&rsquo;re a total newb, (especically if you&rsquo;re learning alone&hellip; i.e. sans a boot-camp etc.) and trying to get setups to work, tools to spit out the right info etc., What you want is a sign, <strong>ANY</strong> sign, you&rsquo;re doing something right.
Probably a more obvious benefit I think we can all agree upon is you&rsquo;ll have SOMETHING you built from scratch at the end of the exercise. Which is probably sitting on <a href="https://en.wikipedia.org/wiki/GitHub">GitHub</a> and being hosted by <a href="https://www.heroku.com/about">Heroku.</a> Being proficient in a language will only come from getting in the code and knowing why things are happening and responding in said language in a elegent and succint manner. The later, takes time, but former could be compared to carrying a pocket dictionary if you&rsquo;re learning a spoken language for quick reference. (Actually there is a cool app called <a href="https://kapeli.com/dash">Dash</a> which is like a docset dictionary)</p>
<p><small>*For the uninitiated, that&rsquo;s a website where you can ask a question based upon your problem in your project or regarding something you&rsquo;re not quite getting in a particular programming language, framework etc.</small></p>
</content>
</entry>
</feed>