I grew up with it and it’s hard to shake. It follows me around, looking over my shoulder everytime I try to position anything. That deeply ingrained hatred of tables. Nothing was as ugly and disgraceful as using tables to position content (that and maybe using capital letters for your tags).

  • What, are you not using THE BOX MODEL? I can’t work like this.

I sometimes sit and glare longingly at those at the office that don’t have to support the older versions of IE. Imagine the glory and wonder of using Flexbox! To be able to roll around in align-items: center, revel in justify-content and delight in flex width. But, alas. It is not so, using flexbox for corporate oriented (especially SharePoint) styling is still some years off.

But I still have to vertically align things all the time. And that’s the reason for this post. Yes, it is true. I have started to use tables to get things to where I want them. Not actual tables, but virtual ones with div and span elements with display table. And I have come to, maybe not love it, but at least rather like it. It sort of works, if used correctly. There is a learning curve, an especially steep one if your brain is telling you to RUN AWAY. But with some time and determination you too can get there.

The problem to solve

Typically we’re talking about an icon that should be centered vertically to a text of unspecified height. Position: absolute won’t help you here, nor will margin top, since the height varies. What I used to do was use a background image with background-position: center. But these days we have to take retina screens into account. Begone blurry images!

But what about svg?

says you.

Yes, that would also be nice, but legacy systems prevent me from using that (long story, SharePoint is to blame). Also I would like to utilize icon libraries like FontAwesome.

The solution

Use table layout for this! The wrapping parent gets:

display: table;
padding: 10px; // For good looks

And then every child element gets

display: table-cell;
vertical-align: middle;

And no padding or margin top or bottom on the children, that messes everything up. Both child elements now becomes as high as the highest of them, and the content is placed in the vertical middle. Magic.

Want a clearer picture and try it out yourself? Here’s a plunker where you can do that.

So you tried this and there’s no magic?

The problem with this method is that it’s mad hard to “debug”. It’s insanely difficult to understand what’s wrong when something is off in the aligning. Try to remove all set height, line-height and margins and paddings on the child elements, as well as all other positioning styling (relative or absolute).

Nothing new under the sun

Yes, people have of course used this before, but that doesn’t mean everyone has, or that it isn’t news to someone. After all, until recently I didn’t use it and I spend a fairly large amount of my day arguing with CSS.

If you came to this post because we met at the Geek Girl Meetup, I’m so, so glad to see you. My goal was to inspire at least one person to actually try this out and get started with creating webapps by using Yeoman. It would make me feel really warm inside that I actually inspired someone to get started and try it out.

If you just stumbled in here by yourself, this is a post where I list the few and wonderously simple steps to generate a webapp to use for web development using Yeoman.

The steps

Install nodejs

Go to nodejs.org to download Node. Install it on your computer.

Test Node Package manager

Open your terminal (if you’re on a Mac), or your Power Shell if you’re on a Windows. Don’t know how to do this? Don’t worry, here is a great guide for Mac, and here is a great guide for Windows. You don’t need to know more than how to open it, and think of how cool you’ll look now!

With it open, type in


Press enter. That’s it. You get a response that says stuff about how npm works. Moving on to the next step!

Install Git

Git needs to be installed in order to get some other things (Bower) working. Go to http://git-scm.com/downloads, download and install.

Install Yeoman

Yeoman is a program that helps you generate skeletons for your future web page or web application. Install it by typing this into your terminal/Power Shell:

npm install -g yo

This installs Yeoman on your computer (the -g part makes sure it’s installed everwhere). If you want to know more about how Yeoman works, this is a good place to start.

Install Bower

Bower helps you out with dependencies such as jQuery or Bootstrap or something else. Install it by typing:

npm install -g bower

Interested in what you can do with Bower, visit this guide.

Install Grunt

Grunt is what you call a “task runner”. It does tasks for you, like minifying CSS and JavaScript, or compiling Sass, or copying files from one place to another. Let’s install it by typing:

npm install -g grunt-cli

If you want more about what Grunt can do for you, go this guide, which explains it nicely.

Install Webapp generator

Now we’re at the last installation step, which is to install one of Yeomans’ generators, namely Webapp. It’s a generator that creates a bunch of files and folders containing all you need for your future project. Type

npm install -g generator-webapp

Webapp is the most general generator from Yeoman, but there are a bunch of others.

Create project folder

Now it’s time to create a folder where your project will live. Either create it in finder/explorer, or look cool by doing it in your teminal/Power Shell:

mkdir my-fancy-project

Then you have to move your terminal/Poweer Shell to your new folder. This is done by the command cd which stands for ‘change directory’. Type in:

cd my-fancy-project

Generate your project

Now the time has come for a project to be created, finally! And all you have to do is type:

yo webapp

And after you pressed enter all the files and folders and content will be created, it’s almost like magic.

Start up your web application in the browser

Once it’s finished, type

grunt serve

This starts up the task manager Grunt, which opens your browser, with the web site on it.

Then what?

So that’s all you need to do, now you can start creating. That’s not always easy, but it’s loads more fun than writing boring HTML and creating folders and so on, which all these steps have done for you.

I made the Counting Down site by using a generator from Yeoman. You can add some JavaScript to the generated JavaScript file to create something that tells time, or just says hello, or shows flash cards from your anatomy class at school, or something entirely different.

It would make me happy if you mailed me at stinaqv@gmail.com with questions, tales or thoughts about this. I hope that you try it out and see where it takes you.

I’m starting to get slightly nervous now. Decided that I was going to hold a talk at Geek Girl Meetup Oresund and now I have to do it. Since I seems to be unable to hold lectures and lessons without knowing monumentally more than what I’m actually going to talk about, I have quite a lot of work to do.

I have named the talk “How to go from idea to webapp in 15 minutes”, or something like it, and it is about how to set up grunt, SASS, and JavaScript structure in under 20 minutes. And also, the will be pictures of kittens, probably.

I hope someone shows up and I hope I do great and that the kittens are cute.

Problem: You have styles you want for regular screens, and styles you want for retina screens. Mostly images with different sizes, but sometimes font sizes or widths.

I was faced with this recently and got annoyed at the amount of repeating I had to do. First it’s the fuck ugly syntax of the media queries, then it’s the browser compatibility, and then I have to repeat it all over my Sass document for different screen sizes and everything else that can change

Queue trying to build a handy mixin for it all

This is what I came up with:

@mixin retinaspecific($maxwidth, $attribute, $value) {
        only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: $maxwidth),
        only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: $maxwidth),
        only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: $maxwidth),
        only screen and ( min-device-pixel-ratio: 2) and (max-width: $maxwidth),
        only screen and ( min-resolution: 192dpi) and (max-width: $maxwidth),
        only screen and ( min-resolution: 2dppx) and (max-width: $maxwidth) {
        #{$attribute}: $value;

It’s a mixin that takes three arguments. The first ($maxwidth) handles the actual media query and when the rule should be applied. The second ($attribute) handles what attribute is affected. Here you put font-size, background-image or something like it. And the last one handles the value of the attribute, so what size should the font be, or what background image do you want.

It is quite handy! Just use it whenever you want something styled for a retina screen. Since you can reuse it for all attributes and screen sizes, it shourtens the code you have to write quite a lot.

Using it like this:

@include retinaspecific(500px, min-width, 55px);

Will compile to this:

    only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 500px),
    only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 500px),
    only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 500px),
    only screen and (min-device-pixel-ratio: 2) and (max-width: 500px),
    only screen and (min-resolution: 192dpi) and (max-width: 500px),
    only screen and (min-resolution: 2dppx) and (max-width: 500px) {
        min-width: 55px;

I used it for my app Counting Down and as far as I know it doesn’t work in LESS

This may not be the easiest way to achieve this results, but I wanted to share it because it was genuinely awesome.

I wanted to put a bottom margin on all elements, except the last one, and I wanted to do it using nested LESS-syntax. Sure, I could just write two rules, one that put the bottom margin on all elements, and one that removed it on the last child. Like this:

.content {
  margin-bottom: 30px;
  &:last-child {
    margin-bottom: 0;

But where’s the fun in that? No learning = no fun.

I couldn’t wrap my head around it, so I turned to StackOverflow and got exactly the kind of answer I wanted. User BoltClock explained and here’s what I learned:

What I wanted to do was to select all elements that were children of .content, but not the last one, so I had to select all children with the child selector > , then single out the last one with :last-child and put it in the :not-selector. Like this:

.content {
  > :not(:last-child) {
    margin-bottom: 30px;

Which in its turn compiled to:

.content > :not(:last-child) {
  margin-bottom: 30px;

In the end I had to abandon it because there was an IE8 requirement in place. IE8 causes so much sadness.

I woke up one morning and didn’t care anymore. Didn’t feel anything when I thought about my future. Didn’t feel anything when I looked at people i knew I loved. It felt like the resonance I had felt in my chest when I looked at someone I loved was gone. It was like all feelings had disappeared. Except for fear. I got so scared that I panicked, and pressed myself against a wall and knew that I couldn’t survive this. There was no way I could feel like this and live through it. I was so scared.

This had happened before, but this time there was someone with me who knew that help could be gotten. And we did. I never pictured myself going to the psyciartic emergency room, but there I was. It was everything I expected it to be. Ugly. Run down. Sad. But then it wasn’t. Because there were people there who cared and knew how to help. They were concerned and I got medicine. I got sedatives and my self image changed. Now I was the kind of person who needed sedatives. And they were awesome. And I got antidepressants and it made it worse. It got so bad that there were times when I literally couldn’t stand on my own. At times I forgot to breathe. Apparently that’s how the medicine works. It makes it worse to be able to make it better.

And it got better, but man it was slow. So slow that I didn’t notice it. I had to force myself to wake up early and go running in the mornings and I’m so glad I did, I think it helped a lot. I figured out that the most difficult I could do was to be bored and be okay with it, when my mind wasn’t occupied it wandered away and always ended up in the worst “what if” it could find. Scumbag brain. So I played Minecraft and watched Lord of the Rings’ extra material.

And one day I woke up and it was fine. Only it wasn’t one day suddenly, it snuck in under the radar. I could feel love, I could feel happiness and I could think about the future without panic.

I hate you panic, but you helped me learn a lot about my brain and how it works. How it can’t always be trusted. That it sometimes makes stuff up just so that it can release some of the fear. I know that five people with the same length of shorts in a group aren’t dangerous, but when my brain was sick it couldn’t find any lions in its vicinity so it took the next best thing. People in shorts. Or christmas lights in the summer.

And even though it was aweful and I didn’t think I could survive, I did. I realized I am stronger than I realize and that medication really can help. They don’t change you, they don’t make you happy, but they do help you not panicking and getting up in the morning. In the long run it was probably a period that helped me grow. I learned that sometimes, when something seems absolutely impossible, it is the brain that fools me into hopelessness. I learned not to trust myself at times when I didn’t make any sense. And I learned that I could take help and that sadness, depression and panic doesn’t describe who I am. I got sick and I got better. It is a disease and it can be treated, even though the future hopefully will bring medicine with less side effects. I am not defined by my sadness and I can be content.

Thank you Erik, for all the help. I love you

Doing the short and tiny thing again and giving a shout out to GoldieBlox, a toy that I hope will conquer the world. This is from their homepage:

At GoldieBlox, our goal is to get girls building. We’re here to help level the playing field in every sense of the phrase. By tapping into girls’ strong verbal skills, our story + construction set bolsters confidence in spatial skills while giving young inventors the tools they need to build and create amazing things.

Basically it’s a toy for girls that’s about creating and thinking to inspire them to do stuff themselves. Awesome!

In other words: How to troll your friends’ computers

This is a guide on how you edit the host-file in order to map a domain to an ip-address.

When you type in a domain name, such as www.timflach.com, you are actually being redirected to an IP-address. Around the world there are important computers that know what IP-address is mapped to what domain name. These are called DNS servers. They are updated when a domain name gets moved and real autorities on where web sites are located.

But, before your browser travels out into the world to collect information from the DNS servers it actually asks someone else. Or rather, it looks in your host file.

The host file is located in c:\windows\system32\drivers\etc\hosts (on Unix, /etc/hosts) and can contain information on where domain names lead. In it you can add pairs of domain names <–> IP-adresses to say that if a user types a specific domain name, the browser should be redirected to a particular IP. For example you can add the IP to the domain minecraft.net.

Here is how you edit the host file!

Open the file. You might need to do so as an administrator. I found that the easiest way was to type

notepad c:\windows\system32\drivers\etc\hosts

after you’ve opened Windows’ metro mode and then right click —> open as administrator.

You will now see a file that looks somewhat like this:

# Copyright (c) 1993-2009 Microsoft Corp.
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
# For example:
#     rhino.acme.com          # source server
#     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#       localhost
# ::1             localhost

And here is where you can add your own customization. Write the line

1        minecraft.net

save, visit the domain namne in your browser and see what happens.

When is this useful, except for trolling your little brother? Say, for example that you are located on a network where you can’t access certain domain names without typing the IP-address. Now you can create your own way around that!

I thought I try something new and actually save and post about cool, fun and amazing things I found on the world wide web. Hopefully it will be a recurring thing. First thing out is Rainyday

Rainyday is a JavaScript library that simulates rain falling on a glass surface

Go check out the demos, I got stuck staring at them.