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.

HTML5 UP

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

Cache is King


In this keynote presentation from HTML5DevConf, Steve Souders, Google’s Head Performance Engineer, clarifies the problem of caching, and explores various solutions to make your web app lightning fast.

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.

Twitter Cards

So, what is Twitter Cards?

Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a “card” added to the Tweet that’s visible to all of their followers. [Source: Twitter Developer: Twitter Cards]

Nokia Maps says hello to iOS and Android


From Ovi blog:

  1. You can see where you are on the map, thanks to HTML5 support for positioning
  2. You can find addresses, businesses and other places of interest, anywhere in the world
  3. You can get to know the places: all the essential information about a place are presented on one page (pictures, user reviews, popular travel guides description, contact information)
  4. You can plan the fastest route to your destination by car or on foot
  5. You can see where the public transport lines go, and where the stops are
  6. You can share your favourite places with your friends via SMS, email, Facebook or Twitter

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.

body_class() for WordPress Theme Designer

I just upgraded my WordPress engine to the latest version. This new version offers some improved and new features. One of them is about body_class() function. Nathan Rice has a definition about this:

The body_class() function operates in nearly the exact same manner as the post_class() function that was introduced in WordPress 2.7. The only differences are the classes it generates. The body_class() function will generate the classes mostly based on where your viewer is on your site.

I used post_class() when it was introduced in WordPress 2.7. This body_class() new function is a great addition for WordPress theme designers. Well, actually it’s not only for WordPress Theme designers, but it’s more for those who want to have/do more on the template. We can have some automatically generated HTML tags like these:

  • <body class="single postid-12">, or
  • <body class="page page-id-9 parent-page-id-0 page-template-default">, or
  • <body class="page-template page-template-tutorial-php logged-in">

See the patterns? Jump to Nathan Rice’s blog posts to read more details. In short, if you want to use this function, just modify your <body> tag. Change it into <body <?php body_class(); ?>>. That’s it!

Topify, A Much Better Twitter Notification Email System

I think I forgot when I joined (got invitation) to try Topify and started using it. Until now, Topify is really useful. It’s a timesaver! Topify is a simple service that will send notification (by email), and it’s related to Twitter. Two important keywords: Twitter and email account.
Sometime, we got notification from Twitter when other Twitter users start following us. Or, if we receive direct message. Is it good? It is. But, what can we do with the email we receive? What’s next?
Previously Twitter sends email notification in flat text. The notification only provides some basic details like Twitter username, real name, and link to Twitter profile page. The last thing is a link to our Twitter dashboard page to modify the notification settings.
Recently, Twitter provides more details, and it’s in HTML format. It includes these following details when we have a new follower:

  • Link to new follower’s Twitter profile page,
  • Number of followers,
  • Number of updates, and
  • How many people our new follower follows

When we receive a direct message, we will also get information about the sender and link to reply. I use Topify to handle my Twitter-related email notification. And, I’m satisfied. How?

Troubleshooting: SoftException in Application.cpp:544

When I had problem with WordPress installation, it was about WordPress Admin Area (Dashboard) Redirect Loop, I got the solution. Today, I experienced different problem. Still related to WordPress.
Okey, I’m not going to tell you that the problem only happens for WordPress. It might happen for other platforms or applications. Read on the details, you’ll know what I mean.
When I enter WordPress dashboard (admin area), I got 404 error page. It seems that the wp-admin folder does not exist. But, it’s there. I told Lala about this, and she reminds me that I’m not the one who got this problem. (see WordPress Support Forum thread for details).
So, I checked the error log. If you’re using cPanel for your hosting account, you should find the error log there. And, I got this:

[Tue Dec 30 09:20:18 2008] [error] [client ip.address.here] SoftException in Application.cpp:544: Directory "/home/username/public_html/somefolder" is writeable by group

Okey, it’s about SoftException in Application.cpp:544. I searched for answer using Google, and I found a useful answer.

As the message says, the specified foldername has been made writable by group.
That suggests that your server’s apache configuration doesn’t allow you to make folders writable by group.
ie: you’ve got the wrong permissions set on one or more folders.
Check with your hosting company to find out what permissions you’re allowed to set.

The answer is not related to WordPress issue, but it’s a solution for the same problem. So, I checked the wp-admin folder permission again. It was 777. Okey, I changed it into 755… and voila! Problem solved.
Okey, everything is working great now. It’s a new lesson for me :)

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.

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:

HTML 5

Question: Is HTML 5 ready yet? Go to ishtml5readyyet.com for the answer :)

Opera Web Standards Curriculum

Web Standards Curriculum (by Dev Opera) is a complete course to teach you standards-based Web development, including HTML, CSS, design principles and background theory, and JavaScript basics.