So I am feeling a little behind in the trends when it comes to Javascript toolkits right now. In the last few days I have been asked like 5 times if I am familiar with jQuery and I had to say no. I’m not sure why I haven’t taken some time out to check out the likes of JQuery, MooTools, etc….Probably because I have used a small handfull of toolkits over the last few years and I have come to realize that even though most frameworks have good and bad parts, their general approach to creating nice convenient cross browser coding solutions are pretty similar.

But not to be out of touch, I took it upon myself to read up on jQuery over the weekend. It took me a couple minutes to digest what jQuery was doing, but once it sunk in, it hit me like a ton of bricks. No wonder everyone is using jQuery!

What makes it so different is they take a query approach to writing JS. They have one utility function that does all the heavy lifting of finding and objects in the dom, and then wrapping them in functionality. They call it the jQuery function. With this one function, you can specify dom elements, element id’s, classes, even css type selection, to be wrapped in functionality.

For example. If you want to grab every p element on the page and change it’s font size, you can do:

$("p").css("font-size", "160%");

The $() by the way is the jQuery function.

Now compare that to the regular JS way of doing it:


var pHolder = document.getElementsByTagName("p");
for (var i=0; i<pHolder.length; i++) {
pHolder[i].style.fontSize = "120%";
}


Yea, id rather write that tiny piece of jQuery code too.

So not only does jQuery reduce the amount of coding needed, it has a tiny footprint and it’s UI widget ad-ons are pretty slick and all modular, so you can include only the pieces of functionality you want.

I guess it is good I looked into jQuery, because I am sure it will quickly become my toolkit of choice.

Here is an example of what 6 lines or so of code can do in jQuery… use the slider to change the font size in the p elements…
Font Slider Demo

One of my favorite books is Flow: The Psychology of Optimal Experience by Mihaly Csikszentmihalyi. I stumbled across this book a few years ago, and when I started reading it I couldn’t put it down. It was like stumbling across the Holy Grail of interaction/UI design. I must have read this book 10 or more times. Even though it is not written as a interaction/UI/UX design book, it has proven to be one of my most valuable resources. Why? Because it is the only book I have found that breaks down the actual psychology behind achieving optimal experience. In the book Csikszentmihalyi explains how we as humans strive to achieve a state of flow in whatever we do, be it working, playing a video game, filling out a form, whatever, and once we do achieve this state of optimal experience, we get this intrinsic feeling of happiness and contentment….pure joy…. The problem with achieving this state of flow is that it doesn’t always happen in every day life, so he breaks down exactly what factors go into achieving this optimal state of flow, in an attempt to teach his readers how to attain it more easily. As a UI designer, being aware of these factors for achieving optimal experience allows me to design my flows and interactions with optimal experience in mind.

If you do not have this book in your design library, you need to go out right now and buy it. The insights you will learn from this book are invaluable.

Now that MediaTemple has fixed all of my server problems, I decided to do a little UI refresh for my blog…I also decided to give my ThemeSwapper theme selector a face lift…

…

My sites are currently having some major connection and performance issues. I have a support ticket into Mediatemple to resolve the issue.

UPDATE: Mediatemple has just contacted me to let me know that they are having a wider problem with their servers, with many customers experiencing the same issues. They insured me that they are working on resolving the server issues…

Ever wonder how designers create those cool vector looking abstract designs or get really cool grungy textures in photoshop?

example:

They don’t create custom patterns and they don’t create custom shapes. They use brushes. The above example is using a couple of free brushes found at qbrushes.com and a couple of transparent effects. You can find hundreds of free brushes that give you as little as primitive vector shapes all the way to fully developed images that you can use at variety of sizes. Brushes are cool because you can use a handful of them to create really cool original artwork or abstract patterns. You can also create your own brushes very easily. A lot of brushes are original black and white artwork that is scanned into Photoshop and then converted into a brush.

If you are interested in using Photoshop brushes, I would recommend checking out qbrushes.com to get a jump start. They have a pretty big directory of really cool brushes.

I originally wrote this themeing script for my blog so that users can choose from a handful of themes to customize their experience, but in the process of writing I thought it would be more useful to make it generic as possible so that people with their own blogs and sites can take it and apply it to their own stuff.

ThemeSwapper is all JavaScript, class based and lives in the browser. It uses cookies to remember a users theme choice, so when they come back to the site they still get the same theme. You will also need prototyp.js and scriptaculous.js JavaScript libraries.

Click here to view the script

Creating a new theme is as easy as figuring out what your theme is going to look like, creating the graphics, and adding:

Blah = new Theme(name, {options})

to the loading function and to the conditional cookie script (located towards the bottom of theme.js)… In the script you will see the list of options that you can set to theme your site. The only options that are required are the id’s of the background div and the content container div unless you are using the default id’s on your page.

Once you create your themes, create a swap link by adding:

onclick="Blah.setTheme()"

to a link or a button…

If you look at my page source, you will see how I am using the script.

Note: This is still a beta project, so expect regular updates to it. I am already thinking that I need to add themeing to a site nav section so that you can also customize the navigation of the site along with page background and content.

I ran accross Sweetcron the other day while kicking around the internet and it is really cool. It is a online life streaming software that allows you to aggregate your own personal web content in one place. So if you have a blog, use twitter or any other online service that generates a feed, you can feed it into your Sweetcron site to create an up to date time line of all of your online activities.

I took the opportunity today to try it out and install it on http://www.ohdatsnice.com. Instillation was super simple and themeing the content for a personalized took no time at all…I currently only have it hooked up to my blog, but their api makes it super simple to customize the interface and the content. It does take a little knowledge of PHP/HTML/CSS but if you are a web designer or dev guy, you will see that it is cake to set up and get going and to tell you the truth they make it really easy for the weekend warrior blogger to figure it out too.

Out of the box it pulls your entire feed content but in my example you see that I pulled out all the content and only left the title of the post and the posting date, with the blocks linking back to my articles…so you could use this software to suplement your current blogs etc…

All in all, I would recommend Sweetcron to anyone looking to keep all of their online activity in one place and I really think that this concept of lifestreaming is really going to take off…

Here is another example of a Sweetcron based site: http://www.yongfook.com

From the article Major flaw revealed in Internet Explorer; users urged to switch by Christopher Null…

“The major press outlets are abuzz this morning with news of a major new security flaw that affects all versions of Internet Explorer from IE5 to the latest beta of IE8. The attack has serious and far-reaching ramifications — and they’re not just theoretical attacks. In fact, the flaw is already in wide use as a tool to steal online game passwords, with some 10,000 websites infected with the code needed to take advantage of the hole in IE…”

Please stop killing baby kitty cats and switch to something other than IE

Looking for easy ways to deploy a rails app today, I came across heroku.com. They are currently in a private invite only beta phase but they allow you to get on a waiting list to start using their system. I applied for a beta account today and was surprised that I was issued an invite in about 4 hours.

Poking around, it looks like these guys have some promise. You can build and deploy a rails app you create on their site either by using their browser based coding environment or you can create a Rails app independently and upload a tar ball or use git to sync and deploy your files.

It looks like all of your files get hosted by heroku.com, and they have flexible dns options so you can choose a domain name like awesomeshit.heroku.com for your app, or if you own awesomeshit.com, you update your dns server to point to them, so you can have your rails app at pretty much any domain name you own. They also let you create multiple apps too.

Now at some point this service is probably going to shift to a monthly hosting or service fee, but for what they promise, I wouldn’t mind paying for not having to worry about deployment and configuration of my rails apps because right now, it is a freaking pain in the ass to build and deploy a rails app through my hosting service.

If you are not familiar with the hasLayout property in Internet Explorer you are probably familiar with it’s effects on your layouts in IE6 especially if you build your layouts with divs. The breakdown: All elements rendered in IE6 and 7 have a layout property which is not directly settable with Javascript or CSS and when you try to create a layout with elements that do not have a layout set, the result is all sorts of horrible display bugs…my favorite of which is elements inheriting margins and padding of its parent elements causing crazy offsets that get worse and worse as your elements get nested on the page…

Now IE 7 isn’t as bad as IE6 mainly because Microsoft decided to give all appropriate layout elements in IE7 like divs a layout, so when you build a layout with divs, you don’t get haslayout problems….but divs in IE6 do not have layouts by default, so if you do not give your divs the appropriate CSS properties to force them to have a layout, your resulting layout would be full of layout bugs.

Now this isn’t the cure all for haslayout problems in IE6 but this should fix most of them. What I do when building a site that has to support IE6 and above is that I force all divs in IE6 to have layout. There are a handful of CSS properties that will set an elements layout in IE6, but I like to use height because you can set a divs layout by giving it a height of 1%, and you can remove it, by setting the height to auto….this becomes important later…

So I wrap:

div {height:1%;}

in an IE6 only conditional statement, so this CSS is only applied to IE6 browsers.

This sets all divs on your site to having a layout which will automatically solves pretty much all of your div based haslayout problems, but note this fix will cause problems when you want to float divs or set them to be absolute …. So in those divs all you have to do is set the height of them to auto, which will remove haslayout and display them correctly.

This fixes IE6′s ass backward approach to divs by giving all divs a layout by default, which means when you want to set a div to be floated or positioned absolute, just turn off layout along with setting the float or position property of that div…