I'm thinking about switching my blogging itch over to tumblr.com. I've already set http://blog.jethrolarson.com to point there, so if you're following me please add that one too. I'll be copying my better posts over there.
Hopefully their nice UI will be enough to get me posting more often. I guess we'll see.
I've been doing a lot of thinking about different kinds of design. Game design, music, movie direction, woodworking, anything where there's a user experience. I've also been reading Emotional Design, by Don Norman. In the book he goes over three aspects of design, visceral, behavioral, and reflective.
Visceral
The ability for something to grab you on a superficial emotional level. Not to make it sound trivial. Pounding drums, slick ui animations, glorious vistas, the taste of chocolate, the softness of toilet tissue. These all have an immediate emotional impact.
Behavioral
Brings the user closer to the experience. Films will shoot characters over the shoulder to make viewers feel closer to them. A strong behavioral aspect will make tools easier to use, music easier to get into, people easier to communicate with, toilet paper easier to tear, and make chocolate melt in your mouth, not in your hand. Basically, when the behavioral aspect is well crafted the user spends more time doing and experiencing and less time disoriented, or confused.
Reflective
What the user thinks about the experience. This is what'll make them tell their friends. This can include open ended plots that require interpretation, the pride of owning something cool or antique, the strategy of chess, saying you're a Mac user, nostalgia.
The visceral aspect of your product is what will sell it right off the bat. There are plenty of great movies that lack the visceral aspect in their marketing which is why they wont do as well as the Transformers movie which has strong Reflective (Known brand and nostalgia factor) and visceral (action, graphics, etc) aspects.
Sometimes you can fake out the other aspects through good use of one of them. You may think a movie is deep cause it instills feelings of awe or melancholy, e.g. American Beauty, but upon further thought it doesn't really stand up. You may think that your tax software is easy to use because of the money it's saving you. Sounds dumb but it works.
Many products get by without carefully considering all these aspects, but if you do you may find your competitors failing to keep up.
It could be that some of the other selectors can be faster than class. I haven't done extensive research, so if you're in doubt try it out.
While it's okay in your css to have verbose selectors that describe the structure more accutely e.g. #page #header #nav .current, doing this can really slow down jQuery selector speed. Remember that you don't have to worry about the cascade affect in jQuery, just be concise. The Sizzle Selector Engine of jQuery 1.3 also processes selectors in a right to left fashion, so in the example above it's going to get all elements and check each one for a class matching "current" and then compare the parents of what it finds to the rest of the selector removing anything that doesn't match the pattern. This selector can be made much faster like this #nav li.current. By adding the li jQuery switches from getting all elements to using the DOM getElementsByTagName(), which is much faster, then it just looks up and sees the parent with #nav and stops. A lot less filtering will take place.
If you're making the same selections repeatedly in your scripts you should just set a variable.
$("#aside").hide();
...
$("#aside").show();
var $aside = $("#aside").hide();
...
$aside.show()
$("div.subSection") rather than $(this).children("div.subSection")
So if you're in a situation where it looks like a reselect can be faster try it out and compare. The difference between these can vary a lot so I can't generalize here, but test it in your situation. Don't forget that code readability matters so if the difference is trivial make the code easier to understand.
As cool as jQuery is often you can get some good speed increases if you switch to plain JavaScript. You don't want to do this all the time as jQuery solves a lot of browser bugs that could be a real time sink. But if you're noticing a slow sort function or something that could use a speed up don't be reluctant to fall back to for loop and normal DOM.
Usually, spending a lot time on performance optimization can be a waste, but sometimes it'll really make a difference between a clean responsive UI and one that is so slow that you might as well avoid JavaScript. I know it's easy as an intermediate JavaScripter to rely on libraries for most of what you need to do, but take the time to learn some of the old ways and it can really take your code to the next level.
I've used a few tooltip scripts over the past couple years and none of them I've really liked. They either try to do everything or not enough. So I've come up with my own tooltip plugin for jQuery.
I'll be uploading the demo page to my personal site soon but until then the script and demo page is available on the zenTooltip page of Google Code.
If there's things you think the plugin should do let me know. I want to avoid feature bloat, so if you want it to load AJAX content or anything crazy like that that will be a different plugin. Feel free to leverage this code to do it and let me know so we can cross-promote.
Update: I think it's finally hit a 1.0 status. Need to get some users to test it out. Feedback welcome.
I've been thinking about the syntax of CSS. I don't like it. I find it doesn't parse easilly. Could an existing data format be better?
body{
color: #3300dd;
background: #331000 url(http://auctiva.com/images/logo.gif) no-repeat top left;
font-family: Arial, sans-serif;
}
h1,h2,h3{
color: #aaf0cc;
font-family: Tahoma, sans-serif;
font-style: normal;
font-weight: normal;
}
#rightSidebarPanel, #leftSidebarPanel{
background-color: #ffffff;
}
Regular CSS is nice and compact but there's a lot of redundancy and some of the code requires too much memory. Sure you can combine all the background properties into one but there's little rules you have to remember that make it harder.
[
{
"s":["body"],
"p":{
"background":{
"color": "#33A222",
"image": "http://auctiva.com/images/logo.gif",
"repeat": "no-repeat",
"position": "top left",
},
"font":{
"family":'Arial, sans-serif',
},
"color":"#000000"
}
},{
"s":["h1","h2","h3"],
"p":{
"color":"#a0ff00",
"font":{
"family":"Tahoma,sans-serif",
"weight":"normal",
"style":"normal"
}
}
},{
"s":["#rightSidebarPanel","#leftSidebarPanel"],
"p":{
"background":{
"color":"#ffffff"
}
}
}
];
JSON is nice cause it can quickly be turned into JavaScript. The standardized structure means there's less special cases and the syntax is more learnable. There's an awful lot of text that's not data though, maybe something else would be better.
- s:body
p:
background:
color: #331000
image: http://auctiva.com/images/logo.gif
repeat: no-repeat
position: top left
font:
family: Arial, sans-serif
- s: [h1,h2,h3]
p:
color: #aaf0cc
font:
family: Tahoma, sans-serif
style: normal
weight: normal
- s: [#rightSidebarPanel, #leftSidebarPanel]
p:
background:
color: #ffffff
Yaml is my favorite so far it's easy to read and can be parsed cleanly. I don't like the s & p keys but I don't think I can make the key the selector as selectors can be arrays. Still, I think this format can really work well.
I've been trying to get my act together about showing my talents online. So finally I can ditch my old portfolio(No, I'm not linking to it, it's terrible).
Well, here you go:
I found this little gem while looking at the jQuery source. I'd forgotten that you can reference properties/methods using obj["str"]. Pretty cool tip for getting your code smaller. Plus I like ternaries.
Before:if($(this).hasClass("myClass")){
$(this).hide();
}else{
$(this).show();
}
After:
$(this)[$(this).hasClass("myClass")?"hide":"show"]();
This is doubly useful if you got a big chain in jQuery and don't want to break it for the if statement.
Edit(2009-3-1): As of jQuery 1.3 there's is now an optional parameter for toggle(), toggleClass(), slideToggle(), fadeToggle(). It's a bool that sets the toggle state. So now the previous statement can be written like this as well:
$(this).toggle(!$(this).hasClass("myclass"));
