I think the number one wish for css, is the introduction of variables. It is at least, a very common attribute in css frameworks suchs as LESS or Sass.

But the word “cascading” is in the acronym for a reason, and even though that doesn’t quite solve the lack of variables, it actually does take a pretty good shot at it.

Here’s an example of some pretty generic code:

h1 {
  font-size: 200%;
  color: green;
}

a:link, a:visited {
  text-decoration: none;
  color: green;
}

With the introduction of variables, it could look like this:

@contrastColor = green;

h1 {
  font-size: 200%;
  color: @contrastColor;
}

a:link, a:visited {
  text-decoration: none;
  color: @contrastColor;
}

This is good if we want to change the color green to another. We only have to change it one place. But this is, as I said, not possible without the use of one framework or another. So what can we do instead?

/* Contrast Color */
h1, a:link, a:visited { color: green; }

h1 {
  font-size: 200%;
}

a:link, a:visited {
  text-decoration: none;
}

As I said, this is something I will try to incorporate more in my style sheets, so I haven’t actually got any experience on it. But css is designed with this in mind (at least I’m guessing it is), so why try to fight the system instead of learning to play with with it? I imagine that on a large scale it can create very complex style sheets unless the code is rigorously commented and kept neat, but that’s not too scary. At least as long as you’re the only person working on the css.

One of the simplest and yet most powerful ways to get yourself started is to repeat the words, “Do it now! Do it now! Do it now!”
over and over to yourself. (p.104)

This might be good advice for sales people (the kind who has to be hyped up all the time), but this stuff never ever worked for me; and I honestly think this advice is downright counterproductive.

It’s not that I am immune to programming (though trashing my TV did help), but staying hyped for any serious duration of time is simply impossible; and it’s counterproductive in the sense that once you come back down from your “high”, you’re going to be even less productive and able to stay focused, than you were before you hyped yourself up. And don’t even get me started on what happens if you try to hype yourself up every day over several days or weeks. It’s inhumane, and if you’ve put yourself in a situation where it is expected of you to be that, and work like that; my suggestion is that you seriously reconsider your priorities in life.

Be smarter than that. You are not some sort of mindless robot. Plan, and work steadily, solving one thing at a time.

Sure. If there is some specific task that you have been procrastinating on… just f*cking do it. But don’t listen to that advice if you are searching for information about how to stay productive over long periods of time.

You need careful planning for that. Very careful planning. Why? A few reasons: First, you absolutely need to know what you are doing, why you are doing it, and for how long. It sounds fairly obvious, but it is not. At least not for my fellow students, or for my colleges at work. Even I fall into reading a book, not sure what I am looking for or why I am doing it. It almost always fails. I end up thinking the book is no good, when in fact I just don’t know why I am reading it.

I put a time limit to almost everything I do (16 minutes left to finish this post — sorry, no picture today), mainly because working in bursts is the only way to keep the work focused.

Second, you want to limit useless work as much as possible. This is best done with careful planning. Spend as much time finding out what needs to be done, and the easiest way to go about it; as you do on actually working. Whenever I am not working, I always keep my todo-list right next to me so I can constantly revise it.

Third, overall picture. This is really simple. You just want to make sure, that whatever you do in your daily life, somehow follows a bigger plan. You need to be going somewhere, or your life will get stuck really quickly. Again… planning.

I hardly think that it is possible to plan in enough detail. As long as you keep your mind open a long the way, and ask yourself, if the work you are currently doing, is getting you any closer to your goal. This is especially important when studying. “Is what I am reading now, actually giving me information I didn’t know about the subject I need to learn? Is it doing so fast enough? Is it going into enough detail?” and so on.

Plan. In the beginning you will find out that you don’t know for how long you should make yourself work. You will probably overestimate yourself and get frustrated with not being able to stay focused for the entire duration. This is fine however. If you find, that after 20 minutes you can’t stay focused any longer; set the time limit to 20 minutes next time. Just be aware that the time you can stay focused varies a great deal from activity to activity. You tend to be able to stay focused for longer if the activity involves physical movement. But just experiment with it…

When time is up, write down what needs to be done next; and stop. What you wrote about what needs to be done next, goes on your todo-list. This way, next time, you will know exactly where to start.

Engineers do the planning, and the construction workers do the actual work. The engineers get paid a lot more because planning is actually the most difficult thing of the two. The same goes for planning your life. It takes skill to plan properly. But unlike for engineers, you actually have a lot of room for failure. You life won’t repeat itself, but the days will. Work will.

Don’t do it now. Plan now, and do it when you know what, why and for how long.

When I come to a website, I do so in the pursuit of something. Usually I found it via google, or some rss feed pointed me in the direction of it. I did not come to randomly browse around your website and see if I can find anything of use. Nobody does. It simply does not work that way. Why? Because it is inefficient.

So with that in mind, let’s look a at a typical website layout.

And here is what I see… or try to see.

I don’t care about what your header looks like or what the menu items are. I especially don’t care what your logo looks like. No, I won’t remember it. Whatever you put in your sidebar is there to distract me while I am trying to read what you wrote, and nothing else. There is no other reason to put it there. I might read it, but there is one thing you can be certain about: If I stop reading the content, and start reading that, it’s because the content is boring and/or useless to me, and you can be sure I won’t follow you on twitter or read what you were born.

Instead, put information in the footer, and provide me with an easy way to get to the front page (just to save me the trouble of doing it myself in the address bar), where I can find the information I need.

In this age of trying to please the user best way possible, I am surprised at how common this type of layout is. How everyone seems to want to cram every possible detail and option into every single subpage. Don’t do that. Give me what I came for, and give me an easy way to find more in case I do want that. That’s it.

It looks like this:

That’s my list for today. As you can see, most of the items are crossed out, of course meaning I completed the task, and one item is changed (from “Django” to “Javascript”).

I am not telling you to skip all your fancy tools for time management. Only partially anyway. I can’t speak for all, but personally I’ve found that I am productive with a list like this lying next to me at the desk (as the only thing). It doesn’t get much faster, or more visually appealing than this. It doesn’t get much simpler either. A lot can be built in a web app with fancy AJAX calls and everything, but nothing beats the speed, and especially, the versatility of a tiny todo-list like this one.

Purpose of it

The purpose is this:

• It simplifies things, and has no way for you to hit refresh, play with check boxes, or anything like that.
• It makes what you need to do, visual.
• It creates a place for you to jot down ideas as they pop up, so you can instantly forget them again and focus on what you’re doing.

How I work with it

You can work with it in several ways. Here’s how I do it.

The list is created the night before. I move over whatever I didn’t do from the list the day before, and try to go into specifics about especially my studies.

I write general terms on the front (Wash, study, check email, food, etc), together (if needed) with a specific time period that I will spend on it. (Good for reading, answering mails, etc). Then on the back, I go into a bit of detail. For instance, on my note above, it says “½ bachelor” (“½” = half an hour), but no specifics. On the back, I have it set in stone what needs to be done (more on this in a later post).

I cross out items as they are completed.

I carry it around with me, and things get added to it, as they pop up in my head — even during other work. At first I didn’t allow myself to look at the note while for instance studying; but if I just write things that pop up in my head down (uncritically), I can let it go, and concentrate on what I’m supposed to be doing. This, however, is the only distraction I allow myself.

At the end of the day, I move over things I didn’t have time for (if there are any), and throw it out. I don’t save it. It’s a work tool, and it has served its purpose beautifully.

Try it

You probably came here to see if you could pick up some golden bullet for becoming instantly productive; and I gave you an easy to do idea. It’s easy to follow, easy to implement, doesn’t require that you change to a different operating system (although I can recommend Linux), or anything of the sort. It’s easy in every sense and you have nothing to lose.

Try it for one week. Half a week. One day. It doesn’t matter that much for how long you try it, as long as you do try it. Just remember to keep it simple.

Lately I have been reading about all the things we have to deal with in everyday life. All the things that demands our attention. Everything from the dog, to finding things, to analyzing socials situations, and constantly deciding whether to check the email now or later. When you start thinking about this, you realize what a ridiculous number of choices we make every single day, you begin to understand why humans tend to love simplicity and generalizations… and you begin to appreciate them yourself.

So I decided (in the middle of studying for my exam) to see what I could do about the place where I live (procrastination anyone?). Here’s what I did:

1. Went to my attic and was happy to find it as good as empty, except for some boxes I’d used for moving in. Perfect.
2. Brought down 4 of them and started packing things up. Everything, except:
   • Tables, chairs, bed, sofa, etc.
   • My laptop and my new external monitor.
   • Bank papers.
   • Study books and basic study materials like pen and paper.
   • Some of my very classical literature (see my other post on books to read).
   • Art: My violin on the wall, a babushka from Moscow, vase from Morocco, chessboard from Turkey, Buddha from Laos, and some other interesting and inspirational things.
3. Moved everything to the attic.
4. Kept one drawer empty. It’s the buffer zone for letters, and must be empty before I go to bed every night.

The goal was to remove so much from especially my living room, that I would have a feeling of missing something. In that case, I could just go to the attic and get it back. No biggie. I could have removed my art too, but I regularly have visitors over, and I want the place to look inspiring and fresh —not like a prison cell.

Everything I did not move to the attic got a very specific place to be. Usually somewhere out of sight. I did not want to have “boring” things lying around at all. And by “boring” I mean everything that can not be used as a conversation starter. A slightly odd definition, I know; but think about it. You can’t start conversations about pen and paper, so I got that out of the way. Same is true for bank papers, etc. Out of the way with that too. What you can start conversations about, is books for studying. It is pieces of pottery that I dug up somewhere in Palestine, or the tibloc lying in my window next to coins from different places I visited. So they’re all in. Lying around, making me feel at home and new visitors welcomed.

So how did it go? Very well…

1. I have not been missing a thing.[*]
2. It probably saved me at my exam (in fact I aced it).
3. I now treat my place with respect. That is, I never let papers or other stuff just lying around.
4. It’s much easier to clean.
5. Every single person who has visited me (new friends as well as old ones) has complimented the place.
6. I have more time than ever before. I can feel my mind beginning to think more structured now.
7. I’m on top of things. Studying ahead of things, etc.

Even though I love what I have done, I have not forgotten about my initial experiment. I wanted to remove so much, that I would be forced to go up there, and get it back down. I wanted to find out, what I really need, and the only way to do that, is to first remove too much. So, I will be doing it again. Removing dictionaries, my Tintins, and finding better storage for folders and paper that I can’t do without.

* Except for an envelope. But since I didn’t have any stamps either, I had to go to the post office anyway, and of course just bought an envelope there and then.

Hello world

The speech bubble above contains no images. Instead it’s done with creative use of css. First the html:

<div class="box">
  <span>&nbsp;</span>
  <p>Hello world</p>
</div>

The css is where the magic happens:

.box {
  background: #ccc;
  padding: 20px;
  width: 300px;
  position: relative; /* This is the only really important part */
}

.box>span {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 1px;
  right: -10px; /* Determines the length of the tail */
  top: 10px;
  border-top: 7px solid transparent; /* Angle of the triangle. */
  border-bottom: 7px solid transparent;
  border-left: 10px solid #ccc; /* The triangle */
}

First the <span> is positioned outside the box, and the size of it made small. This is because we are not interested in the box itself (it will never turn into a triangle), but rather, its left border. To explain, have a look at this:

This is a <div> with width and height of 1px, and 20px borders in different colors. In the example above we are interested in the “green” border. We make it have the same background color as the box itself, and make the other borders transparent (in fact the right border is not even there).

It should be said that ie6 has terrible support for “transparent” as color; but it can be done. The css will then look like this:

.box>span {
  display: block;
  font-size: 0;
  height: 1px;
  width: 1px;
  position: absolute;
  left: -10px;
  top: 10px;
  border-left:10px solid #ccc;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  _border-top-color:cyan; /* No 'transparent' borders in ie6 */
  _border-bottom-color:cyan;
  _filter:chroma(color="cyan"); /* filter out the cyan color */
}

Notice that this uses an ie6 hack. ie6 is the only browser (as far as I know) that ignores the “_”, so it’s very useful for hacks. I generally suggest, however, to just ignore ie6 and start enjoy coding.

I have read quite a lot of books. Fictional and non-fictional alike, and let me say this: I have never read a self-development book that came even close to what some of the classic literature have done for me. Sure, in the short term I might have gotten a rush out of it, and felt all pumped up; but that’s nothing in comparison to the long term understanding I’ve gotten out of for instance Anna Karénin.

Here’s advice for you if you’re new to classical literature and don’t know where to begin.

1. Beginning titles. If you haven’t really opened what is considered a classic book since 5th grade, then here are some titles to start out with:
   • Demian (Hermann Hesse) — Good for youngsters and adults alike. Very straight forward exploration of critical thought.
   • Watership Down (Richard Adams) — I personally like it for its understanding of what leadership means; but as with Animal Farm (by Orwell) it’s a fantastic caricature of our society.
   • The Unbearable Lightness of Being — Exploration into the heavy (= eternal return, sincerity, etc,) and light (= only live once, make the most of it, etc.) life. My personal favorite book.
2. Make time for it. Reading books takes time, but not more time than you have. Take out and hour, or even half an hour, to read. Carry the book you’re currently reading around with you, and open it whenever there’s some sort of waiting time.
3. Read about what you are reading. Since what you’re reading is classic literature, someone somewhere will have written something about it. Spend 15 minutes on reading it, so you have some sort of an introduction to the book. You won’t (shouldn’t) always agree wit the “introduction” (or the book itself for that matter), which is fine. It’s just to make sure that you get something out of reading it. That said…
4. Quit the book if you don’t like it. You read for you. It might be the biggest master piece ever written; but if you’re not getting anything out of reading it, give it back to the library and pick something else up.
5. Libraries are your friend. Libraries have classical books in abundance. Use them, or lose them. Lots of classic books can be found online though.
6. Read quality. That’s why you are (or should be) reading classic literature.
7. Don’t evaluate right away. Some of the best books I have read, I didn’t like when I closed the last page. But I find myself returning to some of its ideas or comparing my own life to that of the protagonists over and over again.

Here’s an example of what I’m talking about:

So we want the sidebar to extend all the way to the bottom. The css solution is not at all intuitive.

#wrapper {
  overflow: hidden;
}

#sidebar {
  padding-bottom: 999em; /* or any large number */
  margin-bottom: -999em; /* equally large number */
}

Applied to the example above, it will make it look like this:

It works by creating a huge amount of padding at the bottom of the sidebar container, and then taking it all away again with the margin. This would make the sidebar flow far out of the surrounding container (overflow), so we add overflow: hidden; to hide whatever spills out.

In case you have a lot of content in the sidebar, you may want to apply the same to the content area to make sure that extends to the bottom as well.

This creates a challenge, as a default value in a password field will be displayed exactly as the password they type in; as dots, stars, or whatever.

<input type="password" value="password" />

The solution is to create two “password fields”. One fake, that displays the text you want them to see. When this is focused, it quickly replaces itself with the proper password field.

It looks something like this (html and jQuery mixed):

<input type="password" class="login_password" />
<input type="text" class="fake_password" value="Password" />

===

$(".login_password").hide();
$(".fake_password").show();

$("input.fake_password").focus(function(){
  $(this).hide().prev().show().focus();
});

That’s the gist of it, but of course there is more to it.

I created a repository on GitHub with all the code – fully commented.

It’s tested in: FF 3.0, FF 3.5, Opera 9.64, Chrome 2.0, and IE 7.0.

The README reads as follows:

“Created by Gorm Casper (gormcasper.com) – v.1.0

Use as you please.

This is a method for creating a minimal login form with the following abilities:

• Labels inside the input fields (as default value)
• Shows “password” in the password box and not stars, dots or whatever
• Label disappears on focus
• Labels are different from whatever is typed into the fields (in the example it’s grayed out)
• Still allows users without js to login without too much hazzle

Enjoy!