WNAS

In this day and age, personal publishing has taken off, you see this in the many people that maintain (or start) a blog, something that has been happening for a while now and the growth of which is over its top, they say. More different, or simular things are popping up now, things like twitter and tumblr.

As the possibilities grow, which will you choose, you can choose to take 'm all on, but to what purpose and in what time. I don't know about you, but for me there are just to few hours in a day. The time I spend online for me is not strictly for pleasure, but also for business purposes. So I try and do stuff as efficiently as possible.

Sure, I can choose to take on everything, but will I have something to tell about anymore, I don't think so. I blog about my work experience, talking about code and stuff, I use twitter to tweet about my daily ramblings and I plan to use my own tumblr as a digital clipboard.

But, what is the problem, a great many people do not know what to do with each medium, thus treating them all the same. How do we (including myself) tackle this problem, how do we maintain blogs that interest people, twitter streams that attract readers and a tumblr thingamagic that, ok I just started tumblr and should find out more about that before I give an stupid and unfounded opinion...

Not that that has stopped me in the past, or in the future for that matter, but hey, for the sake of this article, assume that I am a polite and thorough individual.

The point is, how do we make sense of the kaleidoscope of possibilities. What do we use to what purpose?

The answer is simple, use each tool where it is meant for and not for anything different. As a boy I used to help my dad doing chores, I didn't help out more than any other boy of about 6 (no more in fact than my boys do now), but I did learned an important lesson. Use a hammer to hammer and a screwdriver to screw. By doing this, you let the tool do what it does best and hinder you. I think that you can figure out what happens if you try to loosen a screw with a hammer. The same thing applies to things like blogs, twitter and tumblr. Best is to use each tool to do what they are good at...

So, what are the tools at hand good for? Lets analyse a few methods of sharing your mind on the web and discuss it's pro's and con's

Bloggin

pros

A blog is good for collecting and displaying thorough thought, even a link log is only a good one if it has vision. It needs a vision and a goal, not that those things should be heavy, but it seems hard to me to fill your blog with baby kittens and hardcore c++ snippets and not confuse people... So you have to select your goal and stick with it

cons

No good for jotting occasional ramblings, you have to keep at it, to satisfy your readers, you have to post regularly. And if you post, do not post something trivial. Respect the time of your reader as he or she is giving you by writing something worthwhile.

Twitter

Pros

Twitter is great as a shoutbox and it sometimes gives instant feedback. I like the insights it gives me in to the daily lives, that people are giving me, although it sometimes is a bit weird. To see total strangers share stuff about their lives. It sometimes makes me feel like a peeping tom, to see what people share about their lives. Some things are fun, but I can imagine that some things are better left unsaid.

Cons

I do not know what exactly to make of twitter as of now. What I know is that some people treat is like an anonymous shout-box. But anonymous it is not, it is an free online service that is available for anyone to read. And by anyone, I mean anyone, also your clients and (future) employers. So don't go overboard is my advice and think before you shout. Although that doesn't count for yelling IE is driving me mad once in a while if you are an web developer...

Tumblr

Pros

As I said above, I haven't been using it for a long time, and for now only use is to dump fragments of code to. The same thing that I started this blog for a couple of years back. With tumblr I feel no obligation to write thorough and thoughtful pieces, this frees me to just post useful pieces of code that won't make it into an article (yet). Therefor, I post more information online for people to see, read and use.

Cons

I think that the same policy should go for tumblr that you should use for twitter, use with caution. Tumblr on the other hand is more of a blog, in that you can edit your post, to possibly censure your self.

Conclusion

All of these tools have their own merits and can help you very well. If you use your twitter, you don't get tempted to shout on your weblog, tumblr can help you set up pieces to share and keep and not publish half finished articles. Each of these tools can enhance the other, they are so different that they do not get in each others way but enhance one another.

These sources that I talk about in this piece are not the only ones of their kind. So please, go look around the web for alternatives and try them out. As you do, you will be able to form your own solid opinion.

Please find your own way with these applications and use them wisely. My opinion of these is not the only, so I advise you to form your own opinion on them.

Technorati Tags:tumblr, twitter, wordpress, ajax

PPK has gotten me interested in this and it is looking better everytime more info is getting available. Maybe I will go, two @media's a year is better than one, don't you think?

UpdateI am going, just booked. Pretty exciting, this is my first time going to a major conference as a independent contractor. That means, booking flights, hotels and stuff. If any other dutch people are going, please let me know... Happy clog or front end gilde meeting in london, I'm in...

Introduction

Ajax is the new gray for quite some time now and it seems that nobody wants to be left out. Everywhere ajax is popping up, it is being used for good and, in a lot of cases, bad. Most of these implementation errors are being made on two separate fields, development and design.

In this post I will try to clear a few things up, to prevent some of the most common errors to be repeated.

Mistakes

Ajax has been the new gray for a while now and like every hype, it has made it's way into the mainstream. In part this is a good thing, as many sites and applications are being made to better the users experience, are the not. Unfortunately not all of the ajax implementations are being done right and a lot of them make the same mistakes. In this post I will try to let you see the mistakes and the (both imho) easiest or even wisest solutions.

Being cool

The problem

First we start with the most common design and development mistakes being made, trying to be cool. Many people add ajax to there application or website without thinking, just to get on the ajax wagon. To be fashionable, to be hip, to be cool, to please the unknowing client or project manager that kept asking for ajax, or some other reason that I don't know.

Don't get me wrong,I see a lot of application and websites that use ajax very good, to bring a better user experience to their user, not to show off some skill of the developer. I know, it is a fun thing to do, showing off, that is, but please don't do it...

In my opinion, ajax is old technology, so why bother with it, in order to show of. So you can implement xhr and manipulate parts of your page without a page refresh. So what, we could do that back in 1999, thanks to Microsoft, lets not forget that folks. So being cool by implementing a 8 year old technique invented by the big bully of the web, I don't think so.
Now that we settled this, lets look at the truly cool things about Ajax.

Ajax lets your users save time, if implemented right, that is if designed right. Implementing it right makes sure that it degrades gracefully, works in all modern browsers and doesn't throw javascript errors or memory leaks. All of that is not that exciting and almost easily done. Take on of the, more and more, mature javascript libraries or pieces of code by gurus like PPK and modify them to fit your need. So now we settled the issue, the technique called Ajax is not cool.

The solution

Be humble, make sure that it is all about the user, not about the developer. In order to help you, hire a user interface designer and a requirements analyst to find out what your users really want. In that way you are using the technique to benefit the user, the way it is supposed to do. The technique ajax is not cool, enriching your users experience is. To do this you first have to know who they are and what they want. If you have a small project and do not have the means to hire a special someone to do this, hire someone who has at least a bit of knowledge of user interface design and let him make up persona's to work for.

Frameworks

The problem

In my daily work I work with a lot of talented people who can work wonders with java or .net code. Very smart developers who can make the back-end of an application or website get you coffee and wash your car. There is a certain part of their work where they (or at least 95% of them) try to stay away from. The big and bad Frontend piece of their application, all of this kiddy stuff like html, css and javascript is simply not worth their attention. They are, after all, serious programmers and can not be bothered by this stuff. So to avoid that they use frameworks like ajax4jsf and similar ones on .net or jsp. In this way they can satisfy their clients, who demand Ajax, and still keep their hands clean.

What they do not know, or want to know, is what kind of code those frameworks generate. And that is what a user uses, with all of it's quirks and minor annoyances. Most of these frameworks that I have seen, have never heard of unobtrusive javascript for instance and write lines and lines of javascript into your html. There is also absolutely no separation of structure, presentation and behavior in those frameworks, at least not that I know of. For the most occurrences this will not be a problem, but in the case that it is, solving problems in a framework that you use like a black box and have no knowledge of is not easy.

This is extra strange, as I have seen those same developers, who do not try and learn anything of the front-end, leap through hoops in order to learn a new java framework. So they are willing to learn, but perhaps in a constrained way...

The solution

The solution to this problem can be found in a couple of ways. If you insist on using frameworks, study them thoroughly and get to know them really good, if you don't do that, you place yourself in a really fast car, without a steering wheel. As you have the speed of development by using a framework, but without a thorough understanding you don't know where you are going. Most jsf frameworks that I know are open-source, so you can improve the framework and give that back to the community. In that way you solve the problem not only for yourself, but for colleagues around the globe.

If you really take your job seriously, go out and learn javascript, css and html. There are enough resources on the internet to help you make a running start. You don't have to be an expert at any of these, just learn enough that you can implement xhr with a javascript library like jQuery. If you can do that, you have more control over things when they go wrong and trust me, when you deal with browsers, things have a tendency to go wrong. Plus you have another technique at your disposal, which can't hurt either.

Ajax vs Dom-scripting

The problem

When people turn to frameworks to do their ajax magic, another problem tends to pop up. Since it is so easy to do Ajax like stuff, people tend to over use their ajax thingamagics. Using ajax to disable or enable a formfield for instance, because it surely looks like ajax. What happens here, is that people have to little understanding of the front-end that they assume that everyone that has to do with manipulating the front-end is ajax.

What they not know is that there is more to ajax than just manipulating the dom, ajax is about communicating with the server and then manipulate the dom to reflect a change in that same page, without refreshing that page. The main difference is that people confuse domscripting with ajax.

That confusion comes from not knowing what your framework does, from not knowing what goes on at the front-end of your application.

The solution

For this you have a simple solution, simply learn the trade. Go to sites like alistapart for your basic front-end knowledge, ajaxian for everything ajax or many more like those, hey you may even pick up a thing or two from my site... Basically, take the solution I offered for your framework problem and work with that.

Conclusion

So here we go, I added my two cents to an ancient discussion in the web community, hoping that maybe some back-end developers will pick it up.

For geeky desktop backgrounds see Happy Webbies, I think that they would make good t-shirts. That is if I would wear shirts with a 'funny' print, which I don't.

(Via Zeldman's twitter.)

In a previous post I pointed out that speed is still an issue to consider when using javascript librarys. In this post I will point at some of the advantages of using a library. In these posts I will focus on jQuery, as I am familiar with it and comfortable in using it. jQuery can be replaced with any library of your choice, as the people of prototype, dojo, mochikit, ext and YUI are all equally focussing on speed and ease of use. The reason that I personally use jQuery is, with the reasons I gave in the last post (css like syntax and its shorthand) also its fabulous and (in my opinion) unique documentation. See visual jQuery for a complete description and examples for it's core use.

jQuery has a lot of advantages over plain old javascript, not in the least it's ease of use. Imagine your self writing a piece of javascript to implement adjacent sibling selectors for ie 6 and below... There is a reason that people don't want to use this in browsers, it is to frigging difficult to get it to work, not the mention the maintance difficulty you are getting yourself in. In jQuery it is as easy as writing the css.

input[type='text'] + span.info { margin-left: 5px; }

The above meaning, as you should know, a span with a class info which comes after a text input field gets the left margin. Stop for a moment and contemplate how to write this in javascript...

* Go and find all of the spans with the class info in your document
* build a node list of these
* check if they have a previous sibling which is an text inputfield
* then give those a class
* build css to give the left margin

And never, ever give the left margin in the js, that is mixing behaviour and presentation and that is bad js fu, ask Dan Webb

Even if you want to do all that, you have to do that for every single instance that you use Adjacent Sibling Selectors.

In jQuery, you just write:

$('input[type='text'] + span.info').addClass('infoAfterInputText');

And in the css:

.infoAfterInputText{ margin-left: 5px; }

I think that you can easily imagine which one is easier maintanable...

Why

The reason that I think these things are important is that they make it possible to harness the true power of css. For instance, about 2 years ago, I had to write a menu that was quite straight forward. But the difficult thing was that it consisted out of two different sections, between which we toggled easy enough with javascript, but looked entirely different.

This created a lot of css, as the things we set on one state had to be countered in the other state. By using a line like;

#menu > ul > li > *:first-child

I could strip something like 40 lines of css from the menu style-sheet, quite good. And that is not saying anything about the maintainability of the code, all we had to do in js was:

$('#menu > ul > li > *:first-child').addClass('foo');

In the css we had to add the class .foo off-course in a separate style-sheet which we included using conditional comments

So if you want to use cutting edge css and are looking for a tool to help you control that unwieldy Internet Explorer, go and checkout jQuery. Make sure that you use the packed version in you live code and use the unpacked code to read and understand. The two are not only different in file-size, but also in speed. You see, jQuery has been written with lots of comments, so if you know anything of js, it is readable...Or am I turning into a bigger geek than I thought..

Examples

So when do we use jQuery to patch the DOM, well that is up to you. I do it in these cases:

Adjacent sibling selectors

If I see an absolute advantage in using these over zillions lines of code that only contradicth the original line, I will use them. Always heavily documented, as these are the more obscure css properties that not many people know or use.

CSSp + a {
	do: stuff;
}
/* if an 'a' element comes after a 'p' element, do stuff */jQuery$('p + a').addClass('foo');
// basically the same thingextra css.foo {
	do: stuff;
}

Direct child selectors

Sometimes you want to use a direct child selector, to (for instance) minimize you css.

CSSp > a {
	do: stuff
}
/* if an 'a' element is a direct child of an 'p' element, do stuff */jQuery$('p > a').addClass('foo');
// again the same thingextra CSS.foo {
	do: stuff;
}

Even and odd

If you want to zebra a table the hard way, you can use CSS3 selectors to do this. Please keep in mind, that this is (at this moment) not supported by any major browser, or for that any browser that I know of...

CSS.class:nth-child(2n) { do: stuff; }jQuery$('.class:nth-child(2n)').addClass('foo');
// I think that you get the idea by now...extra css.foo {
	do: stuff;
}
/*
	please note, that the extra css is in fact necessary for any browser,
	so these will not be included just for IE. Please document very extensively.
*/

This kinda stuff will help you implement some cool css 3 stuff as well. So in a way, the future is now...

Word to the wise

These tricks may and can be nice, but must be used wisely, as they have influence on quite a few things on your page

Cons

1. Preformance, javascript, however cleverly written adds to the time it takes browser to render your page
2. Maintenance, even if you thoroughly comment your code, placing declarations in two places always makes more room for error. Please know that one day you will have to let go of your code and the next guy or girl may not know his or her stuff as well as you do, so please keep that in consideration

Pros

By using a library, you ensure that the code is being written in a way that the library dictates. This is a bette as that ensures that people taking over your code can read about it online, rather than your ( if you are like me ) shabby documentation. The additions that you use are open source and (if you are lucky) well documented, that insures the continuation of your project, if you leave. That is in the real world a really good way to insure client satisfaction...

So use all of the tricks that you have at your disposal, but use them wisely. Do not try and show off your skills on a client's website, that you do on your own personal site. Keep a few personal pages around to try and show of your skills rather than burden a client with the risk...
Thus first and foremost be professional and have fun.