Tag and pagination support
Bug fix: don’t include js for share buttons if not in the post page.
This commit is contained in:
Panos Sakkos
parent
ddce0d9ede
commit
b80d292d41
20 changed files with 319 additions and 88 deletions
|
|
@ -26,6 +26,9 @@ background-img: "/img/intro-bg.jpg"
|
|||
me-img: "/img/me.jpg"
|
||||
|
||||
# Blog variables
|
||||
paginate: 15
|
||||
|
||||
paginate_path: "blog/page:num"
|
||||
|
||||
post-preview-words: 128
|
||||
|
||||
|
|
@ -65,9 +68,9 @@ social:
|
|||
- title: "github"
|
||||
url: "https://github.com/PanosSakkos"
|
||||
- title: "linkedin"
|
||||
url: "https://no.linkedin.com/in/PanosSakkos"
|
||||
url: "http://no.linkedin.com/in/PanosSakkos"
|
||||
- title: "youtube"
|
||||
url: "https://youtube.com/c/PanosSakkos"
|
||||
url: "http://youtube.com/c/PanosSakkos"
|
||||
- title: "soundcloud"
|
||||
url: "https://soundcloud.com/psakkos/"
|
||||
|
||||
|
|
|
|||
|
|
@ -21,47 +21,51 @@
|
|||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if page.section-type == "post" %}
|
||||
|
||||
<!-- Share buttons -->
|
||||
|
||||
{% if site.twitter-share %}
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.fb-share %}
|
||||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
{% endif %}
|
||||
|
||||
<!-- Disqus -->
|
||||
|
||||
{% if site.disqus-shortname %}
|
||||
<script type="text/javascript">
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}';
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Comments counter -->
|
||||
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}'; // required: replace example with your forum shortname
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function () {
|
||||
var s = document.createElement('script'); s.async = true;
|
||||
s.type = 'text/javascript';
|
||||
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
|
||||
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
||||
}());
|
||||
</script>
|
||||
{% if site.twitter-share %}
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.fb-share %}
|
||||
<div id="fb-root"></div>
|
||||
<script>(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
{% endif %}
|
||||
|
||||
<!-- Disqus -->
|
||||
|
||||
{% if site.disqus-shortname %}
|
||||
<script type="text/javascript">
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}';
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Comments counter -->
|
||||
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}'; // required: replace example with your forum shortname
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function () {
|
||||
var s = document.createElement('script'); s.async = true;
|
||||
s.type = 'text/javascript';
|
||||
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
|
||||
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
||||
}());
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
{{ post.content | truncatewords: site.post-preview-words | markdownify }}
|
||||
|
||||
<a href="/blog.html"><h4><strong>View more posts</strong></h4></a>
|
||||
<a href="/blog/index.html"><h4><strong>View more posts</strong></h4></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
{% if page.name == "index.html" %}
|
||||
{% if page.section-type == "index" %}
|
||||
<a class="navbar-brand page-scroll" href="#page-top">
|
||||
{% else %}
|
||||
<a class="navbar-brand page-scroll" href="/index.html#page-top">
|
||||
|
|
@ -20,32 +20,37 @@
|
|||
<li class="hidden">
|
||||
<a href="#page-top"></a>
|
||||
</li>
|
||||
{% for p in site.pages_list %}
|
||||
{% if page.name == "index.html" %}
|
||||
<!-- Go to section for each page in index -->
|
||||
{% if page.section-type == "index" %}
|
||||
|
||||
<!-- Scroll to section for each page in index -->
|
||||
{% for p in site.pages_list %}
|
||||
<li>
|
||||
<a class="page-scroll" href="#{{ p[1] }}"> {{ p[0] }} </a>
|
||||
</li>
|
||||
{% else %}
|
||||
{% if page.name == 'blog.html' and p[0] == "Blog" %}
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
<!-- Blog, Post, Tag pages-->
|
||||
{% for p in site.pages_list %}
|
||||
{% if page.section-type == "blog" and p[0] == "Blog" %}
|
||||
<!-- Blog button in blog.html doesn't refresh the page -->
|
||||
<li>
|
||||
<a class="page-scroll" href="#blog"> {{ p[0] }} </a>
|
||||
</li>
|
||||
{% elsif p[0] == "Blog" %}
|
||||
<li>
|
||||
<a class="page-scroll" href="/blog.html"> {{ p[0] }} </a>
|
||||
<a class="page-scroll" href="/blog/index.html"> {{ p[0] }} </a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a class="page-scroll" href="/index.html#{{ p[1] }}"> {{ p[0] }} </a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,30 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
|
||||
{{ page.content | markdownify }}
|
||||
{{ page.content | markdownify }}
|
||||
|
||||
{% for post in site.posts %}
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{ post.url }}"> <strong>{{ post.title }} </a> </strong> <small><a href="{{ post.url }}#disqus_thread">Comments</a></small></h4>
|
||||
{% endfor %}
|
||||
{% for post in paginator.posts %}
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{ post.url }}"> <strong>{{ post.title }} </strong> </a> <small><a href="{{ post.url }}#disqus_thread">Comments</a></small></h4>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Pagination links -->
|
||||
<div class="pagination">
|
||||
|
||||
{% if paginator.previous_page and paginator.next_page%}
|
||||
<h4>
|
||||
<a href="{{ paginator.previous_page_path }}" class="previous">Newer Posts</a> <a href="{{ paginator.next_page_path }}" class="next">Older Posts</a>
|
||||
</h4>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.previous_page %}
|
||||
<h4><a href="{{ paginator.previous_page_path }}" class="previous">Newer Posts</a></h4>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<h4><a href="{{ paginator.next_page_path }}" class="next">Older Posts</a></h4>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -24,7 +42,7 @@
|
|||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
{% include social-buttons.html %}
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
{% include header.html %}
|
||||
|
||||
{% for page in site.pages %}
|
||||
|
||||
|
||||
{% if page.section-type == "about" %}
|
||||
|
||||
{% include about.html %}
|
||||
|
||||
{% elsif page.section-type == "blog" %}
|
||||
{% elsif page.section-type == "latest-post" %}
|
||||
|
||||
{% include blog.html %}
|
||||
{% include latest-post.html %}
|
||||
|
||||
{% elsif page.section-type == "career" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<h4><strong>{{ page.date | date_to_string }}</strong>
|
||||
<small> . {{ page.category }} . <a href="{{ page.url }}#disqus_thread">Comments</a><p/>
|
||||
{% for tag in page.tags %}
|
||||
<a href="/tags/{{tag}}.html">#{{ tag }}</a>
|
||||
<a href="/tags/{{ tag }}.html">#{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</small>
|
||||
</h4>
|
||||
|
|
|
|||
43
_layouts/tag.html
Normal file
43
_layouts/tag.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
|
||||
|
||||
{% include navigation.html %}
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
|
||||
<div id="archives">
|
||||
<div>
|
||||
{% assign tag = page.title %}
|
||||
<h3 id="#{{ tag }}">#{{ tag }}</h3>
|
||||
{% for post in site.posts %}
|
||||
{% if post.tags contains tag %}
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{ post.url }}"> <strong>{{ post.title }} </a> </strong> <small><a href="{{ site.url }}{{post.url }}#disqus_thread">Comments</a></small></h4>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
{% include js.html %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +1,40 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Blogging Like a Hacker
|
||||
category: tech
|
||||
tags: [ 'jekyll' ]
|
||||
---
|
||||
I don't remember exactly how many blogs I created the past years, but this one feels like the one. I had one blog on Tumblr and three or four on Wordpress. Tumblr's brand didn't align with my vision of my blog. I wanted a truly personal blog. A blog where I could share my thoughts mainly on technology but at the same time, keep it open to explore other areas. For example, at some point I might wanted to blog about music or personal thoughts on a viral and important matter, you name it. Tumblr wasn't the right place for this purpose because its brand is purely recreational. On the other hand, Wordpress had a more elastic brand. You can use it for whatever purpose you want, but it was too complicated for me and of course the the output blog was too heavy, given how little control you have on the generated code. Moreover, migrating a blog was a pain in the ass. After creating and deleting several blogs, I gave up Wordpress. One week ago a <a href="http://dkotzias.com" target="_blank">friend<a/> told me about <a href="http://www.jekyllrb.com" target="_blank">Jekyll</a> and I decided to give it a try. An easy decision, given my zero options at the time.
|
||||
I don't remember exactly how many blogs I created the past years, but this one feels like the one.
|
||||
I had one blog on Tumblr and three or four on Wordpress.
|
||||
Tumblr's brand didn't align with my vision of my blog.
|
||||
I wanted a truly personal blog.
|
||||
A blog where I could share my thoughts mainly on technology but at the same time, keep it open to explore other areas.
|
||||
For example, at some point I might wanted to blog about music or personal thoughts on a viral and important matter, you name it. Tumblr wasn't the right place for this purpose, because its brand is purely recreational. On the other hand, Wordpress has a more elastic brand. You can use it for whatever purpose you want, but it was too complicated for me and of course the produced code was too heavy, given how little control you have on the generated code. Moreover, migrating a blog was a pain in the ass. After creating and deleting several blogs, I gave up Wordpress. One week ago a <a href="http://dkotzias.com" target="_blank">friend<a/> told me about <a href="http://www.jekyllrb.com" target="_blank">Jekyll</a> and I decided to give it a try.
|
||||
An easy decision, given my zero options at the time.
|
||||
|
||||
First of all, its origins are in GitHub, a company that I really appreciate and support. My personal opinion about GitHub is that they changed our field, by transforming the day-to-day interaction with the best version control system into a User Experience. Git is complicated but powerfull and GitHub's client Apps for <a href="https://mac.github.com" target="_blank">Mac</a> and <a href="https://windows.github.com" target="_blank">Windows</a> made it easy and playful to use. Also their <a href="https://github.com" target="_blank">web access</a> promoted coding as a social network, which was ingenious because it worked as a motivation for people to open source their work and help others. Back to Jekyll. Yes, reading that it was created in GitHub was more than enought for me to invest my time on it. And yes, Jekyll needs some time invested, given that it's not a CMS which means that you have to get your hands dirty.
|
||||
First of all, its origins are in GitHub, a company that I really appreciate and support.
|
||||
My personal opinion about GitHub is that they changed our field, by transforming the day-to-day interaction with the best version control system into a UX.
|
||||
Git is complicated but powerful and GitHub's client Apps for <a href="https://mac.github.com" target="_blank">Mac</a> and <a href="https://windows.github.com" target="_blank">Windows</a> made it easy and playful to use.
|
||||
Also their <a href="https://github.com" target="_blank">web access</a> promoted coding as a social network, which was ingenious because it worked as a motivation for people to open-source their work and help others.
|
||||
Back to Jekyll. Yes, reading that it was created in GitHub was more than enough for me to invest my time on it.
|
||||
And yes, Jekyll needs some time invested on it, given that it's not a CMS, which means that you have to get your hands dirty.
|
||||
|
||||
I started from the official <a href="http://jekyllrb.com/docs/home" target="_blank">documentation</a>, but soon I realized that it would be more fun to not reinvent the wheel, but fork an existing open source blog that I liked. I searched a few themes, chose the <a href="http://kirbyt.github.io/timeline-jekyll-theme" target="_blank">Timeline</a> and started playing with it. Most of Jekyll themes are sleek and simple, but Timeline won me because of the <strike>Timeline</strike> Career page (duh). Also I loved the white on black text, because it improves significantly the reading experience and my vision was to create a website/blog that people would enjoy to spend a few minutes on it without getting tired. The first day that I spent on Jekyll was to understand how it works and the result was to just replace existing placeholders and variables to create my Timeline. But that wasn't enought, I needed a blog. I couldn't spend more than one day at the time, so I just published it for free on <a href="https://pages.github.com" target="_blank">GitHub Pages</a>. I hadn't used GitHub Pages for a while, so I had forgoten how awesome it is to just push your changes to origin/master and update your website out of the box. Also I was thrilled that I was able to use Emacs as my editor. My geek inside me was overwhelmed.
|
||||
I started from the official <a href="http://jekyllrb.com/docs/home" target="_blank">documentation</a>,
|
||||
but soon I realized that it would be more fun to not reinvent the wheel,
|
||||
but fork an existing open-source blog that I liked.
|
||||
I searched a few themes, chose the <a href="http://kirbyt.github.io/timeline-jekyll-theme" target="_blank">Timeline</a> and started playing with it.
|
||||
Timeline is a mashup of the popular <a href="http://y7kim.github.io/agency-jekyll-theme/" target="_blank">Agency</a> and <a href="http://jeromelachaud.github.io/grayscale-theme/" target="_blank">Grayscale</a> themes.
|
||||
Most Jekyll themes are sleek and <strike>mobile first</strike> responsive,
|
||||
but Timeline won me because of the <strike>Career page</strike> Timeline (duh).
|
||||
Also I loved the white on black text, because it improves significantly the reading experience and my vision was to create a website/blog that people would enjoy to spend a few minutes on it without getting tired.
|
||||
The first day that I spent on Jekyll was to understand how it works and the result was to just replace existing placeholders and variables to create my Timeline. But that wasn't enough, I needed a blog. I couldn't spend more than one day at the time, so I just published it for free on <a href="https://pages.github.com" target="_blank">GitHub Pages</a>. I hadn't used GitHub Pages for a while, so I had forgoten how awesome it is to just push your changes to origin/master and get your website deployed with them out of the box. Also I was thrilled that I was able to use Emacs as my editor. My geek inside me was overwhelmed. The only downside with GitHub Pages, is that they don't allow dynamic pages (yes, Jekyll is producing static pages!), for security reasons.
|
||||
|
||||
One week later, I was able to spend one more day on it. The goal was to somehow integrate the Blogging feature in the Timeline theme, but preety soon I realized that Timeline's Career functionality was hijacking the Blogging capabilities of Jekyll. Bummer. This feature was one of the two main reasons that I picked Timeline, but lacking the Blog feature was not an option. I wanted it badly. I tried to see if I could manipulate Jekyll in order to support both the Career and Blog features, but in order to manage that I had to hack Jekyll and I had only one day to spend on this. So I ripped off Career's generated HTML code into a file and started reading how to use Jekyll's API to create a Blog. This <a href="http://erjjones.github.io/blog/How-I-built-my-blog-in-one-day" target="_blank">post</a> was my most valuable resource. After a while and a <a href="https://github.com/kirbyt/timeline-jekyll-theme/pull/2" target="_blank">bug fix</a> on Timeline I was there. I opened the website from my phone to see how it renders and it was rendering as expected. By the way, I fixed a bug on my navigation bar from my bed, using my phone, by editing a source file on GitHub. How awesome is that?
|
||||
One week later, I was able to spend one more day on it. The goal was to somehow integrate the Blogging feature in the Timeline theme, but pretty soon I realized that Timeline's functionality was hijacking the Blogging capabilities of Jekyll, because it was rendering the posts as timeline events. Bummer. This feature was one of the two main reasons that I picked Timeline, but lacking the Blog feature was not an option, I wanted it badly. I tried to see if I could manipulate Jekyll in order to support both the Timeline and Blog features, but in order to manage that I had to hack Jekyll and I had only one day to spend on this. So I ripped off Timeline's generated HTML code into a file and started reading how to use Jekyll's API to create a Blog. This <a href="http://erjjones.github.io/blog/How-I-built-my-blog-in-one-day" target="_blank">post</a> was my most valuable resource. After a while and a <a href="https://github.com/kirbyt/timeline-jekyll-theme/pull/2" target="_blank">bug fix</a> on Timeline I was there. I opened the website from my phone to see how it renders and it was rendering as expected (thanks to Bootstrap).
|
||||
By the way, I fixed a bug on my navigation bar from my bed, using my phone, by editing a source file on GitHub.
|
||||
How awesome is that?
|
||||
|
||||
Writing blog posts using <a href="http://daringfireball.net/projects/markdown" target="_blank">Markdown</a> and Emacs is exciting and keeping my draft posts on git <a href="https://github.com/PanosSakkos/panossakkos.github.io/tree/blogging-like-a-hacker" target="_blank">branches</a> is kick-ass. The next logical step is to make the ripped off Career page HTML autogenerated by defining custom Jekyll variables and then open source it.
|
||||
Writing blog posts using <a href="http://daringfireball.net/projects/markdown" target="_blank">Markdown</a> and Emacs is exciting and keeping my draft posts on git <a href="https://github.com/PanosSakkos/panossakkos.github.io/tree/blogging-like-a-hacker" target="_blank">branches</a> is kick-ass. The next logical step is to make the ripped off Timeline HTML autogenerated, by defining custom Jekyll variables and then open-source it.
|
||||
|
||||
git commit -a -m "Finished post"
|
||||
git checkout master
|
||||
|
|
@ -19,3 +42,5 @@ Writing blog posts using <a href="http://daringfireball.net/projects/markdown" t
|
|||
git push origin master:master
|
||||
|
||||
:)
|
||||
|
||||
Edit: I tend to [keep](http://panossakkos.github.io/tech/2015/07/05/personal-jekyll-theme.html) my promises
|
||||
|
|
|
|||
|
|
@ -1,17 +1,55 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Software Lessons Learned From Assembling a 3D Printer
|
||||
category: tech
|
||||
tags: [ 'software', 'hardware' ]
|
||||
---
|
||||
A few weeks ago the Garage team of my office got a little present, a<strike>n IKEA</strike> <a href="http://www.vertex3dprinter.eu/" target="_blank">DIY 3D printer</a>. It was gazillion of bolts, nuts, wires, motors, rods and tiny plastic pieces which I couldn't imagine that they could assemble a 3D printer. I got cold feet, believing that we will miss a piece and everything will collapse in front of us. Whenever I have dealt with hardware so far, I was always frightened. You don't call methods, you screw bolts, and they have to be screwed properly, not too tight and not too loose. It's not uncommon that testing will not be applicable, you just assemble, hit a big button and if every component works, then you call it a day. You can't copy-paste hardware, you don't have <strike>a versioning control system</strike> git to undo steps in an instance, you are on your own and mistakes can literally make your project fall apart. And on top of these, we shouldn't touch the rods with bare hands, because they would corrode. Bottom line, hardware always made me feel nervous and from the point of creating personal pet-projects, suddenly I had to collaborate with others in order to build a pyramid. It was the similar feeling that you get when you start at your first job after finishing your studies.
|
||||
A few weeks ago the Garage team of my office got a little present, a<strike>n IKEA</strike> <a href="http://www.vertex3dprinter.eu/" target="_blank">DIY 3D printer</a>.
|
||||
It was zillions of bolts, nuts, wires, motors, rods and tiny plastic pieces which I couldn't imagine that they could assemble a 3D printer.
|
||||
I panicked, believing that we will miss a piece and everything will collapse in front of us.
|
||||
Whenever I have dealt with hardware so far, I was always frightened.
|
||||
You don't call methods, you screw bolts, and they have to be screwed properly, not too tight and not too loose.
|
||||
It's not uncommon that testing will not be applicable.
|
||||
You will assemble, hit a big button and if every component works, then you call it a day.
|
||||
You can't copy-paste hardware, you don't have <strike>a versioning control system</strike> git to undo steps in an instance,
|
||||
you are on your own and mistakes can literally make your project fall apart.
|
||||
And on top of these, we shouldn't touch the rods with bare hands, because they would corrode.
|
||||
Hardware always made me feel nervous and from the point of creating personal pet-projects,
|
||||
suddenly I had to collaborate with others in order to build a pyramid.
|
||||
It was the similar feeling that you get when you start at your first job after finishing your studies.
|
||||
|
||||
My <a href="http://waitbutwhy.com/2013/10/why-procrastinators-procrastinate.html" target="_blank">panic monster</a> instructed me immediately to sort all the numbered bags per category (bolts, nuts and miscellaneous) in order to access them efficiently. Like a real life index, which proved to be valuable during the first hours. We broke down the project into a few independent branches and started following the respective instructions. These instructions were practically our software spec equivalents in our new hardware world. They were very detailed and with plenty of images, which made you wish all the software specs to be like these. Because you knew exactly what you had to do. As a result, the only way you could introduce a bug, was by missing a step of the instructions or misunderstanding one. As you can imagine, we missed and misread steps and we realized our mistakes during each individual integration. Just like in the software world. The very first mistake that we discovered was when trying to mount the control board on the box. The bottom side of the box was not placed in the correct orientation, which blocked the card reader of the board. The result of this? We spent 45 minutes of unscrewing and screwing more than 60 bolts and nuts. We made 5 more mistakes, which most of them happened because we were tired (the first session lasted 12.5 hours, following a full working day). Every one of them cost us time (in the order of half-hours) but also mentally, because we had to take several steps back in order to make one correct step forward. For the later cost, the most expensive mistake was when just before the end, we realized that 4 nuts were missing from the <a href="http://manuals.velleman.eu/article.php?id=17" target="_blank">belt clamps</a>. In this case we had to unmount the whole printer head in order to fix them and this process took us one more session of 3 hours. One good habit which prevented us from introducing more bugs was that we <strike>code</strike> hardware-reviewed each other. We didn't keep this safety net during the whole process, it was happening organically when we were taking breaks.
|
||||
My <a href="http://waitbutwhy.com/2013/10/why-procrastinators-procrastinate.html" target="_blank">panic monster</a> instructed me immediately to sort all the numbered bags per category (bolts, nuts and miscellaneous) in order to access them efficiently.
|
||||
Like a real life index, which proved to be valuable during the first hours.
|
||||
We broke down the project into a few independent branches and started following the respective instructions.
|
||||
These instructions were practically our software spec equivalents in our new hardware world.
|
||||
They were very detailed and with plenty of images, which made you wish all the software specs to be like these.
|
||||
Because you knew exactly what you had to do.
|
||||
As a result, the only way you could introduce a bug, was by missing a step of the instructions or misunderstanding one.
|
||||
As you can imagine, we missed and misread steps and we realized our mistakes during each individual integration.
|
||||
Just like in the software world.
|
||||
The very first mistake that we discovered was when trying to mount the control board on the box.
|
||||
The bottom side of the box was not placed in the correct orientation, which blocked the card reader of the board.
|
||||
The result of this?
|
||||
We spent 45 minutes of unscrewing and screwing more than 60 bolts and nuts.
|
||||
We made 5 more mistakes, which most of them happened because we were tired (the first session lasted 12.5 hours, following a full working day).
|
||||
Every one of them cost us time (in the order of half-hours) but also mentally, because we had to take several steps back in order to make one correct step forward.
|
||||
For the later cost, the most expensive mistake was when just before the end, we realized that 4 nuts were missing from the <a href="http://manuals.velleman.eu/article.php?id=17" target="_blank">belt clamps</a>.
|
||||
In this case we had to unmount the whole printer head in order to fix them and this process took us one more session of 3 hours.
|
||||
One good habit which prevented us from introducing more bugs was that we <strike>code</strike> hardware-reviewed each other.
|
||||
We didn't keep this safety net during the whole process, it was happening organically when we were taking breaks.
|
||||
|
||||
Summarizing, being organized is usefull and it will probably prevent a few bugs. Even if you have the perfect spec, you will introduce bugs. The more careful you are, the less bugs you will introduce and the more tired you are, the less careful you become. The bugs will show up during integration. When something fails, we will fix it. It's not the end of the world, it just takes time and it hurts your motivation. And finally, you need a team, both for having fun during the creative process and as a safety net to each other.
|
||||
Summarizing, being organized is useful and it will probably prevent a few bugs.
|
||||
Even if you have the perfect spec, you will introduce bugs.
|
||||
The more careful you are, the less bugs you will introduce and the more tired you are, the less careful you become.
|
||||
The bugs will show up during integration.
|
||||
When something fails, we will fix it.
|
||||
It's not the end of the world, it just takes time and it hurts your motivation.
|
||||
And finally, you need a team, for having fun during the creative process, for agility and as a safety net to each other.
|
||||
|
||||
###Photos
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/misc.jpg" alt="">
|
||||
<img class="img-responsive" src="/img/posts/printer/misc.jpg" alt="parts">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-0.jpg" alt="">
|
||||
|
||||
|
|
@ -21,7 +59,7 @@ Summarizing, being organized is usefull and it will probably prevent a few bugs.
|
|||
|
||||
<img class="img-responsive" src="/img/posts/printer/board-fix.jpg" alt="Board fix">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/board.jpg" alt="">
|
||||
<img class="img-responsive" src="/img/posts/printer/board.jpg" alt="control board">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-2.jpg" alt="">
|
||||
|
||||
|
|
@ -29,6 +67,6 @@ Summarizing, being organized is usefull and it will probably prevent a few bugs.
|
|||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-4.jpg" alt="">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-complete.jpg" alt="">
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-complete.jpg" alt="complete">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/print.jpg" alt="">
|
||||
<img class="img-responsive" src="/img/posts/printer/print.jpg" alt="first print">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,25 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: "{ Personal } Jekyll Theme"
|
||||
category: tech
|
||||
tags: [ 'jekyll' ]
|
||||
---
|
||||
As I <a href="http://panossakkos.github.io/tech/2015/06/27/blogging-like-a-hacker.html" target="_blank">wrote</a> before, I wanted to open source the current theme because I believe that it adds value to the existing Jekyll themes. Also, I feel that I owe it back to the community, because without the existing code that I forked, I would never have the current blog. And I love this blog.
|
||||
As I <a href="http://panossakkos.github.io/tech/2015/06/27/blogging-like-a-hacker.html" target="_blank">wrote</a> before,
|
||||
I wanted to open-source the current theme because I believe that it adds value to the existing Jekyll themes.
|
||||
Also, I feel that I owe it back to the community, because without the existing code that I forked, I would never have the current blog.
|
||||
And I love this blog.
|
||||
|
||||
The value of *{ Personal }* is that it enables blogging in the <a href="http://kirbyt.github.io/timeline-jekyll-theme/" target="_blank">Timeline</a> theme (which is a mashup of the popular <a href="http://y7kim.github.io/agency-jekyll-theme/" target="_blank">Agency</a> and <a href="http://ironsummitmedia.github.io/startbootstrap-grayscale/" target="_blank">Grayscale</a> themes) it personalizes more the theme by focusing on its owner, it makes it easy to customize the website from Jekyll's config and it offers a cool <a href="http://panossakkos.github.io/404.html" target="_blank">404</a> page.
|
||||
The value of *{ Personal }* is that it enables blogging in the <a href="http://kirbyt.github.io/timeline-jekyll-theme/" target="_blank">Timeline</a> theme
|
||||
(which is a mashup of the popular <a href="http://y7kim.github.io/agency-jekyll-theme/" target="_blank">Agency</a> and <a href="http://ironsummitmedia.github.io/startbootstrap-grayscale/" target="_blank">Grayscale</a> themes),
|
||||
it personalizes more the theme by focusing on its owner,
|
||||
it makes it easy to customize the website from Jekyll's config and it offers a cool <a href="http://panossakkos.github.io/404.html" target="_blank">404</a> page.
|
||||
|
||||
The visual touches that I believe that make the theme a bit more personal, is the owner's picture in the home page, in combination with the blurred background. Moreover, Grayscale's neutral glyphicon of the header is replaced by a black and white version of the favicon.
|
||||
The visual touches that I believe that make the theme a bit more personal,
|
||||
is the owner's picture in the home page, and the blurred background, because it forces the eye to focus on the owner's photo.
|
||||
Moreover, Grayscale's neutral glyphicon of the header is replaced by a black and white version of the favicon.
|
||||
|
||||
The repo lives <a href="https://github.com/PanosSakkos/personal-jekyll-theme" target="_blank">here</a> and it's under <a href="https://github.com/mattvh/jekyllthemes/pull/134" target="_blank">pull request</a> for <a href="http://jekyllthemes.org/" target="_blank">Jekyll Themes</a> and indexed in Jekyll's themes <a href="https://github.com/jekyll/jekyll/wiki/Themes" target="_blank">wiki</a>.
|
||||
The repo lives <a href="https://github.com/PanosSakkos/personal-jekyll-theme" target="_blank">here</a> and it's under <a href="https://github.com/mattvh/jekyllthemes/pull/134" target="_blank">pull request</a> for <a href="http://jekyllthemes.org/" target="_blank">Jekyll Themes</a> and indexed in Jekyll's themes <a href="https://github.com/jekyll/jekyll/wiki/Themes" target="_blank">wiki</a>.
|
||||
|
||||
Of course, the theme will evolve over the time and as soon as time permits, the blog will support discovery with hashtags.
|
||||
|
||||
|
|
@ -17,4 +27,4 @@ Don't forget to support the repo by starring it ;)
|
|||
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=panossakkos&repo=personal-jekyll-theme&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<br><br>
|
||||
<br><br>
|
||||
|
|
|
|||
53
_posts/2015-07-11-ads.markup
Normal file
53
_posts/2015-07-11-ads.markup
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: "Ad Hell"
|
||||
category: tech
|
||||
tags: [ 'software' ]
|
||||
---
|
||||
I never click on ads, because I don't see any value in them.
|
||||
During the last ten years I clicked (intentionally) on literally one ad from a <a href="http://bellroy.com/" target="_blank">wallet company</a>.
|
||||
But, this company would be also my first result in my (incognito) <a href="https://www.google.no/?gfe_rd=cr&ei=4saeVZ7KE6qr8we3woDICA#q=slim+card+wallet" target="_blank">Google search</a>.
|
||||
And I was actually planning to buy a slim card wallet, I didn't start googling because of the ad.
|
||||
So, did I buy the product of the ad?
|
||||
Yes.
|
||||
Did the ad convince me to buy the product?
|
||||
No.
|
||||
An image of a product with a catchy phrase will never convince me to buy it.
|
||||
I want to do my research and evaluate my options before buying anything.
|
||||
After I evaluated a few of the "slim card wallets" Google results, I chose the one from the ad, for specific reasons, irrelevant to the displayed ad.
|
||||
3650 days, 1 intentionally clicked ad, 0 value, <a href="http://www.wolframalpha.com/input/?i=3650+*+3+%2F+%2860+*+60%29" target="_blank">3</a> hours of my life so far wasted on closing tabs from ads that I clicked by mistake.
|
||||
This is clearly a broken experience of the web.
|
||||
|
||||
Have you tried to browse the web with <a href="https://adblockplus.org/" target="_blank">AdBlock</a>?
|
||||
The web is just beautiful without ads.
|
||||
The fact that Google <a href="https://adblockplus.org/blog/adblock-plus-for-android-removed-from-google-play-store" target="_blank">removed</a> it from Play store,
|
||||
indicates that it caught their attention, which means that there is a significant number of people who vouch for an ad-less web.
|
||||
Ads are killing the UX and make products look cheap.
|
||||
|
||||
<a href="http://www.statista.com/statistics/266249/advertising-revenue-of-google/" target="_blank">90%</a> of Google's revenues come from ads,
|
||||
and this makes them really aggressive.
|
||||
YouTube is frustrating its users by forcing them to watch an ad before watching their video.
|
||||
And until recently, Google was placing an ad at exactly the same point where the first search result was normally, but with a latency in its rendering.
|
||||
As a result, I was clicking one ad on every search for several days (muscle memory).
|
||||
I'm pretty sure that they made a ton of money from this hack, but they just broke even more their UX.
|
||||
|
||||
Microsoft has started adding ads in its products.
|
||||
Skype is wasting my pixels and my battery on ads and I was really disappointed when I <a href="http://www.theverge.com/2015/4/29/8514345/windows-spotlight-lock-screen-with-ads" target="_blank">read</a> about (optionally) displaying app ads on the lockscreen of Windows 10.
|
||||
Facebook has also ads, but at least they don't display them at their Messenger, WhatsApp and Instagram apps.
|
||||
On the other hand, I haven't seen any ads in Apple products.
|
||||
This is what I would do in any of my products.
|
||||
But someone could argue that offering an ad-free paid version of it, is a better option.
|
||||
This is a trend coming from smartphone apps which was also adopted by Amazon at their Kindle series,
|
||||
by offering a cheaper model stuffed with ads, next to their normal model.
|
||||
|
||||
If you really care about delivering a delightful experience, then you shouldn't bundle any ads to it, or at least you should compromise with the opt-in/out model.
|
||||
Make your users love your product so much, that they would pay for it, like Apple, Spotify and many more companies did.
|
||||
Don't forget that WhatsApp's and Instagram's value was defined by their enormous user base.
|
||||
Which means that until the <a href="http://www.name.com/blog/general/business/2013/10/why-are-startups-turning-to-io/" target="_blank">io</a> bubble bursts, you can stick to a totally free of charge service, with the hope of grooming a few millions of users.
|
||||
And if your users don't love your product enough to pay for it, don't blame them.
|
||||
Blame yourself and improve the experience that you offer.
|
||||
|
||||
P.S.: How to <a href="https://www.reddit.com/r/LifeProTips/comments/27dihm/lpt_you_can_turn_off_the_annoying_skype_banner/" target="_blank">disable</a> Skype ads.
|
||||
|
||||
P.P.S.: Olivia pointed out "Technically, in any 10 year interval there would have been 2 leap years, therefore 3,652 days"
|
||||
11
about.html
11
about.html
|
|
@ -5,6 +5,13 @@ title: About
|
|||
---
|
||||
## About
|
||||
|
||||
Thanks for dropping by. I hope that it will not waste your time, but in case it does, at least I tried. Originally from Athens, Greece, I started my adventures in Computer Science and Technology from University of Athens where I received my Bachelor in Computer Science and Master in Software Engineering. Between those, I spent a creative year in Geneva, Switzerland where I worked at CERN as a Computer Security researcher. During my Master studies I worked as a Machine Learning researcher for the <a href="http://kddlab.di.uoa.gr/" target="_blank">KDD</a> lab, supervised by <a href="http://scholar.google.com/citations?user=PHJokEQAAAAJ&hl=en&oi=ao" target="_blank">Dimitrios Gunopulos</a>. During the summer of my Master studies, I spent my summer in Oslo, Norway, as an intern for Microsoft Development Center Norway, which won me and became my first working place in my post-academic life.
|
||||
Thanks for dropping by. I hope that it will not waste your time, but in case it does, at least I tried.
|
||||
Originally from Athens, Greece, I started my adventures in Computer Science and Technology from University of Athens where I received my Bachelor in Computer Science and Master in Software Engineering.
|
||||
Between those, I spent a creative year in Geneva, Switzerland where I worked at CERN as a Computer Security researcher.
|
||||
While attending my master's, I was working as a Machine Learning researcher for the <a href="http://kddlab.di.uoa.gr/" target="_blank">KDD</a> lab, supervised by <a href="http://scholar.google.com/citations?user=PHJokEQAAAAJ&hl=en&oi=ao" target="_blank">Dimitrios Gunopulos</a>.
|
||||
During my last summer break of my studies, I moved to Oslo, Norway, as an intern for Microsoft Development Center Norway.
|
||||
That place won me and became my first working place in my post-academic life.
|
||||
|
||||
But, apart from being a <strike>cool guy</strike> geek, I enjoy playing and composing music, messing with hardware, playing <a href="http://deck.tk/43TX9icn" target="_blank">card games</a>, yo-yoing and collecting comic books and vinyls. In general, my mind can zone out during any form of creative act. Opinions expressed here are mine.
|
||||
But, apart from being a <strike>cool guy</strike> geek,
|
||||
I enjoy playing and composing music, messing with hardware, playing <a href="http://deck.tk/43TX9icn" target="_blank">card games</a>, yo-yoing and collecting comic books and vinyls.
|
||||
In general, my mind can zone out during any form of creative act. Opinions expressed here are mine.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
---
|
||||
layout: blog
|
||||
section-type: blog
|
||||
title: Blog
|
||||
section-type: latest-post
|
||||
---
|
||||
## Blog
|
||||
|
|
|
|||
6
blog/index.html
Normal file
6
blog/index.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: blog
|
||||
section-type: blog
|
||||
title: Blog
|
||||
---
|
||||
##Blog
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: index
|
||||
section-type: index
|
||||
title:
|
||||
---
|
||||
Hope you are visiting while not in your <a href="http://waitbutwhy.com/2013/10/why-procrastinators-procrastinate.html" target="_blank"> Dark Playground </a>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@
|
|||
* Blogging functionality
|
||||
* Preview of the latest post in the home page
|
||||
* Archive page
|
||||
* Pagination
|
||||
* #tags
|
||||
* Facebook, Twitter and Reddit share buttons
|
||||
* Disqus comments
|
||||
* Control of your website and blog through the site's config file
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
|
||||
## Customizing your website from the config
|
||||
|
||||
Even if you have no experience with Jekyll you can personalize your website from the config file (_config.yml). This section describes the available variables and how they change the content of your website.
|
||||
Even if you have no experience with Jekyll you can personalize your website from the config file (\_config.yml). This section describes the available variables and how they change the content of your website.
|
||||
|
||||
### Favicon
|
||||
````
|
||||
|
|
@ -121,7 +123,7 @@ reddit-share: True
|
|||
````
|
||||
|
||||
### Timeline Events
|
||||
The Timeline is displayed in the Career section of the homepage. Each event consists of a date (when did the event started and ended), an image and a description.
|
||||
The Timeline is displayed in the Career section of the homepage. Each event consists of a date (when did the event started and ended), an image and a description.
|
||||
````
|
||||
events:
|
||||
- image: "/img/career/microsoft.jpg"
|
||||
|
|
|
|||
6
tags/hardware.html
Normal file
6
tags/hardware.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: tag
|
||||
section-type: tag
|
||||
title: hardware
|
||||
---
|
||||
## Tag
|
||||
6
tags/jekyll.html
Normal file
6
tags/jekyll.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: tag
|
||||
section-type: tag
|
||||
title: jekyll
|
||||
---
|
||||
## Tag
|
||||
6
tags/software.html
Normal file
6
tags/software.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: tag
|
||||
section-type: tag
|
||||
title: software
|
||||
---
|
||||
## Tag
|
||||
Loading…
Add table
Add a link
Reference in a new issue