/
index.html
399 lines (277 loc) · 16.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Front End Collision</title>
<meta name="description" content="Website and blog of full-stack JavaScript developer, Josh Beam.
">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,300italic,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/images/favicon.ico?v=1.1">
<link rel="stylesheet" href="/css/main.css">
<link rel="canonical" href="http://joshbeam.github.io/">
<link rel="alternate" type="application/rss+xml" title="Front End Collision" href="http://joshbeam.github.io/feed.xml" />
<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', 'UA-60978864-1', 'auto');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script src="/bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header>
<a href="/">
<img src="http://gravatar.com/avatar/26d4fa31138c5c8ba1cb76392d9fc64d?s=200" width="100" height="103">
<hgroup>
<h1>Front End Collision</h1>
<h5>Blog of software engineer Josh Beam</h5>
</hgroup>
</a>
</header>
<a class="menu-icon" href="#">
</a>
<div class="black-out"></div>
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/reading-list">Reading List</a>
</li>
</ul>
</nav>
<main>
<section>
<ul class="posts">
<li>
<div>
<a href="/product/2017/08/20/estimating-engineering-tasks.html">Estimating Engineering Tasks: The Soft Side</a>
<p>
Estimating work is the bane of every engineer’s existence. If you overestimate and deliver too quickly, the perception is that you’re sandbagging, whereas if you underestimate and deliver too late, the perception is that you’re not competent. Most resources about task estimation are purely technical. The “soft side” of estimation is equally important, yet rarely discussed (and in practice, it usually causes the most friction). In this post I’ll discuss the psychology of estimation, ways to communicate with stakeholders about...
</p>
</div>
<span>20 August 2017</span>
</li>
<li>
<div>
<a href="/product/2017/08/15/how-to-actually-brainstorm.html">How to Actually Brainstorm (like a respectable businessperson)</a>
<p>
How do you brainstorm while maintaining a balance between pragmatism and creativity? In this post, I’ll discuss some theory behind maintaining this balance, and then I’ll discuss some actual, real-world tips for how to “actually brainstorm”, and where to proceed next.
</p>
</div>
<span>15 August 2017</span>
</li>
<li>
<div>
<a href="/rabbitmq/2017/08/14/practical-queue-considerations.html">Practical Queue Considerations</a>
<p>
Intuitively, we jump to HTTP to use as our communication protocol between services in a system. However, using a queue has many benefits. In this post, instead of diving only into theory of queues, I’ll give practical advice on implementing a queue, illustrate some use cases I’ve encountered in a production system where using a queue had obvious benefits versus HTTP, as well as give some practical implementation ideas.
</p>
</div>
<span>14 August 2017</span>
</li>
<li>
<div>
<a href="/mongodb/2016/01/24/mongoose-populate.html">Understanding Mongoose Deep Population</a>
<p>
While MongoDB doesn’t natively support joins, the Mongoose framework now supports “deep population” (Mongoose has supported single-level populations for a while), which is akin to passing Mongoose a “graph” of what data should be populated in the results of your query.
</p>
</div>
<span>24 January 2016</span>
</li>
<li>
<div>
<a href="/encryption/2016/01/17/breaking-down-https.html">Breaking down HTTPS</a>
<p>
What is HTTPS, and why is it any more secure than HTTP? What is TLS, RSA, symmetric and asymmetric encryption, and what happens when I send my credit card over a secure connection so that I can buy Game of Thrones with the sole intention of binge watching the entire season in one evening? This article will attempt to answer those questions (but not the one about your obsession with Game of Thrones).
</p>
</div>
<span>17 January 2016</span>
</li>
<li>
<div>
<a href="/javascript/2015/12/26/using-nodejs-to-upload-app-to-google-play.html">Using node.js to upload your app to Google Play</a>
<p>
If you're developing a hybrid mobile app, you may want to stick with node.js to upload your app to the Google Play Store. However, Google's node.js client is still in "alpha", and documentation is very limited. This post gives information about basic setup to get started using the googleapis client.
</p>
</div>
<span>26 December 2015</span>
</li>
<li>
<div>
<a href="/javascript/2015/12/24/initial-thoughts-on-event-sourcing.html">Initial thoughts on event sourcing</a>
<p>
"The state of any object can be derived from the events that affect it." In a nutshell, this is the thesis of "event sourcing", which, when implemented in an application, becomes an "event driven architecture". In this post I'll discuss some of the practical applications, benefits, and drawbacks that the team and I have noticed after migrating our current, stateful database to a more event-driven approach.
</p>
</div>
<span>24 December 2015</span>
</li>
<li>
<div>
<a href="/angularjs/2015/08/23/extending-vm-into-this.html">Get rid of $scope, and extend into the view model</a>
<p>
AngularJS's controllerAs syntax is a good first step into being able to have some sort of sense of hierarchy in applications. However, large controllers can still get unwieldy. We can move towards controlling our controllers with angular.extend.
</p>
</div>
<span>23 August 2015</span>
</li>
<li>
<div>
<a href="/javascript/2015/08/23/solving-stupid-problems.html">3 lessons in solving stupid engineering problems (without resorting to manslaughter)</a>
<p>
Recently, some colleagues and I dreadfully spent (read: wasted) valuable man hours attempting to solve a bug in a hybrid mobile app. The cause of the bug? A missing <script> tag. Several important lessons can be learned from the ways in which we decided to go about solving this simple headbanger (no, not like you'd do at a heavy metal concert; rather, where you actually consider banging your head on a solid object) of a problem.
</p>
</div>
<span>23 August 2015</span>
</li>
<li>
<div>
<a href="/javascript/2015/08/15/3-reasons-you-should-not-be-using-foreach.html">3 reasons you should not be using Array.prototype.forEach</a>
<p>
One of the main problems with forEach is that it primarily relies on side effects, whereas some native Array.prototype alternatives make use of semantically-correct programming paradigms (such as reduction, mapping, and filtering) and may in turn introduce less incidental complexity (and enhance readability) when writing code.
</p>
</div>
<span>15 August 2015</span>
</li>
<li>
<div>
<a href="/engineering/2015/08/11/5-things-i-learned-in-my-first-month-at-a-startup.html">5 Things I Learned in My First Month at a Startup</a>
<p>
In a departure from the normal content of this blog, I wanted to talk briefly about some of (what I think) are some important things I've learned so far in my first month working for a Bay Area tech startup.
</p>
</div>
<span>11 August 2015</span>
</li>
<li>
<div>
<a href="/javascript/sass/2015/05/26/modern-looking-css-toggle-switch.html">Modern Looking CSS Toggle Switch</a>
<p>
Create a nice, modern toggle switch that works by just changing its padding and adding a transition (all it takes is a JavaScript click handler to add or remove a class)!
</p>
</div>
<span>26 May 2015</span>
</li>
<li>
<div>
<a href="/javascript/ruby/2015/04/20/from-javascript-to-ruby-style-guide.html">From JavaScript to Ruby: Style Guide</a>
<p>
This post is the second in the series of “From JavaScript to Ruby”, which is aimed at helping JavaScript developers transition their thinking from JavaScript to Ruby. Here you’ll find a table of the ways we do things in JavaScript, and the way you’re supposed to do them in Ruby.
</p>
</div>
<span>20 April 2015</span>
</li>
<li>
<div>
<a href="/javascript/ruby/2015/04/20/from-javascript-to-ruby-using-blocks-like-callbacks.html">From JavaScript to Ruby: Using Blocks Like Callbacks</a>
<p>
This post is the first in the series of “From JavaScript to Ruby”, which is aimed at helping JavaScript developers transition their thinking from JavaScript to Ruby. This post will answer this fundamental question: how do I do “callbacks” in Ruby? The answer is: the “idiomatic” way (we’ll talk about what “idiomatic” means) to use so-called callbacks in Ruby is to use blocks. We’ll discuss blocks, and their similarities to JavaScript callbacks.
</p>
</div>
<span>20 April 2015</span>
</li>
<li>
<div>
<a href="/javascript/angularjs/2015/03/31/something-no-one-tells-you-about-minifying-angularjs-controllers-until-its-too-late.html">Something no one tells you about minifying AngularJS controllers (until it's too late)</a>
<p>
This post is going to talk briefly about the common ways people are shown to write AngularJS controllers, why minifying your code will break your application if you write them in this way, and how to fix this problem.
</p>
</div>
<span>31 March 2015</span>
</li>
<li>
<div>
<a href="/javascript/jekyll/tutorial/2015/03/26/getting-started-with-a-search-engine-for-your-site-no-server-required.html">Getting started with a search engine for your site (no server required!)</a>
<p>
Today we'll talk about how to build a JavaScript-only search engine (using JSON and AJAX) to avoid databases and server-side programming. We'll do it all specifically in the context of Jekyll and GitHub Pages!
</p>
</div>
<span>26 March 2015</span>
</li>
<li>
<div>
<a href="/javascript/2015/03/24/tricks-of-the-javascript-for-loop.html">Tricks of the JavaScript for loop</a>
<p>
I'm sure you've seen the common for loop written a thousand different ways. Well, in this post, you'll learn one readable way that is good for pretty much most instances where you'll use a for loop (some exceptions are noted, too). Oh, and scroll all the way down for a bonus snippet (we'll create something pretty cool, I think).
</p>
</div>
<span>24 March 2015</span>
</li>
<li>
<div>
<a href="/jekyll/snippet/2015/03/23/how-to-show-a-summary-of-your-post-with-jekyll.html">How to show a summary of your post with Jekyll</a>
<p>
In this little snippet, we're going to explore an option to show a summary of your blog post or article, if you're using the awesome static-site generator called Jekyll.
</p>
</div>
<span>23 March 2015</span>
</li>
<li>
<div>
<a href="/javascript/snippet/2015/03/22/why-do-people-add-semicolons-before-modules.html">Why do people add semicolons before modules?</a>
<p>
This post is going to discuss the reasoning behind a strange-looking syntax style that some people use when declaring JavaScript modules (in the context of immediately invoked function expressions). Simply put, the point of this trick is to get around minification issues when using other people's code (or your own).
</p>
</div>
<span>22 March 2015</span>
</li>
<li>
<div>
<a href="/javascript/2015/03/22/lightweight-dependency-modularization.html">Lightweight dependency modularization</a>
<p>
So what's this post all about? We're going to examine an interesting alternative for passing dependencies between JavaScript modules. The goal is to avoid any overhead (by using libraries like RequireJS), but also to avoid attaching too many things to the global namespace...
</p>
</div>
<span>22 March 2015</span>
</li>
<li>
<div>
<a href="/javascript/2015/03/20/how-do-i-check-if-a-parameter-was-passed-in-to-a-javascript-function.html">How do I check if a parameter was passed in to a function in JavaScript?</a>
<p>
This post is going to talk about checking for the "existence" of a parameter, if we expected one to be there and how to handle this "flow of control", and how we define "checking for existence" in the first place. The fundamental concept behind all of this, as we'll learn, is the fuzzy idea of truthiness (which is different depending on which programming language you're referring too.) We'll see that JavaScript has a very broad idea of truthiness.
</p>
</div>
<span>20 March 2015</span>
</li>
<li>
<div>
<a href="/javascript/2015/03/20/what-is-hoisting-in-javascript.html">What is hoisting in JavaScript?</a>
<p>
What is this strange word "hoisting"? As of the current version of JavaScript (ECMAScript5), there's not really such a thing as block scope, which is something common to lots of other programming languages (there is a caveat though, which we'll learn towards the end of this post.) Hoisting and the non-existence of "block scope" can be confusing. Learn how to overcome this issue.
</p>
</div>
<span>20 March 2015</span>
</li>
</ul>
</section>
</main>
<footer>
<div>
<p>
© 2015 Joshua Beam
</p>
<ul class="list-unstyled list-inline">
<li><a href="http://www.joshbe.am">www.joshbe.am</a></li>
<li><a href="http://github.com/joshbeam">GitHub</a></li>
<li><a href="http://careers.stackoverflow.com/joshbeam">Resume</a></li>
<li><a href="http://twitter.com/joshbeam92">@joshbeam92</a></li>
<li><a href="mailto:josh@frontendcollisionblog.com">josh@frontendcollisionblog.com</a></li>
</ul>
</div>
<form class="search">
<input type="text" class="search-box" id="search" /><input type="submit" class="search-button" value="Search" />
</form>
</footer>
<script src="/js/dist/scripts.min.js"></script>
</body>
</html>