Jekyll2018-07-18T16:59:38+00:00https://kuoe0.github.io/harmono/HarmonoHarmono is free responsive jekyll theme based on harmony.Images Lazy Loading2017-10-20T00:00:00+00:002017-10-20T00:00:00+00:00https://kuoe0.github.io/harmono/posts/2017/10/20/images-lazy-loading<p><img src="https://images.unsplash.com/photo-1500673922987-e212871fec22" alt="" />
<img src="https://images.unsplash.com/photo-1439392803233-3c1427203528" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1503642551022-c011aafb3c88" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1459716854666-062eac2da3bd" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1467952497026-86722ef1916f" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1492854536278-1f94bbec5732" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1495389564984-b1530db9afc2" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1445264918150-66a2371142a2" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1495431088732-09e59535d241" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1504280317859-9c6cce36bca8" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1505069446780-4ef442b5207f" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1500964757637-c85e8a162699" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1494825253165-ea450b5d5231" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1446680270543-c06d6e8defe8" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1493514789931-586cb221d7a7" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1494380436044-bae026289762" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1482862549707-f63cb32c5fd9" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1473042904451-00171c69419d" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1502433393943-3d9f527de311" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1498248529262-f5084e1d0d36" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1506792971018-6b5d71252abc" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1494707633652-f43986561810" alt="" /></p>
<h2 id="what-is-lorem-ipsum">What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p><img src="https://images.unsplash.com/photo-1487012093673-1785140900da" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1504125130065-19cd3d71c27a" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1504125130065-19cd3d71c27a" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1507090960745-b32f65d3113a" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1428509774491-cfac96e12253" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1505899823904-b58e10d5231a" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1506298520202-270c44f2793a" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1477425429843-5bb8283c50f9" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1441794016917-7b6933969960" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1496259947555-d77e1140f6c5" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1458699307265-ee780e8950ff" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1495709276535-bb4928b7b233" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1483197452165-7abc4b248905" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1506440905961-0ab11f2ed5bc" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1507834392452-0559ec185662" alt="" /></p>
<p><img src="https://images.unsplash.com/photo-1508138142660-302e69e74271" alt="" /></p>Syntax Highlight for Source Code2016-04-15T00:00:00+00:002016-04-15T00:00:00+00:00https://kuoe0.github.io/harmono/posts/2016/04/15/syntax-highlight-for-source-code<p>Use the following format for your source code:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="rouge-code"><pre>```c++
Your source code here.
```
</pre></td></tr></tbody></table></code></pre></div></div>
<p>You can specify which language it is after the triple <code>`</code> symbols.</p>
<h2 id="c-example">C++ Example</h2>
<div class="language-c++ highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="rouge-code"><pre><span class="cp">#include <iostream>
</span><span class="kt">int</span> <span class="nf">main</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">std</span><span class="o">::</span><span class="n">cout</span> <span class="o"><<</span> <span class="s">"Hello, world!"</span> <span class="o"><<</span> <span class="n">std</span><span class="o">::</span><span class="n">endl</span><span class="p">;</span>
<span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
</pre></td></tr></tbody></table></code></pre></div></div>
<h2 id="python-example">Python Example</h2>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="rouge-code"><pre><span class="kn">import</span> <span class="nn">unittest</span>
<span class="k">def</span> <span class="nf">median</span><span class="p">(</span><span class="n">pool</span><span class="p">):</span>
<span class="n">copy</span> <span class="o">=</span> <span class="nb">sorted</span><span class="p">(</span><span class="n">pool</span><span class="p">)</span>
<span class="n">size</span> <span class="o">=</span> <span class="nb">len</span><span class="p">(</span><span class="n">copy</span><span class="p">)</span>
<span class="k">if</span> <span class="n">size</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">1</span><span class="p">:</span>
<span class="k">return</span> <span class="n">copy</span><span class="p">[(</span><span class="n">size</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">]</span>
<span class="k">else</span><span class="p">:</span>
<span class="k">return</span> <span class="p">(</span><span class="n">copy</span><span class="p">[</span><span class="n">size</span><span class="o">/</span><span class="mi">2</span> <span class="o">-</span> <span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="n">copy</span><span class="p">[</span><span class="n">size</span><span class="o">/</span><span class="mi">2</span><span class="p">])</span> <span class="o">/</span> <span class="mi">2</span>
<span class="k">class</span> <span class="nc">TestMedian</span><span class="p">(</span><span class="n">unittest</span><span class="o">.</span><span class="n">TestCase</span><span class="p">):</span>
<span class="k">def</span> <span class="nf">testMedian</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">failUnlessEqual</span><span class="p">(</span><span class="n">median</span><span class="p">([</span><span class="mi">2</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">8</span><span class="p">]),</span> <span class="mi">7</span><span class="p">)</span>
<span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">'__main__'</span><span class="p">:</span>
<span class="n">unittest</span><span class="o">.</span><span class="n">main</span><span class="p">()</span>
</pre></td></tr></tbody></table></code></pre></div></div>
<h2 id="ruby-example">Ruby Example</h2>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="rouge-code"><pre><span class="c1"># Get the parts of speech.</span>
<span class="nb">print</span> <span class="s2">"Please enter a past-tense verb: "</span>
<span class="n">verb</span> <span class="o">=</span> <span class="nb">gets</span><span class="p">.</span><span class="nf">chomp</span>
<span class="nb">print</span> <span class="s2">"Please enter a noun: "</span>
<span class="n">noun</span> <span class="o">=</span> <span class="nb">gets</span><span class="p">.</span><span class="nf">chomp</span>
<span class="nb">print</span> <span class="s2">"Please enter a proper noun: "</span>
<span class="n">prop_noun</span> <span class="o">=</span> <span class="nb">gets</span><span class="p">.</span><span class="nf">chomp</span>
<span class="nb">print</span> <span class="s2">"Please enter a an adverb: "</span>
<span class="n">adv</span> <span class="o">=</span> <span class="nb">gets</span><span class="p">.</span><span class="nf">chomp</span>
<span class="c1"># See where to put it.</span>
<span class="nb">print</span> <span class="s2">"Please enter a file name: "</span>
<span class="n">fn</span> <span class="o">=</span> <span class="nb">gets</span><span class="p">.</span><span class="nf">chomp</span>
<span class="n">handle</span> <span class="o">=</span> <span class="nb">open</span><span class="p">(</span><span class="n">fn</span><span class="p">,</span><span class="s2">"w"</span><span class="p">)</span>
<span class="c1"># Go.</span>
<span class="nb">printf</span><span class="p">(</span><span class="n">handle</span><span class="p">,</span> <span class="s2">"%s got a %s and</span><span class="se">\n</span><span class="s2">%s %s around the block.</span><span class="se">\n</span><span class="s2">"</span><span class="p">,</span>
<span class="n">prop_noun</span><span class="p">,</span> <span class="n">noun</span><span class="p">,</span> <span class="n">verb</span><span class="p">,</span> <span class="n">adv</span><span class="p">)</span>
<span class="n">handle</span><span class="p">.</span><span class="nf">close</span>
</pre></td></tr></tbody></table></code></pre></div></div>
<h2 id="javascript-example">Javascript Example</h2>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="rouge-code"><pre><span class="kd">var</span> <span class="nx">visits</span> <span class="o">=</span> <span class="nx">getCookie</span><span class="p">(</span><span class="s2">"counter"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">visits</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">visits</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">visits</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"By the way, you have been here "</span><span class="o">+</span> <span class="nx">visits</span> <span class="o">+</span><span class="s2">" times."</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">visits</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"By the way, this is your first time here."</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">setCookie</span><span class="p">(</span><span class="s2">"counter"</span><span class="p">,</span> <span class="nx">visits</span><span class="p">);</span>
</pre></td></tr></tbody></table></code></pre></div></div>Use the following format for your source code:Post with Feature Photo2016-03-26T00:00:00+00:002016-03-26T00:00:00+00:00https://kuoe0.github.io/harmono/posts/2016/03/26/post-with-feature-photo<p>If you want to specify a photo as the feature photo for a post. Just put the following information in Front Matter.</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="rouge-code"><pre>image: "https://kuoe0.github.io/harmono/assets/images/2016-03-26-post-with-feature-photo.jpg"
image_info:
creator: "Anthony DELANOIX"
creator_url: "https://unsplash.com/photos/b5POxb2aL9o"
license: "CC0"
license_url: "http://creativecommons.org/publicdomain/zero/1.0/"
</pre></td></tr></tbody></table></code></pre></div></div>
<p>Note: To make jekyll-seo-tag plugin work, <strong>only absolute URL supported!!</strong></p>If you want to specify a photo as the feature photo for a post. Just put the following information in Front Matter.Sample post from harmony2014-08-19T23:56:45+00:002014-08-19T23:56:45+00:00https://kuoe0.github.io/harmono/sample-post<p>Just a sample post to show some of the <em>typography</em> elements supported from
<strong>harmony</strong> theme.</p>
<hr />
<p>A blockquote:</p>
<blockquote>
<p>Donec in mollis eros, nec rutrum turpis. <strong>Curabitur</strong> sem elit, semper nec volutpat quis, laoreet et sapien. In felis erat, rhoncus sed pellentesque mollis, tincidunt quis elit.</p>
<ul>
<li>By Someone</li>
</ul>
</blockquote>
<h2 id="header-2">Header 2</h2>
<h3 id="header-3">Header 3</h3>
<p>Duis lacinia commodo dui, vel aliquam metus hendrerit eu. Integer et scelerisque dui. Sed nec molestie quam. Donec sit amet nisl a massa commodo ultrices nec quis nunc. Aenean aliquet eu arcu adipiscing dignissim. Nunc dictum elit vitae dolor molestie aliquet.</p>
<h2 id="mathjax-support">MathJax Support</h2>
<p>Source code:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="rouge-code"><pre>$$a^2 + b^2 = c^2$$
$$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$
\\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \\]
</pre></td></tr></tbody></table></code></pre></div></div>
<p>Will be rendered to:</p>
<p><script type="math/tex">a^2 + b^2 = c^2</script>
<script type="math/tex">\mathsf{Data = PCs} \times \mathsf{Loadings}</script>
\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \]</p>
<p>A list:</p>
<ul>
<li>Praesent nisi elit, bibendum ut consectetur ac, aliquet in nunc</li>
<li>Donec ante est, volutpat in mi et, pulvinar congue dolor.</li>
<li>Quisque ultrices pulvinar sollicitudin.</li>
<li>Duis elementum odio eu euismod suscipit.</li>
<li>Integer enim lorem, interdum sit amet consectetur non, bibendum eget neque.</li>
</ul>
<p>A numbered list:</p>
<ol>
<li>Praesent nisi elit, bibendum ut consectetur ac, aliquet in nunc.</li>
<li>Donec ante est, volutpat in mi et, pulvinar congue dolor.</li>
<li>Quisque ultrices pulvinar sollicitudin.</li>
<li>Duis elementum odio eu euismod suscipit.</li>
<li>Integer enim lorem, interdum sit amet consectetur non, bibendum eget neque.</li>
</ol>
<p>Definition list:</p>
<dl>
<dt>Curabitur cursus magna eu sem cursus</dt>
<dd>ac ultrices urna pharetra.</dd>
<dd>Duis scelerisque ipsum eu luctus elementum.</dd>
<dt>Pellentesque habitant morbi tristique senectus</dt>
<dd>Curabitur malesuada lacus ac gravida porttitor</dd>
<dd>Duis sodales feugiat lorem et mollis.</dd>
</dl>
<p>Want me to suggest something? Please <a href="https://github.com/web-create/harmony/issues/new">Send me a request</a></p>Just a sample post to show some of the typography elements supported from harmony theme.What is Jekyll!2014-07-28T22:48:45+00:002014-07-28T22:48:45+00:00https://kuoe0.github.io/harmono/posts/2014/07/28/welcome-to-jekyll<p><a href="http://jekyllrb.com">Jekyll</a> is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. Here is a little quote from the official website:</p>
<blockquote>
<p>It takes a template directory containing raw text files in various formats, runs it through <a href="http://daringfireball.net/projects/markdown/">Markdown</a> (or <a href="http://redcloth.org/textile">Textile</a>) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind <a href="http://pages.github.com/">GitHub Pages</a>, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.</p>
<ul>
<li>jekyllrb.com</li>
</ul>
</blockquote>
<p>Check out the <a href="http://jekyllrb.com">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/mojombo/jekyll">Jekyll’s GitHub repo</a>.</p>Jekyll is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. Here is a little quote from the official website: