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.

<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).

$ 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).

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.

Because browsers don’t return data from requests that fail, error handling is tricky compared to normal AJAX requests. There is a workaround by using a timer, which is the way the popular jquery.jsonp plugin solves it.

jQuery 1.5 adds this workaround, so you don’t need this plugin. All other features of the plugin, such as custom callback naming, are possible in jQuery now as well.

Here’s an example:

var req = $.ajax({
    url : url,
    dataType : "jsonp",
    timeout : 10000
});

req.success(function() {
    console.log('Yes! Success!');
});

req.error(function() {
    console.log('Oh noes!');
});

The timeout parameter is essential, because this indicates when a request should be considered ‘failed’. Because of this extra parameter you need to use $.ajax instead of $.getJSON.

The req variable contains the jqXHR object, which can be used to attach multiple callbacks and error handlers.

CREATE YOUR DEBUT ALBUM COVER

1 – Go to “wikipedia.” Hit “random… Read More… Read More” or click http://en.wikipedia.org/wiki/Special:Random

The first random wikipedia article you get is the name of your band. (alternatively, if the first article you hit is short, hit Random Article two more times.)

2 – Go to “Random quotations”
or click http://www.quotationspage.com/random.php3

The last four or five words of the very last quote of the page is the title of your first album.

3 – Go to flickr and click on “explore the last seven days” or click http://www.flickr.com/explore/interesting/7days

Third picture, no matter what it is, will be your album cover.

4 – Go to You tube and type without looking-the first music in the search results is your bands hot new Indie release!!

**Alternatively you can ask people in the group to post music that sounds like a good match with your album cover.

5 – Use photoshop or similar to put it all together.

6 – Post it to FB with this text in the “caption” and TAG the friends you want to join in.

7 – Use this URL to invite people to this group so they can share their masterpieces: http://tinyurl.com/dh4bqr

Clicking the arrow next to ‘Devices’ hides or shows the ‘children’ under it. A very useful interface element. Until now, there was no standard for doing that (i usually used <fieldset> and <legend> to code it).

Unfortunately, it’s not supported in any browser (yet). But thanks to the power of jQuery we can make a very simple plugin that emulates this behaviour. My version is really simple, but if you need something more sophisticated check out @mathias’ solution.

Here’s an example.

Download the plugin from Github or copy-paste from below: