Fuzzy matching with CSS3

There are special cases where a simple CSS selector is not enough. Like yesterday, when I wanted to match all the uploaded images in my blog, regardless of the container and the content.

Let’s see an example markup:

1
2
3
4
5
6
7
8
9
10
11
12
<p>
  <a href="/blog/wp-content/uploads/2012/11/cat-eat.gif">
    <img src="/blog/wp-content/uploads/2012/11/cat-eat-300x225.gif"
         alt="" title="Cat Eat" width="300" height="225"
         class="alignnone size-medium wp-image-361" />
  </a>
  <a href="/blog/wp-content/uploads/2012/11/cat-help.jpg">
    <img src="/blog/wp-content/uploads/2012/11/cat-help.jpg"
         alt="" title="Cat Help" width="500" height="457"
         class="aligncenter size-full wp-image-367" />
  </a>
</p>

How do we match only the images?

Well, there are many solutions. The simplest is certainly to use the img selector; but this way we’d match all the images, which isn’t our goal. We just want to match the uploaded ones.

Let’s examine the markup above. See, WordPress uses some classes in order to apply the correct size or alignment, and finally applies a unique class with a progressive number (wp-image-*), just in case we want to match a single element. So we could do this:

1
2
3
4
.wp-image-361,
.wp-image-367 {
  /* some fancy CSS code here */
}

The solution above works, but it is not handy because – as you may have guessed – we should update the selector each time we upload a new image.

Hey, are we supposed to hard-code all the classes?

No, absolutely! That’s an absurd solution. Let’s explore other options.

The official W3C Selectors Level 3 specification offers a freaky set of selectors, for the joy of the craziest web designers!

In our specific case, this would do the trick:

1
2
3
4
img[class^="wp-image-"] {
  /* matches an img element whose "class" attribute value
  begins exactly with the string "wp-image-" */
}

Note that I’m talking about CSS3, so if you need to support older browsers, don’t lean on it.

Cool. What else?

The table of selectors presents a whole bunch of possibilities, even though the usefulness isn’t always evident. But I’m sure you can find an example for every selector listed there. So, whether you are a CSS wizard or not, my final advice is: go create cool stuff, because practice makes perfect.

Git FTP Push FTW!

Git is a wonderful tool that makes possible having your local repo and your GitHub repo always perfectly synchronized. This is cool and all, but — what about the production server?

If you are in a shared hosting that doesn’t have git or SSH support, you’ll probably find stressful to manually update your application via FTP each time, even for the tiniest of the edits.

Well, if that’s your case you really should check out git-ftp by René Moser.

Git-ftp is a straightforward way to connect to your FTP and automagically transfer only the files that changed since the last commit.

The usage is fairly simple:

1
$ git ftp push --user <user> --passwd <password> ftp://example.com/public

And you can make it even simpler by just setting defaults in your project’s .git/config file:

1
2
3
$ git config git-ftp.user john
$ git config git-ftp.url ftp.example.com
$ git config git-ftp.password secr3t

Now you can just do:

1
$ git ftp push

Et voilà! Your production server is up-to-date.

Fushi PHP Boilerplate Released!

Fushi PHP Boilerplate logoHooray! I just released the version 0.8 of my very own PHP framework / boilerplate.

It has a lot of interesting features: it comes with a simple but powerful template system, as well as a secure and object-oriented backend engine. It’s also studied to be user friendly and SEO friendly. It’s based on the popular HTML5 Boilerplate.

I’ve been used it for some of my projects since march 2012. I surely can’t say Fushi is versatile like Smarty or mature like CodeIgniter; I’m not even sure on what design pattern it actually implements (update: found it: Front Controller Pattern). But I can say I successfully deployed some nice web applications based on Fushi, from the real estate agency to the musician’s website. This demonstrates that Fushi can be used in a large variety of projects, small and big.

Fushi is open source software released under the MIT license, so feel free to use, copy, modify, merge, publish, distribute and contribute to this project. Fushi was initially born on december 14, 2011, with the sole purpose of learning new programming techniques; but now, months of hard work are at your disposal. Try it, and you won’t regret.

How to create a web bug (aka beacon image)

Have you ever wondered why some web pages include a 1×1 GIF image? Well, they’re called web bugs, and they track you.

The beacon images (better known as web bugs) are basically just hidden scripts behind images. They can easily be spotted because they usually don’t end with a common image format, like gif, jpeg or png.
An example of web beacon could be this:

1
<img src="beacon.php" width="1" height="1" alt="">

As you can see, the src attribute contains a PHP script. It’s easy to find (and block) web bugs when you see that an image is served as PHP.

By the way, more generally speaking, if you see that a file ends with .jpg (it’s an image, you think) or just doesn’t have an extension (I’m inside a folder, you think)… well, you could be wrong. I can easily execute a script when an user requests a simple image ending with .jpg, and I’ll explain you how.

In order to create an hidden web bug, you need to enable the Apache’s URL rewriting module (mod_rewrite). Create a new .htaccess file and put the following code in it:

1
2
RewriteEngine On
RewriteRule ^(.*).(png|jpg|gif)$ script.php

Now create the script.php file and write some random code:

1
2
3
4
5
6
7
8
9
10
<?php
$fullpath  = $_SERVER['REQUEST_URI'];
$filename  = basename($fullpath);
$ip        = $_SERVER["REMOTE_ADDR"];
$useragent = $_SERVER["HTTP_USER_AGENT"];

echo "Path: $fullpath;<br>
File: $filename;<br>
IP address: $ip;<br>
User agent: $useragent";

a surprised cat And now try to navigate through an image, let’s say cat.gif. You’ll go to http://yoursite.com/path/to/cat.gif and you’ll expect to see a cat. Instead, you’ll see something like this:

1
2
3
4
Path: /path/to/cat.gif;
File: cat.gif;
IP address: 127.0.0.1;
User agent: Mozilla/5.0 [...];

Take a quick look at the URL in your browser’s address bar. You requested a cat.gif, but script.php has been executed instead. Kind of creepy, isn’t it? Imagine what else you could do. You can execute code. Possibilities are infinite.

How to install the Google Code Prettify plugin

If you have a WordPress blog and want to add some cool syntax highlighting for your code, you can try Google Code Prettify.

WordPress plugins are usually quite simple to use, but there are some little precautions to follow. First of all:

You shouldn’t activate it immediately, because if you do an edit while your plugin is activated, you could break it: some files could display an (inactive) label next to the file name, and all you can do to repair it is to delete and reinstall the whole plugin. Read more about this problem.

Once you enabled your plugin, you should wrap <pre class="prettyprint"> for every instance of code you have in all your articles. This can be tremendously annoying if you already have hundreds of articles in your WordPress blog, so I’ll tell you 5 quick ‘n’ straightforward steps to get around this problem.

  1. Edit google_code_prettify.php and search for this line:
    1
    
    return preg_replace_callback("/&lt;pres+.*classs*="prettyprint"&gt;(.*)&lt;/pre&gt;/siU",
    
  2. Substitute the above line with the line below:
    1
    
    return preg_replace_callback("/&lt;pre&gt;&lt;code&gt;(.*)&lt;/code&gt;&lt;/pre&gt;/siU",
    
  3. Open prettify.js and search for this line:
    1
    
    if (cs.className && cs.className.indexOf('prettyprint') &gt;= 0) {
    
  4. Substitute the above line with the line below:
    1
    
    if (true) {
    
  5. Go edit your prettify.css and delete the reference about the .prettyprint class. Then you’ll want to add some more code to avoid the awful text overflow, that often causes layout problems. Have a look at this short article from CSS-Tricks: you need that code. I’m (shamelessly) copy pasting it below:
    1
    2
    3
    4
    5
    6
    7
    
    pre {
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }
    

And that’s all. You can now enable your plugin and see your cute and readable code. ;-)

However, my solution is a bit hackish. I mean, when a new plugin update will be released, you’ll lost all the edits. If you don’t want this to happen, don’t update your plugin. Or if you’re looking for a separate, cleaner solution, I’ll suggest you reading this article (dead link).