haykranen.nl

I got a typo in my logrotate config which pretty much killed my VPS.

My Apache server runs a lot of virtual hosts, i didn’t want to type them all out for logrotate, so i created something like this to handle it:

/var/www/*/logs/*.lo* {
        daily
        missingok
        rotate 7
        compress
        delaycompress
        notifempty
        create 640 root adm
        sharedscripts
        postrotate
                if [ -f "`. /etc/apache2/envvars ; echo ${APACHE_PID_FILE:-/var/run/apache2.pid}`" ]; then
                        /etc/init.d/apache2 reload > /dev/null
                fi
        endscript
}

Note the ending * at the first line. I didn’t know what got into me, but this caused logrotate to rotate the rotated logfiles, hence 100% CPU and hence, a broken system.

I fixed it (by replacing the ‘*’ with a ‘g’), but logrotate still didn’t work. CPU stayed at 100%, logs didn’t rotate. So i ran a strace -f logrotate and got lots of these:

stat64("/etc/localtime", {st_mode=S_IFREG|0644, st_size=2917, ...}) = 0
stat64("/etc/localtime", {st_mode=S_IFREG|0644, st_size=2917, ...}) = 0
stat64("/etc/localtime", {st_mode=S_IFREG|0644, st_size=2917, ...}) = 0

A little bit of Googling turned up this blogpost: apparently lograte‘s own log got corrupted. A simple rm /var/lib/logrotate/status did the trick and everything worked perfectly again.

Consider this case: you have a blogpost with an image, a heading, and some text. You want a little margin on the top of every heading to divide the different sections. Your HTML might look like this:

<article>
    <img src="photo.jpg" alt="A nice photo" />
    <h3>My heading</h3>
    <p>Text. Bla bla bla</p>

    <h3>Another heading</h3>
    <p>Even more bla bla</p>
</article>

Your CSS might looke like this:

img {
    float: right;
    margin: 0 0 10px 10px;
}

h3 {
    font-size: 24px;
    margin-top: 24px;
}

p {
    font-size: 16px;
    margin: 12px 0;
}

Now here’s a problem. The very first <h3> will have an ugly margin at the top, so it doesn’t line up with the image. How would you style it so that it won’t have a margin at the top? My first guess was to use the :first-child selector:

article h3:first-child {
    margin-top: 0;
}

However, that doesn’t work. The spec is not very clear about it: but here’s the problem: :first-child only selects the very first element and doesn’t care about the element you give it. That’s great if all your elements are the same (such as <li> elements in a list) but it sucks when having a case like this.

Fortunately, there’s a new CSS3 property that’s perfect for this case. It’s called :first-of-type and does exactly what you want.

article h3:first-of-type {
    margin-top: 0;
}

Browser support is mostly pretty good, although you’re out of luck on Internet Explorer 8 and earlier.

When i downloaded the Couchbase Single Server 1.1.2 for Mac OS X i tried replicating a database and tried to view a view. Unfortunately all i got was endless errors in my log:

[error] [<0.159.0>] OS Process Error <0.17372.0> :: {os_process_error,{exit_status,1}}
[error] [<0.159.0>] OS Process Error <0.17375.0> :: {os_process_error,{exit_status,1}}
[error] [<0.159.0>] OS Process Error <0.17378.0> :: {os_process_error,{exit_status,1}}

When i looked in the configuration i noticed this value in my ‘query_servers’:

bin/couchjs /Users/dustin/tmp/master/build/share/couchdb/server/main.js

When you change this to:

bin/couchjs share/couchdb/server/main.js

Everything works again.

Vote on the ticket to get it fixed for the next release :)

Cross-browser testing is pretty essential when developing web sites. Most of the bugs you need to fix are probably in older versions of Internet Explorer. Both Chrome and Firefox have a very fast release cycle, where new versions are released every six weeks or so.

However, there are still many people using the older 3.6 version of Firefox. Firefox 3.6 has a few bugs, and because of its big installed base you probably need to run some tests on it as well.

There’s a problem here: Firefox doesn’t like it when two different versions are run side-by-side. Fortunately there are a few tricks you can use to make this happen. This should also work on Snow Leopard, provided you have at least 10.6.2, because the --args parameter was introduced in that version.

1. Download the Firefox 3.6 release from Mozilla.com.
2. Unzip and mount the DMG file.
3. Drag the file from the DMG to your Desktop instead of to the Applications folder.
4. Rename the .app to ‘Firefox36.app’ and move it to your /Applications folder
5. Run this command from a Terminal (found in /Applications/Utilities):
   /Applications/Firefox36.app/Contents/MacOS/firefox-bin -ProfileManager
6. Add a new account. Call it ‘test’.
7. Run Automator. From the ‘Choose a type for your document’ menu, select ‘Application’.
8. Drag ‘Run Shell Script’ to the action area.
9. In the content area (where ‘cat’ is displayed) copy-paste this line:
   open /Applications/Firefox36.app --args -P test
10. Save the document to /Applications as ‘Firefox 3.6′
11. Drag ‘Firefox 3.6′ application from the Applications folder to your dock for fast access.
12. You’re done!

For a nice icon to differentiate your current Firefox version with the old one get the full resolution PNG from above this article right here. Open it in preview, select all (Cmd-A) and press copy (Cmd-C). Open up the Automator .app by right-clicking and selecting ‘Get info’ or hitting Cmd-I. Select the icon in the topleft corner so that it is outlined and press Paste (Cmd-V).

Jason Rudolph has a great blog post on merging files from one branch to another in git. In most cases you probably want to cherry-pick commits, however for a quick and fast solution this is pretty cool:

$ git branch
* master
  twitter_integration
$ git checkout twitter_integration app/avatar.rb
$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#   new file:   app/models/avatar.rb
#
$ git commit -m "'Merge' avatar code from 'twitter_integration' branch"
[master]: created 4d3e37b: "'Merge' avatar code from 'twitter_integration' branch"
1 file changed, 72 insertions(+), 0 deletions(-)

Two things i noticed about this method:

• Wildcards and directories work too. So instead of getting a single file from another branch you can also do a git checkout branch * or git checkout branch path/to/directory
• All paths are relative, so if you’re not in the root of a repo, you need to give the relative path to your file(s).

Here’s an easy way to use basic authentication while using the request library for Node.js.

Unfortunately request doesn’t come with an easy convenience parameter you can use, so you need to provide it by yourself. The common way is to add it as an extra HTTP header.

Let’s say you need to login to example.com using user and pass as your username/password.

var request = require('request'),
    username = "john",
    password = "1234",
    url = "http://www.example.com",
    auth = "Basic " + new Buffer(username + ":" + password).toString("base64");

request(
    {
        url : url,
        headers : {
            "Authorization" : auth
        }
    },
    function (error, response, body) {
        // Do more stuff with 'body' here
    }
);

This is pretty verbose. Fortunately, you can use a trick using the URL itself, as specified in RFC 1738. Simply pass the user/pass before the host with an @ sign.

var request = require('request'),
    username = "john",
    password = "1234",
    url = "http://" + username + ":" + password + "@www.example.com";

request(
    {
        url : url
    },
    function (error, response, body) {
        // Do more stuff with 'body' here
    }
);

Nice one huh?

Silverlight is one of those browser technologies that you just wish wasn’t there. Proprietary,buggy, not widely used, and difficult to implement. Unfortunately, sometimes you can’t live without it when you want to play, for example, Windows Media files in a browser.

While working with Silverlight i encountered quite a few bugs in its implementation in browsers, especially when working together with Javascript. Here are a few bugs i encountered and possible workarounds.

All these bugs are noticed when using Silverlight 4.

overflow:hidden / overflow:auto bug

Browsers affected: Firefox 4 (Mac / Win)

The bug: when you put the Silverlight <object> inside a div, every time you change the overflow property from hidden to auto (making scrollbars appear) the Silverlight object re-initializes. This is especially frustrating with videos, that start from the beginning.

The official docs actually have this wonderful explanation:

Because of browser differences, the Silverlight plug-in does not support the cascading style sheets (CSS)overflow property on the object element or on a parent container element, such as a div element.

Workaround: This only seems to happen when the overflow property is changed by a user action, such as with a :hover pseudoclass. When you ‘force’ the browser to hide the scrollbar the Silverlight object doesn’t restart. For example, when you set the height of the div to a very large height the scrollbar disappears but the object doesn’t restart.

Another workaround when you need a scrollbar is to use a custom Javascript solution. I recommend the excellent jScrollPane jQuery plugin.

Offscreen initialize bug

Browsers affected: All browsers on Mac (tested: Chrome, Safari, Firefox)

The bug: This Mac-only bug happens when you initialize the Silverlight object at a place that is not on-screen (for example to create an audio-only player that you don’t want to see) the object doesn’t initialize. When you scroll the object into screen (e.g. by using Firebug) the object starts.

Workaround: difficult. With an audio player you could put it in a div with position: fixed, but putting multiple ‘audio pixels’ on top of each other using z-index won’t work though.