↓Skip to main content

Tips-n-Tricks

2012

Image viewer is up!

·1 min
Yay, it’s up. You can click images above to try it out. a pop-up will appear with full sized image, and it’s draggable! You can also try hover the upper area of the popup to see the tagline/title and download link for the image. Credits to Brian Clapper. He made the base implementation for this with jQuery and jQueryUI. From there, I extend some stuff to make it more organic.

The stony cat

·1 min

I just saw this super cute Kantoku illustration at yande.re. Too bad it has compression artifacts. Good thing GIMP has filter called selective Gaussian blur which blurred similar color area but not the edges. With the right setting it can even clean print/paper texture from scanned materials. For anime kind images I usually set the max. delta around 15 to 20, and leave the blur radius to 5 pixels. Here’s the comparison.

I still preparing some kind of image viewer for this blog, for now you can right click and open it in new tab/window to see the full size The image viewer is up! Try click the image

Here is the result.

More Layout Update

·3 mins

I apologize for the inconvenience to refreshing your browser cache. For I randomly changing the site’s layout. Now I made the whole page a bit smaller, including the fonts. Also fixed mobile view for navigation bar. Which is hacky.

So it appears that this theme support mobile view (duh). That navigation bar above will shrink and turn into drop down menu if browsed from mobile device. And it happened that I broke this feature when I moved the search box to the sidebar.

Here be the aforementioned feature in javascript.

function getNav() {
  var mobileNav = $('nav[role=navigation] fieldset[role=search]').after('<fieldset class="mobile-nav"></fieldset>').next().append('<select></select>');
  mobileNav.children('select').append('<option value="">Navigate&hellip;</option>');
  $('ul[role=main-navigation]').addClass('main-navigation');
  $('ul.main-navigation a').each(function(link) {
    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
  });
  $('ul.subscription a').each(function(link) {
    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
  });
  mobileNav.children('select').bind('change', function(event) {
    if (event.target.value) { window.location.href = event.target.value; }
  });
}

Octopress, custom banner

·1 min
One thing I fond from octopress is its super simple customization, here’s example. You might notice that my banner above only showed at front page, and it’s not coincidence. I set that on purpose using almost no code. The trick is coming from Jekyll itself. Jekyll/Octopress user should already know that there is YAML formatted meta data at the top of each post or page file. So yes, you can put anything there and use it from your template.