November's PDDs

Every sixth week we have Personal Development Days (PDD) here at Kollegorna. This means that everyone is free to work on something on their choice that's related to our work. The PDD:s starts on Thursday and ends on Monday. So there's plenty of time to learn pick up new skills, try new technology or just get better at something you already do. You're free to work by yourself or team up and collaborate with someone else in the team.

This is a summary of what happened this time:


The shoemaker's children always go barefoot, the saying goes. That's how we've felt about our website for quite a while. We spend so much time obsessing over client projects that we've often overlooked our own. So, given three days to work on anything, I just bit the bullet and launched myself into a design and development sprint. Three days isn't enough to do a whole lot, but just the opportunity to start over with a clean slate was compelling enough.

We've been using Middleman for most of the static websites we build, including our own. To take the gruesome work out of setting up a new project, we have an internal Middleman boilerplate. We use it as the starting point for all of our Middleman projects, so we're constantly updating and improving it. By coupling that with our design system (which we use to store shared resources, variables and dependencies that we use throughout all of our own websites), I managed to have my development environment set up in, quite literally, a couple of minutes.

That meant I could use most of my time, during these past three days, to focus on actually building stuff. I didn't get around to finish all of it, but got surprisingly close. We're hoping we can have all of the content and missing pages ready before the end of the year, so we can start 2017 with a bang. And when we do, of course, we'll open source it, just like we did with our current website.


I decided (once again) to take a look at some Swift/iOS courses. I found this one and gave it a try. I took 3 of the courses there:

  • WordCollage - Demonstrate the basics of Auto Layout and connecting interface views to controller actions.
  • UnitConverter - Teach students about delegates, delegation and protocols through the creation of a programming classic. Facilitate a deeper understanding of Model-View-Controller, and demonstrate how to persist data with NSUserDefaults.
  • Clock - Dive in with everyone's essential iOS app: the clock. Teach students about Interface Builder, UILabels, IBOutlets, models, views, controllers, NSTimer and how to handle device orientation.

After completing those I discovered that is offering 50% off Black Friday deals.

I bought "The iOS Apprentice" and "Core Data by Tutorials". Currently I'm going through "The iOS Apprentice" and I'm really having fun with that!

I can honestly recommend that to anybody who's willing to dive into iOS. I'll definitely spend some time with it even when our PDDS are over.


In the recent PDD I learned how to use Photoshop CS6 software and create Facebook posts and ads. Using Photoshop makes editing much more easier and the effects are as good as natural, hence it gives more professional look and feel to the ads created.Also, created a new

Youtube Channel and learned how to manage Youtube channel and video upload with some edits, sound effects and promotion link & ad integration in the video, along with analytics reports and Search Engine Optimization for Youtube videos. Where you can get the exact reports about each viewer and make analysis based on behavior observed with statistical data.


I finally finished the WesBos ES6 tutorial( I also checked out React through and also Vue.js with the help of their documentation. Next step is to build an app using both frameworks and see what sticks. React have more companies behind it but Vue feels simpler to implement step-by-step(component-by-component).

Other than Javascript diving I also caught up on some Rails conference talks and some Elm talks. Elm is really interesting but feels too early to jump from Javascript to that right now when there are more people than me to work on it.


As a front-end developer and user interface designer wanna-be the advantages that React Native offers are what bought me; UI components that feels at home on their respective platforms working along with other web development technologies. Like any new framework there is a learning curve but nothing too complex to feel too intimidated to dive into it. I started with a simple app, show a map fullscreen with a button to pin point to the user current location, easy project concept to start to know React Native.


The decision

Approaching any personal development project requires one crucial step - the decision on what to work on and what to improve in your skill set. This is not to be undermined, in this part of the process you’re exploring what’s out there, what is the current landscape in your field of expertise and what vital part of this landscape is missing for you.

This time the decision for me was simple - motion. As we have moved towards flatter UI design in the past years and left skeuomorphism behind, the need to make things clear visually for the user is represented mainly by motion & animations. Material design introduced this concept by highlighting how important it is for every part of the design to have a place, even if not in the viewport - “Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.”

The process

meetup 1

Armed with the knowledge of what I want to work on now opens up the path for more technical research - what tools do I need to start building animated designs, how can I incorporate those designs in live environments, do I need to learn a new app from scratch for this? All of the above are valid questions, and after figuring out what is most compatible with my workflow I decided on dabbling my feet in Principle ( This app has allowed me to visualize my interaction ideas almost instantly, after reading a couple of tutorials and importing my concept designs from Sketch I could just do a couple of easy tasks and have a recording of my interaction ready.

Now the question becomes - why not do this whole thing in-browser, instead of using a prototype in the first place? The answer here is split in two parts - first is client-side, the ability to quickly mockup a design and show how it becomes alive to the client is invaluable in regards to feedback, and secondly the experimentation freedom you have as a designer - being able to move a couple of sliders and change a couple of pixels on the fly and see the changes take effect live opens up your creative thinking more than staring at a black and white text and trying to figure out how to make things smoother only by tinkering with the code in front of you.

Another opportunity that coincided with the personal development days at Kollegorna was a dribbble meet up that I had the chance to attend. This included a couple of talks on different topics such as motion design (yup, a hot thing right now) and design systems (such as Atomic Design by Brad Frost).

meetup 2

The takeaway

All in all I feel extremely lucky to be a part of such an agency that values the personal development of it’s members and is against dogma in general. After having the time to look into motion design I come out of it feeling more confident in my skills on that front, not claiming to have become an expert or anything just in a couple of days, but the big takeaway is this - you should never stop developing yourself, this is the best investment you can make, adding this to my skill set may prove to be useful in the future and if not at least I gave it a try and now feel more competent in that field.

blog animation



Official Manuals!

On this PDD I managed to work on something I had been looking forward a lot! Create internal manuals about our style and conventions on things like Ruby, Rails and EmberJS. Small things here and there but I feel that if we manage to follow conventions that we all agree upon we will move faster and it will be easier for anyone to jump in a project.

I also created a super tiny rails introduction for newcomers. It's been a pain for front-end people to jump in a Rails project for the first time although it should be as easy as 1-2-3. So I hope this will help anyone becoming familiar with Rails faster.

And some Crystal..

I recently saw Crystal and I thought to give it a try. The language seems to be pretty immature so I didn't expect much. After all it makes more sense to invest time in Elixir that Crystal since Elixir's ecosystem gets more and more mature, Phoenix has reached Rails productivity, if not better and learning a new paradigm (functional) isn't bad at all.

However, I don't know why, but Crystal has definitely sparked my interest! Maybe because I see everywhere how fast it is even single threaded and Boehm-Demers-Weiser GC (which they say is slow), maybe because it has types, maybe because it looks like Ruby.

I created a simple API using kemal: it listens for a request coming from our Slack, it reads the params given in Slack and based on those params it reads the reported timesheets from Harvest. After some small data normalization it sends back to Slack a report.

I have to say that I was surprised how easy was to write code from my Ruby knowledge. Also I spent much less time debugging around like I would do in a normal Ruby app. Seems like compiler adds a lot of safety in your app. If it compiles it will run almost certainly without any issues.

I will leave you with a code snippet. Try to figure out if it's Ruby or Crystal code..

require "base64"
require "kemal"
require "http/client"
require "json"
require "./auto_report_hours/models/slack"
require "./auto_report_hours/models/time_entries"
require "./auto_report_hours/version"


module AutoReportHours
  before_all do |env|
    env.response.content_type = "application/json"

  get "/" do |env|
    filters =
    if filters.invalid_request?
    else, filters.response_url).report_time

class FiltersService

  def initialize(@query : HTTP::Params)

  def date
    return parse_date(slack_date) if slack_request?

    return parse_date(url_date)

  def response_url
    if @query["response_url"]? && slack_request?
      return @query["response_url"].to_s

  def invalid_request?
    return true if slack_request? && !valid_slack_request?

    return false

  private def slack_request?
    return @query["token"]?

  private def valid_slack_request?
    return false if @query["token"]?.to_s != SLACK_TOKEN
    return false if @query["team_domain"]?.to_s != SUBDOMAIN
    return false if @query["user_name"]?.to_s != SLACK_USERNAME

    return true

  private def slack_date

  private def url_date

  private def parse_date(date_string)
    return - if date_string == "yesterday"
      return Time.parse(date_string, "%F") if date_string.to_s.includes?("-")
    rescue Time::Format::Error

Loading comments…
All rights reserved