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
|
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>Take that, Mr. Barney · Allegiant</title>
<link rel="stylesheet" href="http://localhost:1313/brycematheson.io/css/style.css" />
<link rel="stylesheet" href="http://localhost:1313/brycematheson.io/css/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,600' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://localhost:1313/brycematheson.io/img/favicon.ico" />
<link rel="apple-touch-icon" href="http://localhost:1313/brycematheson.io/img/apple-touch-icon.jpg" />
</head>
<body>
<header class="header" style="background-color: #009DDC;
background-image: url(http://localhost:1313/brycematheson.io//img/texture.png),linear-gradient(to bottom, #009DDC, #006ccb);background-repeat: repeat, no-repeat;background-position: left top, left top;background-size: 100px 100px, 100% 100%;" role="banner">
<section id="branding">
<div id="site-title"><a href="http://localhost:1313/brycematheson.io/">Allegiant</a></div>
<nav id="mainmenu">
<ul>
<li><a href="http://localhost:1313/brycematheson.io/">Articles</a></li>
<li><a href="https://github.com/brycematheson" target="_blank">Github</a></li>
<li><a href="https://twitter.com/brycematheson" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/brycematheson" target="_blank">LinkedIn</a></li>
</ul>
</nav>
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">Menu</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav id="menu" role="navigation">
<ul>
<li><a href="http://localhost:1313/brycematheson.io/">Articles</a></li>
<li><a href="https://github.com/brycematheson" target="_blank">Github</a></li>
<li><a href="https://twitter.com/brycematheson" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/brycematheson" target="_blank">LinkedIn</a></li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</section>
<div class="post-heading">
<h1>
Take that, Mr. Barney
<div class="share-icons-header">
<a href="http://www.twitter.com/share?url=http%3a%2f%2flocalhost%3a1313%2fbrycematheson.io%2fpost%2f2014-12-20-take-that-mr-barney%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M437.219,245.162c0-3.088-0.056-6.148-0.195-9.18c13.214-9.848,24.675-22.171,33.744-36.275
c-12.129,5.453-25.148,9.097-38.835,10.626c13.965-8.596,24.675-22.338,29.738-38.834c-13.075,7.928-27.54,13.603-42.924,16.552
c-12.323-14.021-29.904-22.95-49.35-23.284c-37.332-0.612-67.598,30.934-67.598,70.463c0,5.619,0.584,11.072,1.752,16.329
c-56.22-3.616-106.042-32.881-139.369-77c-5.814,10.571-9.152,22.922-9.152,36.164c0,25.037,11.934,47.291,30.071,60.421
c-11.099-0.5-21.503-3.866-30.627-9.375c0,0.306,0,0.612,0,0.918c0,34.996,23.312,64.316,54.245,71.159
c-5.675,1.613-11.656,2.448-17.804,2.421c-4.367-0.028-8.596-0.501-12.713-1.392c8.596,28.681,33.577,49.628,63.147,50.323
c-23.145,19.194-52.298,30.655-83.955,30.572c-5.453,0-10.849-0.361-16.135-1.029c29.933,20.53,65.456,32.491,103.65,32.491
C369.23,447.261,437.219,339.048,437.219,245.162z"/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="http://plus.google.com/share?url=http%3a%2f%2flocalhost%3a1313%2fbrycematheson.io%2fpost%2f2014-12-20-take-that-mr-barney%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M349.146,402.251c0-30.016-17.387-44.815-36.525-60.922l-15.662-12.185c-4.785-3.895-11.294-9.124-11.294-18.693
c0-9.57,6.537-15.662,12.184-21.309c18.249-14.354,36.526-29.571,36.526-61.756c0-33.076-20.892-50.462-30.878-58.724l0,0h26.956
L358.271,153h-89.603c-23.479,0-53.049,3.478-77.863,23.924c-18.693,16.079-27.818,38.278-27.818,58.279
c0,33.911,26.093,68.294,72.188,68.294c4.368,0,9.125-0.445,13.937-0.863c-2.17,5.23-4.34,9.569-4.34,16.97
c0,13.464,6.955,21.753,13.047,29.57c-19.556,1.308-56.109,3.478-83.065,20.001c-25.676,15.217-33.493,37.416-33.493,53.077
c0,32.186,30.461,62.201,93.525,62.201C309.561,484.454,349.146,443.116,349.146,402.251z M255.621,291.34
c-37.415,0-54.384-48.292-54.384-77.418c0-11.322,2.17-23.034,9.569-32.186c6.955-8.707,19.139-14.382,30.461-14.382
c36.108,0,54.802,48.738,54.802,80.033c0,7.845-0.862,21.754-10.877,31.768C278.237,286.11,266.498,291.312,255.621,291.34z
M256.066,466.177c-46.54,0-76.556-22.171-76.556-53.049s27.846-41.311,37.416-44.787c18.276-6.093,41.755-6.982,45.677-6.982
c4.34,0,6.51,0,9.987,0.445c33.076,23.479,47.402,35.218,47.402,57.416C319.992,446.176,297.821,466.177,256.066,466.177z"/>
<polygon points="353.068,317.768 400.164,317.768 400.164,364.836 423.699,364.836 423.699,317.768 470.768,317.768
470.768,294.233 423.699,294.233 423.699,247.165 400.164,247.165 400.164,294.233 353.068,294.233 "/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2flocalhost%3a1313%2fbrycematheson.io%2fpost%2f2014-12-20-take-that-mr-barney%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
<path d="M317.739,482.617V306h58.279l9.208-58.529h-67.487v-29.348c0-15.272,5.007-29.849,26.928-29.849h43.813v-58.418h-62.201
c-52.298,0-66.569,34.438-66.569,82.175v35.413h-35.885V306h35.885v176.617H317.739L317.739,482.617z"/>
</g>
</svg>
</a>
</div>
</h1>
</div>
</header>
<div id="container">
<section id="content" role="main">
<section class="entry-meta">
<span class="post-date">Dec 20, 2014</span>
</section></header>
<section class="entry-content">
<article>
<p>We’ve all had those professors/teachers that we just don’t seem to mesh with. Recently, I had a professor with whom I could <em>not</em> set aside my differences. The class was about Mobile Application Development. I went into it thinking, “Wow, I’m excited! Finally, I’ll be able to create an iOS/Android application!” On the first day of the class, Mr. Barney walked in and said, “This is not a programming class. This is not an iOS development class. This is not an Android development class. This class has no tests. This class has no assignments. This class has no texts, no books.”</p>
<p>As the class progressed, I got more and more frustrated with the structure and Mr. Barney’s teaching style. It seemed that the class was more about learning Mr. Barney than it was about the material. He came off as a close-to-retirement professor with a God-complex, who was tired of his job, and was just coasting on his measly salary for a few more years until he could finally escape.</p>
<p>The class consisted of a few technologies that we were forced to learn on our own, namely HTML 5, CSS Animations and Transitions, AJAX, DOM Manipulation, JavaScript Basics, etc. Because there were no class materials, we resorted to YouTube tutorials and blog articles to learn. On a bi-monthly basis, we would meet one-on-one in his office and present some sandbox code that we had been playing with that demonstrated one or more of these technologies. Based on his mood that day, he would open a little spreadsheet and rate you anywhere from “Strongly Disagree” to “Strongly Agree,” which ultimately equated to your class grade.</p>
<p>At one point, I decided to bring in a simple sandbox weather application, using an AJAX call to link to an API and populate data into the DOM based on the user’s location. The application used JQuery. While looking at my code, the second he saw a reference to JQuery, he tore it to <em>pieces.</em> “JQuery is of the devil.” or “JQuery is only for lazy programmers.” and “What happens if the JQuery library breaks, what happens to your application?”</p>
<p>Okay, so, maybe he didn’t say, “JQuery was of the devil.”</p>
<p>Basically, his point all boiled down to this: You can use JQuery, but it’s a bloated library and it contains so many additional pieces that you don’t need, and ultimately, you can do exactly what you need with plain ol’ vanilla JavaScript. It’s slow, and it would take a long time to download the entire library, when you don’t need it.</p>
<p>For the rest of the class, I hated him for it. 9 times out of 10 as I left his office, I was fuming. And I really do understand his point, and I believe that it has <em>some</em> validity, but mostly, it’s just him being old and outdated, and stuck in his ways.</p>
<p>Even after finishing the class, I hated him for it. Have you tried looking for web tutorials online for advanced AJAX calls that don’t use JQuery? It’s <em>impossible</em>!</p>
<p>In case you hadn’t noticed (as in, you aren’t using this website on a mobile device), the top navigation bar uses JQuery to convert to a small menu icon on smaller screens. I wanted to prove to myself that JQuery really isn’t <em>that</em> bloated, and that it is in fact a useful tool, and better than writing vanilla JavaScript.</p>
<p>After playing with a few things, I finally got the results I was looking for. Check out the results that I got while using <a href="http://tools.pingdom.com/fpt/" target="_blank">Pingdom Page Speed</a>. More specifically, look at the red box. My ‘styles.css’ file (that isn’t minified, btw) weighs a whopping 6.2kB. JQuery, which is more than 6x larger, loads more than twice as fast. How did I do it?</p>
<p><img src="http://localhost:1313/brycematheson.io/img/post_images/pingdom-speed-results.jpg" alt="Pingdom PageSpeed Results" /></p>
<p>If you’re familiar with Bootstrap, and the way that you can customize it just to your liking, JQuery is the same. Usually, whenever I use Bootstrap, I don’t need all the font icons or navigation bars, or any of that. I only use the responsive pieces. With JQuery, they have similar options on their website to where you can customize it to your liking. I knew that the only piece I’d be using on my website is the navigation library. So I stripped everything else out.</p>
<p>Also, up until this point, I wasn’t familiar with CDNs, or the power that they potentially had. Pulling JQuery from their hosted CDN, rather than from my on my own shared web server undoubtedly speeds up the page load. My website is pretty barebones, and that’s done on purpose to increase page speed. Loading times have come into consideration for everything I do on this site, but I don’t feel that JQuery has in anyway been detrimental to that.</p>
<p>I feel justified. Take that, Mr. Barney! </rant></p>
</section>
<div class="entry-links"></div>
</article>
<div class="share-icons-body">
<a href="http://www.twitter.com/share?url=http%3a%2f%2flocalhost%3a1313%2fbrycematheson.io%2fpost%2f2014-12-20-take-that-mr-barney%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M437.219,245.162c0-3.088-0.056-6.148-0.195-9.18c13.214-9.848,24.675-22.171,33.744-36.275
c-12.129,5.453-25.148,9.097-38.835,10.626c13.965-8.596,24.675-22.338,29.738-38.834c-13.075,7.928-27.54,13.603-42.924,16.552
c-12.323-14.021-29.904-22.95-49.35-23.284c-37.332-0.612-67.598,30.934-67.598,70.463c0,5.619,0.584,11.072,1.752,16.329
c-56.22-3.616-106.042-32.881-139.369-77c-5.814,10.571-9.152,22.922-9.152,36.164c0,25.037,11.934,47.291,30.071,60.421
c-11.099-0.5-21.503-3.866-30.627-9.375c0,0.306,0,0.612,0,0.918c0,34.996,23.312,64.316,54.245,71.159
c-5.675,1.613-11.656,2.448-17.804,2.421c-4.367-0.028-8.596-0.501-12.713-1.392c8.596,28.681,33.577,49.628,63.147,50.323
c-23.145,19.194-52.298,30.655-83.955,30.572c-5.453,0-10.849-0.361-16.135-1.029c29.933,20.53,65.456,32.491,103.65,32.491
C369.23,447.261,437.219,339.048,437.219,245.162z"/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="http://plus.google.com/share?url=http%3a%2f%2flocalhost%3a1313%2fbrycematheson.io%2fpost%2f2014-12-20-take-that-mr-barney%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M349.146,402.251c0-30.016-17.387-44.815-36.525-60.922l-15.662-12.185c-4.785-3.895-11.294-9.124-11.294-18.693
c0-9.57,6.537-15.662,12.184-21.309c18.249-14.354,36.526-29.571,36.526-61.756c0-33.076-20.892-50.462-30.878-58.724l0,0h26.956
L358.271,153h-89.603c-23.479,0-53.049,3.478-77.863,23.924c-18.693,16.079-27.818,38.278-27.818,58.279
c0,33.911,26.093,68.294,72.188,68.294c4.368,0,9.125-0.445,13.937-0.863c-2.17,5.23-4.34,9.569-4.34,16.97
c0,13.464,6.955,21.753,13.047,29.57c-19.556,1.308-56.109,3.478-83.065,20.001c-25.676,15.217-33.493,37.416-33.493,53.077
c0,32.186,30.461,62.201,93.525,62.201C309.561,484.454,349.146,443.116,349.146,402.251z M255.621,291.34
c-37.415,0-54.384-48.292-54.384-77.418c0-11.322,2.17-23.034,9.569-32.186c6.955-8.707,19.139-14.382,30.461-14.382
c36.108,0,54.802,48.738,54.802,80.033c0,7.845-0.862,21.754-10.877,31.768C278.237,286.11,266.498,291.312,255.621,291.34z
M256.066,466.177c-46.54,0-76.556-22.171-76.556-53.049s27.846-41.311,37.416-44.787c18.276-6.093,41.755-6.982,45.677-6.982
c4.34,0,6.51,0,9.987,0.445c33.076,23.479,47.402,35.218,47.402,57.416C319.992,446.176,297.821,466.177,256.066,466.177z"/>
<polygon points="353.068,317.768 400.164,317.768 400.164,364.836 423.699,364.836 423.699,317.768 470.768,317.768
470.768,294.233 423.699,294.233 423.699,247.165 400.164,247.165 400.164,294.233 353.068,294.233 "/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2flocalhost%3a1313%2fbrycematheson.io%2fpost%2f2014-12-20-take-that-mr-barney%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
<path d="M317.739,482.617V306h58.279l9.208-58.529h-67.487v-29.348c0-15.272,5.007-29.849,26.928-29.849h43.813v-58.418h-62.201
c-52.298,0-66.569,34.438-66.569,82.175v35.413h-35.885V306h35.885v176.617H317.739L317.739,482.617z"/>
</g>
</svg>
</a>
</div>
<div class="clearfix"></div>
<figure class="author-bio">
<img class="bio-image" src="../../img/avatar.jpg" />
<figcaption class="bio-text">Bryce Matheson works as a Windows Systems Administrator for a small IT company based out of Idaho Falls. When not consumed by work, Bryce enjoys dabbling with web development and whatever other technologies are currently tickling his fancy. This site is a place to document his learning.</figcaption>
</figure>
</section>
<div class="clear"></div>
</div>
<footer id="footer" style="color: #7A7B7C; background-color: #3A3B3C;background-image: url(http://localhost:1313/brycematheson.io//img/texture.png),linear-gradient(to bottom, #3A3B3C, #1d1e1e); background-repeat: repeat, no-repeat; background-position: left top, left top; background-size: 100px 100px, 100% 100%;">
<div id="footer-container">
<div class="footer-column">
</div>
<div class="footer-column">
</div>
<div class="footer-column">
</div>
<div class="clearfix"></div>
</div>
<div id="copyright">© Allegiant. All Rights Reserved.</div>
</footer>
<script src="http://localhost:1313/brycematheson.io/js/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'Your Google Analytics tracking id', 'auto');
ga('send', 'pageview');
</script>
</div>
<script data-no-instant>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':1313/livereload.js?mindelay=10"></'
+ 'script>')</script></body>
</html>
|
