Friendly Bit - Web Development Blog

Follow the 10 ground rules, or fail on the web

2008-11-20T20:39:47Z

When you work with the web, there are a couple of basics you really need to get right. These are things I see people misunderstand over and over again, with a varying degree of failiure as a result. Not only individuals make these mistakes, even really big organizations make them, and suffer as a result. So lets get at it.

1. Everyone is anonymous on the web, if they want to

If you depend on trying to identify who a particular user on the web is, you will fail in every way possible. This is what lots of law firms try to do, especially in the context of file sharing. You will never ever be able to know who someone online is, if they don’t want you to.

Technical reasons: IP-numbers are easy to fake, but using proxy servers of different sorts. New services are constantly popping up, that makes this available for unexperienced users. Just push them a little more, send a couple of more cease and desist letters and even ordinary home users will start to cloak who they are. It’s possible, it’s easy.

Social reasons: It’s very easy to surf using someone else’s internet connection. Ways vary from just connecting to an unencrypted wireless network, to just using the free connection at a library or school. And it’s getting worse: people are starting to move around while using the web (mobile), hopping from one connection to the next as their geographic position permits. The link between internet connections and users are getting blurrier as we speak.

Despite the above, there are things you can identify and use. One of those is categorizing users into user types. This is what Google (and lots of others) are successfully doing with their advertising system. “Based on what you’ve showed interest in previously, we think you will like this”. This enables you to personalize and customize your content to a particular user type, something that holds lots of economical value (if that’s what you’re after).

2. Give your content away for free, or watch someone else do it

The web is a gigantic content creation machine, and except for very niched content, you can find anything on it. If you are in the business of selling content online, you will see your profits steadily decline. The competition is just too intense when anyone can create content.

How do you tackle that? Well, put your previously costly content online for free, to drive people to your site. If the content is good, your will see a massive surge in number of users. Well on the site, you will need to figure out how to make money of them, either by showing them ads or getting them to buy something physical.

Industries that depend on online content creation are really living on the edge right now, and for a future prediction, just look at the music industry. You still have some time to rethink your bussiness model.

3. Linking is the core of the web, make people want to link to you

It’s called a web because of the links. Trying to limit or control other sites linking to you is fundamentally breaking the web. It’s also downright stupid, since every external link is a vote for your site, and a sure way for people to find you. Having an “link policy”, controlling how people may link to you, is a sure way to make a fool out of yourself online. Not to say that people won’t care one bit about it.

Instead, you should encourage people to link to you. How? By first giving every piece of content a linkable address. Many flash- and frame-based sites miss this fact, and instead require users to click through your frontpage to find the content they want. This is a sure way to turn users away. Just make your content linkable, it’s not hard.

Then, make sure the content is in such a high quality that users want to link to it. This rules out saying what everyone else is saying, in the same way everyone else is saying it. You need to be different, and have genuinely interesting content, that no one else has. This is hard, but a problem you need to solve to make it on the web.

4. Link to external sites with good content, it’s all about servicing your users

There’s billions of sites a user can go to, and you need to work hard to servicing your users if you want their attention. Sometimes your content is so extensive, that no matter how hard you work, users will still want more. This is a perfect situation where you should link to external sites and give your users what they want.

Many newspaper make this mistake, and end up with users leaving their site for Google, trying to find more information about a particular piece of content. They have instead linked to good follow-up content directly, given the user what they wanted, and be accessible via the most used button on the web, the back-button. Happy users that have easy access to your site, or annoyed users that leave for Google, your choice.

5. People will copy your content, and there’s nothing you can do about it

Some people are worried about the copying of their content. And if they see that as an issue, they better be worried. You see, each time someone reads your texts, or looks at your media, it’s copied from your server to the users computer. Web browsers are really effective copyright infringement machines, and by just clicking a link, you copy that page.

So if you are worried about users copying your content, please don’t put it online at all.

Other people think that they can have their content on the web, and still prevent people from copying it. This is pure lunacy, and all ways to prevent copying have failed. People even miss the most obvious way people can copy, by hitting the “Print screen” button on their keyboards. When it comes to video and audio it’s a bit more annoying, but everything that comes out of your speakers, or is displayed on the screen, is recordable. So stop worrying about copying, you can’t stop it.

Instead, know and accept that people will copy your content, and just ask for a simple link back if they do. That way, small pieces of your content on other sites will act as marketing for the whole site.

If you want this formalized as a license, there is the creative commons attribution license, which I use on this site (see footer).

6. Use the web to communicate with your users, or watch your impact fade

Almost everything is moving to the web, including most of your business and private life. This of course has implications for web sites. Back in 1999, a couple of smart people sat together and tried to formulate how the future would look for businesses. One of the fundamental truths they found was “Markets are conversations“. In essence, this means that you sell stuff by talking about it with customers. It can be through marketing or through recommendation, but it is talking. When that communication moves to the web, you too better start talking on the web. And quickly.

This movement of websites for two-way instead of one-way communication has been given the techy name Web 2.0. And it turns out, this new web is a terribly effective way of communicating. The more people realize this, the more of the conversations will move to the web.

The question is, when hoards of people come to your site to talk to you about your product, are your ready? Or will you give them: “Sorry, this store is closed, but we have this nice brochure you can read…”

7. Communicate with your users in natural language, marketing speech has no place on the web

It’s easy to find marketing speech about products today. Companies compete with each other to make sure as much of your field of vision as possible is filled with their message. When people are subjected to that much information they have no interest in, there are consequences. On the early web, the consequences were banner blindness, people simply started ignoring some banner formats. On the modern web, people have started ignoring marketing language use instead. The words “Best”, “Revolutionize” and “Cheapest”, instantly makes people stop reading.

Why? Because companies writing about their own products don’t have anything to compare to! They can’t say what’s best, because they don’t use their competitor’s products. They don’t know if the product will revolutionize the users life, because they know nothing about the user. And any user can look up how cheap they are on a price comparison site.

So what to do? Talk to them like you would to a friend, in the afternoon, after two beers. This will make sure you don’t turn customers away by trying to push to much crap on them. You wouldn’t do it to your friend? Then don’t do it to potential customers. Just changing your language has huge positive implications, but let me just sum it up like this: it builds trust.

8. Be honest about what your strengths are, liars are easily uncovered

Never has it been so easy to look up facts. Liars are easily uncovered by a couple of soft tappings on a keyboard. What’s even better, is that even subjective things can be checked. If someone yells: “Our product is the best one!”, you can find out if that’s the case in a few seconds. Just read a couple of reviews, look at comparison charts, and you will know.

Lying in person is rather bad, but lying on the web is worse. All the facts are so close. A customer is literally seconds away from finding out if you’re bullshitting them or telling the truth. This makes it vital not to lie on the web.

If you want to brag anyway, make sure your add a “we think” before all your bold claims, and back them up with solid arguments. Because if you say “We’ve found no cheaper product than our own”, and I find out there are others that in fact are, you’re not a liar, you’re just badly informed.

9. Care about search engines, and double your number of users

You are not the only site on the web, and people will spend most of their time on sites other than your own. This means, that if you don’t think about how people find your site, all your content work is in vain.

So how are people found? I have yet to see a customer of mine that gets less than 50% of their users from search engines. Usually 60-70%. People tend not to understand the implications of this. A e-store could potentially lose over half their sales by misbehaving in Google’s eyes. This is huge.

You need to care about search engines. Luckily, they are well synced with the ground rules you’re reading. If you make your content linkable, unique, interesting, and talk to them in a language they understand, you will be successful. All serious search engine optimization guides will say the same.

The last step, and what many miss, is to keep track of how people find you, and what they find. Then feed that information back to your content producers. That way, you can produce content that people actually like.

Or, you could lose half your sales. Your choice.

10. Encouraging and acting upon feedback is currently the best form of marketing

Asking for feedback is unfortunately still uncommon. Unfortunate because there are so many out there that could benefit from knowing how they can do better. It’s also fortunate, because it means that you have a chance to be different, and stand out, just by asking people what they want.

Dell IdeaStorm is a great example of this. They are simply saying: “Hi, we want your feedback”, and instantly they have media coverage everywhere. Additionally, they get great feedback on how to improve their business.

Of course, this means you need to act upon feedback too. Telling people that you listen, and then don’t is a much worse offense than not listening at all. So find yourself a good chair, hand out the megaphones, and listen carefully.

Where to now?

Thanks for reading this far. This article comes from a frustration over how some companies, and individuals, think the web is still a place were they can makes their own rules. I would therefore like to set the foot down, and tell people what I’ve learned about the web, about what works and not.

I also know that there are other people out there that needs to read this. Do you know some of them? I then appreciate if you could send them the link. More people need to read this.

Thanks.

Click here to read this article No matter where you go on the web today you...

Templated User Controls in ASP.NET

2008-11-18T19:55:05Z

Good design repeats itself. It works hard to convey a whole, a feeling of consistency. Once you understand a part of such a design, you know your way around all of it. This is often done by repetition, using the same elements, colors, styles, positioning, and so on. This is a good thing.

Good code never repeats itself. The number of techniques to avoid it are numerous, and all new languages compete in trying to remove as much repetition as possible (Especially the dynamic ones).

Good design repeats itself, good code does not.

With interface development, you face the conflict above over and over again. You get a design that (rightly) reuses the same concepts over and over, and you need to implement them in code that makes you write the same logic only once. This same time both when writing the code and later when fixing bugs in it, and deep inside, all programmers know that it’s the correct way to do things.

I’m currently working in a .NET project (EPiServer CMS 5), and is faced with a design that uses the same kind of boxes all over the site. The boxes only differ by color and content, so things like shadows and rounded corners are clear repetition that I want to do only once. I’ll do the shadows and corners with CSS, but for that I need a couple of wrapper divs. Divs that I only want to specify once, and then reuse.

The prequisites are:

I want a flexible solution, so I’m not tied to a specific HTML structure (number of divs, or even if I use the div tag or not).
No HTML in properties that get sent to user-controls
No HTML in code-behind (a common way in .NET to split logic (code-behind) and templates (ASP.NET and HTML))

What I came up with was templated user controls. They provide a way to write controls that wrap any other controls you may have, and add content around them. And it’s easy to write and user. This is how the one I wrote is used:

<MyProject:Box runat="server">
    <Contents>
        <h2>Random header...</h2>
        <asp:Repeater runat="server">...</asp:Repeater>
        ...
    </Contents>
</MyProject:Box>

It simply wraps anything inside it (in this case a heading tag and a asp repeater), and lets me do whatever I want with them. In my case, I wanted to add some generic HTML around lots of different content, but you could do anything you wanted.

This is how the above was implemented. First the code-behind:

using System.Web.UI;

namespace MyProject.templates.units
{
    [ParseChildren(true)]
    public partial class Box : System.Web.UI.UserControl
    {
        private ITemplate contents = null;

        [TemplateContainer(typeof(TemplateControl))]
        [PersistenceMode(PersistenceMode.InnerProperty)]
        [TemplateInstance(TemplateInstance.Single)]
        public ITemplate Contents
        {
            get
            {
                return contents;
            }
            set
            {
                contents = value;
            }
        }

        void Page_Init()
        {
            if (contents != null)
                contents.InstantiateIn(PlaceHolder1);
        }
    }
}

… and then the “code-front”:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Box.ascx.cs" Inherits="MyProject.templates.units.Box" %>
<div class="box">
    <div class="boxwrapper">
        <asp:Placeholder runat="server" ID="PlaceHolder1" />
    </div>
</div>

I think this is a really useful way to write user controls, especially for those of you that work as interface developers in a .NET world. Asking the people around me I found that quite a few didn’t know how templated user controls worked, so I hope I will be of use to some of you out there. Happy coding!

Web standards with ASP.NET Good interface code is a mix of CSS and HTML,...
What beginners ask for (and what I tell them) Being in an IRC help channel lets you meet a...
Why the class name “wrapper” is so common We've all heard about how bad it is to use...

Install MySQL-python on Mac OS X (leopard)

2008-10-31T16:46:53Z

What a pain. Getting mysql to work with python is the single most annoying step in getting Django up and running (if you choose MySQL as the database). You see, python requires drivers to be able to talk to MySQL, and you have to compile those yourself. I just devoted several hours last night to help friends do what I did some months ago. This time, I thought I document it right here.

How to install MySQL-python on Mac OS X

Step 1: Brace yourself, this proccess is really really annoying.

Step 2: Download MySQL for Mac (Skip registration by clicking the link below the login form). You probably want “Mac OS X 10.5 (x86)“. Is it possible to use some other version of MySQL? Yes, as long as you have a version that includes the source code (MAMP does not include them, so it won’t work). You’ll need the source later on.

Step 3: Install MySQL by mounting the image you just downloaded, and double-clicking the package file for MySQL. Also install the prefPane that’s included in the package. That adds an icon the system admin that lets you start and stop MySQL, very convenient.

Step 4: Make the mysql command accessible from anywhere by adding it to your PATH (a variable that holds all directories the terminal looks in to find the command you’re trying to execute). The below just adds mysql’s bin directory (it’s probably the one I’m using below) to the PATH you currently are using:

export PATH=/usr/local/mysql/bin:$PATH

You probably want to add this line to a file called .bash_profile (yes, it starts with a dot), that is situated in your home directory (which you get to by just typing “cd”). This file gets run each time you start a new terminal, so it makes sure the mysql command is always accessible, no matter where you are.

Step 5: Download MySQL-python, you probably want the file that ends with .tar.gz.

Step 6: Unpack the file you just downloaded in an empty directory (anywhere)

Step 7: Download XCode from Apple. The reason you need this is because XCode includes a C++ compiler you will use when installing MySQL-python soon. The download is huge (1 Gb), and to be able to download you first need to fill in a long form. The registration process for Apple Developer Connection is about the worst things Apple has ever created, so after completing it, you will either laugh or be really annoyed, just pick and choose. You do need XCode however.

Step 8: Install the XCode Tools package by first mounting the file you just downloaded, and then double-clicking on the XCode Tools package. It’s the only one you need from the huge set of junk you just downloaded.

Step 9: Try installing MySQL-python by going to the directory where you unpacked it and typing:

python setup.py install

This will attempt to install the drivers, but will fail. This is because the coders behind MySQL-python have failed to fix a very simple bug in types.h (1808476 - “#define of uint breaks compiling on Mac OS X 10.5″). However, you can easily fix it yourself: Look for a reference to types.h in the terminal. When you find it, open that file in your favorite text editor and comment out line 92, which should say something about <code lang=”c++”>#define</code> and <code lang=”c++”>uint</code> (comments in C++ are double forward slashes: //).

Step 10: Now, try the above command again. It should install fine. If it doesn’t, you will probably find out why by looking in the terminal for errors while compiling.

What did I say, isn’t this process about 7 steps to long? Well, I hope this little guide helps someone.

No related posts.

OpenID, Nofollow removed, Comment counts, and IE7 fixes

2008-10-19T13:49:47Z

I’m added a few features to the site:

OpenID support: Instead of typing your name and e-mail you could instead sign in with an OpenID-enabled URL. Or you could completely ignore it, and go on as usual.

Nofollow restriction removed: Wordpress by default adds rel=”nofollow” to all links that people write in comments. It’s a good way to decrease the impact of spam. Thing is, I strictly moderate comments, and have three plugins that prevent spam (Akismet, Spam Karma 2, and Bad Behavior). Since spam really isn’t a problem, I’ve decided to remove the nofollow from your links, if you’ve posted more than three comments.

Comment counts: To make it easier to see who you can trust and not in the comments I’ve added a comment count next to the name. Damn, I’ve commented a lot :)

IE7 fixes: There were script errors in IE7 since I’m trying to do funky stuff with opacity on the search field. I’ve fixed that. Also, the number of subscribers wasn’t visible in IE7. They are now.

Over and out.

New theme up for friendlybit.com Hi! If you're reading this blog through your feed reader,...
Feed readers should show comments One thing I've noticed lately is that I read fewer...
Make a tooltip out of some columns in a table A worried user joins the #CSS channel on EFNet. He...

IE7 hover bug: z-index ignored (and other properties)

2008-10-12T18:26:26Z

I’m implementing a rather different design right now for an intranet, and have found a bug I thought you’d like to know about. If you restyle things with :hover, you might have to add an extra property for the rule to be applied in IE7.

How is this design different? Well, it built on columns that are overlapping each other. When you hover one of the columns, that column get placed on top (temporarily). You think you need javascript for this? You don’t (if you can live with not supporting IE6).

#menu, #content, #sidebar {
   z-index: 1;
}
#menu:hover, #content:hover, #sidebar:hover {
   z-index: 2;
}

Simple isn’t it? Now you just have to absolutely position the three columns. By the way, working with absolute positioning is ok as long as you don’t need a cleared footer below the three columns. Strange that not more people use this.

Anyway, the above doesn’t work in IE7. It should, because IE7 supports :hover on all elements, including my “div columns”. Some googling led me to an old IE6 bug where some elements are ignored on links. The bug talks about IE6 and the color property being ignored, but the same seems to apply to IE7 and z-index.

So, long story short, just add display: block to the hover rule and everything works fine. As the link above dictates, many different rules work, the important thing is that it must be a new rule, which you haven’t used before on that element. But you don’t set display: block; on divs, do you? So it should work fine.

Hope it helps some frustrated soul out there :) And long live funky designs.

IE6 bug: Ignored selector hover bug IE6 bugs seem to pop up all over the place...
Upside down text with CSS Previously I've talked about reversing text with CSS by simply...
Finer details of floats The other day I was working on one of those...

Yellow fade with CSS and a simple image

2008-10-31T19:47:20Z

Via Think Vitamin I find a cool way to highlight the current element. Lots of people do this by calling some kind of javascript library, it’s so common it’s been dubbed the yellow fade technique. But javascript isn’t really needed, you just need CSS and an image.

First: you can jump to any id on the current page by appending #some-id-here to the url. This includes all the “semantic” ids you’ve added to the page such as #content, #sidebar, and so on. Very useful if you want to point out a certain section of a page to a friend, just look at the source, try to find an id nearby, and add it to the url.

If you want to make things even easier on your own site, you can visually highlight things that get referenced via the above method. That’s where the :target psuedo selector jumps in to save your day. Please note that :target is CSS3, and only currently works in non-crap browsers. But perhaps this effect is something not all users really need?

a:target {
   background: #234af5;
}

This highlights all links that get referenced via the URL with a nice blue color. So they need an id added. Makes perfect sense for all kinds of documentation where you want to refer someone to a certain method or even sentence.

But it gets better:

:target {
   background: url(yellow-fade.gif);
}

We’ve removed the limit of only targeting links with by using :target straight off. So all targeted elements will get affected by this rule. What next? Well, we use a small animated image to fade from one color to the next. It’s a really easy way to add dynamics to a page.

Try the effect by jumping to the code example above.

I really think this makes internal links a whole lot more useful, especially for jumping to the bottom of the page, where it’s not possible for the browser to scroll down enough to get the targeted element to the top. Needless to say, I’ve added this effect to this site too. Hope you can find something to use it for too.

Simple CSS templates The most frequent question in the #CSS channel I'm in...
Correcting the 20 pro tips (.NET magazine) .NET magazine is a fairly big web development magazine. I've...
KTH goes web standards Sweden's largest technological university, KTH, just launched their new site...

Django - the fun framework (presentation)

2008-10-31T16:47:41Z

Yesterday I attended the excellent Geek Meet hosted by Robert Nyman at the Creuna office. I held a presentation about the Django web framework, and took some time today to add some comments in english and make a PDF-file of the presentation. Would you like to know why Django is more fun than what you’re using right now?

So go ahead and have a look at the presentation: Django - the fun framework (11 Mb, PDF with english comments)

Worth a look: DOMAssistant A couple of months ago Robert Nyman showed me a...

Ten commandments of update services

2008-10-31T17:13:39Z

I’m getting increasingly annoyed with update services shipped with popular applications. It’s looks like it’s getting worse and worse, and I think someone should stand up and say enough is enough.

Adobe Update
Google Update
Microsoft Update
Ten Commandments of Update Services

Let me start by showing when updates go wrong:

Adobe Update

I start Adobe Fireworks because I want to resize an image I have. After it has started and the image has loaded the update service prompts me that there are new updates available. For what? It doesn’t say, so I click more info and get a list of things. Strange: None of them seem related to Fireworks.

The update starts, and tells me I have to close Fireworks to complete it. Bah, I just started it! I’m trying to resize an image here, remember? But Ok, this time. Next it tells me to close Firefox. What?! All my precious tabs I’ve saved for later reading! Bitches.

The download begins, and the progress window takes focus over the other stuff I’m doing while not looking at the progress bar. *Repeated clicking to hide the window*. Then when it’s done it takes focus again, and asks me to click the only button available. GAH?!

Ok, done. Why was I starting Fireworks again? And hey, what’s those new PDF icons doing in my Links toolbar in Internet Explorer?

Google Update

Oh, a new web browser: Google Chrome, I surely want to try it out. *Couple of hours of fiddling*. Nah, I still like Firefox more, I’ll go back to using that one. Wait, what’s that GoogleUpdate.exe process doing there? I’ll try closing Chrome. Nope, still there. Ok, I’ll force it to close. Hmm, it restarts after a while. Ok, must be some kind of process that starts with Windows. Ah, registry setting, lets remove that one. *Reboot*. Still there?! Ah, they also installed it as a service. Lets remove that too. Finally!

What’s that? A new version of Google Gears! *Installing*. Hmm… What’s that GoogleUpdate.exe process doing there? GAH! What were you thinking Google?!

Microsoft update

I really should make sure my OS is up to date. Lets go to the windowsupdate website. What? I need to run IE5 or later? Ah, no Firefox support, damn it. Lets switch browser. Ok. Install validation thingie? Ehm… I guess I have no choice. *Waiting*. Ok, now let’s see if there’s some updates, Express or Custom? Custom, of course. *Waiting quite a long time*. Why are you making me look at a progress bar? Ok, no OS upgrades, but there’s some update to Windows Media player. Yeye, I guess it couldn’t do any harm (not that I use that one). Trust ActiveX thingie? Yeye, I know what I’m doing. *Waiting some more, with focus stealing*. “Please restart your computer to complete the installation”. Sigh.

So why don’t I just use Windows Update program instead? Well, there’s a window that pops up every 5 minutes that remind you that you have to restart the computer. Do you know how annoying that one is? No, it’s MORE annoying than that.

Ten Commandments of Update Services

So I hope that’s enough evidence that big companies have no idea how do conduct a decent update of their own program. So let me offer some (free of charge) advise:

If your update is web based, let me use any modern browser I want. Don’t start by getting me annoyed.
Check for updates right before the program starts. I know that you want me to close the app while it’s being updated, but why on earth do you let me start it then? Lets keep it simple, update before the program starts, and resume starting the app when you’re done.
Don’t leave processes running in the background when I close the program. When I close your program, I don’t care about you, or any updates to your program.
Only update the current program, not bundled ones. I know you want me to have the latest versions of all your programs, but odds are I don’t even use them. Update those programs when I start them, not now.
Show me what gets updated, and if possible link to a change log. If you want me to download 70 Mb you need to first talk me into why I need it. You may want to hide detailed info for inexperienced users, but could you please then remember that I’m not one of those?
If it’s a tiny update (less than 1 Mb), you can just go ahead and install right away. You don’t even have to prompt me.
Download and install in the background, without stealing my focus. If you’re shipping a big pile of fixes (ie. the version I bought was not done), you have to let me do other stuff while you update. Like surfing the web. It’s not Ok it require that I close unrelated programs, sorry.
Never ever touch my browser bookmarks. Never add things to the quicklaunch bar. Never make things start automatically unless I’ve told you that’s what I want (why do most people have a Quicktime icon in their systray?). The only way of getting into my bookmarks or my quicklaunch bar is writing a really good application. You can’t force me to like you. The opposite works well though.
Never require me to restart the computer. There’s only one exception for when you may: when I’m updating the operating system. No excuses.
When you’re done, just start the program. I don’t want to confirm anything, I want to get to work using your app.

(Bonus point from James Socol in the comments: 11. Use incremental downloads, so I don’t have to download stuff I already have installed.)

If you are a software company, and can’t manage the above, just do it the old fashion way: let me manually download a file from your website. That will annoy me much less than a bad automatic process. Or if you want things to be really convenient: write a web application instead.

Now get to work. I’ve had it.

Install MySQL-python on Mac OS X (leopard) What a pain. Getting mysql to work with python is...

The Open Web: Can it deliver?

2008-09-01T21:01:09Z

It’s ringing through my head as Microsoft releases Silverlight, as Adobe forces another version of Flash or Air, and as Sun tries to push JavaFX into the spotlight. It’s a dark whisper when I read how many still use old browsers (hello IE6!), or when I see Javascript being used poorly by otherwise knowledgeable programmers. It’s getting obvious when people complain over how hard and hacky HTML and CSS is.

People are simply not getting their job done fast enough. Just because we’ve hacked and hacked to the point of getting used to it, doesn’t mean our way of writing web apps is the best way. In the end it about delivering to end users or paying clients, and they care more about what you deliver than how. I’m not saying we are working slower than before, it’s the opposite, new tools makes web development less annoying. But I am saying that we get less work done in relation to the expectations.

So what do they expect? Well, they want flashy effects. The want application behavior. They want snappy response times, bright colors, and “Wow!”-reactions. For our clients, the web is getting more crowded every day and they need to fight harder and harder for people’s attention. That means you need to fight harder on their behalf.

Say you are a pro open standards developer, like me. What tools do you have to grab people’s attention? Valid HTML? DIVs with fading color? AJAX? No way man. A good Flash developer can get a wow reaction by the time you’ve chosen doctype (or at least by the time you’ve booted IE6).

So you turn to Google, and look for the latest and hottest in standards development. And you find that you need to use Javascript and Flash (sIFR) to render custom fonts. You find that you need to use (Adobe) Photoshop to add highlights and shadows on your headers. You find that you have to hack severely to be able to use alpha transparent images. To do any kind of animation, you need a big Javascript library, because browser makers have not yet (yes, it’s 2008) been able to collaborate on how the language should work.

You say that standards have to take time. That everyone needs to come together and thoroughly discuss important issues. The right committees and councils needs to be formed. Meanwhile Microsoft prepares for the release of Silverlight 2.

Have you no sense of urgency?

Open letter to the IE Team Dear IE Team, I have carefully followed the development of...

7 silliest W3C specs ever published

2008-08-13T20:20:52Z

W3C is producing lots and lots of good specifications and we seriously have their joined effort to thank for a lot of today’s web. But everything released by them isn’t all nice. I’ve digged deep into obscure search results to find, that’s right, the silliest specifications ever. *Drumroll*.

HTML+TIME: Why not add timers to HTML? Didn’t you always want to only display that div only the first 4 seconds after load. Could this be combined with the blink tag somehow?

Predefined icon entities: No more images needed! Instead, let browsers implement whatever icons they want and just use them by typing &calculator;, &fax; or &www;. I love the example icon for &gopher;, is that an orc?

CURIE Syntax: There are also huge specifications for nothing. What about a 2000+ word specifcation for the syntax: “charcters:characters”? This is what happens when you put too many “scientists” in one room.

Micropayments in HTML: If you’re going to make micropayments on the web, first build your payment system, then add lots of attributes you don’t need. Then make sure you pick a short code for your payment system, and get that one in the spec. Ehmm. No.

Selecting Payment Over HTTP: If you are into paying, but don’t really like interfaces, this one is for you. You can’t pay through it though, just select how to pay. Makes sense, doesn’t it?

CSS Marquee Module Level 3: Remember the marquee element? What if you could implement that on any element, using only CSS3? Isn’t marquee behavior? I guess not. “The deadline for comments is 1 September 2008″.

Accessibility for old people: Very strange. This isn’t a specification but a literature review. Could this be the first step for W3C to go into book recommendations? I love the chapter of how to define an old person.

That’s all I can find. Now I leave it open to you to fill in with the comments about how useful they could be, and how SOAP should be in the list. Over to you, dear audience.

Top 3 articles of friendlybit.com (according to me) Robert taunted me cause my blog was to inactive, so...

Google Reader subscriptions on a Wordpress Page

2008-08-09T18:52:56Z

Instead of posting new lists of blogs I follow over and over again I thought I’d make a permanent place for them. So I just exported all of the blogs I follow from Google Reader (Settings -> Import/Export) and imported them to Wordpress (Write -> Links -> Import Links (in the sidebar)). OPML is a great format!

Then I created a Wordpress Page template that simply printed the content of that page followed by all my imported links. This following is the code needed (as a file called links.php in your template directory):

<?php
// Template Name: Links
?>
<?php get_header(); ?>
<div id="content">
   <?php while (have_posts()) : the_post(); ?>
      <div class="post" id="post-<?php the_ID(); ?>">
         <h1><?php the_title(); ?></h1>
         <div class="entry">
            <?php the_content(); ?>
            <?php wp_list_bookmarks(); ?>
         </div>
      </div>
   <?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now just create a new page, and select the Page Template “Links” at the bottom. Fill out a page title and an introduction text and press Save. Voilá!

The final touches was adding two new categories, “Blogs I follow” in English and Swedish, moving all links to one of those, and removing everything not related to web development or media. Some bastards also both have great blogs and are my friends, so I removed some duplicates too.

So, here it is, a permanent page of my Google Reader subscriptions, converted into a Wordpress page. I’m hoping you’ll find something interesting in the list of excellent blogs!

Google statistics over HTML usage Google Code has done extensive research over the use of...
Improving the web; Blogging, Google and Web standards The web has really changed the way we do things....
Feed readers should show comments One thing I've noticed lately is that I read fewer...

Why adding variables to CSS is a good thing

2008-08-07T14:29:24Z

Via Simon Willison I find that Bert Bos, one of the creators of CSS, has written an article on why variables shouldn’t be included in CSS3. I thought I’d try to explain why I think they should.

Professional perspective

Bert posts statistics of stylesheet usage from the W3C site, and means that most stylesheets are very small, and on those, variables are not really needed. I agree. You can get away with simple search-replace in those simple cases. But Bert also finds that there are bigger sheets: “largest hand-written style sheet: 1462 lines (bought from a Web design company)”. I work at one of those companies, and almost all CSS files I write exceed 1000 lines.

In those cases, I think CSS variables would help me a lot. Especially for margins. Matching several margins together by copying the same value over and over again isn’t maintainable. Search replace on a pixel value is a sure way to mess up your whole stylesheet: who says you only use 5px for those margins? So there is a use case for some kind of variables.

So we need variables, but how?

Bert then suggests that those people should use a solution such as PHP to generate CSS. So we should invent a new language for generating CSS with PHP? And another language for generating CSS from Ruby, from Java, from .NET, and so on. Why shouldn’t we go this way? It’s the path HTML has taken. And this is a hard nut to crack. How is CSS different from HTML? Why should CSS have variables when HTML doesn’t?

I think the answer is that we should add variables to both languages. They are very similar in nature, so they should be treated the same. Because what has changed since when CSS was created is that we’ve started building bigger and more complex sites. And if CSS starts to be too cumbersome to use, people will start looking elsewhere, to Flash, Air, Silverlight and so on. CSS needs to adapt to the more complex sites people are building today.

I’d rather see CSS follow the times and add variables, than seeing frustrated professionals move to proprietary technologies.

So what about beginners?

Bert’s article deals a lot with beginners, and how it will be harder for them to understand another level of abstraction. Lets make it clear at first that CSS already is too hard for beginners. To make a very simple layout you need to understand floats (yes, almost everyone needs columns), and floating is really confusing (ever tried to explain float/clear to someone?). Even for someone like me, who has worked with CSS for years, floats still puzzle me regularly.

People will give up on CSS when they encounter floats (yes, I’ve seen this), not when they find CSS variables. They can just choose not to use variables, while they really need to know floats. Also, CSS variables are easier to understand than cascading values. I mean really, if I set font-size on body, why do my links get larger? That’s a very similar concept that is central to CSS.

Summary

CSS Variables make it easier for professionals to do their job. It doesn’t require inventing new template languages. It doesn’t make the language overall harder either. The people that can handle floats and cascading, can handle variables too. We need variables.

What beginners ask for (and what I tell them) Being in an IRC help channel lets you meet a...
Simple CSS templates The most frequent question in the #CSS channel I'm in...
Beginner’s guide to CSS In the chat channel I'm in, I get to talk...

Don’t waste time writing HTML and CSS

2008-07-09T23:02:50Z

When you’ve worked with front-end development for a while, you start thinking about effectiveness. So without further ado, here’s my four best ways to be a more effective front-end developer. Feel free to add more ideas as comments!

1. Do you need HTML or CSS for this?

Lots of times when I get stranded on hard problem and sit back, I realize that I really shouldn’t be trying to use CSS to solve all layout problems. Assuming a rounded corner box will have to scale in all directions (up to 8 images!), when it really is fixed width and height (1 image), is an indescribable waste of everyone’s time. Look closely at the design you’re trying to implement: does it really have to be as flexible and scalable as you think? Shifting to that mindset saves me hours of work per day.

One thing that many developers forget is that not all designers care for exact pixels. If something is really hard to develop, walk over to their table and suggest a change. You’ll soon start to notice that designers are real people too, and that they have as much flexibility as you do. It’s just as easy to call them up, so don’t let shyness waste your time.

2. Try to set properties once

When you know you have to do something (see above), try to do things once. This is really tricky in both HTML and CSS, languages that have no variables, and generally makes code reuse a pain. But it is possible.

With CSS; set widths of elements once, and trust inner elements to fill their parent. That’s the default behavior of block level elements, and you can set display: block, or width: 100% on most other elements. Don’t set heights at all if you can avoid them, and let elements expand to fill their containers. Combine similar CSS selectors to avoid typing things twice, and make new ones for common properties when few properties differ. Use floats and clearing instead of absolute positioning, and you’ll won’t have to micromanage positions all the time.

With HTML, make sure that you really know the template language. I’ve fighted with ASP.NET, JSP, JSTL, Smarty, Wordpress Themes, RHTML, and Django’s Templating Language, and now know enough about all of them to be productive. You should never have to type the same structure out twice, even in HTML. If your template language have loops, if-clauses and includes you really have no excuse to copy large chunks of HTML around. Refactor your HTML and make your own life easy.

3. Learn your text editor

When code reuse isn’t possible, use search/replace in your favorite text editor.

Replacing all instances of one HTML tag name with another is about replacing “element>” with “element2>” (without the opening bracket). That way you replace both opening and ending tags at once. Check to see if your editor supports regular expressions in its search/replace tool. If it does you can save lots of time by learning it. Matching a HTML tag is “<[^>]+>”, a starting angel bracket, one or more non-brackets, followed by an ending angel bracket. Naive regexps can make you match the starting bracket of one tag and the end of another, which makes for a mess.

There’s lots of little tricks like that, if you learn them you save massive amounts of time.

4. Make sure your environment supports you

There’s more than the text editor that you have to work with. One essential part of front-end development is trial and error. It sounds silly but no matter what your skill is, sometimes you must resort to trying and testing your way to a solution. With HTML and CSS, this means being able to quickly make a change, switch window, and see that change in the browser. If that cycle takes more that 5 seconds, you’re losing valuable time.

Don’t use a virtual machine (even if it’s only for IE6) that you can’t quickly Alt-Tab out of. If you’re stuck using one, you need to have the text editor on that machine too. It’s worth your time fixing it.

Don’t accept build processes that makes you wait more than 5-10 seconds before you see your changes. With trial and error coding you will then waste 50% of your capacity doing nothing. Most often you can bypass this by copying just the HTML and CSS to the right place, without touching other source-code. I’ve managed to do this in all kinds of crappy environments, and it’s always worth it.

So.

I hope some of the above can help you save some time each day. The little things add up you know. What’s your best time-saver?

Datatypes of HTML; why HTML is great for structure HTML is often bashed by people for being a bad...
Encyclopedia of HTML elements HTML is a much richer language than what it's used...
Forgotten HTML elements? HTML has existed for a long time now with five...

Upside down text with CSS

2008-07-08T18:46:44Z

Previously I’ve talked about reversing text with CSS by simply setting a few CSS attributes. Today we will try another trick: turning text upside down.

It’s actually possible using a simple CSS property and works cross-browser today. The property to use it “text-gravity” with a value of “inverse”.

<span style="text-gravity: inverse">
write upside down text
</span>

… and this is the result:

ʇxǝʇ uʍop ǝpısdn ǝʇıɹʍ

I’m really surprised to learn that so few people know about this property, and I recommend you to continue reading the W3C specification of text-gravity.

Update: Sorry, I lied :) The above is done with a UTF-8 character generator (see the link the the “specification” above). Amazingly, you can find that most characters have their upside down equivalent somewhere else in the huge Unicode alphabet. Neat trick :)

Reverse text with CSS (32 very special hex digits) Sometimes you wake up and feel that big things are...
IE7 Zoom Bug: Text width incorrectly calculated IE7 shipped with a new and improved Page Zoom feature...
IE6 bug: Ignored selector hover bug IE6 bugs seem to pop up all over the place...

Feed readers should show comments

2008-06-15T16:25:48Z

One thing I’ve noticed lately is that I read fewer comments. It isn’t that strange really: I read blogs using a feed reader and it doesn’t show a links to comments. I see a couple of reasons why comments are not cared for in feed readers:

Why not to #1: Feeds are meant to be fast

Many subscribe to feeds to be able to get news before everyone else. And getting things fast means getting it before anyone else have commented. Why add a lot of zeros below each feed item?

But, it isn’t unusual that I read posts that are a couple of days old. I don’t read my feeds every day, rather every second or third day. In those days there are most likely comments on good posts, and of course I don’t want to miss them. The older a post is, the more likely that it will have interesting comments.

Why not to #2: Comments are hard to detect

Perhaps feed readers have a hard time detecting if there are comments to a post or not. Comments are not included in the post, so wouldn’t they have to parse through the feed link for comments?

No, there is a tag called <wfw:commentRss>, that’s possible to use in both Atom and RSS (If I’m not mistaken), that gives a link to the comment feed. That means feed readers could easily get the comments too. The best thing here is that all Wordpress blogs (and others too) have it already. It’s just a matter of using it!

Why not to #3: Each post will be too long!

If there are 50 comments to a post, the item in the feed reader will be too long to read. That would also affect download time and therefore make things slow.

Yes, it will mean downloading more data, but you also get more information. Each feed reader is free to implement comments any way they like, and I doubt it will be to expand the original post with all 50 comments. I little link that expands comments (don’t download any extra data until you expand)? Only show the first five, and a link to the page for more? There’s lots of good options here.

Promote contributions more

Adding comments to your feed serves to promote your user’s contributions even more, and I’m really surprised that not everyone does it. I’m using feed burner for my feed and can therefore use a feed flair (Click your feed / Optimize / FeedFlair / Comment count) to add a link to my comments at the end of the post. That’s a first step.

What would be much better was if feed readers would get better at promoting comments. Could we get them to somehow?

IE6 standalone with conditional comments and cookies Just a quick note for all of you that wants...
Feeds - a threat to design on the web When CSS was first introduced it got bashed by a...
New theme up for friendlybit.com Hi! If you're reading this blog through your feed reader,...