One of my new favorite blogs to read is jQuery for designers. Mainly because the guy who runs it seems to have the same obsession for the very design elements I do and partly because he’s better at jQuery than I am and I learn something every article I read (or watch, he offers screencasts for every article which is… mmm… unique).

One of the many techniques I have needed for this next wordpress theme I’m releasing is a fading hover effect. You can see it used on Dragon Labs as well as the jQuery UI site. Unfortunately the only site is done in degradable and semantic way is Dragon Labs, but Anand doesn’t have his code readily available and I haven’t talked to him in years. So… I tore into the code available from jqueryfordesigners…

You can view their article here.

My problem with the way(s) this effect is accomplished with the technique(s) from jqueryfordesigners is that this effect is only useful to me for links, and I’m not crazy about linking using an onclick event (shame on you jQuery). So I ventured out to edit their code and see if I couldn’t do it better - and by better I mean better for my particular situation. What I came up with was a solution that allows no images to be tied into the markup. The entire process is handled without the need of inline images or extra hidden elements. I would say it was perfect if it wasn’t for the fact that every now and then it simply stops working - for no apparent reason at all.

This method is now out of date. Please view this example for a simpler, revised version that does not suffer from the bug this version does.

The demo is pretty self explanatory, but here’s a play-by-play:

Step 1:
Include jQuery.

Step 2:
Include the following code:

$(document).ready(function() {
	// find the div.fade elements and hook the hover event
	$('.fadeThis').hover(function() {
		// on hovering over find the element we want to fade *up*
		var fade = $('> .hover', this);
 
		// if the element is currently being animated (to fadeOut)...
		if (fade.is(':animated')) {
			// ...stop the current animation, and fade it to 1 from current position
			fade.stop().fadeTo(500, 1);
		} else {
			fade.fadeIn(500);
		}
	}, function () {
		var fade = $('> .hover', this);
		if (fade.is(':animated')) {
			fade.stop().fadeTo(500, 0);
		} else {
			fade.fadeOut(500);
		}
	});
 
	// get rid of the text
	$('.fadeThis > .hover').empty();
})

Step 3:
Form your html using a similar pattern:

<a class="fadeThis" href="http://greg-j.com">
	<span class="hover">This content is hidden</span>
</a>

If you know why this effect seems to randomly stop working - or better yet, how to fix it - please let me know.

This is a small post made in hopes it reaches a JavaScriptdeveloper, who in turn passes it along to another, then another, so-on-and-so-forth…

I use jQuery with nearly every project. While I find it easier and easier to roll my own JavaScript, I’m not one for reinventing the wheel. If a plug-in exists that does what I want, I’ll use it. The first thing I do is check if they have a packed version (size matters). If not, I pack my own. My problems start when developers don’t have a packed version already available. Chances are, if they don’t have a packed version available, it’s because the JavaScript packer breaks their code. Not because it’s bad code, and not because there is something wrong with Dean Edwards packer, but because when code is packed certain operations are changed if the code isn’t written perfectly.

Enter JSLint. Think of JSLint as the W3C Validator for JavaScript. If your code passes inspection (you can essentially ignore repeatedly assigned vars), it will pack.

Tonight I’ve had to fix not one, but two jQuery plug-ins to make them available for packing. The first is the preloadCssImages plug-in from the filament group (amazing developers I might add) and the second is FancyBox by some guy called KAC. I’m not calling anyone out, rather hoping to make people aware of JSLint. It only takes a few moments to go through your code, and the result is a much lighter footprint in most cases.

I’ve contacted the creators of their respective plug-ins, but if they don’t post the fixed, here they are:
preloadCssImages
FancyBox

I’ll have another post in the next 24 hours releasing a free wordpress theme, so stay tuned!

I’m tired of using the word “awesome” to describe things that are awesome so I went with majestic instead. Awesome, huh?

Rather than get techy about Google’s new AJAX Feed API I’ll focus on their much easier to understand wizard for creating a very simple AJAX Feed widget. To do that though, I need to cover the AJAX Feed API so much to say that it’s a way for you display snippets of an RSS Feed - or multiple RSS Feeds - on your website without doing anything more than click a button.

You can find the Dynamic Feed Control Wizard Here.

Type the name of your blog in the textbox and click preview. As long as you’re indexed by Google Blog Search, your feed will show up. Don’t worry if it doesn’t though, it’s easy to change the title and feed(s) you want to display.

For instance, if I wanted to get rid of the Twitter flash widget to the right here and replace it with the vertical feed widget from Google I would simply look in the code for this (assuming I had just generated one for my blog of course):

title: 'Greg-J',
url: 'http://feeds.feedburner.com/Greg-jcom?format=xml'

and change it to

title: 'Twitter',
url: 'http://twitter.com/statuses/user_timeline/14853318.atom'

And it would display a nice little feed of my most recent tweets in the right column of this site. Doing so however, I would also find that the style of my theme makes it look ulgy and I would have to go back to the flash widget until I had time to style it nicely…

Note:
I just realized that by typing twitter grilla it pulled up my twitter feed, so I’m assuming it’ll find your twitter feed by simply typing in twitter username too.

I kid you not, it wasn’t more than a week ago I was thinking to myself “I need to make a service that creates cool ajax feed widgets for people to display” - so when I saw this today I had to share it. I’ll definitely be integrating these into the new profiles on MySpace Pros.

This is the second time I’ve written this article so it’ll be much shorter now. Damn you back button!

I’ve been using vBulletin to create a webmaster social network at MySpacePros.com for the past month now and while it has all the features I need, I can’t imagine using vB for a social network that wasn’t aimed towards webmasters. As awesome as it is, it’s a beast to work with. What would I use then? WordPress. Or more specifically, BuddyPress. Take that last sentence with a grain of salt though, because I’ve never actually seen it in action. This is all just speculation.

Given automattic’s track record with offshoot products, I’m going to go out on a limb here and say that while well-implemented, these new features are going to be light. Let’s take a quick look at those features. Again…

Extended Profiles
This should be “Extensible Profiles” as you need to do all the leg work. It works much like the Custom Fields option in wordpress. Well, exactly like it actually.

Personal Blog
Opening the door to use WordPress as a competitor to wordpress.com, users will get their own blog at either “/membername/blog/” or “/membername.domain.com/blog”. Finally!

Private Messaging
An internal mail system between users is pretty mandatory.

Friends
The friends aspect is tied into the Extended Profiles so you can match make based on those fields. Very Cool.

Groups
The most notable part of the Groups feature is the (option?) ability to tie it into bbpress and give each group their own discussion forum. Keep something in mind though: When you do this, it will kill a lot of forum activity - which is why I haven’t and probably won’t do it on MySpacePros.

The Wire
Apparently The Wire is the name for the bastard child of a 3-way between twitter, myspace’s profile comments and facebook’s The Wall…

Albums
One of the best ways to get traffic from Google.

Status Updates
I.e: Mood. Not important enough to make a bullet in my opinion.

It may seem like I’m being hard on BuddyPress, but I’m not. They’re just a couple years late to the party and they didn’t dress for the occasion. I’m sure it’ll provide a good foundation for the community to improve on, but at least it’s something.

This is an update to a post made earlier today.

Last week I posted a Cushy CMS review that received quite a bit of attention. A few people expressed interest in the flat file CMS that I mentioned I use internally, so I wanted to post it. From this point on I’ll refer to it ask Skeleton.

You can grab it here: Skeleton: flat file CMS

Cushy CMS bills itself as an online content manager created to “take the work out of managing content” that is “Super. Easy. To. Use.”.

Account creation takes less than 30 seconds from start to logged in. They score big points from me on this. Had it not been so fast I wouldn’t be doing this review. Anything that makes me click a link from my email to verify an account and then manually enter my login details irritates me enough to pass it by completely. You can get signed up and start using it faster than you can type this sentence.

Once you’re logged in, it works like this:
You set up a site like you would in any other IDE. Tell it the name of the site, FTP info and where your root folder is. Anyone who has used DreamWeaver or something similar to create a Project/Site won’t have any issues here. No software is installed on your server and nothing runs on their server, which is where I have a problem with them call this a content management system. It’s more like a RCE (remote content editor).

For every file you want to be able to edit with Cushy CMS you must first create the file in your offline editor and apply the class “cushycms” to any section of the page you want to edit. You can make the heading and content editable or the whole damn page, it’s up to you. Once you do this and upload the file you’ll be able to log into Cushy CMS and edit those sections from there using their simple (read: vanilla) WYSIWYG editor.

That’s it. That is Cushy CMS. Well, mostly.

The value in Cushy CMS - it’s free by the way - is in that you can create these simple sites for clients and then give them access to edit their sites. Giving them access is as stupid easy as creating an account as well. The downside to this free account is that they go to cushycms.com to log in and see the cushycms branding. Somewhat unprofessional, no? The $28 a month pro account however, gives you completely white-label branding and allows you to assign it to any domain of your choice. You don’t get the software, but it’s on your domain with your logo and to your clients it just looks like you have your stuff together.

My opinion of Cushy CMS is that it fills a niche very well. These guys saw a hole in the market and gobbled it up. The interface is nice and it just works. It’s easy to understand and easy to implement (albeit time consuming). However, it is not - in my opinion - a CMS. It allows you to edit content on a per-page basis. The content has to physically exist on your server and it’s all static unless you build yourself a flatfile CMS of your own (if you want one, I’ve got one I use personally. Comment below and I’ll send it to your email address). Cushy CMS isn’t going to replace WordPress, but for what it is, it’s great.

In the process of writing the new WebMaster Marketplace over at MySpacePros I used InnerFade for jQuery and realized it wouldn’t work when it was packed with Dean Edward’s packer. I found the issue and fixed it (just a missing semi-colon), but contacting the creator didn’t go so well (Anyone speak German?) so I figured I’d post the fix here. That and it’s been a while since my last post.

If you’re wondering, it’s line 69. $.innerfade = function() {} should be $.innerfade = function() {};. If it’s not, it won’t compress.

Download InnerFade for jQuery (fixed and packed)

It’s been a week or so since my last entry and for the sake of keeping the momentum going I’ll write about one of my upcoming projects, tentatively called cart.

In my opinion there just isn’t a great solution for those people who want to sell digital goods online. There are numerous solutions, but of the dozen or so I have used I don’t really like any of them. So naturally, I’ve commissioned my own.

Here’s a sneak peak into a piece of software I’m think is going to be big. The development version is off-site as I don’t want anyone messing with it, deleting customers, that sort of thing - but I do have examples of the front and back ends up.

The first template can be seen here. I haven’t had the time to put it into code, but the overall look and feel is there. I’ve had to start over 3 times on this layout because I’m trying to make one that is plain so it’s easy for people to edit but my creative side is getting in the way still. I’ll probably get someone else to make a theme since I can’t seem to focus on a generic one.

The admin side is much more complete. You can get a good idea of the functionality from these pages:

• AdminCP Index
• Customers
• Mass Email / Newsletter
• Transactions
• Create a Transaction
• Manage Product Assets (images, files, etc)

Questions, comments, feature requests. I’m all ears.

About once a year I’ll spend a day - sometimes two - evaluating IDE’s. I’ve been using Dream Weaver for the longest time, but for me it’s basically a glorified text editor with half decent code completion and syntax highlighting I’ve grown accustom to. It has almost no features I would like and my main complaint is it completely taxes one of my cores. I didn’t buy a quad core processor so a text editor could use 25% of my available horsepower even when it’s sitting idle.

Earlier this year I found the new - and always free - Aptana. Overall it’s good software. I wouldn’t say great, but it’s good. The problem with it also lies in its strength: It’s written in Java. It can be used on any platform, but it can be painfully slow when double clicking on files in the file browser and that’s a deal-breaker for me. It has some interesting features (like built-in FireFox preview) and for those looking to save their pennies, it’s by far your best option. I spent a few days here and there with it, but it never stuck. I spent a lot of time trying to configure it, but it just never felt comfortable.

So today I get a message from a developer and good friend of mine Tully that simply said “I found the best PHP IDE EVER. It’s like Zend, but not sh*t. It’s called PHPEd“ I took notice because that’s pretty good praise from him as he’s a bit on the cynical side. So I checked it out. The first thing I have to say is this:

I will never use another IDE for Web Development again.

There is nothing this IDE doesn’t do. For starters, the code completion and syntax highlighting which are my two biggest concerns are excellent and highly configurable (much like the entire IDE). The project management (including FTP) is top notch as well. You can assign different projects to the same domain with different subdirectories which is a feature I’ve never seen before. If this is all it did I would have switched just for these features. The implementation of these features is that good. Some of the things I wasn’t expecting was:

• Built-in SSH (being logged into the server you’re working on in a tab right next to the site you’re working on is priceless). I used to use a great program for this called SecureCRT (think putty, but better acct. management and a tabbed interface), but now I don’t need to have a separate application open just to log into a server. Depending on the kind of developer you are, this is a huge feature.
• Built in php4 and php5 engines running simultaneously. To top it off, it won’t have any effect on any other instances of php running on your machine - which is important because I use wamp5 religiously (who wants to have to upload a file every time they want to see their changes live?).
• Built in preview for IE and FireFox. Everyone has IE preview in their IDE, but the FireFox preview is a real gem in this genre of software. Aptana had it, but last I checked installing it was a pain (that may have changed now that it’s not beta). With PhpEd, it was a check box during install.

Those are the features that really stuck out for me. I would suggest anyone give it a try, you might be surprised. You’ll probably want to hit the Settings and spend a good amount of time in there as a lot of things just don’t feel right out-of-the-box. The delay for code completion (which is the best I’ve ever seen) needs to be reduced and some of the editor options should be played with to get the right feel, but overall I would give it 5 out of 5 stars. It is, by any measure, the perfect Web Development IDE. Period.

This is a very early version of what will become a class for dealing with url rewriting. I spent some time looking for url handling classes and while I found one I really like, it was just too much for what I needed in this case. Keep in mind the only thing this piece of code does right now is create an array. I’ve called this array $_PATH as it seemed to make sense considering its purpose and how it’s derived.

The .htaccess file is as follows:

Options +FollowSymLinks


	RewriteEngine on
	RewriteCond %{REQUEST_FILENAME} !-s
	Rewriterule (.*) index.php

This will take any request url and forward it to index.php leaving the URI intact. You can change index.php to anything you like and it does work in subdirectories.

<?php
 
// We need to the get the path to THIS file so we know where it's located.
$url_current_location = substr($_SERVER['PHP_SELF'], 0, strrpos($_SERVER['PHP_SELF'], "/")).'/';
 
// We also need the full URI from the address bar.
$url_full_uri = $_SERVER['REQUEST_URI'];
 
// By removing everything the path to THIS file from the full URI we are left with nothing but the our $_PATH variables.
$url_rewritten_uri = str_replace($url_current_location, '', $url_full_uri);
 
// If $_GET variables are set, remove them from $_PATH
if($_GET)
{
	$url_rewritten_uri = substr($url_rewritten_uri, 0, strrpos($url_rewritten_uri, "?"));
}
 
// Create the $_PATH array. Think of this is as simliar to a $_GET or $_POST array, but we're left with an array that contains our rewritten path.
$_PATH = explode('/', $url_rewritten_uri);
 
// Remove empty values caused by multiple or trailing slashes.
while(list($key, $value) = each($_PATH))
{
	if(empty($value))
	{
		unset($_PATH[$key]);
	}
}
 
// I want the total number of values in $_PATH so that later on I can easily find out how many segments are in the requested path.
$path_segment_count = count($_PATH);
 
// Now we'll add the segment count to $_PATH to make retreiving the segment count more convenient.
// In case there were multiple or trailing slashes in the URI, this will also reset the array keys to start at [0] and increment by 1.
$_PATH = array_merge(array($path_segment_count), $_PATH);
 
?>

Unless you’re comfortable with php this isn’t going to do you any good, however hopefully with some feedback it will shortly. You could use a hard-coded switch/case to call your files based on the URI or you could set up a table and a simple db structure for it. Either way I’m all ears for feedback and if you have any links to url rewriting classes that aren’t on phpclasses.org I’d appreciate a nudge.