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.

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.

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.

DivCounter: Webpage Tag Scanner



DivCounter Logo
How many HTML tags are there in your web page? How many opened and closed tags? If you’re curious to get that information, you can use a handy tool called DivCounter. Using this tool you can scan a web page to get the number of opened and closed data.
Not all HTML tags are scanned by default, you can add more tags to scan. Just enter the tags (separate by commas) and this tool will do the work. If you have unclosed tags, you probably want to fix it. But remember, not all tags should have closing tags e.g. img or br. I think it’s a good tool to learn about HTML.