Keeping less.js from breaking relative filepaths in your CSS files

Most everyone uses images in their WordPress stylesheets, including me, and those usually look something like background: url(images/image.png) [more stuff here]. I recently got onto less.js, which is a tool to clean up CSS (it is amazing), but the script tends to insert a <style> block into the head of the document. This causes all the relative paths to look for things like http://yoursite.com/images/image.png instead of http://yoursite.com/wordpress/wp-content/themes/themename/images/image.png.

How do you fix it? I assume you’re using wp_enqueue_script to add less.js–thus there are only a couple steps needed:

<?php $protocol = (isset($_SERVER["HTTPS"]) && !empty($_SERVER["HTTPS"])) ? "https://" : "http://";
$prev_base_href = $protocol.$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; ?>
<base href="<?php bloginfo("template_url"); ?>/" />
<?php wp_head(); ?>
<base href="<?php echo $prev_base_href; ?>" />

So, for the new inline <style> block, the base file path is your template directory, keeping all the associations intact; and for the rest of your page, it’s back to normal.

The $prev_base_href is used to find the URL of the current page. If you intend to use this a lot, you could stick it in a function in functions.php, but as I’m only using it once, that won’t be necessary.

Note: this could cause problems with relative filepaths that should actually be relative to your root directory. Use this hack with caution.

UPDATE: So yeah, I’m a moron. I didn’t test this fully and found out that it will break all other relative links on your page, including hashes. Fixed the code block.

Bubble volume calculator

Yes, this is how I relieve my boredom. There’s a bubble formula volume calculator up on my website now. It takes input amounts in metric units only. (F U AMERICA)

Using Adium (or any IRC client) with deviantART Chat

You’ll need:

  • an IRC client (I use Adium because of all the other protocols it supports)
  • a Python installation
  • frabjous
  • some experience with the command line
  • a Ruby installation (OPTIONAL, used for auth script)

Note: I’m assuming you’re using OSX or Linux or another Unix-based OS. I have not tested this on Windows, but I assume it works there too.

I’m not sure how many people actually use deviantART chat–or “dAmn”, as I will be referring to it from now on–but there are a lot of cool people and some excellent chatrooms hidden there. I got into the habit of using it about six months ago, doing what the cool folks did, which is to say using the superdAmn add-on for Firefox. (By the way, for those of you that don’t mind using a browser to chat when you assumedly already use a dedicated chat client, superdAmn has been now ported to Safari and Chrome.) I, however, don’t like using a browser for chatting when I already have etc. etc., so I created a single-site browser for the site using Fluid, but it still wasn’t enough.

Finally, after a bout of vigorous Googling, I found frabjous, a little IRC server daemon written in Python that’s specially tailored to interface with dAmn.

Download and un-RAR frabjous. You can put it in your home directory if you want, or put it in /usr/local: somewhere where the folder will be added to your PATH. Hit up Terminal, cd to the frabjous directory and run frabjous:

python frabjous.py

Good work. An IRC server has started on localhost, and it’ll start printing info about the server into Terminal. You can now open your IRC client and connect to 127.0.0.1.

First of all, you’ll be prompted for your username and password. The creator of frabjous seems to have overlooked the fact that this feature doesn’t work anymore (or perhaps it never did), so you will instead need an authtoken provided by deviantART. I have written a Ruby script to do this, because I don’t know Python, but it should be a relatively simple matter to port it to the platform of your choice. There’s an online version if you want to use that.

#!/usr/local/bin/ruby
%w(rubygems cgi curb).each{|g|require g}
curl = Curl::Easy.http_post('https://deviantart.com/users/login',
  Curl::PostField.content('username',ARGV[0]),
  Curl::PostField.content('password',ARGV[1]),
	Curl::PostField.content('reusetoken','1'))
curl.enable_cookies = true
curl.cookiejar = "cookies.txt"
curl.perform
curl.close # cookies will only be written once curl handle is closed

IO.popen('pbcopy', 'r+') do |clipboard|
  clipboard.print CGI::unescape(File.new("cookies.txt").read).match(/"authtoken"[^"]*"(.*)"/).to_a[1]
end

File.delete("cookies.txt")

This is how this file works: it post a username and password to the deviantart login page, saves the cookies, and then regexes the authtoken out. pbcopy is the OSX clipboard: you can change it to xclip -selection c for Ubuntu or simply print the returned value to the Terminal. I called this file “dauth” and put it in the frabjous folder so that it can be called with dauth username password. As I mentioned before, though, it’s usually easier to use the web interface if you don’t need to fetch a token all that often.

frabjous expects this token in the form /pass authtoken, so paste that in the server window. Assuming you got the correct credentials, frabjous should commence logging you in. Now you’re all set! Happy chatting.

Addendum: Adium–and possibly Pidgin, I haven’t checked–doesn’t allow you to talk directly to the server, so you need to run dauth and set the authtoken to the password of the account that you will be using for dAmn IRC, before connecting.

Known problems:

  • frabjous doesn’t know how to handle a lot of shortened IRC commands like /who, and Adium complains about this. I haven’t found a solution. Patched for now. The update may or may not be on github.
  • You will see everything as raw text and HTML. This includes tags and thumbnails. frabjous does, however, account for the latter rather nicely by printing thumbs as [THUMB: url - name :name for dAmn: by author]. This is a limitation of IRC itself, not of dAmn. Some IRC clients will load images inline when they encounter a link to one: you can probably change the thumb syntax to just the image link if you look around in the source code.

Current Projects

Enjoy.