Simple Stream

I still have my orangescale.net domain name since I registered it back in 2006, but I do not used it for few years. This blog used that domain name for few years. Rather than having the domain unused, I decided to use it for something simple as simple aggregator.

So, orangescale.net now (well, for now!) has list of posts from this blog (thomasarie.com) and also from my podcast page at anchor.fm. I made it using Sourdust Feed Aggregator. Originally, Sourdust uses Bootstrap for its HTML/CSS, but I decided to redo the interface — still simple! — using Bulma.

My fellow, Zam, also has this kind of aggregator and I subscribe to it. I am thinking of having the similar aggregator, but for now keeping the updates with my daily reading sources I use RSS reader and also blog subscription feature, if available.

Bootstrap 4

Bootstrap 4 telah diluncurkan. Akhirnya.

Medium-like Posts (for WordPress)

A handy tutorial on how to deal with WordPress and CSS to have Medium-like post layout

HTML5 UP

HTML5 UP — Collection of beautiful templates using HTML5 and CSS3.

LESS Compiler

In my previous post, I mentioned about using Bootstrap for my works. One advantage of using Bootstrap is that we can easily work with its .less files. But, instead of using less.js, I prefer using LESS compiler to generate the real static stylesheet file. For now, I’m using LESS.app on my MacBook. The CodeKit looks interesting, anyway.

It’s easy. Basically, I just need to include my custom .less file, and @import it from bootstrap.less file, so my bootstrap.less file looks like this:

// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
//@import "progress-bars.less";
//@import "accordion.less";
//@import "carousel.less";
@import "hero-unit.less";
// My custom CSS
@import "custom.less";

I commented some lines there because I don’t need them. It will generate smaller stylesheet file. If you download Bootstrap, you should find many .less files under less directory. Some files are needed for certain components. Using LESS.app is so easy because:

  • I can set the output path. My HTML file will call a specific stylesheet file. I have it replaced automatically with a new compiled file.
  • After saving my custom.less — I use Coda, anyway — LESS.app will compile it automatically. So, actually I don’t need to look at the LESS.app.
  • LESS.app can minify the output.

Nice. What is your favorite compiler?

Twitter Bootstrap, LESS CSS, and Caching Problem

I’m working on some works right now with a small team at the office. We decided to use Bootstrap as the front-end development framework. We came up with this solution for some key reasons:

  • We need to do it fast.
  • It’s easy to maintain, especially for a collaborative project
  • Bootstrap is cool.

There are lots of similar frameworks to choose like Skeleton, 960.gs, Blueprint, Foundation, and more. It didn’t take long discussion to take Bootstrap. Its features and flexibilities are just perfect for our need. The next thing is that we need to do some customisations, for example on the font sizes and colours. Since Bootstrap might release updates in the future, it’s better to leave the core files untouched.

LESS

Basically, it’s easy to customise them by using its own customisation tool. But, I prefer another method by using LESS. And yes, Bootstrap works great with LESS. The installation works straight forward. After downloading less.js file, add these two lines in the <head>

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Inside bootstrap.less file, there is a little note that we can easily modify the font color and size by working on the variables.less file. I decided not to edit it. I created another .less file — for example: mycustom.less — and import it from bootstrap.less file. So, my bootstrap.less file looks like this:

...
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less";
// My Custom LESS
@import "mycustom.less";
...

And, this is what I have for mycustom.less:

@baseFontSize: 13px;
@tableBorder: #ddd;
@navbarInverseBackground: #faa141;
@navbarInverseBackgroundHighlight: #ec8b22;
@navbarInverseBorder: #d77c1b;
@navbarInverseLinkColor: #fff;

It should just work. But, does it work as expected? No.

Caching

Editing and saving mycustom.less file, and refreshing my page does not load the latest variables. It takes time to refresh/load the latest changes. It’s not good. It happens because less.js caches the .less files called using @import.
I tried to modify the web server setting by adding these lines in my httpd.conf file:

<FilesMatch ".less$">
Header set Cache-Control "no-cache"
</FilesMatch>

But, it didn’t work. After searching for solutions, there is a method offered for this issue. I added this line of code:
<script>localStorage.clear(); </script>
Now, whenever I make some changes on my .less files, reloading the page will give the latest changes. It works.

Floating CSS menu on YouTube Flash Videos

I currently involve in a website project that put videos as its primary contents. My involvement is not primary on the design. I’m just helping a little. What I like from the process is to find solution. One of the problem is on the navigation menu. It’s very common to have navigation with sub-menus. Without having special objects like flash, everything should be under control. But, not this time.

The problem

When embedding a video from YouTube (in this case, using the iframe method), the navigation is broken because it sits behind the video. The same result with the old embed code. See the screenshot below:

It’s wrong. The menu should be displayed above the video. It should be like the image below:

So, is there a simple way to fix this problem? Yes.

The solution

The solution is pretty easy. You only need to add a parameter for the embed code. It’s wmode=transparent. I will use an example here. This is an embed code from Serabi Solo video at YouTube:
<iframe width="640" height="360" src="http://www.youtube.com/embed/Gi-lO8OMUns" frameborder="0" allowfullscreen></iframe>
The code above should me modified by adding wmode=transparent parameter. The final code will be like this:
<iframe width="640" height="360" src="http://www.youtube.com/embed/Gi-lO8OMUns?wmode=transparent" frameborder="0" allowfullscreen></iframe>
It’s easy, right? But, what if you want to use the old embed code? You can fix the problem using a same method. For example, this is YouTube’s old embed code from the same video:
<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

You need to add a parameter. Just add <param name="wmode" value="transparent" />.
The final code will be like this:
<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/Gi-lO8OMUns?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Have fun!

shutup.css

shutup.css is a custom user stylesheet that can be applied to your browser to hide comments on many popular web sites without user intervention. (hat tip: kusaeni)

Posterouseptember: Posterous Features in September

logo_posterousThis September, Posterous blogging service released some new features and improvements. If you’re not familiar with Posterous — or never heard about it before, it’s a service that will help you put something online. You can post text, photos, videos and also documents. The big difference is that you can do it directly from your email. This service was launched back in July 2008. And, this is my Posterous page. If you have a Posterous account but you haven’t logged in for few months — or want to try it, here are some new features:

Feedburner feed tracking

If someone subscribe to your Posterous RSS feed, you can find out how many feed subscribers you have. This process should be easy because you can integrate your feed to Feedburner account. Using this, you can use all Feedburner’s features.

Autopost to Scribd

Posterous offers auto post ability. Using this, you can send your posts from Posterous to different websites/service. If you send a document, you can deliver it directly to Scribd.

Themes and Custom Themes!

If you want to have your own custom look for your Posterous page, you can do it easily now. There are some themes available. Once you select your theme, you can do some modifications¬† like colors, custom image header, etc. If you’re good at HTML and CSS, and want to create your very own theme, an advanced customization feature is also available. For some people — at least for me — this is a killer feature!

Embed songs from Lala.com and videos from Viddler and Google Video

If you want to embed audio files from Lala.com and videos from Viddler and Google Video, you don’t have to deal with embed codes. Just put the links, and Posterous will do the rest for you.

Emastic

Emastic is a CSS Framework with some great features: Lightweight (compressed weight less then 4kb, personalized width of the page in (em,px,%), use of fixed and fluid columns in the grid, elastic layout with “em”s.

New design for this blog

I have been very busy in the last few weeks, many things to do. I needed to recharge my energy. And this is the result: a new design for my blog. I created this theme for fun, at least to keep my mood in balance, to bring my mood back to the other design work.
After upgrading to WordPress 2.7 few days ago, I wanted to have some changes here, especially by taking advantages from new features introduced in the latest WordPress, e.g. built-in threaded comment. Here are some notes on my new blog design.

Template tags

Still related to template tags, I try to take advantage from the way WordPress produces CSS selectors. Here is an example. Open index.php in default theme folder, you should see this for the entry loop:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

The code above will produce something like this:
<div class="post hentry category-services category-sites category-www category-webdev tag-htaccess tag-facebook tag-linkedin tag-service tag-twitter tag-url" id="post-1026">
Do you see the pattern? It will produce some post classes on the entry data (categories and tags). This function is called post_class(). By this, we can customize how each entry (inside the loop) should be displayed, just work with the stylesheet.
If you want to make you theme compatible well with WordPress 2.7, just head to Migrating Plugins and Themes to 2.7 article at WordPress Codex. There are some other useful information for theme designers — and also for you as bloggers.

The Grid System

The Grid System is an ultimate resource in grid system. If you are a grid lover, like me. You should visit this page.

WordPress 2.7 Admin Color Scheme

WordPress 2.5 already provide two types of color schemes for dashboard. They are “Classic” and “Fresh“. By default, you will have the “Fresh” color scheme. It’s light shades of blue. If you like the darker blue, you can switch to it by choosing the “Classic” style. If you haven’t touch this area, this setting can be found on your profile page. Just click your name on the top right navigation.
wp26-scheme
In WordPress 2.7, we can do the same. The color schemes available to choose are “Blue” and “Gray” (default).
wp27-scheme
Right now, I choose the “Blue” scheme. Look at these picture for color scheme comparison.

Understanding CSS

Everything You Know About CSS Is Wrong by Digital Web Magazine.

vBulletin Performance Optimization

I have been dealing with vBulletin for almost a year now. I manage a vBulletin installation for my friend at Fashionese Daily forum. Anyway, Fashionese Daily forum have used other forum/discusion engines like punBB and MyBB. It’s now using vBulletin 3.7.3 Patch Level 1.
It’s a pretty busy-traffic forum anyway. In average, there are 1,000 new posts everyday. According to forum stats, there are 500 – 600 online users during the prime ours (registered and guests). From the very beginning, I try to maintain its performance so that the forum is available.
Based on many articles about vBulletin optimization, here are what I did: