Author Archive for kev

How-to add proxy support to Feedalizer ruby library

Here is a little code snippet that monkey-patch Feedalizer to let it grab web content through a HTTP proxy:

# HTTP proxy settings
HTTP_PROXY_HOST = "123.456.78.90"
HTTP_PROXY_PORT = 8080

# Calculate proxy URL
HTTP_PROXY_URL = "http://#{HTTP_PROXY_HOST}:#{HTTP_PROXY_PORT}"

# Monkey patch feedalizer to support page grabbing through a proxy
require 'feedalizer'
class Feedalizer
  # Backup original grab_page method
  alias_method :grab_page_orig, :grab_page
  # Define new grab_page() method with proxy support
  def grab_page(url)
    open(url, :proxy => HTTP_PROXY_URL) { |io| Hpricot(io) }
  end
end

This fix, written for a Ruby on Rails-based project, lay in the environment.rb file, but I wonder if this is the right place and the right way of doing it… Anyway, it works for me ! :)

Update: A post from Matthew Higgins’ blog that answer my question above has just shown up in my feed aggregator. What’s he telling us ? That I’m a naughty programmer :

Previous to 2.0, naughty developers pasted code at the bottom of environment.rb, and the config/initializer folder was a welcome convention to help organize this madness.

For your instance, the code in this post is extracted from an “old” (prior to RoR 2.0) project, thus explaining my naughtyness… ;)

Proxad / Free.fr killed my RPM repository !

My ISP, Proxad/Free, hardened its policy and do not allow any longer the use of the 10 GiB hosting (that they gracefully provide for free to their customer) for things other than “pure” website. I think my RPM repository, which I moved there last year, fall in the “static storage” category, leading them to erased it some days ago.

Fortunately I have backups and I recently get a RPS from OVH. I’ve spent the majority of the week-end restoring and relocating the repository. Good news everyone, everything seems OK now. If you still use my repositories, please check that it responds.

Python ultimate regular expression to catch HTML tags

1 year and 3 months ago I’ve came with a PHP regexp to parse HTML tag soup. Here is an improved version, in Python (my favorite language so far), that is normally much prone to detect strange HTML tags. It also support attributes without value so it’s closer to the HTML specification, but doesn’t strictly stick to it in order to catch tag soup and malformatted tags.

ultimate_regexp = "(?i)<\/?\w+((\s+\w+(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\s]+))?)+\s*|\s*)\/?>"

And here is it applied in a trivial example (in a python shell):

>>> import re
>>>
>>> content = """This is the <strong>content</strong> in which we want to
<em>find</em> <a href="http://en.wikipedia.org/wiki/Html">HTML</a> tags."""
>>>
>>> ultimate_regexp = "(?i)<\/?\w+((\s+\w+(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\s]+))?)+\s*|\s*)\/?>"
>>>
>>> for match in re.finditer(ultimate_regexp, content):
...   print repr(match.group())
...
'<strong>'
'</strong>'
'<em>'
'</em>'
'<a href="http://en.wikipedia.org/wiki/Html">'
'</a>'
>>>

How-to add a corner banner to a K2 Wordpress theme’s style

In this post I will give you all the technical details to create a corner banner for the wordpress K2 theme. This solution is uninstrusive as it can be bundled with a K2 style without modifying the K2 core theme.

We will use the new hooks from the brand new K2 1.0RC6. So first, we have to create a functions.php file in our style directory (example: /wp-content/themes/k2/styles/my-style). Then add the following PHP code in it:

<?php

// Add HTML code required by our corner banner
function add_corner_banner() {
  ?>
  <a id="cornerbanner" href="http://www.coolcavemen.com/news/new-website-beta-released/" title="New website released as beta version !"></a>
  <?php
}

// Call add_corner_banner() method on each template_body_top hook
add_action(‘template_body_top’, ‘add_corner_banner’);

?>

This code tell K2 to replace the template_body_top hook define in all K2 pages, by the result of the add_corner_banner() PHP function. This function is coded to return the HTML code we need for the corner banner.

Then we need to add the following CSS code to our style (/wp-content/themes/k2/styles/my-style/my-style.css):

#cornerbanner {
  background: url("/wp-content/themes/k2/styles/my-style/corner-banner.png") no-repeat;
  display: block;
  height: 205px;
  width: 205px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  text-decoration: none;
}

This CSS code refer to the corner-banner.png which is a 205×205 px PNG image with an alpha channel to simulate shadows and fine transparency. Here is the Gimp xcf source file I used to generate it.

This CSS code is designed for a top right banner. If you need a top left banner, replace:

 right: 0;

by

  left: 0;

This also work for horizontal positioning:

  top: 0;

can be replaced by

  bottom: 0;

That’s all ! My solution is not supposed to work (and was not tested) with Internet Explorer as the latter is known to have terrible PNG transparency support. You can still apply fixes on my code using iepngfix, jquery or PNG8 images.

I’ve provided you with all the technical details to create a corner banner and add it to your K2 style seamlessly. It’s now up to you to adapt it to your needs. Be Creative ! Oh, and by the way, when you’ll change the banner PNG file, do not forget to update the CSS code with your image width and height.

Update: my friend QPX sent me an alternative banner made with photoshop: here is the ready-to-use PNG file and the photoshop source file.

How-to inherit CSS width attributes for Internet Explorer

Let’s say you rely on a third party CSS framework that set the default layout of your content. The following CSS rule is part of the framework:

img {
  width: 100%;
}

This CSS directive tell all your images to use the full width available to them.

Now, for any reason (aesthetic, layout, etc.), you want to reset this behaviour.

One solution (the laziest) is to remove those three lines from the original CSS file. But if you’re like me, this sound too dirty for you as you don’t want to modify the original CSS file (I like to avoid patches on third party tools and libraries I don’t maintain).

Another solution consist in overriding this width attribute in another CSS file that you will call after the original one. This case is covered by the CSS 2.1 specification which define the inherit value:

img {
  width: inherit;
}

This solution is perfect and work as expected in Firefox. Unfortunately, and without any surprise, it doesn’t with Microsoft’s browser as IE has anecdotical support of CSS’s inherit.

But today I found a trick to fix this in both Firefox and Internet Explorer. The workaround is to use the auto value instead of inherit:

img {
  width: auto;
}

I’ve tested it with both Firefox 3.0rc1 and Internet Explorer 6.0.2800.1106CO.

Of course this solution is not generic: it only work in my case because img html tags has width attributes that support the auto value.