This blog needs a new design

I'll be working in a new design for my blog. Plenty of stuff has happened in the last couple of years, learned golang and now objective-c. Gonna spend some time developing iOS/iPhone/iPad apps.

Hacker Blogs is up!

I spent the last week working on a pet project I always wanted to do: a blog aggregator for hackers. So here you have it:

http://www.hackerblogs.com http://haxblog.appspot.com

Please register your blog and watch your articles appear on the front page in real-time as soon as they are posted. No marketing noise, no fud, no pay-per-post, just pure code.

Feedback is welcome and I hope you all enjoy it.

Hacker Blogs, for hackers, by hackers!

Edit: Hacker Blogs is down now. The experiment is over.

How to write a book in one single HTML5 file

Writing a book in one single HTML5 file is easy, just use the following template:

<html>
<title>My first book</title>
<book>
  <cover>
    <h1>My first book</h1>
    <h2>by H4x0r 3xtr4</h2>
  </cover>
  <hr>
  <content>
    <h2>Table of content</h2>
    <li><a href="#c01">Chapter I. First Chapter</a></li>
    <li><a href="#c02">Chapter II. Second Chapter</a></li>
  </content>
  <hr>
  <a name="c01"></a>
  <chapter name="c01">
    <h2>First Chapter</h2>
    <h3>Lesson One</h3>
    <p>Here we explain stuff...</p>
    <p>Here goes a pretty flower <img class="imgFlower1"></p>
  </chapter>
  <hr>
  <a name="c02"></a>
  <chapter name="c02">
    <h2>Second Chapter</h2>
    <h3>Lesson Two</h3>
    <p>Here we explain more stuff...</p>
    <p>Here goes another pretty flower <img class="imgFlower2"></p>
  </chapter>
</book>
<style>
  html,body{ margin:1em; padding:1em;}
  book,cover,content,chapter{display:block;}
  book{font:normal 1em georgia,times,serif; padding:3em;}
  cover{text-align:center; padding:4em 0;}
  content,chapter{padding:2em 0;}
  /* Resources */
  .imgFlower1{content:url("data:image/gif;base64,abcdefghij...")}
  .imgFlower2{content:url("data:image/gif;base64,abcdefghij...")}
</style>
</html>

All you have to do is to embed images in data URIs:

<style>
  .imgFlower1{content:url("data:image/gif;base64,abcdefghij...")}
  .imgFlower2{content:url("data:image/gif;base64,abcdefghij...")}
</style>

If you need an automator, use this one:

'''
   Program: base64.py
   This program converts all images in a folder to base64
   for embedding in an html page inside a <style> tag like:
   <style>
     .img_name1{content:url("data:image/jpg;base64,abcdef...");}
     .img_name2{content:url("data:image/jpg;base64,abcdef...");}
   </style>
   The 'content' property only works in webkit browsers.
'''

import os,glob,base64

path = 'myimages/'
name = 'base64.css'

def save64(path,ext):
  files = glob.glob(os.path.join(path,'*.%s'%ext))
  for img in files:
    print img
    fh = open(img,"rb")
    fc = fh.read()
    fh.close()
    fb = base64.b64encode(fc)
    fn = os.path.splitext(os.path.basename(img))[0]
    out.write('.img_')
    out.write(fn)
    out.write('{content:url("data:image/%s;base64,'%ext)
    out.write(fb)
    out.write('");}\n')

out = open(os.path.join(path,name),'w')
out.write('<style>\n')
save64(path,'jpg')
save64(path,'png')
save64(path,'gif')
out.write('</style>\n')
out.close()

Run it from the command line >>>python base64.py

It will generate a base.css file with all the images in that folder converted to data URIs. Then copy/paste it in your resources area in your style tag at the end of the book. Why at the end? so it doesn't interfere when you are editing the document.

Here is the result, My First Book. You can format it to make it look prettier improving the stylesheet.

Warning: it only works in webkit browsers like chrome or safari.

Color names and codes

Sometimes we need them, so here they are:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Don't mess with them

Reading eBooks

I've been reading all ebooks I can find about Sherlock Holmes on the Gutenberg project, don't ask me why, it is just addictive. But the point of this blog is to show you a little hack, of course, so lets proceed.

If you ever try to read a long html ebook and have to stop after a couple of chapters, it is a pain trying to go back to the exact line where you left it. Well, no more.

Edit the html file and add these lines of code between script tags:

addEventListener("load",function(){
 document.body.scrollTop=localStorage.mark;
});
addEventListener("unload",function(){
 localStorage.mark=document.body.scrollTop;
});

What it does you may ask? When you close your browser it saves the exact scrolling spot where the document was, so when you open it again it will take you exactly to that spot. Neat huh?

I knew you would like it...

FABE is my blog engine

I just ported FABE to python so I could use it on AppEngine. It was a smooth operation, fixed a couple of things, improved a couple more.

Follow us on our JS blog Javascriptoid!

Grab it from Github:

HTML editor

I'll be changing the html editor soon. Stick around!

Hello world!

Welcome to my blog.
Right now I am testing my new blog engine.

We'll be back soon.