This may not be the easiest way to achieve this results, but I wanted to share it because it was genuinly 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:
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:
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.
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
126.96.36.199 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
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:## 188.8.131.52 rhino.acme.com # source server# 184.108.40.206 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
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!
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:
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!
Now it is as simple as using the variable in your LESS-stylesheet.
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.
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.
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.
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.
This is a short guide on how to use the Reddit API to create a cakeday-site, for beginners. A cakeday is the day someone joined the community Reddit, so it’s like an online birthday. My final version is called tellmemycakeday.com, but this guide will create a small version of that one.
If you are having trouble seeing how the code looks in its entirety, it can be found at the bottom of the post.
Getting the data
The first step is to figure out how to get hold of a specific user’s account creation date. What’s great about Reddit is that all their data is available via a public API. What that means is that they are openly showing how their site works, and that anyone can create a Reddit application just by looking at their public and open source code. The part we’re going to use is about the users.
The lookup is done via an AJAX call to Reddit. What Reddit wants is a string that contains information on which user and how you want the data. It looks like this:
Here is what I saw:
All the data is there! You can see how much link and comment karma this user has, if it is a mod and, what’s important to us, when it was created. Now it is a matter of using this data in a creative way.
Formatting the date
So, the date 12011825216 is not very readable. It’s the date formatted as UNIX time, the number of seconds since the 1st of January 1970. We need to change it into something prettier! And I used Moment.js to do just that. By just utilizing that small library the number is transformed into something a human can understand.
This creates a manageble date that can then be used to figure out how many days are left until the next cakeday. The part inside the parenthesis is the date we got from Reddit, and moment.unix tells Moment.js that it is a date in unix-format.
The next part can be a bit difficult for someone who, like me, is slightly mathematically challenged. How do you find out how many days there are left? The created-date is sometime in the past, all you need is the day and month. So I replaced the year in the createdDate with the current year. Unless, off course, your cakeday has already happened this year, then we need the next year.
We put this bit of code inside a function that takes the date the user was created as parameters and returns the number of days left to the next cakeday. I think the code is more readable and managable when divided into neat functions.
Now we have calculated the date and can view it in the console. What is the next step? Well, instead of displaying it in the console we want to put it in the browser window. This is done by manipulating the HTML, using jQuery. jQuery can help us select elements in the HTML and insert out information.
What we want is to display the days left to the visitor, and to do this we need to add an element to the previously created index.html.
We’ve added a link to the Moment.js-file and a paragraph to hold the result.
It finds the element with the id “result” and then sets the text to what we found before.
Getting a username from the visitor
First, we modify the index.html to look like this:
That adds a form with an input field and a submit button. This is all we need!
This does not, however, take into account what to do when the user doen’t exist, or if the visitor doesn’t write anything in the input, but that’s left as an exercise to the reader. And the site also looks awful! The code can be found on Github and a live version is running on tellmemycakeday.com/tinyversion. And if you want to have a look at the extended version, prettier and with error handling, you can find it on tellmemycakeday.com, this is also avaliable on github!