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.

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 50.112.105.59 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

1
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 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:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

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

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

1
178.79.143.210        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.

The important question here is: Can you get by without it?

Here’s how it usually plays out when you take your first steps into the world of web styling: You start out with learning CSS, setting colors, height of boxes. Getting annoyed with margins not behaving as they should. Creating classes, using IDs, getting annoyed with specificity. Trying out gridsystems, using hover and getting annoyed with float. Actually, a lot of CSS creates some itchy feelings. In my opinion, it is too simple. There’s too much manual labour, too high a risk for mistakes.

CSS preprocessor languages are, for me, a way to make it bearable. Here follows a short introduction to LESS, a preprocessor language that I recently looked at at work. The other big player in the field is Sass, a comparison of the two will feature in a future post. This is a really short and simple summary of what Less can do

Top 3 things that LESS can do:

Variables

I’ve missed these, how did I ever live without them! Imagine you have a site with a fixed width, say for example 970px. You write 970px over and over again all over your stylesheet. And then… you change your mind. You really don’t like 970px. 980px is the way to go. Now you have to switch the two values all over the document, and find-and-replace is an awful idea, cause some of the element still want to be 970px. It is soul killing, mind numbing work. What if you could just change it in one place? Use a LESS variable!

LESS variable
1
@the-width-of-stuff: 980px;

Now it is as simple as using the variable in your LESS-stylesheet.

Mixins

This is a way to create a rule that you can then use and reuse in another rule. This way you don’t have to write the code for creating a browser resistant gradient over and over again. You can just use the same bit of CSS. Mixins can be created with or without parameters. If you want the exact same code again, you don’t need parameters, but say for example you want different colors on your gradient, LESS lets you provide arguments to your mixin!

Mixin without parameters:

Here is a mixin called .backgroundcolormaker that when used, sets the background color to red. Now it contains just one attribute, but it can ofcourse be expanded just as a normal CSS rule.

Basic mixin
1
2
3
4
5
6
7
8
.backgroundcolormaker {
   background-color: red;
}

.some-class {
   width: 980px;
   .backgroundcolormaker;
}

Will output this:

Basic mixin - output
1
2
3
4
.some-class {
   width: 980px;
   background-color:red;
}

Mixin WITH parameters:

Here is a mixin that takes one argument. It sets the given value to the background-color attribute. This way you can use the same rule but with different values. You can specify more than one argument when creating a mixin.

Mixin with parameter
1
2
3
4
5
6
7
8
.backgroundcolormaker (@bg-color) {
   background-color: @bg-color;
}

.some-class {
   width: 980px;
   .backgroundcolormaker(pink);
}

Will output this:

Mixin with parameter - output
1
2
3
4
.some-class {
   width: 980px;
   background-color:pink;
}

Libraries

With both LESS and Sass you can import libraries with mixins to use. Finished, usable snippets that help with browser support and complex CSS3 attributes. For SASS the most popular one is Compass, for Less there are LESSHat, Bootstrap and Elements, among others. For example you can use the .transform mixin to transform an element with your prefered values, without having to worry about browser compatibility. Or the border-radius one that creates nice, rounded corners for you. Extremely practical!

Do yourself a service and take a look at a CSS preprocessor language of your choosing. I know I can’t live without it now.

I will be back soon with integration with Visual Studio and a comparison of LESS and Sass!

I’m not that old. Coming up on 27 this year. I live in Sweden, a country with a high density of IT. But before I started University I had never had a lesson in how to wield a computer (if I exclude that one where we were taught how to open Word). Not one lesson. I’ve spent hours upon hours learning how to sew, play music, speak french and calculate unit mass. And those lessons were important. Still, not more than 4 hours during my 12 years in school were dedicated towards computer science and programming. I was curious so I learned on my own.

But most people around me have no idea how computers work. They are almost magical in the same way electricity and the digestive system is magical before you get it explained. We get taught biology and physics in school, but most of us never got the privilege to learn about code, and that is kind of a digrace. What’s more, it is still not taught in most schools. We are relying on kids getting interested and learning on their own. Not a great plan for an economy reliant on IT.

Everyone should have the opportunity to understand that computers and code are not magical, it should be demystified. They should know that everyone can have a go and create something simple. This is why I get excited about initiatives like Code.org, Khan Academy and Udacity.

What I don’t understand is that so many (including Robert Smith) confuse ”schools should teach code” and ”everyone can try” to mean the same thing as saying ”everyone should be a programmer”. Most will not. Many will find it boring, like I hated french and geography. Many will never use it in their daily work or life, like how I seldom use my knowledge of electron guns. Many will suck at it, like I sucked at volley ball. But they need to know about it. How else can we expect to find those most suited for it, those that will do great things? And think of the possibilities when a large number of people can automate boring tasks with simple scripts.

I meet too many individuals that are completely computer illiterate. And many of them are younger than me. We need to raise the knowledge level. So I believe yes, programming IS for everyone. Definitely not as professionals, but they should know the basics. It’s important.

And understanding, for me, is one of the greatest things there is. That moment when the brain connects facts to a sudden and enlightened whole is something that makes the days brighter. In developing, I’ve found that these moments come often, if you fight for them. They also show up in unexpected places. And that’s what makes it so much fun. Let me give you an example. I’ve heard the word API so many times. I’ve read the article on Wikipedia. I could repeat the words, but I did not understand it. And then I made a tiny web app using the Reddit api, and suddenly it all made sense. It’s that wonderful feeling of ahaaaaaaaaaaa.

To understand a concept and how things connect and fit together is empowering. Suddenly you can create something. Make it yourself. By knowing a small bit of JavaScript, I can now create just about anything. By finally getting what an API is, so many possibilities open up. And wow, it that what an anonymous function really is?

I’m usually not this peppy, but to understand things makes me uncharacteristically upbeat. I have a friend who pushes me towards these moments and I’m forever grateful for it. I sometimes forget what a wonderful experience it is. It actually a little like exercise. I always forget how good it feels, when really, I shouldn’t. And I hope I never stop looking for this feeling. I hope I always keep on hunting new understanding and I hope I can find every now and then.