-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
279 lines (222 loc) · 15.9 KB
/
index.html
File metadata and controls
279 lines (222 loc) · 15.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daniel Fernandez
</title>
<link rel="alternate" href="http://dfernandez.me/feed.xml" type="application/rss+xml" title="My personal blog">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fredericka+the+Great">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header>
<div class="inner">
<h1><a href="http://dfernandez.me">Daniel Fernandez</a></h1>
<div class="icons"> <a href="/suscribe.html" target="_blank"><img src="/images/rss.png" height="56px" width="56px"></a><a href="https://twitter.com/danielfrndz" target="_blank"><img src="/images/twitter.png" height="56px" width="56px"></a><a href="http://ar.linkedin.com/in/danielmartinfernandez" target="_blank"><img src="/images/linkedin.png" height="56px" width="56px"></a></div>
<div class="options"><a href="/suscribe.html" target="_blank">Suscribe</a><a href="https://github.com/danielfrndz">Github </a><a href="/about.html">About </a></div>
</div>
</header>
<div id="content">
<article class="post">
<header>
<h2 class="title"><a href="/articles/digitalocean_lost_our_data/">DigitalOcean lost all our data and gave us $500</a></h2><span class="date">November 6, 2013</span>
</header>
<section class="content"><p>We have recently launched <a href="http://listboard.it/" target="_blank">Listboard.it</a> on a <strong>single instance in DigitalOcean</strong> to start contacting people who had <strong>too many tabs opened on their browser</strong> and were interested on a solution. We received over 240 invitation requests and accepted some to start experimenting with it. Our active users were few so <strong>one instance was more than enough</strong>.
</p>
<p>Some days ago, we received an email from <strong>DigitalOcean Engineering</strong>:
</p>
<pre><code>We've had to unfortunately reboot your Droplet (webapp) due to an issue on the underlying physical node that the Droplet resides on.
We are investigating the health of the physical node to determine whether this was a single incident or systemic.
If the physical node does not pass health and safety checks it will be removed from the DigitalOcean pool and your Droplet will be auto-migrated to a new physical node. You will recieve a separate email should that event occur.
If you have any questions related to this issue, please send us a ticket.
https://www.digitalocean.com/support
Happy coding,
DigitalOcean</code></pre>
<p><em>"Well"</em>, we thought. <em>"No big deal. <strong>We are still on alpha</strong>. Our droplet is inaccessible, but no need to create a new one and deploy everything again. Our testing users are in contact with us and they will understand some downtime.".</em>
</p>
<p>However, <strong>six hours later</strong>, we got this email:
</p>
<pre><code>Hello,
Early this morning we became aware that the hardware underlying your droplet experienced a dual drive failure. As we use RAID5 this is an often unrecoverable situation. However, our engineers made a best effort to recover the drives.
Our investigation proved to be unsuccessful, and we chassis swapped the drives in case of device failure on the node. Unfortunately, the drives in question were still unable to be rebuilt.
At this time, we have concluded our work on this node. The drives are lost permanently, and all customers on the node will be credited $500 to compensate for the loss of their data. Hopefully this will compensate for what is clearly an inexcusable lapse in our monitoring of the health of this node.
We are currently improving the design of our monitoring systems to hopefully provide preemptive detection for situations like this, enabling us to migrate customers off hardware before it becomes an issue.
Please don't hesitate to reach out with any questions or concerns. Thanks,
Bodie
DigitalOcean Engineering
Affected Droplets:
webapp</code></pre>
<p><strong>Our server was dead. Just like that.</strong>
</p>
<p>We contacted DigitalOcean, but there was no turnaround. Everything was lost and they had no way to recover it. Luckily for us, <strong>we had backups</strong>. But our downtime was those 6 hours plus the time it took us to put everything up and running again.
</p>
<p>I think the lesson here is that <strong>even if your application is very young</strong>, maybe with one landing page to contact potential users, <strong>it is important that you always backup your data</strong>. And if you just launched and have a <strong>single instance running</strong>, let your alpha users know that <strong>there will probably be some downtime</strong>.
</p>
</section>
</article>
<article class="post">
<header>
<h2 class="title"><a href="/articles/cross_domain_http_requests/">Cross Domain HTTP Requests</a></h2><span class="date">October 25, 2013</span>
</header>
<section class="content"><p>I always tried to avoid doing <strong>cross domain HTTP request</strong> as I had the feeling it was not secure enough. However, not too long ago, I had to implement it for a project I am working on and it lead me to something called <a target="_blank" href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing</a>, also know as <strong>CORS</strong>. I found that making cross domain HTTP requests, <strong>is not as hard or insecure as I thought it was</strong> (as long as you do it correctly).
</p>
<p>So lets move directly to the code to check it out. Here is a <strong>GET request made from origin.com</strong>:
</p>
<pre><code><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();
xhr.open(<span class="string">'GET'</span>, <span class="string">'http://destination.com/dogs?size=big'</span>,<span class="keyword">true</span>);
xhr.onreadystatechange = <span class="keyword">function</span>(e) {
<span class="keyword">if</span> (<span class="keyword">this</span>.readyState == <span class="number">4</span> && <span class="keyword">this</span>.status == <span class="number">200</span>) {
console.log(<span class="keyword">this</span>.responseText);
}
}
xhr.send(<span class="keyword">null</span>);</code></pre>
<p>and the browser will create a <strong>request with the following headers</strong>:
</p>
<pre><code>GET http:<span class="comment">//destination.com/dogs HTTP/1.1 </span>
Origin: http:<span class="comment">//origin.com</span></code></pre>
<p>In order for the server to accept the call, it has to include these <strong>headers in its response</strong>:
</p>
<pre><code>Access-Control-Allow-Origin: http:<span class="comment">//origin.com</span></code></pre>
<p>The Access-Control-Allow-Origin response header will <strong>tell the browser that the origin is allowed</strong> and it will process the response.
</p>
<p>Sometimes, you will need to do manage also <strong>HTTP authentication</strong> on cross domain HTTP calls. For example, lets say that you need make a call from <strong>origin.com to destination.com with destination.com cookies</strong> so the server authenticates the user. The browser will not send those cookies by default, but you need to force them setting the <strong>withCredentials property to true</strong>.
</p>
<p>Here is a POST example <strong>from origin.com that sends destination.com cookies</strong>:
</p>
<pre><code><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();
xhr.open(<span class="string">'POST'</span>, <span class="string">'http://destination.com/dogs'</span>,<span class="keyword">true</span>);
xhr.setRequestHeader(<span class="string">"Content-type"</span>, <span class="string">"application/x-www-form-urlencoded"</span>);
xhr.withCredentials = <span class="keyword">true</span> ;
xhr.onreadystatechange = <span class="keyword">function</span>(e) {
<span class="keyword">if</span> (<span class="keyword">this</span>.readyState == <span class="number">4</span> && <span class="keyword">this</span>.status == <span class="number">200</span>) {
console.log(<span class="keyword">this</span>.responseText);
}
}
xhr.send(<span class="string">'name=rambo'</span>);</code></pre>
<p>In this case, the server will not only need to include "Access-Control-Allow-Origin" header to accept the call but also <strong>"Access-Control-Allow-Credentials"</strong>:
</p>
<pre><code> Access-Control-Allow-Origin: http:<span class="comment">//origin.com</span>
Access-Control-Allow-Credentials: <span class="keyword">true</span></code></pre>
<p>Findally, some <strong>important notes</strong> to take into account:
</p>
<ul>
<li><p>Server can set the header <strong>"Access-Control-Allow-Origin" to "*"</strong> in order to allow any origin. But if set to "*", then <strong>"Access-Control-Allow-Credentials" cannot be set to true</strong>.</p>
</li>
<li><p>The browser <strong>only includes the "Origin" header when the request is cross-origin</strong></p>
</li>
</ul>
<ul>
<li><strong>IE has limited support</strong> on CORS</li>
</ul>
<p>Hope you find it useful!</p>
</section>
</article>
<article class="post">
<header>
<h2 class="title"><a href="/articles/listboard_it_updates/">Listboard.it updates</a></h2><span class="date">October 5, 2013</span>
</header>
<section class="content"><p><img src="/images/articles/capture-2013-11-06.png" alt="Listboard.it screenshot"/>
</p>
<p>At <a href="http://listboard.it/" target="_blank">Listboard.it</a> we keep iterating over different ideas to improve the user experience and reduce the steps that it takes to use the site. So here are some of the latest things we are working on:
</p>
<ul>
<li><p>Provide search of content across all open tabs .</p>
</li>
<li><p>Allow the user to easily froze tabs for later user.</p>
</li>
<li><p>Release the "Archive" panel to bookmarks tabs for future use.</p>
</li>
<li><p>Create new API that uses OAuth2</p>
</li>
</ul>
<p>If you are intereting in knowing more about it, feel free to register at <a href="http://listboard.it/" target="_blank">here</a> .</p>
</section>
</article>
<article class="post">
<header>
<h2 class="title"><a href="/articles/mongoose_array_field_update_problem/">Mongoose array field update problem</a></h2><span class="date">September 15, 2013</span>
</header>
<section class="content"><p>Recently, I struggled with a problem when saving a mongoose instance which had an array field.
Whenever I saved the instance, <strong>the values of its array field were not propagated to the database</strong>.
I checked the instance right before calling .save() and the array had its values loaded correctly. However after saving the instance, I could not find them on the database.
</p>
<p>Doing some digging on the internet, I found that <strong>mongoose has a limitation</strong>.
That instance is known as a <strong>Mixed Type</strong> because it includes embedded documents. So in order to propagate the changes to the database, it is needed to <strong>mark the array field as modified</strong>.
</p>
<p>For for example if you an instance called <strong>house</strong> has that has this schema:
</p>
<pre><code><span class="keyword">var</span> HouseSchema = <span class="keyword">new</span> Schema({
rooms: [
{type: Schema.ObjectId, ref: <span class="string">'Room'</span>}
]
});</code></pre>
<p>when you update <strong>house.rooms</strong>, you need to call:
</p>
<pre><code>house.markModified(<span class="string">"rooms"</span>);
house.save(<span class="keyword">function</span>(err) {
});</code></pre>
<p>You can find the reference <a target="_blank" href="http://mongoosejs.com/docs/schematypes.html#mixed">here</a>
</p>
<p><em>"Mongoose loses the ability to auto detect/save those changes. To "tell" Mongoose that the value of a Mixed type has changed, call the .markModified(path) method of the document passing the path to the Mixed type you just changed."</em></p>
</section>
</article>
<article class="post">
<header>
<h2 class="title"><a href="/articles/too_many_tabs_opened/">Too many tabs opened?</a></h2><span class="date">August 22, 2013</span>
</header>
<section class="content"><p><img src="/images/articles/too_many_tabs_capture.png" alt="Too many tabs opened capture"/>
</p>
<p>
<h3>Have you ever had so many tabs opened that favicons start dissapearing?</h3>
<h3>Or wait eternal minutes to recover from a browser crash?</h3>
<h3>And then try to find from what tab the sound is coming from?</h3>
</p>
<p>If you experienced one of those things, welcome to the <b>"too many tabs"</b> club. Do not worry, some members have <a href="https://news.ycombinator.com/item?id=6147583" target="_blank">over 300 tabs opened</a>. Outsiders cannot understand how we can manage all those tabs at the same time, they think there is a serious problem with us.
</p>
<p>The truth? We are not managing all those tabs, we are just <b>piling them up</b>.
</p>
<p>It is clear that tabs <b>perform an important role</b> in the way we navigate today. I got so used to them that is hard to remember those days when browsers did not implemented tab functionality. I tend to <b>abuse the "Open in New Tab"</b> option.
</p>
<p>However, when I take a detailed look at my browser tabs, I find that most of them are things that I am <b>not using right now</b> and I do <b>not even want to bookmark them for the future</b> (takes time and they get mixed with my bookmarks). I just want to <b>check them later</b>. That means that I may need them later to work, to share with my friends or to read during my free time.
</p>
<p>Of course there are tabs that I like to have constantly opened like Gmail, but from my current <b>98</b> opened tabs, I only need <b>5</b> right now. <b>That is only a 5%!</b>
</p>
<p>If I had a way to freeze the tabs I do not use, I could <b>free some memory</b>.
</p>
<p>That is why my partner and I are building <a href="http://listboard.it/" target="_blank">Listboard.it</a>.
</p>
<p><img src="/images/articles/listboard_it_capture.png" alt="Listboard.it capture"/>
</p>
<p>With <a href="http://listboard.it/" target="_blank">Listboard.it</a>, you keep <b>your browser(s) in sync on real time</b> and easily <b>drag windows or tabs to a later listboard</b>. After dragging a tab, it will automatically close. Then you can recover those windows/tabs whenever you want.
</p>
<p>Are you worried about losing the tab context? Trust me, <b>you can always get the context back</b>. It does not justify keeping the tab opened.
</p>
<p>You <b>can also bookmark tabs</b> by just dragging them to a future listboard and organize them using hierarchical lists. Also, <a href="http://listboard.it/" target="_blank">Listboard.it</a> understands that <b>the 3 steps of bookmarking do not always happen at the same time</b>:
</p>
<p><ul class="numbered">
<li>Open an URL</li>
<li>Analyze the content</li>
<li>Save it</li>
</ul>
Step 2 can happen a day after step 1.
</p>
<p>So if are part of the club, want to free some memory and agree that <b>bookmarking is not the solution</b>, feel free to <a href="http://listboard.it/" target="_blank">register for early testing</a> or share <a href="https://news.ycombinator.com/item?id=6258433" target="_blank">your comment on HN</a>.
</p>
<p>I would love to hear your opinion.
</p>
</section>
</article><a href="archive.html" id="archive">Older posts</a>
</div>
<footer>
<div class="inner">
<p>© 2013 Daniel Fernandez</p>
</div>
</footer>
<script>
var _gaq=[['_setAccount','UA-23149481-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>