So this is kind of cool. SkeletonCMS has been included on OpenSourceCMS.com.

I’ll definitely have to spend some time to flesh it out, but since it’s an official OSS project, those of you who would like to contribute to the Skeleton flat file CMS please leave me a message.

This is most likely the last - or one of the last - posts I will make before the Greg-J.com redesign. I love this theme, but the site no longer reflects my interests or represents my thoughts the best way it could.

Before redesigning it though, I wanted to share the design with everyone in a way that would let me be creative. I’ve developed a WordPress theme called WP CODA. There isn’t much to say about the theme I haven’t already posted about on the demo. It uses WordPress Pages instead of Posts, but other than that - it’s pretty self explanatory. I hope you enjoy it.

Visit Bustatheme.com to download WP CODA.

CSS-TRICKS.com is another feed in my Snackr roll, and a visit there never disappoints. Recently they finished up a 3 part series on designing a wordpress theme and rounded it off with a download to the theme pictured above. I like the idea of the theme and its straight forward approach, so I thought I’d share the find.

Visit ChrisCoyier.net to see the theme in action. Download it here.

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 use about 2 dozen applications on a daily basis that aid in everything from domain purchasing to web design, but these are 4 I couldn’t live without regardless of what I was doing.

TaskSwitchXP

By itself, TaskSwitchXP is a replacement for the Alt+Tab task switcher built into Windows XP (I refuse to Vista, so this one is for XP folks only). If you have a Logitech G5 /G7 - or any other mouse with programmable buttons - you can assign the thumb button to Alt+Tab and any time you press it, this task switcher will pop up, using the scroll wheel to cycle through your applications. Release the thumb button to select that app. This makes switching your applications amazingly fast. There’s an even better application called TopDesk, but I chose to give up awesomeness for speed. It’s basically Expose` for Windows.
Vista Users: You can get this effect for free

RKLauncher

Another OS X `esque app I couldn’t live without is RKLauncher. It hides the windows taskbar (optional) and gives you an application launcher that stays out of the way but gives you a much more refined way to access your applications . The real benifit to me other than it looks cool is that it gives me more screen real estate. There are other docks (ObjectDock, RocketDock) but RKLauncher is the simplest and has the fastest response when you start to get several dozen icons going. My personal favorite is ObjectDock because it has so many options and features, but it can get too slow. Again, I prefer speed over wow. My only beef with RKLauncher is that it fails to hide the windows taskbar all the time on my machine. I don’t care though because I keep my taskbar on the left side on auto-hide so I can hit the Windows key and bring up my start menu.

GreenShot

The most useful feature of GreenShot is that when you hit the PrtScn key on your keyboard it gives you cross hairs you use to outline a region of your screen you want a screenshot of. You can set it to save it to a folder somewhere or put it on your clipboard. There are other options as well as a built-in image editor as well, but I don’t use them. In this industry there’s always a need to show someone something on your screen and this little tool helps a lot. (It’s also free and open source)

Snackr

This is the newest addition to my desktop apps and I don’t know how I lived without it. Snackr is a desktop RSS Reader built with Adobe AIR. It sits on any side of any monitor (native support for multiple monitors) and scrolls through entires from your RSS feeds. You can easily hide it or let it sit on top of open windows. It’s so badass I no longer use Google Reader which until yesterday was my absolute favorite RSS Reader of all. I still add my favorite feeds to both so I can get my fix when I’m on the road. Snackr is a perfect example of Desktop 2.0 and a beacon of excellent widget design.

I have often looked for design inspiration in automobiles, but I’ve never seen anything quite like this.

There’s nothing I can add to this by rambling on about my impressions, so I’ll be a lazy poster today and leave you pictures.

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