Monday, April 12, 2010

Android Favorite Button

I love Android. What I hate about it, though, is that they don't tell you how to make standard-looking UIs. For example, I had to dig through source codes to find the @android:style/ButtonBar style that you can use as the style on pretty much any layout (RelativeLayout, LinearLayout, etc.) which provides a nice background graphic for your button bars. Anyway, today I discovered another such hidden feature – a star drawable that can be used for favorite buttons. However, I still don't understand a thing: there's btn_star, btn_star_big_off and btn_star_big_on. One would think "how do I get btn_star_on then?", but then one would realize btn_star and btn_star_big_* are the same size (all of these are in @android:drawable/). In short, to create a favorite button/image, use: <ImageView android:src="@android:drawable/btn_star_big_off"/> <!-- or, if you want the button-like background and borders (although I prefer the ImageView version) --> <ImageButton android:src="@android:drawable/btn_star_big_on"/>

Friday, April 2, 2010

How to properly write JavaScript libraries

I've seen JavaScript code written in all the possible ways. The reason there are so many ways to do it is because JavaScript is incredibly flexible. But that flexibility makes people write really ugly code. Examples of ugly, unreadable, error-prone code:

(function(window, undefined) { var myLibrary = (function () { var someProp = "..."; function someFunc() { ... var myLibrary = (function () { var someProp = "..."; function someFunc() { ...

If you write JavaScript like that, stop. Here's the proper way to write JavaScript libraries:

function Example() { if (!(this instanceof Example)) { // in case whoever used this forgot to use the `new' keyword return new Example(); } Example.staticMethod(); this.instanceMethod(); // for any timeouts/events, do this: var instance = this; setTimeout(function() { instance.instanceMethod(); }, 200); } Example.staticMethod = function() { // do something here; } Example.prototype.instanceMethod = function() { // do something here } // instantiate the Example class: var example = new Example();

Isn't this much more beautiful? The reason for the instance variable needed in timeouts and events is that, in JavaScript, when handlers are called, they are called in the window context. That means that inside the handler, the keyword this refers to the global object window. By using the instance variable we are working around this, calling the handler with the correct context.

Inspired by this stackoverflow question.

Tuesday, March 16, 2010

Rhythmbox "Rock" EQ Preset

I recently helped a friend beta test a Winamp plugin, so I had to spend time in Windows. While listening to my music in Winamp, I chose the Rock preset in the equalizer. And my, I felt enlightened. The sound was at least ten times better than the flat sound Rhythmbox produces on my usual Ubuntu system. My music had been revived. When I went back to Ubuntu, I hated the sound. So I spent some time trying to get it sound good, as it did with Winamp. To cut to the chase, use the RBEQ plugin and set your equalizer like this:

Monday, March 15, 2010

How to properly use @font-face

I've spent some time playing around with some of the new features in CSS3. Thankfully, these are pretty well implemented in modern browsers (read: not in IE). One feature that I really like is the @font-face rule. Finally, no more cross-platform rendering problems, with buttons that appear wider / narrower than they should and so on. However, I couldn't find anywhere how to specify different variants of the same font family. What I mean by that is that, for example, for the font "Liberation Sans" I have 4 variants (each in its separate file): Regular, Bold, Italic and BoldItalic. How can I specify all these under the same font family? Because if I don't, and use just one @font-face rule with just the regular variant, the browser won't know what to use for, for example, <strong&gr; tags, because it has no default "bold" font defined. The solution I've found is to define multiple @font-face rules, under the same font-family. Example: @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-Regular.ttf"); } @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-Bold.ttf"); font-weight: bold; } @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-Italic.ttf"); font-style: italic; } @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-BoldItalic.ttf"); font-weight: bold; font-style: italic; } body { font-family: "MyCustomFont", sans-serif; } div.really_important { font-weight: bold; /* this works! */ }
Syntax Highlighting by Pygmentool

This way, you are defining multiple variants for the font family MyCustomFont. Finally, I understand why they call it font-family.

Saturday, February 20, 2010

Another Internet Explorer annoyance that you might not be aware of

Recently, I've been using display: inline-block in CSS a lot. It's a very useful feature -- it allows you to have a fix-sized (e.g. 100x20px, or just fixed width / height) element that is inline, incredibly useful when doing precision design work. However! Internet Explorer 7 cannot handle display: inline-block on an element that is natively a block element. So, for instance, if you try to use inline-block on a <div>, it will work fine in any browser except IE7 which will consider it display: block. Now I'm stuck with using <span> everywhere. Ugh.

Thursday, February 18, 2010

Sleeping with Linux is dangerous

Seriously, using the sleep function with Linux is dangerous. I just put my laptop on sleep for a while, woke it up and apparently everything was fine. But only apparently, because the system fan (you know, the one that keeps your laptop from melting) lost its "medium" speed. That means that it wouldn't run unless it had to go on max. So, after half an hour of peace and quiet, the fan started running like hell, and the laptop was really heated up (it was like being near a radiator). Reboot the system and the "medium" speed works again. What if the max speed wouldn't work either? I wouldn't have noticed it and might have ended up with a brick. Sleeping with Linux is dangerous!!

Tuesday, December 15, 2009

Windows 7 Permissions

I find the way that this dialog is worded very, very funny: