You are currently browsing admin's articles.
There won’t be much going on around here for the next few months. I’ll be travelling around Africa and Asia, in search of new developments in the dark arts.
Adventures will be duly chronicled on my travelogue.
See you in the winter!
In the spirit of the perpetual beta of Web 2.0, I’m republishing this post based on the changes I made for my presentation at the Web2Open in San Francisco.
Flow is something that we’ve all experienced at one point or another. It gets us out of bed early in the morning so that we can get a few quiet hours in at the office. It keeps us there late, after every one has gone. It also keeps us glued to video games or out jogging on the street.
So what is this experience that keeps us coming back for more? Most of us call it “getting into the Zone”. The psychologist Mihaly Csikszentmihalyi coined the term “flow”. Flow has also been called ‘a highly productive state of concentration’. Csikszentmihalyi found flow so compelling that he dedicated his life to studying and deconstructing the experience.
Flow matters
What’s so great about flow? Being in the flow state while doing your work produces vastly better results than when you do your tasks on autopilot. You get things done more quickly, and it’s a very gratifying experience in and of itself.
None of this would matter if going into flow was just a nice fluke that happened every so often. But in fact, you can learn to control it. You can harness its power to get better work done faster.
There are two main aspects of learning to harness flow: learning to train your attention, and engineering circumstances that allow flow to occur more easily.
Attention is key
Attention is key to your experience of life. What you get out of an experience is proportional to the amount of attention you pay it.
For example, you could have an amazing meal sitting in front of you, but if you are too distracted to notice the textures and flavors while you’re eating it, it will be gone before you remembered to enjoy it. So that amazing meal becomes a mediocre, forgettable one.
Similarly, if you only half-watch a movie, you miss the themes, plot twists, and character development that make it interesting. An otherwise compelling movie becomes a dull one in your experience, when you remove your attention from the equation.
In the same way, doing your work using only part of your attention blocks out opportunities for discovering novel approaches as well as elegant solutions.
Engineer circumstances that are favorable to flow
The second aspect of learning to harness flow is to engineer circumstances that allow your mind to go into the flow state. This aspect emphasizes making it easy on yourself, and not sabotaging the process of going into flow.
Since a large part of the flow state depends on engaging your full attention, there is an emphasis on screening out distractions as much as possible. While you can’t necessarily screen out your colleagues, you can close down IM, your email client, and your RSS reader. You may still need to browse the web, but be careful to stick to relevant pages, and not let yourself go from site, to site, to site, suddenly realizing 15 minutes later that you’ve gone on an unproductive tangent. It is extremely easy to go down the online rabbit hole these days, but it is also one of the biggest modern barriers to flow.
Nine components of flow
Csikszentmihalyi identified nine components that characterize the flow state. You’re probably already familiar with some of them and you might already do these. Finding ways to integrate all of the nine components into the way we work will help with this process of engineering situations where flow comes easily.
1. Clear goals
The first thing that characterizes flow is the presence of clear goals. It’s having a good idea of what you’re shooting for.
It’s important for these goals to not be too abstract or long-term. I don’t mean the sort of goal where you decide you’re going to build the world’s greatest social web app. It needs to be at a scale that is achievable one session.
You sit down, decide what you’re going to do, and by the end of the session, you’ve done it.
If you’re working on a website, it may be cracking just the one UI problem. If you’re a writer, it would be writing just a few pages, or one article. The important thing is that you have a clear idea what you want to achieve, and that you know it is achievable. You don’t need to know exactly how you’re going to do it; you just need to know roughly what it is and how you’ll know when you get there.
2. A high degree of concentration on a limited field of attention
Another characteristic that Csikszentmihalyi noticed was part of the flow state is a high degree of concentration on a limited field of attention.
We have so many interesting things available to us while we’re sitting at our computers these days. In fact, half of the apps we’ve seen this week exist to suck in our attention. While this makes having a desk job way more fun then it used to be, it also tempts us to spread out our attention very thinly between IM, email, twitter, flickr, reddit, digg, and on and on.
As much as we like to think of ourselves as multi-taskers, the truth is we can only really concentrate on one thing at a time, and multi-tasking for humans is really just switching very quickly between tasks. There is a cost associated with each instance of switching tasks, and it’s usually our work that pays the price.
The good news is, it’s easy to turn many of these things off! They are virtual, and so they can be gone with a click. Web sites are a bit trickier to screen out if the web is big part of your job, so you may just need to ban yourself from certain sites while you’re in a flow session.
3. A loss of self-consciousness, the merging of action and awareness.
The third component of flow is a loss of self-consciousness – getting out of your head and into your task.
One way to move toward this way of working is to stop viewing your work as an extension of your self-image. Instead, start thinking of it as a collection of ideas whose edges you are trying to find and carve out; you are acting as a conduit to bring these ideas into a concrete reality. This helps get your ego out of your work.
4. A distorted sense of time.
Time is most people’s scarcest resource, so it should be carefully managed. This is one of the main benefits of flow – you get more out of the time you spend in flow, so you have the option of spending less time on your tasks.
The best way to lose awareness of time is to set apart a period of time specifically allotted to your predefined task, and to block out all distractions and interruptions as much as possible. The book Peopleware found that it takes at least 15 (uninterrupted) minutes to enter a state of flow. You may find that the first 15 minutes are the most difficult to stay focused, but once you’ve made it through, you hit your stride.
If there is one kickstart system to begin getting a taste of flow, it is The Power of 48 Minutes. The idea is to work in 48 minute bursts, with 12 minute breaks in between. During the 48 minutes you are fully immersed in one task. This has an added safety net for people with short attention spans: if you start to get bored, you can race against the clock; if you’re finding focusing on your task tortuous, you’ll at least know you only have to do it for X more minutes. You’ll probably be surprised at first at just how much you can accomplish in a 48 minute session, when you are fully immersed.
After that burst, you get up, walk around, make a cup of coffee, check your email, catch up with your colleagues. Then, after what may seem like a decadently long break, you go back, refreshed, for the next round.
This system requires a timer so that you don’t need to keep checking the clock. You could use an egg timer, or a desktop widget. I’m using desktop widget called TimeLeft. It’s a little buggy to configure, but once you’ve got it set up, it’s useful and unintrusive. If you know of a better one, please let me know.
5. Direct & immediate feedback; behavior can be adjusted as needed.
Csikszentmihalyi reckons that what makes most games fun is the fact that you can continually experiment and try out new strategies as you see what works and what doesn’t. It’s also what makes any kind of driving or riding fast that demands constant fine-tuning of your course so enjoyable.
So how can we bring this immediacy of feedback into our work?
Web 2.0 is all about early releases, alphas and betas, and short, iterative cycles, where you send your product out into the wild early, so that you can see how it is actually used, and then fine-tune it accordingly, usually several times. While this way of working can seem a bit chaotic at first, it is also much more fun, because you get a constant stream of very useful feedback, which you can incorporate into your product to make it far better suited to your audience than if you had just tried to guess what they wanted.
There was an interesting study done a few years ago where they divided a pottery class into two groups. The first group was told it would be graded on the number of pots it produced over the course of the term. The second group was told it would be graded on the single best pot they produced in that term. So essentially, the first group was being graded on quantity, and the second on quality. The results of this study were quite interesting. It turned out the first group, who had the most tries, without being hung up on perfection, actually turned out the higher quality pots by the end of the term.
With web-based products, focusing on getting something built and out there and then fine-tuning it can result in a higher-quality end product than fixating on getting it perfect the first time. You won’t know how you need to adjust your behavior until you get that feedback.
6. Balance between ability level & challenge.
We can’t always choose our tasks, and even when we do, there are usually parts of it that we’d rather skip. Even in the best job, there will still be some amount of drudgery as well as some tasks that really stretch and intimidate us.
Luckily, you can adjust the level of challenge within most tasks. If something is too easy or mind-numbing, find a way to make it more efficient, more elegant, more innovative, more automated.
If a task is too hard, find a way to break it down into increasingly smaller chunks until you find the right level of challenge. Alternatively, deconstruct the way someone else has solved a similar problem.
7. A sense of personal control over the situation.
It is worth the time to master your tools; they should enable you, not get in your way. Put in the time to find the right software for the job, to understand the core concepts, to learn the best practices, to mechanize the mundane.
This way, when you’ve gotten into the flow state, you won’t have to interrupt yourself by looking up that shortcut, playing trial and error with something you should really know, or being distracted by a search for something trivial.
8. Intrinsically rewarding action, resulting in effortlessness of action.
Not everyone is lucky enough to pick and choose which projects he works on. Even on a hand-picked project, there will still be parts that you don’t enjoy doing. Keep in mind that even if you can’t choose what you do, you still have a degree of freedom in how you do it. Learn to develop and refine your own style. Enjoy craftsmanship for its own sake.
Also, once you’ve become good at triggering the flow state, the experience of flow will become a reward within itself.
9. Focus of awareness is narrowed down to the activity itself.
As soon as you notice your mind start to wander, use that as a trigger to remind yourself to refocus on your work. Your mind, by nature, needs to be occupied with something. The closer attention you pay to your chosen task, the less energy you’ll need to spend to keep your mind from wandering.
There will always be interruptions
This structured, focused, short-burst style of working is different than the free form style most people use by default. Colleagues, partners, and roommates may naturally assume that a given moment is as good (or bad) as any other to interrupt you.
How you manage people who are likely to interrupt you depends on your relationship to them. If you have an open, casual relationship with the person, then you can mention to them what you’re trying out before you go into a session. If the person interrupting you is somewhat unfamiliar (a colleague from another department, for example), you can point to your timer and ask if you can get back to them in whatever time it says. The timer is great for this; it makes the process look important and formalized. If the person is someone who regularly wants your time, you can better manage this by actively engaging with them in those 12 minute breaks. It’s a good a excuse to get up and walk around, and that person will feel less need to seek you out during your focused sessions.
Visual cues such as headphones and earplugs, are useful as well. And if you really can’t bear to shut down IM, then at least change your status to busy.
The pay-off
None of applications of the 9 components is difficult within itself, and each can be added to your routine individually. But even though the system is relatively simple, the pay off is substantial. You’ll produce better quality work, in the same or less time, and you’ll enjoy the process more.
Seven years and one deportation later, I’ve finally been granted British citizenship. The last step in the process was a very civilized “citizenship ceremony” where they served us tea and Victoria sponge cake, and we took an oath to, “…be faithful and bear true allegiance to Her Majesty Queen Elizabeth the Second…give my loyalty to the United Kingdom and…uphold its democratic values.”
This reminded me of my favorite section of the book that the Citizenship test is based on, the “How Britain is Governed” chapter. Here are some gems:
“The United Kingdom constitution is an unwritten constitution.”
“Britain has a constitutional monarchy.”
“The Queen is Head of State of the United Kindgom.”
“There would be a constitutional crisis if the monarch ever spoke out publicly either for or against government policy.”
So that’s why the Queen rarely speaks. Because the unwritten constitution would be in crisis if the Head of State expressed her opinion! Reminds me of the people encouraging Americans to forfeit their civil liberties and right to privacy in order to preserve their freedoms.
The debate over whether there should be more women speakers in our industry was reignited by Eric Meyer’s recent post where he said “as a conference organizer, I don’t care about diversity.” This set off what is apparently called a blogostorm, with lots of passionate reactions.
I would need to know a lot more about the diversity within the field, and the relative talent available, before I could offer a useful opinion, but the dynamics of the whole thing seemed very familiar. Then I realized: it’s the same dynamic as a high school dance.
If you’ve since blocked these experiences out, let me take you back there a moment. The DJ’s spinning “White Lines,” you’re goofing around in a circle with your friends, showing off that you know all the words (though you have only the most abstract idea of what they might mean). Then “Careless Whisper” comes on. Some people are secretly excited, because it’s an excuse to get closer to what (or whom) they were after all along. Other people dread these moments, because of the ball of nerves and fear that strikes the pit of their stomach, but feel they ought to take part anyway. Whatever their reaction, the code of conduct is the same. Girls are meant to make themselves as appealing as possible, and wait to be asked. Boys are meant to ask, and if they are turned down, keeping asking around until someone says ‘yes’.
Tantek comments, “One of the biggest complaints I hear/read is, why aren’t people inviting me to speak?..But the biggest response to those that are waiting for invites is – why are you being so passive?”. For me, at least, it’s because I didn’t know we were meant to keep asking until someone said yes! Isn’t it pushy or rude or inappropriate or something? Apparently it isn’t, but if you didn’t know what the code of conduct was, I think your assumption might be influenced by the way you were expected to behave in those socially formative years.
I never made it to prom. I figured out that living rooms were much more fun to have dance sessions in, because you chose the tunes, you could jump on the couch, and you didn’t have to wear stupid shoes. If conference rosters are the new homecoming courts, Meri’s and Tara’s parties are looking like a lot more fun!
We’ve all had the experience where we’ve become so completely absorbed in our work that time flies by, the outside world is a million miles away, and our talents flow freely. These episodes can be deeply gratifying, and some of our best work comes out of them. So, what causes this, and more importantly, how can we make it happen more often?
The psychologist Mihaly Csikszentmihalyi called this state flow, and spent years studying the phenomenon. Flow has also been described as ‘a highly productive state of concentration’ in Peopleware : Productive Projects and Teams, and as a ‘Zen-like state of total oneness with the activity and the situation‘ in Wikipedia.
Why Flow Should Matter to You
Peopleware suggests that flow is essential to writing great software. Certainly, nose-to-the-grindstone style of churning out code can produce copious amounts of mediocre results. But to truly let the stroke of genius in, you need to be tapping into the Zen of the matter.
Csikszentmihaly goes even further, arguing that “it is the full involvement of flow, rather than happiness, that makes for an excellent life.” This is a particularly interesting assertion in light of the recent studies that suggest that we aren’t very good at predicting what will make us happy anyway.
Entering this flow state can be a skill, not a fluke.
The Two Ways
There are two complementary ways to increase the frequency of flow in your daily work.
The first is training your ability to concentrate. Attention is key to your experience of life; how much you get out of any activity is directly related to how much attention you pay to it in the moment. For example, you can eat an amazing meal, but if you haven’t noticed the flavors and textures, it will have gone before you remembered to enjoy it. Similarly, if you only half-watch a movie, you will miss the themes, plot twists and character development that make it interesting. In the same way, doing your work while in autopilot blocks out opportunities for novel approaches and elegant solutions to present themselves to you. Genius will only come while you are fully engaged with what you are doing.
Your ability to concentrate can be trained, just as your body can. It is a slow, incremental process, and just like with physical training, the real gains are made through consistency rather than occasional bursts. You can build your powers of concentration using many activities, but it is often helpful to start with one that is unrelated to your day job. This is because the presence of agendas and goals other than simply training your mind can detract from your focus and hinder your progess.
A particularly good concentration-boosting technique is the practice of active meditation. I personally like Acem meditation, because it is non-religious and focuses on the development of the mind, rather than “mood-seeking”, or the pursuit of bliss.
The second way to increase the frequency of flow in your work is to engineer circumstances that allow flow to occur. Csikszentmihaly identified nine components of an experience of flow. Here is a list of them with suggested ways to integrate them into your daily work style, so that you can enter this state more often.
The Nine Components of Flow
1. Clear goals.
To enter the flow state, you need to define a short-term goal. If you’re working on a large multi-session project like a web app, decide your purpose for this single creative session. Be careful not to overqualify your purpose; your purpose should be “an arrow, not a container”. (- Steve Pavlina)
2. A high degree of concentration on a limited field of attention.
Concentration is absolutely key, and there are ways to make your workstation less distracting. Make things easier on yourself by removing everything extraneous from your field of attention – close down unnecessary applications, ban yourself from IM, email, and irrelevant sites for the duration of the session. It is easy, as soon as the mind starts to wander or a problem seems too messy to deal with, to switch gears and distract yourself with email or irrelevant tasks. This is exactly the moment when you should remind yourself to engage fully with your stated task. Don’t sabotage yourself!
3. A loss of self-consciousness, the merging of action and awareness.
This is Csikszentmihaly’s bit of Zen – there is no longer a distinction between you and your task. This merging comes gradually, as you learn to let yourself be fully absorbed. One way to leave your self-consciousness out of the equation is to convince yourself that no one will see the results anyway, thereby freeing up that mental energy for the task itself. A bit like dancing as if nobody’s watching, but with keystrokes.
4. Distorted sense of time.
Time is most people’s scarcest resource, so it should be carefully managed. This is one of the main benefits of flow – you get more out of the time you spend in flow, so you have the option of spending less time on your tasks. (Though you may find you enjoy it so much that you do it more often.)
The best way to lose awareness of time is to set apart a period of time specifically allotted to your predefined task, and to block out all distractions and interruptions as much as possible. Peopleware says it takes at least 15 (uninterrupted) minutes to enter a state of flow.
If there is one kickstart system to begin getting a taste of flow, it is The Power of 48 Minutes. Cheesy website, but an effective system. The idea is to work in 48 minute bursts, with 12 minute breaks in between. During the 48 minutes you are fully immersed in one task. If you start to get bored, you can race against the clock. After that burst, you get up, walk around, make a cup of tea, and check your email. Then, after what may seem like a decadently long break, you go back for Round 2.
This system requires a timer so that you don’t need to keep checking the clock. I’m using desktop widget called TimeLeft. It’s a little buggy to configure, but once you’ve got it set up, it’s useful and unintrusive.
5. Direct and immediate feedback; behaviour can be adjusted as needed.
This ties in well with a principle of agile programming – test early and often. In this way you can continually fine tune your work so that you don’t stray too far down the wrong path. Keeping an eye on the output will also give you a steady trickle of rewards, as you see the fruits of your labour.
6. Balance between ability level and challenge.
According to Csikszentmihaly, too high a challenge results in anxiety, whereas too low a challenge results in boredom. You can adjust the level of challenge within most tasks. If something is too easy, find a way too make it more efficient, more elegant, more innovative, or more automated. If a task is too hard, break it up into progressively smaller chunks until you find the right level of challenge.
One interesting side note to this is that perhaps, when we find ourselves arguing over minutae and getting downright pedantic, we should take it as a sign that we should ‘move on’ and add another level of complexity to our work.
7. A sense of personal control over the situation or activity.
It is worth the time to master your tools; they should enable you, not get in your way. Put in the time to find the right software for the job, to understand the core concepts, to learn the best practices, to mechanize the mundane. This way, when you’re in the flow state, you won’t be interrupted by looking up that shortcut, playing trial and error with something you should really know, or being distracted by a search for something trivial.
8. Intrinsically rewarding action, so there is an effortlessness of action.
Not everyone is lucky enough to pick and choose which projects he works on. Even on a hand-picked project, there will still be parts that one doesn’t enjoy doing. Keep in mind that even if you can’t choose what you do, you still have a degree of freedom in how you do it. Learn to develop and take pleasure in your own style. Enjoy craftsmanship for its own sake.
Also, once you’ve become good at triggering the flow state, the experience of flow will become a reward within itself.
9. Focus of awareness is narrowed down to the activity itself.
As soon as you notice your mind start to wander, use that as a trigger to remind yourself to refocus on your work. Your mind, by nature, needs to be occupied with something. The closer attention you pay to your chosen task, the less energy you’ll need to spend to keep your mind from wandering.
Dealing with external interruptions
This structured, focused, short-burst style of working is different than the free form style most people use by default. Colleagues, partners, and flatmates may naturally assume that a given moment is as good (or bad) as any other to interrupt you.
How you manage people who are likely to interrupt you depends on your relationship to them. If you have an open, casual relationship with the person, then you can mention to them what you’re trying out before you go into a session. If the person interrupting you is somewhat unfamiliar (a colleague from another department, for example), you can point to your timer and ask if you can get back to them in whatever time it says. The timer is great for this; it makes the process look important and formalized. If the person is someone who regularly wants your time, you can better manage this by actively engaging with them in those 12 minute breaks. It’s a good a excuse to get up and walk around, and that person will feel less need to seek you out during your focused sessions.
Visual cues such as headphones and earplugs are useful as well.
It’s as Simple as That
Clarifying your short-term goals, closing out likely distractions, letting go of your expectations of how people will react to your work, setting apart a period of time and letting a timer keep track of it, testing early and often, adjusting tasks to the right level of difficulty, mastering your tools, enjoying craftsmanship for its own sake, and training your mind to wander less. All of these are simple things within themselves, though perhaps a lot to keep track of at once. You can integrate these components into your work style all at once or bit by bit. The end result will be the same: a fuller, more satisfying engagement with your work, yielding higher quality results.
We geeks are social. Ideas are everything, and we love to share them, riff on them, bounce them off the ceiling until we can make out that crack that we can just jimmy it through. And there’s nothing more deflating than explaining an idea you’re really excited about and being met with a blank face and the comment, “You’re so weird.”
We’re better together, and we’re becoming more aware of this.
We are also independent. We make enough money that we don’t need to be anyone’s slave. We have less respect for boundaries, virtual or geographical. We know that our limits are in our minds, so we make a habit of pushing these. Some of us have figured out the value of a change of context to spur a crucial change in perspective.
Coworking
Coworking aims to create a collaborative environment for freelancers and independents. The idea is to provide a place for like-minded people to be in an atmosphere specifically designed to be conducive to productivity and creativity. Coworking spaces are springing up all over, mostly in cities with thriving techie communities.
Geek nomadism
The geek nomad idea is based on the twin observations that a change of scenery can be great for the brain, and that there are plenty of places in the world that are beautiful, cheap, and well-connected (to the internet, anyway). If you are working on a mid- to long-term project, or building that app for your start-up, why not go off somewhere beautiful and cheap to do it? You’d need to have established a good relationship with your client or be working for yourself, but with skype and a fast connection, why not?
What they have to offer each other
Coworking and geek nomadism have a lot to offer each other:
Coworking is a great idea, but not always cost-effective. It can cost you hundreds of dollars or pounds a month. For that same money, you can live like a king somewhere exotic and beautiful, and still get your work done.
Geek nomadism is adventurous, but it would take quite a lot of discipline to impose enough structure on yourself to be as productive as you would in an office in your city of normal residence. And what if everyone you’re surrounded by is in holiday or gap year mode? Or what if you’re completely on your own, with no one to bounce ideas off of or help you stay focussed or get unstuck?
Knowing you can spend your time in a collaborative environment devoted to productivity definitely increases your chances of making geek nomadism work.
Other potential benefits
One great feature of geek nomadism for freelancers is its tax advantages. If you’re not resident in any country for more than 6 months, then you can see real savings. (Sorry, but I can’t do more than generalize here because it is such a broad topic.) This is especially good if you’re trying to keep expenses down so that you don’t need to look for VC money. In fact, if you let out (lease) your house or flat, you could be making money.
American businesses are notoriously stingy with vacation time, but working from home is becoming more accepted. Working from the Caribbean would be a bit easier to get your boss to accept if you can guarantee him that you’ll be working in a semi-conventional office, not some dodgy internet café. This way, you could still get your sun and your change of scenery, even if you don’t have the vacation time available. This would be ideal for those projects where you need to hide away from your coworkers’ interruptions anyway.
Coworking spaces can function as a local hub, full of people who have been there a month or two and really know the area. This knowledge can be passed on as people leave and new people come in. You won’t need to be spending time figuring out the logistics of the place, like where to sleep, drink, or skype. You can spend the time instead on your work, and know that you’ll still be able to find someone interesting to hang out with once it’s playtime.
Part of the idea behind coworking is the incubator effect. How much would this be magnified in a tropical environment?
This is still a new idea, sparked by Simon’s comment on my geek clustering post and his post on the incubator effect.
I’d love to know what you guys think of coworking abroad!
Technorati tags: barcamplondon2, geek nomad
If you haven’t come across the term before, barCamp is “an international network of unconferences“. The idea is that getting a group of interesting and interested people together in a relaxed and open environment will spur great ideas and good fun.
I went to barCampLondon2 last weekend to meet interesting people, and to be inspired. Here are a few highlights.
I met:
- A mechanical engineer, who is a genius at putting together LED arrangements to function as both input and output devices. He came to hear ideas about what people would like to see built, and how to best enable programmers to have ways of making his LED toys do more cool stuff.
- A white-haired Belgian doctor, who is looking for the best open source platform to get his project on virtual health care off the ground.
- A geek nomad, who has given up his permanent residence for the last few years to live in places that are beautiful and cheap, and have good connectivity. He encourages other people to consider doing the same, because as long as you’re online, does it matter that much where you are? He’s thinking about developing a site to let geeks know where other geeks are clustered, since we’ve all gotten a bit social lately, haven’t we?
- My first bona fide conference junkie. He was very entertaining.
I saw:
- Tom Coates speak on social software. I’m a bit burnt out on this topic at the moment, but his speaking style was so inspiring that immediately afterwards, I went downstairs and rewrote my presentation.
- An absolutely hilarious game called delicious salted, which is a variant of Pecha Kucha that involves a quick jaunt through your last 20 delicious links. Each site that you’ve bookmarked comes on screen for 20 seconds, and you have to explain why you chose to bookmark that site. Try it yourself – it’s very revealing!
I wish I hadn’t missed:
- A very clever way of using web applications like gMail, Google calendar, and flickr offline.
- The best-named mash-up ever – Flashr.
- An easy way of skipping over those annoying sign up forms (OpenID).
I hid:
- In the back of the improv workshop given by James Aylett. This, of course, means I’m going to have to sign myself up for an improv class now.
I presented:
- A process to get yourself into the Zone at work. I’m thinking of rewriting this as a blog post, because it’s kind of annoying to have to click through it! I was terrified at the time, having never done anything like that before. But fortunately it was a meaty presentation, so despite a complete lack of style in my delivery, I got a fairly positive response.
I noticed:
- A whole lotta ladies were there, for a geek gathering. We even had a queue in the loo!
All in all, it was a great weekend. If I go next time, I’ll be sure to do my presentation on Saturday, so that I can stay up all night playing Werewolf!
A useful habit I’ve developed lately is stating my context first when asking a colleague a question about a specific project.
All of the companies I’ve worked in have, as a rule, had several projects going on at once. I’ll often be building a site that a designer has handed over a week or two before, so when I go to ask her a question about it, I will preface it with the pattern
“On [client name], [project name], [site section], [site page], …”
I’ve found that using this preface significantly reduces the amount of time my colleague is subject to the “bit confused, but trying to catch up” face. This drilling down gives her a logical path to follow to help her transition to the train of thought I’m asking her to switch to. And it’s only polite, seeing as I’ve just pulled her away from something else she was absorbed in.
It’s a bit like a verbal breadcrumb trail.
We generally think of alt text as something that we add for users of screenreaders or text-only browsers. But what about the millions of users of search engines that index images?
The two key parameters the engine indexes are the image’s name and its alt text. (It may also make some inferences from the image’s context.) When writing alt text, think about what keywords one might use to bring that image up in a search engine, and try to include those words in a sensible, succinct phrase.
This is NOT to suggest that you fill your alt tags with SEO keyword optimizing nonsense. That rarely does the user any good. What I’m suggesting is that we consider the other means by which people search content, and the parameters by which that content is indexed.
Adding indexable meaning to your pages also makes the web more fun. For example, searching on the word “pint” in google images brings up this charming guy:
He was accompanied by this alt text:
Mr Jack Virgo enjoys a pint following a reduction in price of two pence in the 1959 budget.
Now doesn’t that make you want to write more indexable alt text? Mr. Virgo is all for it.
Further reading: TASI: A Review of Image Search Engines
You’ve figured out how to float left, align top, and use margins to cleverly move elements in all four directions. But how do you get an element to stick to the bottom right corner?
As a rule of thumb, absolute and relative positioning should only be used as a last resort because of their associated risk of overlapping elements in a small viewing area. However, there is one instance where positioning is the only tool that will do the trick. If you need an element – a link or continue button for example – to stick to the bottom right corner of a container no matter what content is in the box, or what size the box is, then there is no other reliable method. (A combination of a right float and a top margin will only work if the elements above are of a constant width.)
For this example, we will make a continue link “stick” to the bottom right corner of a div using an often-overlooked characteristic of absolute positioning.
First give the parent element, the div, relative postioning. However, don’t give it any position values (top or left). This will leave the div in its normal position, but will give it properties that we will exploit in the next step.
div {position: relative; border: 1px solid #ccc}*
Next give the child element, the anchor tag, absolute positioning. This will position it in terms of its containing block. When dealing with absolute positioning, many people assume that the browser window or viewport itself is the containing block. However, a postioned element’s containing block is in fact its nearest positioned parent. In many cases, the viewport is the nearest positioned parent. However, you can position any parent as needed. In this case, we have positioned the div, so the anchor tag’s absolute positioning will be with respect to the div.
a.continue {position: absolute; bottom: 0; right: 0}**
This will set the link’s right and bottom edges to line up with the div’s edges. We may want a bit of space between the two, so specify that the edges be a bit further apart:
a.continue {position: absolute; bottom: 0.3em; right: 0.3em}
Making it work across browsers
We just need to make one tweak to accommodate IE6. There is a rendering error if the div doesn’t have a specified height. Use the Holly hack to “dimension” the containing block:
div {position: relative; border: 1px solid #ccc; height: 1%}
View the completed sample file.
Notes
* Also add a temporary border so we can see what we are doing.
** I have added a class for novice users; more experienced users should use type selectors where possible.
Update
Hurray! The IE team are now shifting their focus to fixing up the ol’ DOM support. Excellent news! If you have any constructive feedback, or can provide a good test case for a known JavaScript bug, head on over to the Web Standards Project post on the topic, or have a look at their growing wishlist (invitation only). Great work, guys!
(Original post)
Much has been made recently of IE7’s improved support of HTML and CSS standards. This is to the great relief of web designers everywhere, and thanks in large part to organisations like The Web Standards Project.
But something major has been left out.
The current state of the art of interface development has shifted lately to the area of JavaScript, as highlighted by the trends in AJAX and DOM scripting. While these technologies can provide solutions that are much more elegant than those available a few years ago, the lack of standardized DOM support has led the more industrious to build vast libraries to accommodate the code branching required to provide anything resembling cross-platform compatibility.
Despite its claims to the contrary, IE6 has particularly poor support for the W3C DOM standard (see Trident column). How much time and how many lines of code could be saved if IE7 attached events in a standard way, or implemented the get/set/hasAttribute methods properly, for example? Isn’t this why standards are created?
Microsoft has this to say on the issue:
Dave Massy [MSFT] (Moderator):
Q: what version of ECMA javascript IE7 final will support? 1.4 ? 1.5 ?
A: we are not expecting any changes in JScript support in IE7. This is definitely something we want to address in a future release but for IE7 we needed to prioritise our work for developers around the CSS issues.
This was transcribed from a chat in the MSDN Expert Zone, on February 9, 2006. Disappointingly, this was the most relevant quote I could find from Microsoft. Very little information about IE7’s expected level of DOM support is available. However, just a few days after the release of IE7 Beta 2, there are already grumblings in the community about the problems it fails to address. Here is a screenshot of the W3C DOM module support chart that tests the browser you are viewing with, as seen with IE7. I will do some test labs as soon as I have a chance. A brief stint on quirksmode’s test pages don’t look encouraging.
In July 2005, the Web Standards Project created a DOM Scripting Task Force to address this problem. Their site is an excellent resource for anyone with an interest in JavaScript. However, they are worryingly quiet on the topic of encouraging DOM standards support in IE7, instead espousing good programming practices to deal with the problem.
Grassroots "encouragement" went a long way towards the effort to get IE to improve standards support for HTML and CSS. Although increased DOM standards support was mentioned from the beginning, it was usually along the lines of "Please fix the appalling CSS bugs, and then maybe the DOM if you don’t mind." Now that the worst is fixed for CSS standards support, maybe it’s time to move our focus back to the DOM.
In one of our projects, we wanted to give our admin users the option to sign up as many people as they want at one time, but without presenting them with a very long form full of duplicated fields that they probably won’t need. We used a bit of JavaScript to duplicate the relevant fields as the user needed them, so they could get as many or as few as required.. The basic idea is:
- Grab the relevant fields and clone them using
cloneNode. - Iterate through the cloned fields and add a number to the end of the values for the input’s
idand label’sforvalue. We need to keep our ids unique! - Append the new fields to the end of the containing div.
What if JavaScript is turned off?
We’ll need to make sure that users with JavaScript turned off can add extra fields, too. Adding a name/value pair to the submit button will submit the page to the server with a indication that the user has JavaScript turned off:
value="Add new user" name="add-user-no-js"
The doctype is XHTML strict and the mark-up meets Level AAA accessibility standards. The JavaScript is unobtrusive DOM scripting.
Note: This article has been changed to include a simplified example. The original example included show/hide functionality which added unnecessary complexity.
Styling horizontal rules with CSS is fairly intuitive in IE: to change the color, use the color attribute; to change the width and heights, use the width and height attributes.
Styling horizontal rules in other browsers, however, is slightly less intuitive. To change the color of the horizontal rule, you need to change the background-color attribute. However, this still leaves an unsightly shadow effect that the now-deprecated noshade attribute once took care of. This has led many web authors to stop using the <hr /> tag altogether in XHTML, and fake it with borders on empty divs. But there is a simple solution to this problem – turn off the borders on the <hr>!
hr {border-style: none;}
Dotted-line <hr>s
To go one further and have a dotted-line <hr />, set both the color and background-color to match the color of the element it is contained within. Then add a bottom border with the desired pattern (solid, dotted, dashed, etc) to the <hr />, and viola! A dotted horizontal rule:
hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }