The proper way to include Javascript in your (X)HTML page

It’s 2008. The type attribute is useless and ignored in presence of a src attribute. There’s no better time than now to start including <script>s on your pages the right way. And that is:

<script src="http://some.server.address/path/to/your/jsfile.js"></script>

That’s all there is to it. Remember to place those at the end of your document structure, just before the closing </body> tag, it’s faster that way.

Javascript videos you shouldn’t miss

Here’s a list of must-see Javascript videos:

Not that these can replace a good book, but some of the stuff in there is pure gold.

“Mac or PC” Rap Music Video – Mac vs PC

This one actually doesn’t suck quite as hard as the other stuff on the subject. Really.

Thanks for all the NotchUp invites. I’ll pass for now.

I guess the PR in NotchUp is strong. Resistance is futile. It’s been-know-to-work-before viral.

I received the first invite from Ivan Brezak Brkan on January 25th, and they’ve been pouring in from all sides ever since. Thanks all, but I think I’ll pass for now.

Che: Živi sam vrag, a zovu me Tatjana Jurić!

:)))

Server-side Javascript — finally damnit!

The Aptana dudes announced Aptana Jaxer. Ignoring the buzzy “ajax server” bullshit for the moment, what we have here is promise of greatness. It’s more fun than a stick. Really.

Expect a more detailed review in the following days, once I get the chance to actually do something with it.
Watching 6 consecutive episodes of Californication kind of exhausted me.

Extracting images from HTML using regular expressions

Ever had the pleasure of extracting some <img src="..."> from the HTML tag soup called the Internet? I did recently. The amount of invalid or “custom” ways people embed an image inside some HTML document is just mind blowing. Here are some examples:


<img src="http://www.asdf.com/some-image.gif" width="x" height="y" border="0" />
<img border="0" alt="" src="http://www.asdf.com/some-image.gif"/>
<IMG ALT="" src='http://www.asdf.com/some-image.gif'>
<IMG ALT="" SRC = 'http://www.asdf.com/some-image.gif' >

And so on, and so forth… /sigh

Just imagine every possible combination of mixed quoting styles, arbitrary spacing between attributes, lowercased, uppercased, etc. The differences are sometimes subtle (and not to mention invalid HTML), but people are blind to the fact that browsers are correcting their tag soup for them.

But I was on a mission: given some HTML string, I needed to find the first occurrence of an <img> element and get that <img> element’s src attribute value.

To keep things short, sweet and to the point, here’s the PHP function I slapped together:


    /**
    * Searches for the first occurence of an html <img> element in a string
    * and extracts the src if it finds it. Returns boolean false in case an
    * <img> element is not found.
    * @param    string  $str    An HTML string
    * @return   mixed           The contents of the src attribute in the
    *                           found <img> or boolean false if no <img>
    *                           is found
    */
    function str_img_src($html) {
        if (stripos($html, '<img') !== false) {
            $imgsrc_regex = '#<\s*img [^\>]*src\s*=\s*(["\'])(.*?)\1#im';
            preg_match($imgsrc_regex, $html, $matches);
            unset($imgsrc_regex);
            unset($html);
            if (is_array($matches) && !empty($matches)) {
                return $matches[2];
            } else {
                return false;
            }
        } else {
            return false;
        }
    }

The crux is in the regular expression used: <\s*img [^\>]*src\s*=\s*(["\'])(.*?)\1, which passed several simple test (and a few edge) cases for me.

I’m no regex master, so it can probably be improved and/or optimized (performance-wise).

P.S.
Test data was obtained by grepping some 80+ different RSS and ATOM feeds which contained (x)html escaped and unescaped in so many ways it was just hilarious.

So, depending on your (X)HTML corpus, YMMV, but I hope you find this function useful somehow.

How to make your “Balance black” theme “widget-friendly”

Ok, today I started playing around with the plugins a bit, and wanted to use the widgetized sidebar here on my blog. Once I turned on the widgetized version in the admin interface, and put the proper blocks in place, the search block was messed up and it didn’t look exactly like it should.

A couple of minutes later, I changed the html that is generated in the widgets.php file to match the output that the theme’s css file is expecting.

Here’s the modified function to replace the function of the same name in wp-includes/widgets.php of your WP installation:


function wp_widget_search($args) {
	extract($args);
?>
		<?php echo $before_widget; ?>
			<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
			    <fieldset>
			        <div class="field">
			            <input type="text" class="input_text" name="s" id="s" size="15" />
			            <input type="image" alt="<?php echo attribute_escape(__('Search')); ?>" src="<?php bloginfo('home'); ?>/wp-content/themes/balance-black/i/s.gif" id="searchsubmit" class="input_image" />
			        </div>
			    </fieldset>
			</form>
		<?php echo $after_widget; ?>
<?php
}

Also, here’s a handy wp_widget_search.diff file against the default 2.3.2 wp-includes/widgets.php

The industry sucks, but such is life.

Yesterday Maratz wrote about something that easily gets people going: You’re Not a Programmer, We Won’t Pay You That Much

The real reason for the current state of things is lack of education of people across the market. But that’s not going to change.

So, as in any other industry, it’s up to us to work within the parameters — great clients, idiot prospects, non-payers, slow-payers, big-payers, competition, ever-changing technology… No business is free of those. We need to adapt and make the parameters work in our favor.

Not taking things to heart is the first step :)

CSS and sub-pixel issues.

The current state of things.