One of the biggest problems I've always had with maintaining a blog is the maintaining part. I often find myself too busy, too indifferent, too burned out or, more often than not, too brain dead to care. With the advent of Twitter, things have gotten even worse. I no longer have to sit and think about how to make a worth-while blog post based on a single, tiny string of thought.

Thanks to Twitter, blogging, for the most part, is pretty much dead. Want to share something cool? Well, you no longer have to write a few paragraphs about it, just post the damn thing to Twitter or even Facebook. Thanks to software like TweetDeck, and other push notification services, I can not only post to multiple twitter accounts, I can even update my Facebook status; all with a single click.

Publishing minutea is now easier than ever and you don't have to spend hours making 5 paragraphs from a simple 140 character message.

So, it is because of this small problem I threw together another Posterous integration script. This is basically a cron script I run once a week from the main site which pulls all of my tweets from the previous 7 days, compiles them into a digest and publishes them to my default Posterous blog.

As you can see from my previous entry it's already working. I figure this is a great stop-gap measure which keeps content flowing to the site in between real blog posts.

There are times when I just don't have the time or energy to spend on a decent blog post. As you can see from my archives, good and worthwhile entries are few and far between. Hopefully, this won't always be the case, but at the moment small measures such as this will have to do.

If anyone is interested, I threw this script up on my Github account as a public repository. Feel free to fork it and create something better. It isn't the prettiest block of code I've written, but I prefer the KISS method for something like this.

Here's to Twitter and micro-blogging!

Loading mentions Retweet

Yeah, yeah, I know it's been a while, but I've been working on a super-secret project for the past few months. After which, I'll find the time to finish Great British Walks. Speaking of which, I should probably shoot myself in the face because it's been in development in some form or another for the past few years. Not sure what my problem is as I usually finish my contracted projects post haste. Honestly, Pete is the most patient guy in the universe... and I suck.

ANYWAYS... A lot of people have been asking about MyTopix lately and where they can download a copy. I'm assuming the memo didn't go out to everyone, so I'll just say it again. MyTopix is no longer supported by me in any shape or form. It is an open source project now and can be forked by anyone who wants to keep the project alive.

For those of you who are interested, you can ALWAYS find the LATEST build tucked away in its Google Code repository.

Seriously, it's right there. Check it out, create a fork and publish your own distro. If you people like it so much, go ahead and keep it alive and you'll definitely have my full backing.

Loading mentions Retweet

Hey guys! I've been trying to be a bit more active lately and provide you all with some decent articles. So, because of this, I took some time off my busy schedule last night to sit down and teach myself how to create jQuery plugins. I was trying to figure out what I could develop that would be useful when I was reminded of how many times I tried to implement a javascript-based tooltip solution.

There are plenty of these plugins out there that are dedicated to display tooltips, but I wanted a dirt-simple implementation that didn't require me to mull about CSS code and compatibility issues.

So, I wrote a little plugin that addresses all these inconvenient issues; qTips.

Why 'qTips'? Well, you can quickly add tooltips. So, it's actually quick tips, but qTips sounds catchier.

A Demonstration

Actions speak louder than words, so before I go into this plugin's details, I thought I'd show you all a proof-of-concept demonstration. Just hover your mouse pointer over the boxes and you'll see what happens. A pretty little tooltip will fade in and out with your mouse movements.

For more people, this is all they need.

Implementation

First, you might want to download the plugin package. You'll notice that it comes with the same demo page that I previously linked to.

This plugin is implemented like any other. After you link to your jQuery library's location, you place the following immediately after:

<script src="/path/to/plugin/jquery.qtips.js" type="text/javascript"></script>

Since we need to style the basic implementation of the tooltip, we should add the following CSS to one of your stylesheets:

div.qtip-wrapper {
    z-index: 999;
    text-align: center;
    position: absolute;
    font-size: .9em;
    width: 250px;
    background: transparent url(arrow.png) no-repeat scroll center bottom;
    color: #fff;
    padding-bottom: 5px;
    display: none
}    

    div.qtip-wrapper div {
        background: #333 none;
        padding: 5px;
        font: normal normal .9em/1em "Arial", verdana, sans-serif;
    }

You can substitute the above background image with anything you want, so long as the position information is still intact.

Next, you just implement the plugin and assign it to a selection of some kind. Take the following markup located within the <body> element of a document, for instance:

<body>
    

Simple enough, but you'd like to include a tooltip that displays some image meta data when someone hovers their mouse over the image. To do this, you just add the following within your document:

<script type="text/javascript">

    $(document).ready(function()
    {
        $('img#product-image-5').qtip({content:'Here is some image info...'});
    });

</script>

This tooltip is now applied to every element within your document that matches the specified selector. Of course, while using jQuery, you can apply a tooltip to just about anything within your page with a single line of code.

Configuration

While this plugin may be a simple tooltip implementation that doesn't mean it lacks functionality. There are several configuration options that you can choose from to fine-tune your tooltips so they display exactly how you want them to. Here is a quick breakdown of the current configuration items and their default values:

container

default: 'qtip'

usage: $(selector).qtip({container:'qtip'});

This allows you to specify a default prefix for the ids assigned to the tooltip elements themselves. Since there may be multiple tooltips displayed at any given time, an incrementor is used and suffixed to the end of the container name to prevent naming conflicts.

content

default: blank

usage: $(selector).qtip({content:'Why, good DAY to you, sir!'});

This is the content you want to display within your tooltip. It can be a string, html markup or even a DOM object.

position

default: 'center'

usage: $(selector).qtip({position:'center'});

choices: left, right, center, bottom

This setting defines the position of the tooltip relative to the matched element.

nudge_top

nudge_top: 10

usage: $(selector).qtip({nudge_top:5});

How many pixels above the matched element you'd like the tooltip to be displayed.

nudge_left

nudge_left: 0

usage: $(selector).qtip({nudge_left:5});

How many pixels to the left of the matched element you'd like the tooltip to be displayed.

Callback Functions

qTips comes with 4 built-in callback functions that are triggered during various phases of the tooltip display. All functions pass the object of the currently matched element as well as the object of the current tooltip.

preRender(e, tip)

usage: $(selector).qtip({preRender:function(e, tip){}});

This is triggered immediately after your mouse enters the boundaries of the matched element, but before anything is actually processed for display.

postRender(e, tip)

usage: $(selector).qtip({postRender:function(e, tip){}});

This is triggered last in the tooltip process; immediately after the tooltip fades away.

onShow(e, tip)

usage: $(selector).qtip({onShow:function(e, tip){}});

This is triggered when the tooltip is pushed out for display.

onHide(e, tip)

usage: $(selector).qtip({onHide:function(e, tip){}});

This is triggered when the tooltip disappears.

Conclusion

This is my very FIRST jQuery plugin, so please, be gentle. I could always use some suggestions and bug reports. I'd like this to be useful for everyone and not just me, so if you'd like to see something that can easily be implemented or you find an instance where it's not working properly, just send me an email or post a comment here.

This has actually been quite a pleasant experience. You don't fully realize the potential of jQuery until you actually take the time to build something off of the framework. Good stuff all around!

I hope you enjoy using it just as much as I did writing it!

qTips for all images:

Thanks to Nick for his lovely comment below, I have decided to post a quick snippet on how you can add a qTip to every image on a page. Just use the following code:

$('img').qtip(
{
    wrapper: 'body',
    position: 'right',
    onShow: function(e, tip)
    {
        $('div', tip).empty().append('


Download

In case you missed it, here is the download link!

You can also find the official qTips project page here on jQuery's plugin repository.

Loading mentions Retweet

My partners and I decided that it was best to open up free listings again at FlipSquare, so I went ahead and did just that. You can read more about it here.

At the moment, everybody has too little time on their hands to devote to the project. I'm ready to go, but as the sole developer I think I've done my part for the moment. I'll continue to passively market the system, but until the entire team is ready to throw in a few hours a week, listings will be kept absolutely free.

This is good for a number of reasons. The biggest two all being that we need more exposure and we need to iron out any possible issues before people start going nuts and posting their stuff.

We'll get more people now because everybody loves free shit and the more people we have, the more issues we'll become aware of. The more issues, we know of, the more fine-tuned FlipSquare will become. Once the system is rock solid - and it's pretty close as is - we'll start with our sister sites.

Adult Flip here I come!!!

Loading mentions Retweet

Just to, ironically, show how far behind I am of current web design trends and projects, I'd like to post about something cool I found today.

I've been working on a project for my new boss to implement a ribbon-styled (think Office 2007) navigation system for our intranet homepage. The problem was that a 2-columned layout ate up far too much real estate on our pages. The left column being used for second-level "drill-down" navigation and the right for displaying content. A ribbon-styled navigation system allows you to free up all that space so you have plenty of room for displaying all sorts of data.

Well, this particular ribbon is supposed to work identically to Office's implementation. This includes the fade-in hover effects on the highlighting bars. No problem with modern browsers. Just use some simple CSS and some quick jQuery action and you're good to go. Unfortunately, 95% of our users are all stuck on IE6. That means no native support for alpha-transparencies in PNGs, no hover effects on anything but anchor tags and no full support of CSS selectors.

The way the ribbon system was initially styled works perfectly in IE7, FF2 and 3, but fails miserably in IE6. After putting hours into finding a solution, I was about to call it quits and just create a separate stylesheet for IE6. Did a bit more searching before giving up and came across a mention on Veerle's Blog of an awesome JavaScript library that causes IE5 and 6 to mimic common behaviors of IE7.

Written by Dean Edwards, this simple library fixed about 99% of the issues I was having with cross browser compatibility. He currently hosts the project on Google Code and is quite easy to implement.

Just place the following in your HTML:

The only inconvenience for me was to rename all my transparent PNG images to include the suffix of '-trans' before the extension. So, for instance, awesome-wow.png has to be renamed to awesome-wow-trans.png for the alpha-transparency hack to work.

Aside from a slight image flicker when the page first loads, this thing works perfectly.

Yes, I am fully aware this thing has been out for close to a year now, but I've never had issues with IE6 that were serious enough to necessitate the need to search for such a robust solution.

Kudos, Dean!

Loading mentions Retweet

I went ahead and threw together a campfire service that allows you to utilize an already existing membership system from a 3rd-party application you might already be hosting on your site. Basically, if you have a supported application installed and a user, who is logged into said application, visits your Symphony site, this service will generate XML with their logon information.

What this allows you to do is create members only areas within your Symphony install. Let's say you have a Vanilla forum on your site and you only want your Vanilla users to be able to comment on your blog articles. All you have to do is attach the appropriate datasource to your page or master wrapper and then put something like the following in your XSL template:

<xsl:choose>
    <xsl:when test="external-member-check/registered = 'true'">
        SHOW COMMENT FORM
    </xsl:when>
    <xsl:otherwise>
        Sorry, only forum members can comment ...
    </xsl:otherwise>
</xsl:choose>

Now you can create members-only areas within your site. I also have the datasources returning the user's group id ( if applicable ), so you can show different types of content / functionality based on group assignments.

Here is the XML that's returned:

// When logged in:
<external-member-check software="vanilla">
    <name>Wilhelm Murdoch</name>
    <registered>true</registered>
    <id>5</id>
    <group>2</group>
</external-member-check>


// When NOT logged in:
<external-member-check software="vanilla">
    <name>Guest</name>
    <registered>false</registered>
    <id />
    <group />
</external-member-check>

So far there is support for the following forum solutions: MyTopix, PunBB, Vanilla

I need some testers to help out with... testing. Also, if you want to create more datasources for different applications, go ahead and send your finished versions to me and I'll add it to the service. Credit, of course, will be given to the code authors.

A link to the download at Overture. Scroll to the bottom of the first post.

Loading mentions Retweet

If you're like me, you always come across weird situations where you need to check for some obscure configuration item or other piece of information. Well, this was the case for me just recently.

I needed to create a function that would check how PHP is loaded into Apache; whether it's loaded as a module or CGI extension. Since I couldn't find a built-in PHP function that checks for this, I had to think a bit 'outside the box', so to speak. The only other place I knew of that actually displayed this type of information was when invoking the phpinfo(); function.

I then figured I could use output buffering to capture the information generated by phpinfo();and then just use pattern matching to get the item I wanted. Simple, yes, but a kind of out-of-the-way solution just to get to some information that should be easily accessible through less obscure means.

The following is the end result of my brainstorming:

function loadedAsModule()
{
    ob_start();

        phpinfo(INFO_GENERAL);

        $output = ob_get_contents();

    ob_end_clean();

    if(preg_match_all('/<tr><td class="e">(.*?)</td><td class="v">(.*?)</td></tr>/', $output, $parsed, PREG_SET_ORDER))
    {
        foreach($parsed as $entry)
        {
            if(trim($entry[1]) == 'Server API' && preg_match('/apache/i', $entry[2]))
            {
                return true;
            }
        }
    }

    return false;
}

There you go, just call the function and it should return either TRUE or FALSE.

Not the most elegant piece of code and I'm sure it could be trimmed down quite a bit, but I thought it would be nice to share it with others in hopes that they won't have to deal with the extra headache. It could also be easily modified to check for just about any configuration item that phpinfo(); spits out.

Enjoy.

Loading mentions Retweet

Hey, peoples! If you're a retarded stat monkey like I am you'll appreciate this one. I threw together a script that spiders an entire given directory and returns how many lines of code, bytes, files and sub directories there are. One of those strange curiosities I had, I s'pose. Anyhow, you're free to play with it. I tend to write useless bits of code that amuse me with equally useless statistics.

You will need PHP 5.1 or newer to use this function as it utilizes some objects found only in the 5.x builds.

These are the results I get when I run this function on the latest build of MyTopix:

MyTopix Stats: ( for php and css files )
----------------------------------------
30        Directories
109       Files
58,372    Lines
2,524,811 Bytes

To use this function just copy and paste the following block of code in a php file or, alternatively, just download the package in the link I provided at the end of this entry.

<?php

/**
* A recursive directory iterator that spiders and generates meta
* data for a given path. Will return information only for files
* whose extensions match the ones specified within the $filter
* parameter.
*
* This version ignores subversion directories (.svn), but can be
* modified to include others.
*
* WORKS IN PHP 5.1 AND UP!!!
*
* Usage:
* ==============================================================
*
* $meta = metaSpider('/path/to/project/');
*
* echo "<strong>Bytes:</strong> {$meta['bytes']}<br />";
* echo "<strong>Files:</strong> {$meta['files']}<br />";
* echo "<strong>Lines:</strong> {$meta['lines']}<br />";
* echo "<strong>Directories:</strong> {$meta['directories']}";
*
* @param $directory The directory to spider
* @param $filter    Extensions of files to search
* @return Array
*/
function metaSpider($directory, $filter = array('php', 'xsl', 'xml', 'tpl', 'css'))
{
    $count_directories = 0;
    $count_files       = 0;
    $count_lines       = 0;
    $count_bytes       = 0;

    $iterator = new RecursiveDirectoryIterator($directory);

    foreach(new RecursiveIteratorIterator($iterator, RecursiveIteratorIterator::CHILD_FIRST) as $file)
    {
        if(false == $file->isDir())
        {
            if(in_array(end(explode('.', $file->getFileName())), $filter))
            {
                $count_files++;

                $count_bytes += $file->getSize();
                $count_lines += sizeof(explode("n", file_get_contents($file->getPathName())));
            }
        }
        else if(false == strpos($file->getPathname(), '.svn') && $file->isDir())
        {
            $count_directories++;
        }
    }

    return array('bytes'       => $count_bytes,
                 'files'       => $count_files,
                 'lines'       => $count_lines,
                 'directories' => $count_directories);
}

?>

Package: meta-spider.zip

1. Download

Loading mentions Retweet