-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfeed.xml
More file actions
243 lines (169 loc) · 26.8 KB
/
feed.xml
File metadata and controls
243 lines (169 loc) · 26.8 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
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Mark de Jong</title>
<description>The Thoughts and Rants of a Typography Fanatic and Web Developer</description>
<link>http://markdejong.com/</link>
<atom:link href="http://markdejong.com/feed.xml" rel="self" type="application/rss+xml" />
<item>
<title>Flickrheist: More Like Borrowing Photos</title>
<description><p>Everybody wants to have some pretty pictures on their website, especially big ones and pretty ones. But not everyone can make beautiful pictures or wants to buy some off of a stock images platform…</p>
<h3 id="introducing-flickrheist">Introducing “FlickrHeist”</h3>
<p>Using the awesome photo-taking society at Flickr everybody can have beautiful photos on their website now with FlickrHeist. Just throw in the easy snippet to kick-off and provide your Fickr API key and a tag to filter on and you’re ready to go.</p>
<p>On this very website you can see a live demo of the plugin using the filter tag ‘dapper’ and grabbing photos of a resolution using the tag ‘url_c’ (800px on the longest side).</p>
<h3 id="the-story">The Story</h3>
<p>While making a theme for the <a href="https://ghost.org">Ghost</a> blogging platform I got inspired by the look and feel of <a href="https://medium.com">Medium</a>’s sidebar look and decided to bring this same feeling to my theme. At first I wanted to use Instagram to grab pictures of, filtered by tag, but quickly found the size of the largest size images on Instagram didn’t quite cut it. The images were too small. Hence brought me to explore the Flickr API and build my plugin on that.</p>
<h3 id="the-bare-necessities">The Bare Necessities</h3>
<p>For the basic plugin to work there were a few quirks that needed figuring out, and required, for a real v1.0 release. Flickr states in their <a href="http://www.flickr.com/guidelines.gne">Community Guidelines</a> the following:</p>
<blockquote>
<p>“Flickr makes it possible to post content hosted on Flickr to other web sites. However, pages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr. This provides a way to get more information about the content and the photographer.”</p>
</blockquote>
<p>And to adhere to this was the first requirement for a v1.0 release of this here plugin. The other ones I basically stated myself:</p>
<p>And these were the requirements I put myself to before releasing the plugin to the wild:</p>
<ol>
<li>Pull a picture from Flickr and display it as background image on the selected DOM element.</li>
<li>Grab the meta information from the image and display the photographer’s name and country alongside the image for credits.</li>
<li>Give the user the option to fill in a custom tag and select the image quality to use.</li>
</ol>
<p>Along the road of enlightening and towards the completion of the FlickrHeist I came across more useful options that I would want to change if I would be using the plugin for myself. That’s when I added some more options to the plugin (listed below).</p>
<h3 id="the-simple-setup">The Simple Setup</h3>
<p>For everyone to use this plugin it’s fairly easy to set up. All you need is the following files to get started:</p>
<ul>
<li>jQuery</li>
<li>HandleBars.JS</li>
<li>flickrheist.js</li>
</ul>
<p>Right now Handlebars.JS is used at a minimum, but I’ve got plans on exploiting this baby even further to optimize even more.</p>
<p>To initialize the plugin you’ll only need to call the following in your main Javescript file:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="lineno">1</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#some-div&#39;</span><span class="p">).</span><span class="nx">flickrHeist</span><span class="p">({</span>
<span class="lineno">2</span> <span class="nx">apikey</span><span class="o">:</span> <span class="s1">&#39;ABCDEFGHIJKLMOPQRSTUVWXYZ123456&#39;</span><span class="p">,</span>
<span class="lineno">3</span> <span class="nx">tags</span><span class="o">:</span> <span class="s1">&#39;zeitgeist&#39;</span><span class="p">,</span>
<span class="lineno">4</span> <span class="nx">size</span><span class="o">:</span> <span class="s1">&#39;url_c&#39;</span> <span class="c1">//800px longest side</span>
<span class="lineno">5</span> <span class="p">});</span></code></pre></div>
<p>Oh, yeah… I almost forgot. You also need to have your own Flickr API key in order for this plugin to work. You can grab your own Flickr API key right <a href="http://www.flickr.com/services/api/">here</a>.</p>
<h3 id="the-nitty-gritty">The Nitty Gritty</h3>
<p>Below is the full list of options available and what values they take along with a brief explanation what it is and what it does.</p>
<ul>
<li><code>apikey</code>: (required) Your Flickr API key goes right here. Without it, this whole party won’t start</li>
<li><code>tags</code>: (string) A single tag, or a comma separated array of tags to filter the pictures you want to ‘heist’</li>
<li><code>safe_search</code>: (boolean) Allow (NSFW) images to appear in your ‘heist’, or not.</li>
<li><code>number_photos</code>: (integer) The maximum number of images to grab. Useful when you want random images to rotate between</li>
<li><code>sortby</code>: (string) The order in which to sort returned photos. Accepts: <code>date-posted-asc</code>, <code>date-posted-desc</code>, <code>date-taken-asc</code>, <code>date-taken-desc</code>, <code>interestingness-desc</code>, <code>interestingness-asc</code>, and <code>relevance</code>.</li>
<li><code>random</code>: (boolean) To pick a random picture from the returned array of images to show.</li>
<li><code>size</code>: (string) Select what size image to return for use as the background. Available options:</li>
<li><code>url_s</code>: small square 75x75</li>
<li><code>url_q</code>: large square 150x150</li>
<li><code>url_t</code>: thumbnail, 100 on longest side</li>
<li><code>url_m</code>: small, 240 on longest side</li>
<li><code>url_n</code>: small, 320 on longest side</li>
<li><code>url</code>: medium, 500 on longest side</li>
<li><code>url_z</code>: medium 640, 640 on longest side</li>
<li><code>url_c</code>: medium 800, 800 on longest side (only exist if picture is uploaded after March 1st 2012)</li>
<li><code>url_b</code>: large, 1024 on longest side</li>
<li><code>url_o</code>: original image, either a jpg, gif or png, depending on source format</li>
<li><code>min_date</code>: (epoch date) Filter by minimum date to make sure you get a good quality picture ‘heisted’. Example: <code>'1330560000'</code> (Thu, 01 Mar 2012 00:00:00 GMT)</li>
<li><code>debug</code>: (boolean) Handy for live loading of data, instead of reading from localStorage. Also can be triggered using the URL parameter <code>flickrheist=debug</code></li>
<li><code>phototemplate</code>: (string) HTML template used to render the HTML for the image. Default: <code>'&lt;div class="cover-image" style="background-image: url()"&gt;'</code>.</li>
<li><code>creditstemplate</code>: (string) Same as the <code>phototemplate</code>, just for the credits of the picture. Default: <code>'&lt;div class="cover-details"&gt;&lt;ul class="clearfix"&gt;&lt;li class="cover-owner"&gt;&lt;a href="" title=""&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="cover-location"&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;'</code></li>
<li><code>complete</code>: (function) A little something to do whatever you want when the loading is done.</li>
</ul>
<p>(Photo Source URLs: <a href="http://www.flickr.com/services/api/misc.urls.html">Flickr App Garden</a>)</p>
<h3 id="the-examples">The Examples</h3>
<p><em>(coming soon)</em></p>
</description>
<pubDate>Tue, 21 Jan 2014 15:22:39 +0100</pubDate>
<link>http://markdejong.com/2014/01/21/flickrheist-more-like-borrowing-photos/</link>
<guid isPermaLink="true">http://markdejong.com/2014/01/21/flickrheist-more-like-borrowing-photos/</guid>
</item>
<item>
<title>Curiosity doesn't kill cats</title>
<description><p>Every day we are doing our thing and for the most of us it’s becoming a routine that repeats itself day after day after day. We get so familiar with what we do that we start to take it all for granted. Up to the point that we don’t even notice it at all anymore. From that point on it’s all just auto-pilot driving us. It all just whooshes past and it’s just another insignificant decoration to our day.</p>
<p>Up to here everything goes perfectly fine until a minor hiccup just messes us up completely. The municipal roadworks starts tearing up the road you’re always taking to work. Which makes you take a detour and it’ll take you an additional 5 minutes to get to your office. * hiccup *</p>
<p>Or you just left home one minute later than usual and the traffic light you usually cross, green when you would pass in time, is now red and you have to wait another 3 minutes before you can continue your usual commute to the office. * hiccup *</p>
<p>When something like this happens it wakes us up from our usual habits. It makes us pay more attention to our surroundings and only then we can see that cute, little pigeon eating a rained down piece of chicken that’s left from the market from the day before. Normally we would’ve never noticed it because we would’ve been too caught up in our routine. But now, because something happened that’s different from our routine, we did see it and we were amazed.</p>
<p><img src="http://markdejong.com/img/2013/11/11105350803_4fda52a0a0_o.jpg" alt="alt" /></p>
<p>That same philosophy can be applied to studying by reading books. When we’re reading a book or article that’s printed in a font that’s familiar to us, say Arial or Times New Roman, we tend to take the contents of that book for granted. We just read over all the details without actually absorbing the information it contains, thus still learning nothing. By changing the font the book uses to something different, but slightly similar, it actually triggers us to focus more. Since we think we know the font, but actually we don’t. So we want to focus our brain and train our attention to read it, because it looks unfamiliar, yet strangely familiar to us. As a result we’re actually able to absorb what we’ve read and learn the material easier like we’re supposed to for that final exam we’re taking soon.</p>
<blockquote>
<p>Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus.</p>
</blockquote>
<p>For example, when I’m reading a newspaper I read an article once and most of the time I can’t even remember what I’ve read without having to read it again for two or sometimes even three times. It’s just because the newspaper that I’m reading is using the same font for years. The advantage of reading a newspaper article that is printed in the same font for years is that they’re looking familiar. We can read all the articles fast enough before finishing breakfast, or on the train before having to transfer. Just enough to get the topic the article is about without having to actually absorb or remember the whole story. These fonts the newspaper uses allow us to read fast and briefly the news we want to know, fast and within the time we have at that moment.</p>
<p>Actually it’s a very interesting fact that such a small (dis)similarity in fonts can still influence our reading experience that much. Can you imagine the logo of Coca-Cola in a serif font instead of a handwritten font? What would the impact of that have been if they never went for a handwritten logo? Or what if Nike went with a serif font as well? Would they still get the same ‘speedy’ imago as they have now? I think all typography we see and use ourselves today and yesterday have a reason.</p>
<p>Just think about this next time you are reading the newspaper, watching a movie, or even writing an essay on your own computer using your own favourite text editor with your own favourite font. Every detail of all the things we do or see on a daily basis have a bigger impact on your life that you might think.</p>
<p>This article is also <a href="https://medium.com/i-m-h-o/cb9122f0bf7">posted</a> on <a href="https://medium.com/@mdejong83">Medium.com</a></p>
</description>
<pubDate>Thu, 28 Nov 2013 20:57:42 +0100</pubDate>
<link>http://markdejong.com/2013/11/28/curiosity-doesnt-kill-cats/</link>
<guid isPermaLink="true">http://markdejong.com/2013/11/28/curiosity-doesnt-kill-cats/</guid>
</item>
<item>
<title>Movember Movement for Mo Bros and Sistas 2013</title>
<description><p>For the past few weeks I’ve been expecting, and attempting to convince all colleagues and friends, to join in on the Movember Movement. I’ve already had some of my colleagues join our team “<a href="http://moteam.co/master-of-moustache">Master of Moustache</a>” and successfully follow the Movember Movement.</p>
<p><img src="/images/2013/11/MO13_primary_logo.png" alt="Movember 2013" /></p>
<p>Yesterday on Movember 1st we had our Movember shave-off party at <a href="https://www.facebook.com/CutThroatBarber">Cut Throat Barber</a> and came out to show the real face of men’s health. Colleagues arrived at the office clean shaven and proudly showing their bare naked face, supporting the fight against diseases like prostate cancer, testicular cancer and mental health.</p>
<h3 id="proud-first-time-mo-bro">Proud first-time Mo Bro</h3>
<p>I have to say I’m proud to have finally joined the Movember Movement and to support our fellow moustache friends in their quest for a better health. Last year I was about to join as well, but in the end I didn’t. This year I convinced myself, and some friends and colleagues, to finally stand on my decision and go all in with the shave and the ‘stache!</p>
<p>Just to shamelessly show off my participation to Movember here are some proofs.</p>
<h4 id="waiting-for-the-shave-off-party-to-start-pre-shave">Waiting for the Shave-Off Party to Start (pre-shave)</h4>
<p>Just a week, or week and a half, before the shave-off I decided to not shave at all and let it all grow wild.</p>
<p><img src="/images/2013/11/2013_11_01_14_20_29.png" alt="Status update before shave-off: Pre-shave" /></p>
<h4 id="first-stage-of-the-shave-off-trimming">First Stage of the Shave-Off: Trimming</h4>
<p>Before we start shaving we taketh off the facial hair with a buzzing trimmer.</p>
<p><img src="/images/2013/11/2013_11_01_14_58_10.png" alt="Getting my beard trimmed" /></p>
<h4 id="second-stage-of-the-shave-off-shaving-it-all-off">Second Stage of the Shave-Off: Shaving It All Off!</h4>
<p>Once we have removeth the gross of the facial hair we proceed to the next: razorblade shaving.</p>
<p><img src="/images/2013/11/2013_11_01_15_04_30.png" alt="Clean shaving my face" /></p>
<h4 id="final-stage-of-the-shave-off-glimmering-smoothness">Final Stage of the Shave-Off: Glimmering Smoothness</h4>
<p>As a result of preceeding steps we have, what we call, a butt naked face.</p>
<p><img src="/images/2013/11/2013_11_01_15_12_30.png" alt="Resulting in a smooth-shaven chin" /></p>
<h4 id="bonus-stage-proud-snapshot-with-mo-bro-and-sista">Bonus stage: Proud snapshot with Mo Bro and Sista</h4>
<p>After you realized what just happened you can be proud with your Mo Bro and Mo Sista.</p>
<p><img src="/images/2013/11/2013_11_01_15_28_24.png" alt="Pride all around with Mo Bro and Mo Sista" /></p>
<h3 id="special-goody-bag-video-submission">Special Goody Bag Video Submission</h3>
<p>Especially for those who have no idea what Movember is, or where the moustache comes from even, here’s a surprise submission video from great actor and moustache president Nick Offerman.</p>
<iframe width="637" height="358" src="//www.youtube.com/embed/8w1p5UI7Siw" frameborder="0" allowfullscreen=""></iframe>
<p><img src="/images/2013/11/MO13_Proud_Mo_Grower.png" alt="Movember 2013 Proud Mo Grower" /></p>
</description>
<pubDate>Sat, 02 Nov 2013 14:51:51 +0100</pubDate>
<link>http://markdejong.com/2013/11/02/movember-movement-for-mo-bros-and-sistas-2013/</link>
<guid isPermaLink="true">http://markdejong.com/2013/11/02/movember-movement-for-mo-bros-and-sistas-2013/</guid>
</item>
<item>
<title>Starting the day with an adventure</title>
<description><blockquote>
<p>Nothing goes as it usually does. Everything has changed differently than before. Even the normal walking route you take to work everyday has changed because of that one thing that was different today.</p>
</blockquote>
<p>Usually when I start my day I take the normal routine before I go to work: After I wake up I wash my face and brush my teeth. I get dressed and have my breakfast. Then I’ll kiss my wife goodbye and head out to the train station on my beautiful orange Swedish Kronan bike and hop on the big yellow train to Amsterdam.</p>
<p>As a creature of habit I take about the same time with everything in the morning, even when I’m riding my bike I’ll take the same route to the station every day. It doesn’t matter what kind of weather it is, I’ll always take the same route.</p>
<blockquote>
<p>Maybe it’s what you needed. That one nudge to put you off the regular path that made you venture out of the familiar woods and into unexplored territory. A whole new world is there to be taken in by you and to find new treasures.</p>
</blockquote>
<p>Sometimes the start of my day takes an unusual turn and forces me to improvise and abandon my favorite routine. Today was that kind of day…</p>
<p>I was waiting on the platform for the train to come and when it arrived I lined up beside the door to let the passengers off before getting on the train. At the same time a youngster lined up right beside me, closing in to the door, trying to squeeze through already. Once all passengers were out I tried to get in and the youngster squeezed on the train from beside me. His backpack got stuck between the door and me, while I was still trying to get on the train, and when we both were on the train he pushed me backwards for obstructing his way onto the train. We exchanged a few hefty words and I walked away to find myself a seat.. on the other side of the train.</p>
<blockquote>
<p>If that’s what happended then maybe that one nudge by that one frustrated fellow train passenger was the one you needed to get out of your comfort zone. Just accept it and go on exploring that unknown realm behind the nudge.</p>
</blockquote>
<p>While the train was making its way to Amsterdam, which usually takes about 20 minutes, I had time to think about what just had happened.
After I realized the situation and accepted it as a typical ‘one-of-those-days’-thing I started wondering about how this really changed my usual routine and my winter-time jetlag (we still have Daylight Saving time here in Holland.. yeah).</p>
<p>The past few days, ever since the wintertime clock started, I haven’t been my usual motivated self. I’ve been walking around with sleepy eyes and haven’t been able to get a half hour of solid work done. This new surprising start of the day was actually a pleasant wake up call from my normal daily startup routine.</p>
<p>Once the train arrived in Amsterdam I’ve walked a completely different route from the train to the tram that I take to the office. I’ve skipped the closest stairs, yet the most busy one, off the platform and took the next one that ends up on the other side of the main hall. I took some narrow shortcuts behind the columns in the hall and checked out at a totally different gate to get out of the station.</p>
<p>Eventually I found that today was a good new start of the day for me, even though very surprising and adventurous, and it got me out of my slumbering winter-time jetlag and back to my motivated self.</p>
</description>
<pubDate>Thu, 31 Oct 2013 09:03:57 +0100</pubDate>
<link>http://markdejong.com/2013/10/31/starting-the-day-with-an-adventure/</link>
<guid isPermaLink="true">http://markdejong.com/2013/10/31/starting-the-day-with-an-adventure/</guid>
</item>
<item>
<title>'Sprinter' vs. 'Stoptrein'</title>
<description><p>Back in the day when I was still studying Art &amp; Design I had to take the train from Tilburg to Boxtel every day back and forth. At that time they called this kind of train a ‘<em>Stoptrein</em>’. Literally translated to English as ‘stop train’. Of course this doesn’t mean the train never moves, or always stops, but it would just stop at every single station it goes through. It’s counterpart would be the ‘<em>Intercity</em>’, which would only stop at the bigger cities worthy of it stopping by. But I’m not going to talk about the ‘Intercity’, but about the difference of the train ‘<em>Stoptrein</em>’. Now being called a ‘<em>Sprinter</em>’.</p>
<p>Our Dutch railway system, “<a href="http://nl.wikipedia.org/wiki/Nederlandse_Spoorwegen">Nederlandse Spoorwegen</a>” or “NS” in short, is always trying to make things better for their customers. That would be us, the passengers. For example by using more personal greetings in their automated announcements. Their announcements now have a robot-like voice saying: “Dames en heren… Goedemorgen!” (“Ladies and gentlemen… Goodmorning!”). It almost feels as if they try so hard to be cool that they miss the boat of coolness by a long shot. Similar story here with renaming of the “Stoptrein”.</p>
<p>Probably they thought it would sound better to call the “Stoptrein” a “Sprinter” too, because it would imply the train would move faster in short sprints. Someone might’ve come up with this idea because everyone was complaining about the train always being late or delayed due to the fact that it <strong>stops</strong> everywhere. So they decided to call the train a “Sprinter” instead. Giving the customer the idea the train isn’t actually slow, or always delayed, but instead looking at it from the bright side: The train is always taking short sprints!</p>
<p>That’s just wonderful, isn’t it? A train that’s always taking sprints to the next station! It’s almost like this train is always trying to be faster. Okay, they’ve also changed the look and interior of the train itself, but besides that it’s still pulling over at every single station it arrives at. One might even think the name “<em>stoptrein</em>” would give such a negative impact on people that they are even getting depressed because of it. Causing the percentage of train-person accidents to increase. In that case I’d like to know the percentage of today of the train-person accidents occurring with the “Sprinter” of this time.</p>
<p>I’m not saying here I don’t like the name of this train, “Sprinter”, but I’m just wondering where the name comes from and why they didn’t stick with the name “<em>stoptrein</em>”. After all, the railways here are called “Nederlandse Spoorwegen” (“Dutch Railways”). Wouldn’t it then make more sense to keep having a more Dutch-like name to it? Keep that language alive as long as we can, please!</p>
<p>Oh, and those robot-like announcements they have? I’ll be getting back to that later. That deserves an article on its own together with all the other “wannabe-cool” messages around the trains.</p>
</description>
<pubDate>Sun, 27 Oct 2013 18:54:57 +0100</pubDate>
<link>http://markdejong.com/2013/10/27/sprinter-vs-stoptrein/</link>
<guid isPermaLink="true">http://markdejong.com/2013/10/27/sprinter-vs-stoptrein/</guid>
</item>
</channel>
</rss>