/
atom.xml
1985 lines (1570 loc) · 147 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
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Kevin Mees]]></title>
<link href="http://kmees.github.com/atom.xml" rel="self"/>
<link href="http://kmees.github.com/"/>
<updated>2013-01-03T23:08:53+01:00</updated>
<id>http://kmees.github.com/</id>
<author>
<name><![CDATA[Kevin Mees]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Hack a Bookmark Bar Seperator for Chrome]]></title>
<link href="http://kmees.github.com/blog/2013/01/03/hack-a-bookmark-bar-seperator-for-chrome/"/>
<updated>2013-01-03T11:40:00+01:00</updated>
<id>http://kmees.github.com/blog/2013/01/03/hack-a-bookmark-bar-seperator-for-chrome</id>
<content type="html"><![CDATA[<p>New Year’s Day is Cleanup Day (yay) !</p>
<p>When I finally arrived at my bookmarks I desperately wanted to organize my bookmarks on the Bookmark Bar n groups but there’s (still!) no option to add a simple seperator to it. So we can either live with it or get creative about it. I prefer the second approach !</p>
<p><img class="center" src="http://kmees.github.com/images/posts/bookmark_bar_no_sep.png" title="No Seperators :(" ></p>
<!--more-->
<h2>The favicon seperator bookmark</h2>
<p>Since the Bookmark Bar uses a pages favicon as the bookmark icon, we simply need to find a page with a favicon that looks like a seperator (good luck with that…) which we can (ab)use…or we just create one. There’s a site called <a href="http://www.favicon.cc/">favicon.cc</a> with has an online editor for favicons and it uses the created favicon as the pages favicon. Wonderful ! The only drawback is that we need to create an account to get a permalink to the favicon so that we can bookmark it. So here’s <a href="http://www.favicon.cc/?action=icon&file_id=582779">my attempt</a>. A real masterpiece!</p>
<h2>Duplicating bookmarks</h2>
<p><img class="center" src="http://kmees.github.com/images/posts/one_does_not_simply_bookmark.jpeg">
So now that we have a bookmark with a favicon that looks like a seperator we are good to go…except when we need more than one seperator. We cannot simply bookmark the page again but with the help of the Chrome Bookmark Manager (Option-Command-B on OS X) we can duplicate the bookmark. Simply right-click the seperator bookmark, <code>copy</code> and <code>paste</code> it as much as needed and you are finally good to go.</p>
<p><img class="center" src="http://kmees.github.com/images/posts/bookmark_bar_sep.png" title="Seperators !" ></p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2013/01/03/hack-a-bookmark-bar-seperator-for-chrome/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[HTML Presentations with Octopress and deck.js - Part II]]></title>
<link href="http://kmees.github.com/blog/2012/07/16/html-presentations-with-octopress-and-deck-dot-js-part-ii/"/>
<updated>2012-07-16T14:02:00+02:00</updated>
<id>http://kmees.github.com/blog/2012/07/16/html-presentations-with-octopress-and-deck-dot-js-part-ii</id>
<content type="html"><![CDATA[<p>In my <a href="http://kmees.github.com/blog/2012/07/07/html-presentations-with-octopress-and-deck-dot-js/">last post</a> I demonstrated how to create HTML presentations with <a href="http://http://imakewebthings.com/deck.js/">deck.js</a>
and hosting them inside your Octopress blog. While the <em>‘client-side’</em> is basically finished, the
<em>‘backend’</em> still needs some work because</p>
<ul>
<li>we can’t use markdown to write the slides</li>
<li>we must create a new slidedeck by hand</li>
</ul>
<p>The first problem can be solved by creating a custom <code>Liquid::Block</code> for slides and the second
problem can be solved by creating a small rake task that basically works the same as the <code>new_post</code>
task.</p>
<!-- more -->
<h2>A Liquid::Block for Slides</h2>
<p>Currently, when writing slides, we have to use HTML because Markdown inside HTML block tags like
<code><div></div></code> will be ignored by the Markdown processor. To fix this problem we will create a custom
<code>Liquid::Block</code> that wraps its content inside a slide div. With the help of the <code>Liquid::Block</code> we
can write a slide like this:</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='plain'><span class='line'>{% slide first %}
</span><span class='line'> ## Title
</span><span class='line'> content
</span><span class='line'>{% endslide $}</span></code></pre></td></tr></table></div></figure>
<p>This will then compile to the following HTML:</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><div</span> <span class="na">class=</span><span class="s">'slide'</span> <span class="na">id=</span><span class="s">'first'</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><h2></span>Title<span class="nt"></h2></span>
</span><span class='line'> content
</span><span class='line'><span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure>
<h3>Implementation</h3>
<p>Implementing the <code>Liquid::Block</code> is actually quite easy. First, we create a file <code>slide.rb</code> in <code>./plugins</code>
with the following content:</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">module</span> <span class="nn">Jekyll</span>
</span><span class='line'> <span class="k">class</span> <span class="nc">Slide</span> <span class="o"><</span> <span class="no">Liquid</span><span class="o">::</span><span class="no">Block</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="no">Liquid</span><span class="o">::</span><span class="no">Template</span><span class="o">.</span><span class="n">register_tag</span><span class="p">(</span><span class="s1">'slide'</span><span class="p">,</span> <span class="no">Jekyll</span><span class="o">::</span><span class="no">Slide</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>
<p>This creates a class for our custom <code>Liquid::Block</code> and registers it as a tag in the Liquid engine. This is enough to use
the tag but nothing will be generated yet. Next we will override the <code>initialize</code> method and parse the id of the slide.</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Slide</span> <span class="o"><</span> <span class="no">Liquid</span><span class="o">::</span><span class="no">Block</span>
</span><span class='line'> <span class="no">SlideId</span> <span class="o">=</span> <span class="sr">/(\w+)/</span>
</span><span class='line'>
</span><span class='line'> <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">tag_name</span><span class="p">,</span> <span class="n">markup</span><span class="p">,</span> <span class="n">tokens</span><span class="p">)</span>
</span><span class='line'> <span class="k">super</span>
</span><span class='line'> <span class="vi">@id</span> <span class="o">=</span> <span class="kp">nil</span>
</span><span class='line'> <span class="k">if</span> <span class="n">markup</span><span class="o">.</span><span class="n">strip</span> <span class="o">=~</span> <span class="no">SlideId</span>
</span><span class='line'> <span class="vi">@id</span> <span class="o">=</span> <span class="vg">$1</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Since we only have to parse one argument, the id, this is fairly simple. The <code>markup</code> variable contains everything that comes
after <code>slide</code> in the opening brackets, i.e. <code><div class='slide' id='markup'></div></code>. The regex we use to parse the id matches the
first word and ignores everything thereafter.</p>
<p>The next step is to override the <code>render</code> method that converts everything inside our slide block
from Markdown to HTML and wraps it with a slide div.</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="nb">require</span> <span class="s1">'rdiscount'</span>
</span><span class='line'>
</span><span class='line'><span class="k">module</span> <span class="nn">Jekyll</span>
</span><span class='line'> <span class="k">class</span> <span class="nc">Slide</span> <span class="o"><</span> <span class="no">Liquid</span><span class="o">::</span><span class="no">Block</span>
</span><span class='line'> <span class="c1"># ...</span>
</span><span class='line'> <span class="k">def</span> <span class="nf">render</span><span class="p">(</span><span class="n">context</span><span class="p">)</span>
</span><span class='line'> <span class="n">id_tag</span> <span class="o">=</span> <span class="s2">" id='</span><span class="si">#{</span><span class="vi">@id</span><span class="si">}</span><span class="s2">'"</span> <span class="k">unless</span> <span class="vi">@id</span><span class="o">.</span><span class="n">nil?</span>
</span><span class='line'> <span class="n">content</span> <span class="o">=</span> <span class="no">RDiscount</span><span class="o">.</span><span class="n">new</span><span class="p">(</span><span class="k">super</span><span class="o">.</span><span class="n">strip</span><span class="p">,</span> <span class="ss">:smart</span><span class="p">)</span><span class="o">.</span><span class="n">to_html</span><span class="o">.</span><span class="n">chop</span>
</span><span class='line'> <span class="s2">"<div class='slide'</span><span class="si">#{</span><span class="n">id_tag</span><span class="si">}</span><span class="s2">></span><span class="si">#{</span><span class="n">content</span><span class="si">}</span><span class="s2"></div>"</span><span class="o">.</span><span class="n">strip</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>The only interesting part here is the usage of <code>super</code>. We call <code>super</code> here to get the content of
our block tag and run it through <em>RDiscount</em> to convert it to HTML.</p>
<p>And that is all we need for our custom slide block !</p>
<h2>A Rake task for Slides</h2>
<p>The will be even easier than creating the <code>Liquid::Block</code>. First we define two new variables in the
<code>Rakefile</code> which are pretty self-explanatory</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">slides_dir</span> <span class="o">=</span> <span class="s2">"slides"</span> <span class="c1"># directory for slides`</span>
</span><span class='line'><span class="n">new_slides_ext</span> <span class="o">=</span> <span class="s2">"markdown"</span> <span class="c1"># default new slides file extension when using the new_slides task</span>
</span></code></pre></td></tr></table></div></figure>
<p>For the task itself we copy the existing <code>:new_post</code> task and replace the <code>posts_dir</code> with
<code>slides_dir</code>, <code>new_post_ext</code> with <code>new_slides_ext</code> and adjust all the messages. We will also add all
the deck.js options to the <em>YAML Front Matter</em> and change the layout from <code>post</code> to <code>slides</code>. The
complete slides task looks like this:</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># usage rake new_slides[my-cool-slides] or rake new_post['my cool slides'] or rake new_post (defaults to "new-slides")</span>
</span><span class='line'><span class="n">desc</span> <span class="s2">"Create new slides in </span><span class="si">#{</span><span class="n">source_dir</span><span class="si">}</span><span class="s2">/</span><span class="si">#{</span><span class="n">slides_dir</span><span class="si">}</span><span class="s2">"</span>
</span><span class='line'><span class="n">task</span> <span class="ss">:new_slides</span><span class="p">,</span> <span class="ss">:title</span> <span class="k">do</span> <span class="o">|</span><span class="n">t</span><span class="p">,</span> <span class="n">args</span><span class="o">|</span>
</span><span class='line'> <span class="k">if</span> <span class="n">args</span><span class="o">.</span><span class="n">title</span>
</span><span class='line'> <span class="n">title</span> <span class="o">=</span> <span class="n">args</span><span class="o">.</span><span class="n">title</span>
</span><span class='line'> <span class="k">else</span>
</span><span class='line'> <span class="n">title</span> <span class="o">=</span> <span class="n">get_stdin</span><span class="p">(</span><span class="s2">"Enter a title for your slides: "</span><span class="p">)</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">raise</span> <span class="s2">"### You haven't set anything up yet. First run `rake install` to set up an Octopress theme."</span> <span class="k">unless</span> <span class="no">File</span><span class="o">.</span><span class="n">directory?</span><span class="p">(</span><span class="n">source_dir</span><span class="p">)</span>
</span><span class='line'> <span class="n">mkdir_p</span> <span class="s2">"</span><span class="si">#{</span><span class="n">source_dir</span><span class="si">}</span><span class="s2">/</span><span class="si">#{</span><span class="n">slides_dir</span><span class="si">}</span><span class="s2">"</span>
</span><span class='line'> <span class="n">filename</span> <span class="o">=</span> <span class="s2">"</span><span class="si">#{</span><span class="n">source_dir</span><span class="si">}</span><span class="s2">/</span><span class="si">#{</span><span class="n">slides_dir</span><span class="si">}</span><span class="s2">/</span><span class="si">#{</span><span class="n">title</span><span class="o">.</span><span class="n">to_url</span><span class="si">}</span><span class="s2">.</span><span class="si">#{</span><span class="n">new_post_ext</span><span class="si">}</span><span class="s2">"</span>
</span><span class='line'> <span class="k">if</span> <span class="no">File</span><span class="o">.</span><span class="n">exist?</span><span class="p">(</span><span class="n">filename</span><span class="p">)</span>
</span><span class='line'> <span class="nb">abort</span><span class="p">(</span><span class="s2">"rake aborted!"</span><span class="p">)</span> <span class="k">if</span> <span class="n">ask</span><span class="p">(</span><span class="s2">"</span><span class="si">#{</span><span class="n">filename</span><span class="si">}</span><span class="s2"> already exists. Do you want to overwrite?"</span><span class="p">,</span> <span class="o">[</span><span class="s1">'y'</span><span class="p">,</span> <span class="s1">'n'</span><span class="o">]</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'n'</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="nb">puts</span> <span class="s2">"Creating new slides: </span><span class="si">#{</span><span class="n">filename</span><span class="si">}</span><span class="s2">"</span>
</span><span class='line'> <span class="nb">open</span><span class="p">(</span><span class="n">filename</span><span class="p">,</span> <span class="s1">'w'</span><span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">slides</span><span class="o">|</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"---"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"layout: slides"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"title: </span><span class="se">\"</span><span class="si">#{</span><span class="n">title</span><span class="o">.</span><span class="n">gsub</span><span class="p">(</span><span class="sr">/&/</span><span class="p">,</span><span class="s1">'&amp;'</span><span class="p">)</span><span class="si">}</span><span class="se">\"</span><span class="s2">"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"date: </span><span class="si">#{</span><span class="no">Time</span><span class="o">.</span><span class="n">now</span><span class="o">.</span><span class="n">strftime</span><span class="p">(</span><span class="s1">'%Y-%m-%d %H:%M'</span><span class="p">)</span><span class="si">}</span><span class="s2">"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"sidebar: false"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_theme: web-2.0"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_transition: fade"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_navigation: true"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_status: true"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_goto: true"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_hash: true"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_menu: true"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"deck_scale: true"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"---"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"&#x7b;&#x25; slide first %}"</span>
</span><span class='line'> <span class="n">slides</span><span class="o">.</span><span class="n">puts</span> <span class="s2">"&#x7b;&#x25; endslide %}"</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/07/16/html-presentations-with-octopress-and-deck-dot-js-part-ii/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[HTML Presentations with Octopress and deck.js]]></title>
<link href="http://kmees.github.com/blog/2012/07/07/html-presentations-with-octopress-and-deck-dot-js/"/>
<updated>2012-07-07T01:39:00+02:00</updated>
<id>http://kmees.github.com/blog/2012/07/07/html-presentations-with-octopress-and-deck-dot-js</id>
<content type="html"><![CDATA[<p>So, I’m about the give a short talk about <a href="http://www.octopress.org">Octopress</a> at the next RUGSaar
(Ruby Usergroup Saar) meeting. Since I will probably need at least a bunch of slides I thought about
the way of presenting them. PowerPoint (or similar) would be the natural choice but it isn’t very
hacker…ish and since Octopress is “a blogging framework for hackers” we surely can do better.</p>
<p>I’ve recently read about <a href="http://www.sitepoint.com/5-free-html5-presentation-systems/#fbid=1hmB1c0Eihu">various HTML5 based web presentation frameworks</a>
and wanted to try them out but didn’t have an opportunity ‘til now. I’ll go with <a href="http://http://imakewebthings.com/deck.js/">deck.js</a>
for no specific reason other than that it seems easy to show the slides inside an existing webpage
or blog.
So I’ll be giving a talk about Octopress with slides hosted inside my own Octopress blog !</p>
<!-- more -->
<p><em>I have linked most source files instead of embedding the source directly because the liquid tags in
html pages won’t render correctly</em></p>
<h2>The slides layout</h2>
<p>Okay, where to start? From inspecting the <a href="http://imakewebthings.com/deck.js/introduction/">demo presentation</a> and having a look at the <a href="https://github.com/imakewebthings/deck.js">source</a>,
we need a custom layout for our slides that takes care of the following tasks.</p>
<ul>
<li>Loading all the css files required by deck.js in the head.</li>
<li>Loading all the js files required by deck.js in the body and initializing the slidedeck.
Extensions should be activatable per slidedeck.</li>
<li>Loading a theme and transition effect defined by each slidedeck</li>
</ul>
<p>Since we want to host the slides inside our blog, the slides layout should have the default
octopress layout as its parent, similair to the layout for posts and pages.</p>
<h3>Loading the CSS</h3>
<p>A quick peek at the deck.js source shows that the author kindly included the SASS files from which
the CSS was created. This means that we can easily add those and compile them into our <code>screen.css</code>
instead of loading them all separately. We will start by creating a <code>sass/custom/deck.js/</code> folder
and copying all the <code>deck.*.sccs</code> files into it. We should also rename them to <code>_deck.*.scss</code> to
match the SASS naming convention for partial files. Then we’ll create <code>sass/custom/deck.js.scss</code>
that imports all the files from the deck.js subfolder and finally import that file at the top of
the <code>_styles.scss</code>.</p>
<figure class='code'><figcaption><span>_deck.js.scss</span><a href='http://kmees.github.com/downloads/code/../../../sass/custom/_deck.js.scss' title='Download code'> download</a></figcaption><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='scss'><span class='line'><span class="k">@import</span> <span class="s2">"deck.js/deck.core.scss"</span><span class="p">;</span>
</span><span class='line'><span class="k">@import</span> <span class="s2">"deck.js/deck.goto.scss"</span><span class="p">;</span>
</span><span class='line'><span class="k">@import</span> <span class="s2">"deck.js/deck.hash.scss"</span><span class="p">;</span>
</span><span class='line'><span class="k">@import</span> <span class="s2">"deck.js/deck.menu.scss"</span><span class="p">;</span>
</span><span class='line'><span class="k">@import</span> <span class="s2">"deck.js/deck.navigation.scss"</span><span class="p">;</span>
</span><span class='line'><span class="k">@import</span> <span class="s2">"deck.js/deck.scale.scss"</span><span class="p">;</span>
</span><span class='line'><span class="k">@import</span> <span class="s2">"deck.js/deck.status.scss"</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>
<h3>Loading the JS</h3>
<p>This part will be rather easy. We will use the <a href="https://github.com/kmees/kmees.github.com/tree/source/source/_layouts/page.html">source/_layouts/page.html</a> as a template for our
slides layout. We can basically keep it as is and only change the page secific stuff like
<code>custom/page-meta.html</code> with <code>custom/slides-meta.html</code>. I also changed the <code><header/></code> tag to a
title slide that shows the title of the slidedeck and some other minor
stuff. Anyway, the important part is to add the deck.js stuff directly below the <code>content</code> Liquid
tag and add a <code>.deck-container</code> div as a subelement of <code><article/></code>.
To support deactivation of specific extensions for each slidedeck, we will wrap the markup for each
extension with a “ Liquid block. The properties of the page
can be set in the <em>YAML Front Matter</em> which I’ll cover in a minute. Here’s the source of the
finished <a href="https://github.com/kmees/kmees.github.com/tree/source/source/_layouts/slides.html">slides
layout</a>.</p>
<h3>Support for Themes and Transition Effects</h3>
<p>We will also use page properties for loading a specific theme on transition effect. The markup will
reside in <a href="https://github.com/kmees/kmees.github.com/tree/source/source/_inlucudes/custom/head.html">source/_includes/custom/head.html</a> and is quite simple. It just loads the css file for
the theme and transition effect with the name provided by <code>page.deck_theme</code> and
<code>page.deck_transition</code> respectively.</p>
<h2>Creating the Slides</h2>
<p>With the layout in place, we can now actually start to work on the slides. We’ll create a <code>source/slides</code> folder and
add <code>demo.html</code> inside. To keep it simple, we’ll add just two slides.</p>
<figure class='code'><figcaption><span>demo.html</span><a href='http://kmees.github.com/downloads/code/../../slides/demo.html' title='Download code'> download</a></figcaption><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>---
</span><span class='line'>layout: slides
</span><span class='line'>title: "Demo Slides"
</span><span class='line'>sidebar: false
</span><span class='line'>deck_scale: false
</span><span class='line'>deck_theme: web-2.0
</span><span class='line'>deck_transition: fade
</span><span class='line'>---
</span><span class='line'><span class="nt"><div</span> <span class="na">class=</span><span class="s">"slide"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><h2></span>Kitten approved<span class="nt"></h2></span>
</span><span class='line'> <span class="nt"><img</span> <span class="na">src=</span><span class="s">'http://placekitten.com/600/300'</span> <span class="na">title=</span><span class="s">'kittens'</span><span class="nt">></span>
</span><span class='line'><span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure>
<p>Note the <code>layout: slidedeck</code> in the <em>YAML Front Matter</em>. This tells octoblog to load our custom
slidedeck layout. And that’s basically it. You can see the result <a href="http://kmees.github.com/slides/demo.html">here</a>.</p>
<h2>ToDos</h2>
<p>Although everything seems to work, there is still work to do. The most important thing is, that we
can’t use <em>Markdown</em> the create write out slides because Markdown written inside HTML block tags
will be ignored by the Markdown processor. This is not a bug, but working as intended. It would
also be nice to have a <em>Rake task</em> for generating the slidedeck stub, similar to the task that
generates a post stub. But this will all be part of my next post.</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/07/07/html-presentations-with-octopress-and-deck-dot-js/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Bypassing the Google Feed API Cache]]></title>
<link href="http://kmees.github.com/blog/2012/03/29/bypassing-the-google-feed-api-cache/"/>
<updated>2012-03-29T23:22:00+02:00</updated>
<id>http://kmees.github.com/blog/2012/03/29/bypassing-the-google-feed-api-cache</id>
<content type="html"><![CDATA[<p><img class="center" src="http://kmees.github.com/images/posts/google_feed_api_meme.png"></p>
<p>I noticed recently that the download count of the packages in my <a href="https://github.com/kmees/Octopress-NuGet-Aside">NuGet Aside</a> didn’t update properly. As I <a href="http://kmees.github.com/blog/2012/02/29/nuget-aside-for-octopress/">mentioned earlier</a>, I use the <a href="https://developers.google.com/feed/">Google Feed API</a> to get the data from the NuGet Gallery feed of an author. This indicrection is needed because the NuGet Gallery API doesn’t support the <strong>jsonp</strong> response type (yet). Anyway, the problem is that Google caches the feeds heavily and only adds new entries but doesn’t update existing ones. This means that the packages keep their download count of the first request.</p>
<!--more-->
<p>After some experiments, I concluded that the caching behavior is solely based on the feed URL and modifying the URL in a way that it ‘looks’ different but still returns the same data circumvents the cache. I created a salt function that returns a large number based on the current time which I just append to the URL as an additional query parameter (that gets ignored by the API).</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">salt</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">now</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">saltDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">now</span><span class="p">.</span><span class="nx">getUTCFullYear</span><span class="p">(),</span> <span class="nx">now</span><span class="p">.</span><span class="nx">getUTCMonth</span><span class="p">(),</span> <span class="nx">now</span><span class="p">.</span><span class="nx">getUTCDate</span><span class="p">());</span>
</span><span class='line'> <span class="k">return</span> <span class="nx">saltDate</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>As you may notice, the function returns the same number throughout the whole day. This way, the feed can still be cached but the data gets updated every day which is a good compromise !</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/29/bypassing-the-google-feed-api-cache/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[unicodetiles.rb]]></title>
<link href="http://kmees.github.com/blog/2012/03/26/unicodetiles-dot-rb/"/>
<updated>2012-03-26T10:29:00+02:00</updated>
<id>http://kmees.github.com/blog/2012/03/26/unicodetiles-dot-rb</id>
<content type="html"><![CDATA[<p>After my miserable fail at the 7DRL 2012 I had the urge to get at least something get at least
something useful done. So I decided to port <a href="http://tapio.github.com/unicodetiles.js/">unicodetiles.js</a>, a lightweight, character based tile engine for JavaScript to Ruby. Luckily, tapio, the author of unicodetiles.js, made it easy for me to find a name for the ruby port and it shall henceforth be called <a href="./projects/unicodetiles.html">unicodetiles.rb</a>.</p>
<p>Porting the JavaScript code to Ruby went quite smoothly and I tried to ‘rubify’ the code wherever possible. I decided to implement the renderer on top of the gosu gem because it gave me all the tools I needed, especially the Gosu::Font class came in quite handy. The port is feature equivalent to the JavaScript version and the examples are exactly the same. I plan on adding some more features and use it for my next (7 Day?) Roguelike project and I will also release a gem in the next few days when everything is implemented and tested.</p>
<p>Unicodetiles.rb also works quite well as a replacement for ncurses, a popular framework for writing
fancy console applications used by a lot of roguelikes. The downside to ncurses is, that it is quite
hard (or even impossible) to get running under Windows which really hampers the popularity of some
roguelikes.</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/26/unicodetiles-dot-rb/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[CMContrib 1.0.1 Released]]></title>
<link href="http://kmees.github.com/blog/2012/03/24/cmcontrib-1-dot-0-1-released/"/>
<updated>2012-03-24T19:30:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/03/24/cmcontrib-1-dot-0-1-released</id>
<content type="html"><![CDATA[<p>I just released a new version of <a href="./projects/cmcontrib.html" title="">CMContrib</a> on
<a href="http://nuget.org/packages/Caliburn.Micro-Contrib">NuGet</a>. The new version just has some minor fixes
but the CMContrib assembly is now <em>strongly named</em> !</p>
<p>Grab it while it’s hot !</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/24/cmcontrib-1-dot-0-1-released/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[7DRL 2012 - It's over !]]></title>
<link href="http://kmees.github.com/blog/2012/03/18/7drl-2012-its-over/"/>
<updated>2012-03-18T14:00:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/03/18/7drl-2012-its-over</id>
<content type="html"><![CDATA[<p>It’s Sunday, March 18th and exactly 7 days ago I started my 7DRL Challenge. Sadly, I wasn’t able to
finish my roguelike in time but it was fun nevertheless. If I had to put a number on the
completeness of the game, I would say it’s about 33% finished, but not really playable since I spent (wasted?) too much on time on the implementation of the Mech class and the UI instead of adding content/combat. In retrospect, I see a lot of room for improvements and I will write them down here such that I won’t do the same mistakes twice in next years 7DRL !</p>
<!--more-->
<h2>Lessons Learned</h2>
<h3>#1 - Have a plan</h3>
<p>The biggest mistake I did was not having a plan ready for the challenge. I had a very rough idea
about what I wanted to do but my ‘design document’ was basically non-existent and I followed a
‘design-as-you-code’ philosophy. This led to a lot of wasted time because for each design iteration
I scrapped parts of the code and rewrote them. The fact that I also wrote specs which I had to fix
after scrapping code made it even worse. The specs were in general quite useful though because I
didn’t encounter any weird bugs and was quite confident in my code base over the course of the
challenge</p>
<h3>#2 - Stick to your plan</h3>
<p>When you have a plan, you should really stick to your plan because there is probably not enough time
for implementing that cool idea that just came to your mind. So instead of immediately implementing
it, you should write it down and <em>maybe</em> implement at the end <em>if</em> there is some time left. I
basically spent all of day 5 on implementing a mech ascii art in the UI and coloring it based on the
amount of damage it has taken. Although its looks cool, a simple bar or numeric value would have done
the same job and would have cost me only a fraction of the time.</p>
<h3>#3 - Go offline</h3>
<p>Whenever I opened my browser to have a look at the Ruby/Gosu docs or searching for a specific
problem on Stackoverflow I just couldn’t resist to have a quick glance at my mails, or Facebook, or
7drl.org, or …, you know the story. This was a <em>huge</em> time sink. My most productive three hours
were at starbucks where I had no working internet and did just focus on <a href="http://programming-motherfucker.com/">Programming, Motherfucker !</a> This also leads me to lesson #4</p>
<h3>#4 - Lock your room</h3>
<p>I don’t know how often I explained my girlfriend that whenever she interrupts my flow by asking me
‘where I put here whatever’ or wanting me to ‘just open that tin’ I totally lose my train of thought
and need at least 15-30 minutes to get back to the state I was in. This usually also leads to nasty
bugs because you just forgot something that you wanted (needed) to do. I really think
non-programmers just can’t understand that stuff</p>
<h3>#5 - Know your frameworks</h3>
<p>I lost about half a day by getting familiar with Gosu and would have lost even more if I would have
used Chingu or the Ruby wrapper for libtcod. But reinventing the wheel and implementing all by
yourself just doesn’t work either. So, getting to know the frameworks you want to use beforehand is
crucial.</p>
<h3>#6 - Don’t drink and code</h3>
<p>Yeah…didn’t work :)</p>
<h2>7 days of coding and all I’ve got are those lousy screenshots</h2>
<p><img class="center" src="http://kmees.github.com/images/posts/mechrl_1.png" width="640" height="480">
<img class="center" src="http://kmees.github.com/images/posts/mechrl_2.png" width="640" height="480"></p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/18/7drl-2012-its-over/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[7DRL 2012 - Day 1&2: Recap]]></title>
<link href="http://kmees.github.com/blog/2012/03/13/7drl-2012-day-1-and-2-recap/"/>
<updated>2012-03-13T13:01:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/03/13/7drl-2012-day-1-and-2-recap</id>
<content type="html"><![CDATA[<h2>Day 1</h2>
<p>I started the challenge on Sunday at around 2 pm. My Goal for the day was to get the player on the
screen and implement the mechlike movement. I had something running quite fast, after about an hour,
with basically two classes (the window and the mech). I then decided to refactor the stuff I had
into an actual architecture by decoupling the view logic from the game logic etc. That didn’t really
work that well in the beginning because I was thinking too much in the .NET way which cost me a lot
of time. Another thing that cost me quite a lot of time was writing the specs in RSpec. I haven’t
written any specs but only NUnit tests lately which ended in awful readable specs at first :)</p>
<!-- more -->
<p>Anyway, I spent about ~8 hours working on my 7DRL the first day but it didn’t feel very productive.
I wasn’t really able to get “In The Zone” during that day because looking up RSpec syntax and Gosu
API on the web distracted me more it should. Opening the browser when you want to be productive just
doesn’t end well…</p>
<h2>Day 2</h2>
<p>Since I had to work I wasn’t able to start before 6 pm that day. I wanted to finish most of the mech
class that day so I started writing specs for the mech. Writing specs went better than the day
before and I felt quite good. After dinner I coded for another 2 hours before becoming to tired to
move on.</p>
<p>All in all, I did get at least something done in the 4 hours I was able to work on the game but I’m
still way~~~ behind my non-existent schedule (that might be one of the main problems :)).</p>
<p>I hope to get something presentable out of Day 3 to upload some (interesting) screenshots but I’m
rather skeptical</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/13/7drl-2012-day-1-and-2-recap/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[7DRL 2012 - Day 0: Introducing MechRL]]></title>
<link href="http://kmees.github.com/blog/2012/03/10/7drl-2012-day-0-introducing-mechrl/"/>
<updated>2012-03-10T22:37:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/03/10/7drl-2012-day-0-introducing-mechrl</id>
<content type="html"><![CDATA[<p>Although I didn’t have that much time lately, I came up with an idea that is worth prototyping in a 7DRL. I was a huge fan of the MechWarrior franchise back in the late 90s and early 2000s. After watching the <a href="http://www.youtube.com/watch?v=udEAEARD-Fo">Hawken Gameplay Video</a> some time ago, I got a bit nostalgic and thought about doing a <em>MechWarriorlike Roguelike</em>. Through the lack of a better name (naming things is hard!), I’ll simply call it MechRL.</p>
<!--more-->
<h2>Mechanics</h2>
<p>The movement of the mechs in MechWarrior was similar to that of a car in racing game. You had to accelerate/decelerate your mech and you weren’t able to change directions immediately but you rather had to turn. The movement paramters like v_max and inertia where also influenced by the weight of the mech.</p>
<p>Another interesting mechanic was the combat which was closely related to movement. You were only able to shoot in the direction your mech was facing. Some mechs were able to turn their torso seperately from their legs which allowed you to perform some neat run-by attacks.</p>
<p>Those two mechanics embody the core mechanics for my roguelike. It will be quite interesesting to
see how these mechanics work in a turn-based environment. In case it won’t work well, I might try a
hybrid approach instead of a turn-based one. The actual combat won’t also be skill shot based like in
MechWarrior but something like VATS in Fallout 3.</p>
<h2>Dungeon Design</h2>
<p>The usual dungeon crawler’ish design for a roguelike won’t really work for MechRL. Instead, I opt
for a non-linear mission design which drives a very simple story. I have about 7-10 missions planned
currently. Most of the missions will all take place on the same map whose layout will be randomly
generated. There will also be some kind of outpost which serves as the mission hub and a place to customize/upgrade your mech.</p>
<h2>Character Progress</h2>
<p>That brings me to the progression of your mech throughout the game. In the beginning, you will choose one of
~three starter mechs that differ in their playstyle (fast and agil, slow and heavy
armed,…). You will then be able to update the weapons and armor with stuff you find or completely
replace parts of the mech. There won’t be alot of <strike>character</strike>mech stats but each part
of your mech will have its own durability.</p>
<h2>User Interface</h2>
<p>As for the UI, although the game won’t run in a console, I will likely stick to ASCII art most of
the time. I’m not that at graphic design and it simply costs to much time that I won’t have. I’ll
also focus on keyboard input first and only add mouse support if I have some time left.</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/10/7drl-2012-day-0-introducing-mechrl/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[7DRL 2012 - Day 0: Weapons of Choice]]></title>
<link href="http://kmees.github.com/blog/2012/03/10/7drl-2012-choose-your-weapons/"/>
<updated>2012-03-10T13:37:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/03/10/7drl-2012-choose-your-weapons</id>
<content type="html"><![CDATA[<p>Alright, I’m gonna start my 7DRL Challenge tomorrow around noon. I wanted to start today, but I
spent most of day setting up my system and testing the libraries I want to use. My development
environment will be:</p>
<ul>
<li>OS: Virtualized Ubuntu 11.10</li>
<li>Platform: Ruby
<ul>
<li>Gosu (Game Framework)</li>
<li>Rspec (BDD Framework)</li>
<li>Autotest</li>
</ul>
</li>
<li>VCS: Git</li>
<li>Editor: GVim</li>
</ul>
<p>I’ll try to develop the game using BDD and a test-first approach albeit it might slow me down in the beginning. But I hope that in the end it will pay off by having less bugs and broken features. Anyway, the plan is to spend the last day on polishing stuff instead of debugging.</p>
<p>The project will be hosted on <a href="https://github.com/kmees/MechRL">Github</a> and I was able to setup
XSplit, so I’ll stream while coding. Will be interesting to see if I get at least one viewer :). My <a href="http://www.twitch.tv/">twich.tv</a> channel can be found <a href="http://www.twitch.tv/kmees">here</a>.</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/10/7drl-2012-choose-your-weapons/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[7DRL 2012 - Challenge Accepted]]></title>
<link href="http://kmees.github.com/blog/2012/03/07/7drl-2012-challenge-accepted/"/>
<updated>2012-03-07T17:11:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/03/07/7drl-2012-challenge-accepted</id>
<content type="html"><![CDATA[<p><img class="center" src="http://kmees.github.com/images/posts/challenge_accepted.png"></p>
<p>From March 10th to March 18th, this years <a href="http://roguebasin.roguelikedevelopment.org/index.php/Seven_Day_Roguelike_Challenge">Seven Day Roguelike Challenge</a> takes place. The goal of the challenge is to create a roguelike game in, well, seven days. I actually tried to participate in last years challenge, but due to a car accident about a week before the challenge, I wasn’t really able to focus on it. Hopefully, this years challenge runs smoothly for me such that I can get a game finished.</p>
<p>I will try to blog about my progress on each of the seven days if I can manage to find some spare
time. I’m also thinking about streaming/recording the development process but I don’t know if I can
get everything set up in time. In any case, the project will of course be hosted on github !</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/03/07/7drl-2012-challenge-accepted/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[NuGet Aside for Octopress]]></title>
<link href="http://kmees.github.com/blog/2012/02/29/nuget-aside-for-octopress/"/>
<updated>2012-02-29T15:37:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/02/29/nuget-aside-for-octopress</id>
<content type="html"><![CDATA[<p>I just finished as aside for <a href="http://www.octopress.org">Octopress</a> that list the
Top N downloaded packages where you are an author. It also adds a link to your
NuGet gallery profile if you have one. The style is basically the same as the style of the github aside.</p>
<p>Since there is no official way to publish 3rd party add-ons for Octopress yet, I
created a <a href="https://github.com/kmees/Octopress-NuGet-Aside">github repository</a> with the required files and setup instructions in the <a href="https://github.com/kmees/Octopress-NuGet-Aside/blob/master/README.md">ReadMe</a>.</p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/02/29/nuget-aside-for-octopress/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[CMContrib WPF Demo goin' Metro]]></title>
<link href="http://kmees.github.com/blog/2012/02/26/cmcontrib-wpf-demo-goin-metro/"/>
<updated>2012-02-26T18:45:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/02/26/cmcontrib-wpf-demo-goin-metro</id>
<content type="html"><![CDATA[<p>Inspired by the <a href="https://github.com/Code52/DownmarkerWPF">DownmarkerWPF</a>, I
decided to change the Style of the CMContrib WPF Demo to Metro. I used the same
Metro framework, namely <a href="https://github.com/MahApps/MahApps.Metro">MahApps.Metro</a> as DownmarkerWPF which is really cool. The only control that I wasn’t able to ‘metroize’ was the <em>WebBrowser</em> control which displays the code. Its scrollbars still have the old Windows look. Another small letdown is that there is no free <em>Pivot</em> control available for WPF but it was quite easy to create a simplified version of it which was sufficient for my needs.</p>
<p>Anyway, I’m quite happy with the result especially since this is my first Metro app. Any feedback is appreciated !</p>
<!--more-->
<h2>Metro Style</h2>
<p><img class="" src="http://kmees.github.com/images/posts/wpfdemo_metro.png" width="640" height="480"></p>
<h2>Old Style</h2>
<p><img class="" src="http://kmees.github.com/images/posts/wpfdemo_old.png" width="640" height="480"></p>
<p><a rel="bookmark" href="http://kmees.github.com/blog/2012/02/26/cmcontrib-wpf-demo-goin-metro/">⚓ Permalink</a></p>]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Context-Based Views for Dialogs]]></title>
<link href="http://kmees.github.com/blog/2012/02/24/context-based-views-for-dialogs/"/>
<updated>2012-02-24T11:32:00+01:00</updated>
<id>http://kmees.github.com/blog/2012/02/24/context-based-views-for-dialogs</id>
<content type="html"><![CDATA[<h2>Retrospect</h2>
<p>In my <a href="http://kmees.github.com/projects/cmcontrib.html">CMContrib Project</a> I use a MVVM approach for
showing dialogs to the user. The model for the dialog has a <em>dialog type</em>
(Question, Error,…), a <em>subject</em> (or title), a <em>message</em> and a list of
possible <em>responses</em> the user can choose from. The default response in CMContrib
is an Answer enum with values for <em>Ok, Cancel, Yes</em> and all the other standard
answers but you can also use a complex type as a response.</p>
<p>Here’s an example of how to ask the user a question and cancel the coroutine
when the user responses with <em>No</em>.</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='csharp'><span class='line'><span class="k">public</span> <span class="k">override</span> <span class="n">IEnumerable</span><span class="p"><</span><span class="n">IResult</span><span class="p">></span> <span class="n">AskAQuestion</span><span class="p">()</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'> <span class="kt">var</span> <span class="n">question</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Question</span><span class="p">(</span><span class="s">"The Subject"</span><span class="p">,</span>
</span><span class='line'> <span class="s">"The Message"</span><span class="p">,</span>
</span><span class='line'> <span class="n">Answer</span><span class="p">.</span><span class="n">Yes</span><span class="p">,</span>
</span><span class='line'> <span class="n">Answer</span><span class="p">.</span><span class="n">No</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="k">yield</span> <span class="k">return</span> <span class="n">question</span><span class="p">.</span><span class="n">AsResult</span><span class="p">()</span>
</span><span class='line'> <span class="p">.</span><span class="n">CancelOnResponse</span><span class="p">(</span><span class="n">Answer</span><span class="p">.</span><span class="n">No</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// ...</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<!--more-->
<h2>One View to show them all (again)</h2>
<p>The call <code>.AsResult()</code> on a dialog wraps it in a <code>DialogViewModel</code> which is then
passed to Caliburn.Micro’s <code>IWindowManager</code> and shown as a modular dialog. The problem
with that approach is, that the same default view, which is <code>Caliburn.Micro.Contrib.Dialogs.DialogView</code> unless you added a namespace alias, is resolved for all types of dialogs. Now, if you need a special view for, let’s say errors only, you are in trouble.</p>
<p>But fear not, because Caliburn already has a solution to that problem, namely <em>view contexts</em>, which are explained <a href="http://devlicio.us/blogs/rob_eisenberg/archive/2010/11/18/caliburn-micro-soup-to-nuts-part-6d-a-billy-hollis-hybrid-shell.aspx">here</a>. Since each dialog already has a <em>dialog type</em> we can use that as our view context. The change to show the context based view instead of the default view couldn’t be easier, it’s just one line in the <code>DialogResult</code></p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='csharp'><span class='line'><span class="k">public</span> <span class="n">IEnumerable</span><span class="p"><</span><span class="n">IResult</span><span class="p">></span> <span class="n">Execute</span><span class="p">()</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'> <span class="n">IDialogViewModel</span><span class="p"><</span><span class="n">TResponse</span><span class="p">></span> <span class="n">vm</span> <span class="p">=</span> <span class="n">_locateVM</span><span class="p">();</span>
</span><span class='line'> <span class="n">vm</span><span class="p">.</span><span class="n">Dialog</span> <span class="p">=</span> <span class="n">Dialog</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// ommitted unrelevant parts</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// show without context</span>
</span><span class='line'> <span class="c1">// Micro.Execute.OnUIThread(() => IoC.Get<IWindowManager>().ShowDialog(vm));</span>
</span><span class='line'> <span class="n">Micro</span><span class="p">.</span><span class="n">Execute</span><span class="p">.</span><span class="n">OnUIThread</span><span class="p">(()</span> <span class="p">=></span> <span class="n">IoC</span><span class="p">.</span><span class="n">Get</span><span class="p"><</span><span class="n">IWindowManager</span><span class="p">>().</span><span class="n">ShowDialog</span><span class="p">(</span><span class="n">vm</span><span class="p">,</span> <span class="n">Dialog</span><span class="p">.</span><span class="n">DialogType</span><span class="p">));</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>Now the default view for an <em>Error</em> is <code>Caliburn.Micro.Contrib.Dialogs.Error</code>.
Okay cool, but what happens if we want to show a <em>Question</em>? Well, we get an
error because there is looks for the view
<code>Caliburn.Micro.Contrib.Dialogs.Question</code> which doesn’t exist and which we don’t
want to create. Instead, we want to use the default <code>DialogView</code> as a fallback view.</p>
<h2>Changing the ViewLocator</h2>
<p>Since we want to change the way how views are located, the <code>ViewLocator</code> might
be a good class to look at. The function responsible for locating the view type for
a view model type is called <code>LocateTypeForModelType</code>. In a nutshell, this function takes the
type of the view model and the view context, transforms those into a list of
possible view type names and searches for a type in the assemblies that matches
one of the names. If none is found, <code>null</code> will be returned and Caliburn.Micro
shows the “Could not locate view for …” error view that you might have seen
before.</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
</pre></td><td class='code'><pre><code class='csharp'><span class='line'><span class="k">public</span> <span class="k">static</span> <span class="n">Func</span><span class="p"><</span><span class="n">Type</span><span class="p">,</span> <span class="n">DependencyObject</span><span class="p">,</span> <span class="kt">object</span><span class="p">,</span> <span class="n">Type</span><span class="p">></span> <span class="n">LocateTypeForModelType</span> <span class="p">=</span> <span class="p">(</span><span class="n">modelType</span><span class="p">,</span> <span class="n">displayLocation</span><span class="p">,</span> <span class="n">context</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span>
</span><span class='line'> <span class="kt">var</span> <span class="n">viewTypeName</span> <span class="p">=</span> <span class="n">modelType</span><span class="p">.</span><span class="n">FullName</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="n">Execute</span><span class="p">.</span><span class="n">InDesignMode</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="n">viewTypeName</span> <span class="p">=</span> <span class="n">ModifyModelTypeAtDesignTime</span><span class="p">(</span><span class="n">viewTypeName</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="n">viewTypeName</span> <span class="p">=</span> <span class="n">viewTypeName</span><span class="p">.</span><span class="n">Substring</span><span class="p">(</span>
</span><span class='line'> <span class="m">0</span><span class="p">,</span>
</span><span class='line'> <span class="n">viewTypeName</span><span class="p">.</span><span class="n">IndexOf</span><span class="p">(</span><span class="s">"`"</span><span class="p">)</span> <span class="p"><</span> <span class="m">0</span>
</span><span class='line'> <span class="p">?</span> <span class="n">viewTypeName</span><span class="p">.</span><span class="n">Length</span>
</span><span class='line'> <span class="p">:</span> <span class="n">viewTypeName</span><span class="p">.</span><span class="n">IndexOf</span><span class="p">(</span><span class="s">"`"</span><span class="p">)</span>
</span><span class='line'> <span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="kt">var</span> <span class="n">viewTypeList</span> <span class="p">=</span> <span class="n">TransformName</span><span class="p">(</span><span class="n">viewTypeName</span><span class="p">,</span> <span class="n">context</span><span class="p">);</span>
</span><span class='line'> <span class="kt">var</span> <span class="n">viewType</span> <span class="p">=</span> <span class="n">viewTypeList</span><span class="p">.</span><span class="n">Join</span><span class="p">(</span><span class="n">AssemblySource</span><span class="p">.</span><span class="n">Instance</span><span class="p">.</span><span class="n">SelectMany</span><span class="p">(</span><span class="n">a</span> <span class="p">=></span> <span class="n">a</span><span class="p">.</span><span class="n">GetExportedTypes</span><span class="p">()),</span> <span class="n">n</span> <span class="p">=></span> <span class="n">n</span><span class="p">,</span> <span class="n">t</span> <span class="p">=></span> <span class="n">t</span><span class="p">.</span><span class="n">FullName</span><span class="p">,</span> <span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="p">=></span> <span class="n">t</span><span class="p">).</span><span class="n">FirstOrDefault</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span><span class="p">(</span><span class="n">viewType</span> <span class="p">==</span> <span class="k">null</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="n">Log</span><span class="p">.</span><span class="n">Warn</span><span class="p">(</span><span class="s">"View not found. Searched: {0}."</span><span class="p">,</span> <span class="kt">string</span><span class="p">.</span><span class="n">Join</span><span class="p">(</span><span class="s">", "</span><span class="p">,</span> <span class="n">viewTypeList</span><span class="p">.</span><span class="n">ToArray</span><span class="p">()));</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="k">return</span> <span class="n">viewType</span><span class="p">;</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>
<p>Now, we basically have two options. Either we replace the function with one that
tries to locate the view without a context when the default function returns
null or we replace the <code>TransformName</code> function to also return the type names
without a view context.
I opted for the second options because it is easier to implement and other
function that use <code>TransformName</code> benefit from that change, too.</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='csharp'><span class='line'><span class="k">static</span> <span class="k">readonly</span> <span class="n">Func</span><span class="p"><</span><span class="kt">string</span><span class="p">,</span><span class="kt">object</span><span class="p">,</span> <span class="n">IEnumerable</span><span class="p"><</span><span class="kt">string</span><span class="p">>></span> <span class="n">_baseTransformName</span> <span class="p">=</span> <span class="n">Micro</span><span class="p">.</span><span class="n">ViewLocator</span><span class="p">.</span><span class="n">TransformName</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="k">static</span> <span class="n">IEnumerable</span><span class="p"><</span><span class="kt">string</span><span class="p">></span> <span class="n">FallbackNameTransform</span><span class="p">(</span><span class="kt">string</span> <span class="n">typeName</span><span class="p">,</span> <span class="kt">object</span> <span class="n">context</span><span class="p">)</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'> <span class="kt">var</span> <span class="n">names</span> <span class="p">=</span> <span class="n">_baseTransformName</span><span class="p">(</span><span class="n">typeName</span><span class="p">,</span> <span class="n">context</span><span class="p">);</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="n">context</span> <span class="p">!=</span> <span class="k">null</span><span class="p">)</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="n">names</span> <span class="p">=</span> <span class="n">names</span><span class="p">.</span><span class="n">Union</span><span class="p">(</span><span class="n">_baseTransformName</span><span class="p">(</span><span class="n">typeName</span><span class="p">,</span> <span class="k">null</span><span class="p">));</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="k">return</span> <span class="n">names</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>The implementation is pretty straight-forward. Since the <code>ViewLocator</code> returns the first view type found, we simply append the name(s) of the fallback view(s) to the list of names given by: the default <code>TransformName</code>.</p>
<h2>Even more customization !</h2>
<p>If you need a different view for <em>Errors</em> and <em>Questions</em>, you might also need
different views for different <em>Questions</em>! Let’s say we have views named
<code>My.Namespace.FooQuestion</code> and <code>My.Namespace.BarQuestion</code> which we want to use for different
kinds of Questions. We add a <code>ContextPrefix</code> to the <code>DialogResult</code> and create
the view context by concatenating the <code>ContextPrefix</code> and <code>DialogType</code>. Adding a
fluent configuration for the prefix to the <code>DialogResult</code> gives us this nice
syntax to for showing the <code>FooQuestion</code> view.</p>
<figure class='code'><div class='highlight'><table><td class='gutter'><pre class='line-numbers'><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='csharp'><span class='line'><span class="k">public</span> <span class="k">override</span> <span class="n">IEnumerable</span><span class="p"><</span><span class="n">IResult</span><span class="p">></span> <span class="n">Execute</span><span class="p">()</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'> <span class="kt">var</span> <span class="n">question</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Dialog</span><span class="p"><</span><span class="n">SpecialAnswer</span><span class="p">>(</span><span class="n">DialogType</span><span class="p">.</span><span class="n">Question</span><span class="p">,</span>
</span><span class='line'> <span class="s">"Why am I so uncreative"</span><span class="p">,</span>
</span><span class='line'> <span class="k">new</span> <span class="nf">SpecialAnswer</span><span class="p">(</span><span class="s">"Because!"</span><span class="p">),</span>
</span><span class='line'> <span class="k">new</span> <span class="nf">SpecialAnswer</span><span class="p">(</span><span class="s">"Dunno."</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'> <span class="k">yield</span> <span class="k">return</span> <span class="n">question</span><span class="p">.</span><span class="n">AsResult</span><span class="p">()</span>
</span><span class='line'> <span class="p">.</span><span class="n">PrefixViewContextWith</span><span class="p">(</span><span class="s">"Foo"</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<h2>Appendix</h2>
<h3>I: Note on Namespace aliases</h3>