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.

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.

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.

Features for Developers (Firefox 3.1 beta 1)




Okey, this should be a good news.
Geolocation

Geolocation is a JavaScript API that lets a web page query the browser’s location via JavaScript. It can be used to plot maps, give directions, attach location information to pictures, give a location for a weblog post and a pile of other things.
More details about Geolocation API Specification.

@font-face

Add support for the CSS @font-face property. This property allows you to specify a true type font file that includes a specific font you want to use to render a web page.
More details about @font-face

Video and Audio

Include support for the <video> and <audio>elements. This beta includes support for the OGG Theora and OGG Vorbis formats on all platforms

And more…

Pushup: Encourage others to upgrade their browsers



I just added some Javascript file and CSS in this blog. You probably will notice them, or not. You will not see something different in this page if you’re using an updated internet browser. But, if you’re still using old browsers, you should see a notification — it’s on the upper right of the browser window — telling you about your browser status (updated or outdated).
Pushup : Pushing up the web
Anyway, I got this from Pushup campaign.

Pushup is an effort to push the web forward by helping users upgrade their outdated browsers. Give your users a better web experience today by installing Pushup on your domain! A subtle upgrade link is shown when people visit your website using an outdated browser. They can click this link to visit the upgrade website for that browser, or choose to be reminded after a time you specify.

The installation (adding Javascript and CSS) is easy. Go to Pushup website, and you will get everything you need to get it installed in your website/blog. Demo is also available there. Anyway, remember Browse Happy?

Image styling in blog entry



When we write an article in our blog, sometime we insert images/photos to support our article. And this can be done easily, no matter what blogging platform we use. For example, using WordPress we can upload image using uploader tool, and with few clicks the image will go to entry editing screen. For better formatting purposes, we can manage how inserted objects should be displayed: floating left, right or in the center. For example, see the image below:

The above image is constructed using HTML codes like this:

<p><img src="/path/to/image/file.jpg" alt="Alternate Text" align="left" /></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque mollis. Sed ut eros at ante congue vehicula.

Or, something like this:

<p><img src="/path/to/image/file.jpg" alt="Alternate Text" style="float: left;" /></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque mollis. Sed ut eros at ante congue vehicula.

There are many alternatives to have such output. We can use style="float: left;", align="left", align="right", etc. Is it what you want? Probably, yes. But, do you notice that the text is attached to the image? Do you want to insert some space there so that it can please your readers? Now, let’s compare with this image.