Permalink
Browse files

added a jekyll blog

  • Loading branch information...
1 parent c19d9a3 commit 0bb3db672338b9ea0a9553ab56a5609b0f33f1a7 @fgnass committed Feb 17, 2012
View
@@ -1 +1,2 @@
-.DS_Store
+_site
+.DS_Store
View
@@ -0,0 +1,3 @@
+# About
+
+This is my blog. It's powered by Jekyll and GitHub Pages.
View
@@ -0,0 +1,12 @@
+auto: true
+pygments: true
+github: fgnass
+
+author:
+ name: Felix Gnass
+ email: fgnass@gmail.com
+ gravatar: 7014e667cb86fc0cbb9414df5bfafd89
+ twitter: fgnass
+
+disqus: fgnass
+analytics: 'UA-19036385-2'
View
@@ -0,0 +1,11 @@
+<script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', '{{ site.analytics }}']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script>
View
@@ -0,0 +1,12 @@
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+ {% if site.safe == false %}var disqus_developer = 1;{% endif %}
+ var disqus_shortname = '{{ site.disqus }}';
+ var disqus_identifier = '{{ post.id }}';
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
View
@@ -0,0 +1,10 @@
+<script type="text/javascript">
+ {% if site.safe == false %}var disqus_developer = 1;{% endif %}
+ var disqus_shortname = '{{ site.disqus }}';
+ (function () {
+ var s = document.createElement('script'); s.async = true;
+ s.type = 'text/javascript';
+ s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
+ (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
+ }());
+</script>
View
@@ -0,0 +1,16 @@
+{% if post %}
+ {% assign post_content = post.content %}
+{% else %}
+ {% assign post = page %}
+ {% assign post_content = content %}
+{% endif %}
+
+<h1>
+ <a href="{{ post.url }}">{{ post.title }}</a>
+</h1>
+<p class="meta">
+ <img src="http://www.gravatar.com/avatar/{{ site.author.gravatar }}?s=16" width="16">
+ <a class="author" href="http://github.com/{{ site.github }}">{{ site.github }}</a>
+ <a href="{{ post.url }}" class="date">{{ post.date | date_to_long_string }}</a>
+</p>
+{{ post_content }}
View
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>{{ page.title }}</title>
+ <meta name="author" content="{{ site.author.name }}" />
+
+ <link href="/blog.atom" rel="alternate" title="{{ page.title }}" type="application/atom+xml">
+
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/assets/default.css" type="text/css" />
+
+ <!-- Disqus -->
+ <link rel="stylesheet" href="/assets/disqus.css" type="text/css" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/assets/syntax.css" type="text/css" />
+
+</head>
+<body>
+
+ {% capture repo_url %}https://github.com/{{site.github}}/{{site.github}}.github.com{% endcapture %}
+
+ <div id="main">
+
+ <div id="header">
+ </div>
+
+ <div id="content">
+
+ <div class="content">
+ {{ content }}
+ </div>
+
+ <div class="sidebar">
+ <div id="rss">
+ <a href="/blog.atom">Subscribe to this Blog</a>
+ </div>
+
+ <div class="box">
+ <div class="inner">
+ This blog is a public <a href="{{ repo_url }}" target="_blank">GitHub repository</a>. If spot an error or a typo you can fork and edit the posts and send me a pull request. Just go to the post's detail page and click the edit button in the upper right corner.
+ </div>
+ </div>
+
+ <ul>
+ {% for post in site.posts %}
+ <li>
+ <a href="{{ post.url }}">{{ post.title }}</a>
+ <div>{{ post.date | date_to_string }}</div>
+ </li>
+ {% endfor %}
+ </ul>
+
+ </div>
+
+ </div>
+ </div>
+
+ <div id="footer">
+ </div>
+
+ {% include analytics %}
+</body>
+</html>
View
@@ -0,0 +1,19 @@
+---
+layout: default
+---
+
+{% capture repo_url %}https://github.com/{{site.github}}/{{site.github}}.github.com{% endcapture %}
+{% capture post_path %}{{ page.id | replace_first:'/','' | replace:'/', '-' }}.md{% endcapture %}
+{% capture edit_url %}{{ repo_url }}/edit/master/{{post_path}}{% endcapture %}
+{% capture history_url %}{{ repo_url }}/commits/master/{{post_path}}{% endcapture %}
+
+<div id="actions">
+ <a href="{{ history_url }}" class="minibutton">View History</a>
+ <a href="{{ edit_url }}" class="minibutton">Edit</a>
+</div>
+
+{% include post %}
+
+<div id="comments">
+ {% include disqus %}
+</div>
@@ -0,0 +1,5 @@
+---
+layout: post
+---
+
+Today I decided to abandon my Posterous blog and move to GitHub Pages. Since most of the things I write about are GitHub projects anyway this looks like a perfect fit.
@@ -0,0 +1,165 @@
+---
+layout: post
+tags : [node]
+---
+
+I usually try to avoid using inheritance in JavaScript altogether but sometimes there are situations where using a classic OO-style can make things easier.
+
+Let's assume we have a class `Foo` which we want to extend:
+
+{% highlight js %}
+function Foo() {
+ // constructor code
+}
+Foo.prototype = {
+ bar: function() {
+ // do something
+ }
+};
+{% endhighlight %}
+
+A common pattern is this:
+
+{% highlight js %}
+function Bar() {
+}
+Bar.prototype = Object.create(Foo.prototype);
+Bar.prototype.bar = function() {
+ // do something else
+};
+{% endhighlight %}
+
+In contrast to the original definition of `Foo` this code looks quite noisy.
+
+## Using util.inherits()
+
+ In Node.js there's the [util.inherits()](https://github.com/joyent/node/blob/master/lib/util.js#L498) function which helps us to write the same thing a little more compact and also creates a `constructor` property as well as a reference to the super constructor:
+
+{% highlight js %}
+function Bar() {
+}
+util.inherits(Bar, Foo);
+Bar.prototype.bar = function() {
+ // do something else
+};
+Bar.prototype.baz = function() {
+ // yet another method
+};
+{% endhighlight %}
+
+## Passing properties to Object.create()
+
+Still we have to repeat `Bar.prototype` for each property we want to add. We can overcome this by passing a property descriptor to `Object.create()`:
+
+{% highlight js %}
+function Bar() {
+}
+Bar.prototype = Object.create(Foo.prototype, {
+ bar: { value: function() {
+ // do something else
+ }},
+ baz: { value: function() {
+ // yet another method
+ }}
+});
+{% endhighlight %}
+
+Unfortunately this still looks quite noisy as we have to wrap all our properties into descriptor objects. On the other hand this syntax makes it easy to define getters or setters:
+
+{% highlight js %}
+function Bar() {
+}
+Bar.prototype = Object.create(Foo.prototype, {
+ bar: { value: function() {
+ // do something else
+ }},
+ boo: {
+ get: function() {
+ return this._boo;
+ },
+ set: function(value) {
+ this._boo = value && (''+value).toUpperCase();
+ }
+ }
+});
+{% endhighlight %}
+
+Otherwise we'd have to call `Object.defineProperty('boo', {...})` instead.
+
+## The get and set operators
+
+Still this isn't as concise as it could be. Since JavaScript 1.8.5 the language supports the [get](https://developer.mozilla.org/en/JavaScript/Reference/Operators/get) and [set](https://developer.mozilla.org/en/JavaScript/Reference/Operators/set) operators which can be used inside an object literal to define getters and setters:
+
+{% highlight js %}
+function Foo() {
+ // constructor code
+}
+Foo.prototype = {
+ get boo() {
+ return this._boo;
+ }
+ set boo(value) {
+ this._boo = value && (''+value).toUpperCase();
+ }
+};
+{% endhighlight %}
+
+Now this is nice, but how can we use this approach for our subclass?
+
+## The deprecated, non-standard way
+
+One possibility is to use the non-standard `__proto__` [property](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/Proto) that allows us to change an objects prototype even after it has been created:
+
+{% highlight js %}
+function Bar() {
+}
+Bar.prototype = {
+ __proto__: Foo.prototype,
+ get boo() {
+ return 'Buh!';
+ }
+};
+{% endhighlight %}
+
+## A standard based solution
+
+Despite being deprecated the solution above is currently my favorite inheritance style. If you want to avoid using `__proto__` for some reason you can write a helper function similar to Node's `util.inherits()` that uses standard ECMAScript 5 features to achieve similar results:
+
+{% highlight js %}
+function Foo() {
+ // constructor code
+}
+Foo.prototype = {
+ bar: function() {
+ // do something
+ }
+};
+
+function Bar() {
+ // constructor code
+}
+util.prototype(Bar, Foo, {
+ get boo() {
+ return 'Buh!';
+ }
+});
+{% endhighlight %}
+
+Here is the implementation of the `util.prototype` function:
+
+{% highlight js %}
+function prototype(ctor, superCtor, proto) {
+ var props = {
+ constructor: { value: ctor, writable: true, configurable: true }
+ };
+ Object.getOwnPropertyNames(proto).forEach(function(name) {
+ props[name] = Object.getOwnPropertyDescriptor(proto, name);
+ });
+ ctor.prototype = Object.create(superCtor.prototype, props);
+ ctor.super_ = superCtor;
+}
+{% endhighlight %}
+
+##TL;DR
+
+The get/set operators are cool and `__proto__` is your friend. If you don't want to use it you can write a simple helper function to achive a similar result using standard ECMAScript features.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 0bb3db6

Please sign in to comment.