Read my book

I wrote books about Webpack and React. Check them out!

Wednesday, September 25, 2013

You Are an Investor

You are an investor. You just likely aren't aware of it. Every decision you make can be considered an investment. Usually when people think of investing it is in terms of money. Decisions can be made on whim without considering consequences. Or if you are on the other side of the table you might have hard time understanding why you are getting a "no".

When to Invest?

Whenever you decide to do something you are investing at least your time, sometimes money. Investing time comes with opportunity costs. By deciding to do something instead of some other activity, you lose potential opportunities. This also applies to timing. If you had started exercising ten years ago instead of a year ago, you would likely be in much better shape and avoided some possible complications as a result.

The thing is, it can be difficult to think this way. We only see the immediate consequences of our actions. And better yet we are masters at fabricating stories to explain how we got where are right now even if we just got plain lucky or unlucky.

On the other hand we can manipulate the odds of good/bad things at least a little bit. I like the concept of surface area of luck in this regard. Basically it states that luck is a multiple of doing and telling. That is why blogs are such a great medium. Doing and sharing leads to good things every once in a while. This is a good example of how intentional steps can lead us towards to bigger goals.

One of my recent
charcoal works
A month ago I decided that I want to improve my drawing skills. I committed myself to drawing each day for thirty minutes before I go to sleep. Yup, I have skipped a couple of times but I have kept to this promise mostly.

In addition I enrolled to a course to improve my observational skills. Even though only a short time has passed I can see some results already. I am more confident with my strokes and my technique has improved. I am conscious of details I somehow missed before.

In this case the value proposition for me was clear. By putting some time and effort in it I can reach towards one of my life goals, achieving some level of mastery in one subsection of art.

You might have some goals as well. Maybe you want to finish up that Master's thesis that has been haunting you a while. One very good way to get ahead with these nasty yet nagging things is to put constant, no matter how small, effort towards them.

Why Should Somebody Invest in You?

Crunching the numbers by Ken Teegardin (CC BY-SA)
It is very easy to transpose the situation. Suppose you want to grow a business of your own. Obviously you will have to invest a lot of your time in it. Some businesses require capital by their very nature and more often than not that is something a fledgling entrepreneur doesn't happen to have. Especially when starting from zero.

In this case you may have to either revise your plans and try something simpler or try and seek funding. The big question then becomes, why should somebody invest in you? The answer to this question is different depending on where you ask. You should take your possible source of investment in count.

From a capitalist's point of view the answer is clear. If you can provide me a machine that turns a dollar into two and you can prove that, I will invest. Simple as that. Attaining this proof is the challenge. Rather than approaching with an idea and a business plan it may be more effective to approach with a client list.

The same applies for software projects. In case your project has tapped into some suitable niche, it may grow popular. This popularity in turn may lead to external contributions that improve the quality of the project further. It's an upward spiral. This is something that has happened to me on various occasions. jswiki and colorjoe are good examples of that.

Conclusion

I like to define investing as a two-way transaction. Both parties receive some value out of the arrangement. The key in attaining investments is balancing these two and finding the right ways to collaborate.

Here's a little checklist to go through should you require an investment:
  • Why do I need the investment?
  • What do I need the investment for?
  • What investment sources do I have available?
  • How big an investment do I require?
  • What do the investors get in return?
  • What value can the investors provide for me?
  • What value can I provide for the investors?
Try answering these basic questions before proceeding. There are always options. You should be aware of those.

I hope this post gave you some insight on how I think about investing. Sadly it's often thought as something related to money even though there is way more to it. I am very interested to hear what you think about the topic. Either drop me some mail or a comment below.

Saturday, September 21, 2013

Linkdump 16 - Startups, Business, Organizations, Software Development...

Linky dumpy time! Looks like last one was on July so I had better write one quick.

Startups



Business


Organizations

Software Development

Web Development



Tutorials

Personal Development

Typography

Art

Friday, September 13, 2013

Visualization - iPhone LTE Fragmentation

As I mentioned in my previous post I've been up to something during the past few days. I got contacted by Sukh Dugal of Studio March about a scraping task through Wizpert. Apparently he had seen my post about scraping and asked if I could help out with something. As I found the idea interesting I accepted the challenge.

You can see the results as a visualization displaying LTE fragmentation of the new iPhone models. I like the design Ashish Acharya came up with. It's light and gets straight to the point.

The current visualization is somewhat simplistic. We have been considering making another, enhanced one that makes it easier to pick a data plan based on where you travel. Actually if you have some great idea on a visualization, let me know. Perhaps we'll do that instead.

Even though the visualization looks kind of simple, it took a few hours of hard work. I aggregated the data based on Wikipedia and Apple specifications. If you are interested in the technical details, the scraper is available at GitHub.

I ended up writing it using cheerio, a library which provides a jQueryish way to query the DOM structure. Overall it was quite easy scraper to write. There are two scrapers and some logic to modify and aggregate that into form that can be used by the web service.

On frontend side I ended up using Datamaps for the map visualization. It is based upon the popular D3.js visualization library and was a perfect fit for our purposes. Originally we meant to use Google Maps but I realized we can avoid that by using custom map data provided by Datamaps. It seemed to turn out just fine and we avoid having to rely on yet another third party service while at it.

It was extremely fun to work with two talented guys like Sukh and Ashish. I hope we get more cool visualizations done in the future. :)

Thursday, September 12, 2013

Build Your Own Fluid Fixed Header Using CSS

It's time for yet another build your own type of posts! This time I will talk about headers. It seems to me that there is some kind of a design trend going on. People are using fixed headers more and more. There's one particular variant that has caught my eye. It is a fluid fixed header. I am not sure if there's a definite term for it but I think that describes it somewhat.

The idea is that the header is "fluid" up till certain point. After that it becomes fixed and stays at the top while having less height than originally. This is useful if you have some nice imagery to show and want to highlight a motto. As the user scrolls the page this information will be hidden as the user was converted by your hopefully awesome design.

Implementing this technique is quite simple. My implementation doesn't support older browsers as it uses semantic markup provided by HTML5 and relies on some newer CSS features. It appears to work just fine in the current generation, though. I think it is possible to overcome this by adding some kludges (less semantics markup, shims etc. hacks) but to keep this nice and tidy I will present you the modern version.

The markup required will be quite simple. The following list shows the basic elements:
  • header
    • h1 - Main header and possible motto
    • nav - Navigation
      • a - Your navigation links
  • article
    • Your actual content goes here
Of course you could have aside etc. elements based on your need. This is just a simple structure to get started with.

In addition we will require a bit of JavaScript and CSS. I will start out by describing the JavaScript as that will show the basic idea well:
$(main);

function main() {
    var $header = $('header');
    var offset = $header.height() - $('nav').outerHeight();

    $(window).on('scroll', function() {
        if($(this).scrollTop() >= offset) $header.addClass('fixed');
        else $header.removeClass('fixed');
    });
}
The solution is based on jQuery but it should be easy to port it to other environments. We need to simply keep track of scroll event and then decide whether or not our header is fixed. We will deal with the actual layout concerns using CSS. How you do this depends a lot on your exact requirements. I've sketched out one possible solution below:
* {
  margin: 0;
  padding: 0;

  font-family: sans-serif;
}

a {
  color: #4e5947;

  text-decoration: none;
}

header {
  position: relative;
    
  width: 100%;
  height: 25em;
  
  background: url("http://placekitten.com/g/1128/400");
  -o-background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
header h1 {
  padding-top: 2em;
  padding-left: 2em;
}
header a {
  height: 3em;
  
  min-width: 10%;
}
header.fixed {
  position: fixed;

  background: none;
  height: 1em;
}
header.fixed h1 { display: none; }
header.fixed a { height: auto; }
header.fixed nav { opacity: 1.0; }

nav {
  position: absolute;

  bottom: 0;

  width: 100%;

  background: #333;
  opacity: 0.8;

  overflow: auto;
}
nav a {
  float: left;
  
  padding: 1em;

  line-height: 0;
    
  color: #ddd;
}
nav a:hover { background: #555; }

article { margin: 1em; }
article p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  
  line-height: 1.5;
}
It's a lot of code and you can likely eliminate some. Still, it's a starting point!

As you might be curious to see what the result looks like, consider the demo below:



Thanks to Udi Falkson of iknow.io for giving a couple of helpful pointers! iknow.io is an aggregator of sorts for big data. You can build your own comparisons using it. The service is its early stages but it looks like bloggers and journalists might find it very handy.

I met Udi through wizpert. wizpert allows people to ask direct help from various experts. In fact you may contact me through the service on technical matters. Another acquaintance I made through the service lead to some interesting results but I'll elaborate on that later. Till the next post!

Sunday, September 8, 2013

Build Your Own CSS Grid System

I know there are a lot of premade CSS grid systems out there. Foundation, the CSS framework, comes with likely my favorite implementation. It allows you to define how the grid behaves in different scenarios using a class syntax such as this: small-5 big-3 columns. Very simple yet powerful. It is possible to nest the grid infinitely and it comes with offsets and other goodies.

Sometimes it can be convenient to be able to implement something like this on your own. At least it is a good learning experience. In an ideal world we would be able to use flexboxes but that is still years away. So for now we are stuck with custom solutions.

I've tried to keep my implementation somewhat minimal. It uses a clearfix hack by Nicolas Gallagher. The semantics are similar to Foundation. There are rows which in turn may contain columns. You can nest rows within columns. My implementation is missing offsets and such and I'll leave implementing those as an exercise to the reader.

The basic CSS to make it all work looks like this:
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.row:before, .row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.column {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  display: table-cell;
  vertical-align: top;
}

@media (max-width: 768px) {
  .small-1 {width: 8.333%;}
  .small-2 {width: 16.666%;}
  .small-3 {width: 25%;}
  .small-4 {width: 33.333%;}
  .small-5 {width: 41.666%;}
  .small-6 {width: 50%;}
  .small-7 {width: 58.333%;}
  .small-8 {width: 66.666%}
  .small-9 {width: 75%;}
  .small-10 {width: 83.333%}
  .small-11 {width: 91.666%;}
  .small-12 {width: 100%}
}

@media (min-width: 768px) {
  .large-1 {width: 8.333%;}
  .large-2 {width: 16.666%;}
  .large-3 {width: 25%;}
  .large-4 {width: 33.333%;}
  .large-5 {width: 41.666%;}
  .large-6 {width: 50%;}
  .large-7 {width: 58.333%;}
  .large-8 {width: 66.666%}
  .large-9 {width: 75%;}
  .large-10 {width: 83.333%}
  .large-11 {width: 91.666%;}
  .large-12 {width: 100%}
}
Just that clearfix, border-box and some column width declarations make it work! The nice thing about border-box is that it makes padding work intuitively. In other words you may apply padding to columns without breaking the entire layout. This won't work in ancient browsers but otherwise it is a well supported feature well worth using.

As you might want to see the system in action, consider the example below:

JS Bin

I hope this little example works as a starting point for your system. If you use a preprocessor, you can likely eliminate some of the code above and make the system dynamic. There is also room for new functionality. Happy hacking!

Monday, September 2, 2013

Transformation Utilities - ioscript.js and png2ico

ioscript.js was one of the first Node.js libraries I released to the public. That was over year ago. Today I had the perfect excuse to revisit the library.

The basic idea of the library is very simple. It provides a shell for a cli script. In case the provided input is a directory, it traverses it recursively, executes the given callback on it and the outputs to a directory it as defined by the user. My recent changes made the library more versatile and fitting for more complex cases.

png2ico was such a case. I wanted an utility that could transform pngs in a given directory to a set of icos. In addition it was important for me to pick only certain png files. That is why I implemented a regex based filtering system that may be inverted. The syntax might be familiar to you from grep.

I know some people say you shouldn't write cli utilities using Node.js. Personally I rather deal with Node.js than Bash, Python or Perl. Your mileage might vary of course. In my case ioscript.js takes care of the boring stuff and allows me to focus on the hard part, the transformation.

I hope you enjoy these little utilities! If you have ideas how to improve them further, let me know in the comments.

I also published Monthly JSter today. So if you are looking for a set of interesting JavaScript related links to go through, check that out. Besides blog we provide Monthly JSter in an easy to consume mailing list in which you might want to subscribe. It is nowhere near as popular as JavaScript Weekly but I try to make up for it in quality. :)

Sunday, September 1, 2013

A Month at Northern Savonia in Finland

Sometimes you just need some time off. I spent my August at the northern part of Savonia. I wasn't particularly productive although I did release a library, setjs. As you might expect based on the name, setjs provides an implementation of a set data structure for JavaScript. It is immutable by design and mimics Python's API functionality-wise.

The library grew out of an article I wrote about data structures and published over at JSter.net. Originally I meant to use set as an example but it started to feel like something bigger, an entire library. I released a library dealing with zip data structures while at it. They are handy for processing data and simplify code sometimes.

Besides coding a bit and reading I spent a lot of time in the nature. The weather was in my favor this time. There were only four days of rain or so. Otherwise the weather was fine (between 15-22 C each day). Just perfect before the dark, cold Winter.

Foraging in Finland

Chanterelles!
This time it was a very good foraging season. In addition to the usual blueberries, raspberries and lingonberries some of the mushrooms had popped up. Chanterelle, a favorite of mine, was particularly bountiful this year.

Especially the early part of the month was excellent. The chanterelle harvest continues for still unless the weather gets below zero at nights. Lingonberries don't mind getting cold.

Speaking of lingonberries we made around 11 liters of lingonberry juice concentrate. Half of that has apples mixed in. Apparently it costs around 20 euros per liter so it is definitely worth something.

Even though the taste is somewhat tangy the juice is somewhat good particularly when mixed with mineral water. And it is very healthy too. Not all health benefits are yet known.

I recall reading that only twenty percent of the berries get harvested. The figure for mushrooms was mere two. Finland has nice freedom to roam. There are some limitations but generally speaking the law is very permissive. You can pick berries and mushrooms all you want. And even better should you sell them, the income is tax free! You might not get rich this way but it complements other income quite well. And you save in the food expenses during the harsh Winter should you stash them.

Sightseeing in Savonia

Weird mushrooms at a fallen trunk in Kalaja
Even though I've spent most of my summers at Savonia, there were still some places left to visit. The most spectacular one of these Kalajanvuori, a hill that rises 115 meters above lake Konnevesi.

There's a small, clear pond next to it (30 meters deep) and forest that has been left to its natural state. Unfortunately much of the forest in Finland has been dedicated for industrial purposes and places such as this are rare. Mainly conversation areas have these left.

In addition to trails Kalaja region offers shelters and places in which to set up a campfire. Particularly the climb up can be somewhat steep although there is an easier route available.

The Kalaja region will become a part of a national park that will be established within a few years to the area. It is already a part of the Natura 2000 network and has been noted for its beauty. In fact there have been tourists on the area since the 1800s. No wonder. Just take a look at the imagery.

Konnevesi and Siikakoski

Siikakoski
Around 50 kilometers to west at the village Konnevesi (yup, same name), there's a rapid known as Siikakoski. There are multiple of these rapids along the route but this one is likely the best known one.

Even Kekkonen fished here so it can't be that bad! This area contains some trails but at least during this Summer there was some work in progress. Particularly one section wasn't in a good shape. It might be better next year, though.

There are shelters and areas for campfires in the area. No doubt the area will continue to develop further as the national park becomes established.

Suonenjoki

Myllykoski at Suonenjoki
We also visited Suonenjoki, a city with around 7000 residents east of Rautalampi. There is a trail right next to the river that passes through the city. It looks like not much people use it, though, as it was filled with nettles at least partly. Nothing a good stick cannot handle.

The route begins right next to a sewage plant. It doesn't surprise me they want to do something about it and perhaps move it elsewhere. That said the route isn't all bad but it could be made better.

There was some hidden beauty in the route. Small idyllic streams, such as Myllykoski, were nice to see.

Conclusion

It was somewhat pleasant to spend a month away from home. Apparently you can have a good holiday even on a very strict budget. You just have to look closer. Perhaps there is still something to discover. Nothing is easier than fail to see what's right under your nose.