Flex box intro – css finally fun to use

Flexbox is new style element in css that controls positioning, as of recently it has decent support in browsers ie. all modern browser are supporting it.

This maybe doesn’t sounds as huge as this thing is, but it is enormous! It removes need for floats and helps greatly with grid systems.

It actually allows positioning elements on the screen, aligning them both horizontally and vertically. This makes much easier to position and size elements, create layouts etc. Probably need for css grids is no longer as pressing. Main idea is to allow elements to be sized individually and let the container figure out how to position them.

W3 working draft for flexbox http://www.w3.org/TR/css3-flexbox/

I find this guide very helpful with visual examples:

Here are some things it solves and how to use it:

let’s make container new type ‘flex’

.container {display: flex; /* or inline-flex */

next we can say which way we want to lay out elements

.container {
     flex-direction: row | row-reverse | column | column-reverse;

you can specify how to wrap inside content

     flex-wrap: nowrap | wrap | wrap-reverse;

you can define that container can grow or shrink, which allows elements to take more space or shrink when needed.

.item {
    flex-grow: ; /* default 0 */

.item {
    flex-shrink: ; /* default 1 */

Next are very interesting interesting, it let’s us justify and align content and it is very powerful:

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;

There are more examples on how to do complete layout in CSS guide I linked before, also Mozilla described really well


Honestly from this perspective, I don’t see why we had to wait this much to solve this issue.


Free project planner and estimator tool

I ran into interesting tool today, it is a project estimator, task breakdown tool.


Screen Shot 2015-02-02 at 10.55.09 PM

First it is free to use and interface is a little bit rought, yet it does work and breakdown of the tasks is really well done. Providing estimates is bonus on top of that. Honestly when you look at this, you realize that for realistic estimates you don’t really need significantly more then this.

Screen Shot 2015-02-02 at 10.57.06 PM

Taking into account how many projects get started with less then this amount of planning, I find this tool very useful.

Light Table – a real work surface

It started with video about intentional programming or interfaces. It is a very impressive demo. Then Chris Granger went on to create a demo of his own in 2012 and start a Kickstarter project to support creation of open source ide. What he created is a fun environment, not as ground shattering as we were led to believe, but still great place to have fun while programming. In the end, as his interests moved on, he published everything on github where it still have some development, but I believe it kind of died down for now mostly.

Screen Shot 2015-02-02 at 10.46.36 PM

I decided to try it out few months ago and had a lot of fun. I am not as adept in Clojure but in Javascript you still can have fun with it. There are number of modern features, workspace with fuzzy logic search for filenames for example, but I would say the most interesting one is instant repl, which allows you to execute any line as you write it. This really has to be experienced, more then anything, because it does help and shortens development path. There is also ability to have synchronized preview window on the right (you can have it anywhere) for web apps, that would spin instance of the app and offer preview.

Also, it would be a disservice not to mention large number of plugins available that provide support for most languages and formats.

As a development environment, I can’t say I could use it exclusively, but it is fun to use for occasional project and it does have productivity enhancements. Where I could see it would be useful is in workshop setting where groups are provided training, so instant execution and visibility of variable values would be of most use.

Prototyping is fun with Bourbon, Neat and Slim

I am working on my super-secret-awesome-project and prototyping is something I do a lot lately. I can say, it is not as easy as it looks to others, but it is great joy to make prototypes.

Anyhow, I was trying to focus on mainstream frameworks, like Bootstrap and Zurb, and those are definitely awesome, however my attention slips often to smaller offers.

So, I am playing with Bourbon which is Sass css framework, very simple, very awesome. Often for prototype you don’t need anything crazy like Bootstap and Bourbon is just fine.

So on this Bourbon has it’s own grid that you can add and it is called Neat. Great thing about Neat is that semantic grid, which means you will not use grid_8 or some other weird class name in your divs. I personally never had problem with those, I like those things exposed in source, so I don’t have to look in 7 files to understand how layout is created. Still, it is semantic and awesome, and we don’t even have to say it anymore, responsive.

From now on, anyone making anything that isn’t ‘responsive’ should emphasize that, instead of having to say this is some competitive advantage to have websites responsive.

We are professionals, the same how sites had to work in all browsers, they still have to do that and work across devices, that is just what has to happen. If you site isn’t doing it, that means it is old, pre 2008/9 or so.

Anyhow, back to my simple and awesome setup for prototyping. On top of all this awesomeness with Bourbon and Neat, I added Slim, templating engine that is very similar to Haml, but has even less to write, more clean html. When you combine expressiveness and cleanliness of Slim with Bourbon, you get awesome html that just sings like Pavarotti. It is feast for your eyes seeing html.

So this is what occupies my attention these days.

Command Line Productivity (Part 3)

Here are links to Part 1 and Part 2 of this series.

OK, back to productivity post. I wanted to make my command line work more efficient and streamlined. Even with wonderful zsh autocomplete of remote ssh server paths, git branches etc, there is a lot of typing going on and not all is necessary.

One big annoyance for me is that I have several projects, and often I need to get from one to the other quickly. Often I would have several tabs open in iTerm2 and each would be for some context, and within that context that window would be split further. Often I would keep those for several days, just to avoid having to type all of this again.

This is all fine, but I started using sometime 2+ years ago aliases for projects and spaces I go frequently. As long as I have similar file organization on all my machines, and that aliases file is kept on Dropbox, things are great. Dropbox is awesome :), just saying.

Back to my aliases file which I mentioned in Part 2 of this series.

# apps
alias reload=”source ~/.zshrc”
alias be=”bundle exec”
alias cuke=”bundle exec cucumber”
alias rs=”bundle exec rspec”

# locations
alias work=”cd ~/work”
alias fit=”cd ~/work/fitclub”
alias zelio=”cd ~/work/zelio”
alias home=”cd ~”
alias aliases=”mvim ~/Dropbox/Apps/aliases”
alias web=”cd /Library/WebServer/Documents/”

I removed several projects from this, as I feel exposed by having all my aliases here.

First part shortens long app related commands, obviously I do a lot of rails, if you use different tools, it pays to shorten them. Other part is for different location on my machine I feel like I like to have their locations.

This all works really well. However recently I came across … bash script I can’t find source to properly attribute credits… well here it is, it is very short and uses symlinks to remember folders aliases. Just include this in your .bashrc or .profile or .zshrc

export MARKPATH=$HOME/.marks
function jump {
cd -P $MARKPATH/$1 2>/dev/null || echo “No such mark: $1”

function j {
cd -P $MARKPATH/$1 2>/dev/null || echo “No such mark: $1”

function mark {
mkdir -p $MARKPATH; ln -s $(pwd) $MARKPATH/$1
function unmark {
rm -i $MARKPATH/$1
function marks {
ls -l $MARKPATH | sed ‘s/  / /g’ | cut -d’ ‘ -f9- | sed ‘s/ -/\t-/g’ && echo

It usage is to cd into folder let’s say ~/work/my_awesome_code, then say ‘mark awesome’ and in future, if you say ‘jump awesome’ you will be there. If you say ‘marks’ it will list all remembered locations. Very simple, awesome.

While my aliases served me well for years, this solution is very elegant and I really like how it is done.

This is pretty much what I had so far. There some smaller tricks I like to do, like creating todo.txt in folder and in .rvmrc or some other file to add ‘cat todo.txt’, so each time I open a folder, it will tell me what next it is supposed to happen in that project. This obviosly can be done in .zshrc as independent function, I just didn’t spend time on it.

Also,  whenever I notice I am typing same command over and over, I will make an alias for duration of project if nothing else, to save me from typing.

Command line productivity (Part 2)

So yesterday I was looking into my command line usage and what are the most frequent command(s).

Here is link to part 1.

Obviously I spend a lot of time working the git. So most benefits I would gain if I could do something to improve that part. I already noticed that typing git commands is very verbose.

I also remember in the past when I was doing such analysis, tool would produce aliases for commands you frequently use. This is all fine, but it was hard to remember those commands, and it would take me more time to remember what was exactly shortcut, then to type it. So I quickly abandoned such system.

This time it will be different. For start, I am pretty sure that aliases like gp, gc etc, will not give me benefits. This got me thinking, how else can I name aliases that I can skip step where I pronounce command I want to be able to remember beggining letter. How about removing git from beginning?

Here is what I did:

first, so that I don’t have to create separate aliases in laptop and multiple desktops, I created a file in dropbox ‘aliases’ and in my .zshrc I added line to source it like this:

source /Users/zeljko/Dropbox/Apps/aliases

Then I started creating aliases. I made point to make them like I would think of those commands. For example ‘push’ is for ‘git push’

# git commands
alias s=”git status -s”
alias c=”git commit -m”
alias gd=”git diff”
alias add=”git add ”
alias log=”git log –oneline”
alias reset=’git reset HEAD –hard’
alias push=”git push”
alias pull=”git pull”
alias pick=”git cherry-pick ”

This helps me great deal. First day it took me a little time to get used to it, old habits die slowly. However, since it is intuitive, it works great.

One thing I am not super happy is gd for git diff, but diff is utility and we should not create confusion. On the other hand, as someone who likes to call git status, between pretty much most of the steps, shortening this and commit, is awesome.

Now, workflow would be something like this:

s (git status)

add . (git add .)

c “zd [#xxx] my feature” (git commit -m …)



push –tags

So this alone helps me great deal. What else I would like to improve is folder traversing. This will be topic of next post tomorrow.


Command line productivity (Part 1)

Being productive, we all want it, we rarely implement it. Most of the time, we have no idea where to start.

Since I spend most of my day in terminal, I felt this is a place I can make more productive. It is already made more pleasant to look at by choosing a custom font and tweaking several other settings.I also spent time to learn terminal shortcuts (iterm2), so I can quickly split windows, switch tabs etc. If you don’t do  those things in your terminal, and that is where you spend your day, you should start by learning shortcuts and customizing settings. One great terminal I really enjoy on Linux is Terminator. On Windows there is PowerShell and Console2.

I tried to make OSX open in terminal on startup, like you could do in Linux, but I didn’t find simple way to do this. I don’t shut down it anyway, so it is OK.

So, how can we be more productive on command line. For start, I wanted to learn better how I use commands and what and how often I am using them. From few years back I remember someone had neat oneliner that would analyze frequency of command in history.

Didn’t have to search long to find this blog post ‘Command Line Analytics

In essence all you need to enter is this command:

history | awk ‘{a[$2]++}END{for(i in a){print a[i] ” ” i}}’ | sort -rn | head -10

It goes through your history, takes first part of command line entered, sorts it, takes first 10 items and displays them along with frequency of usage. For my analysis, I wanted to see top 25 commands I used:

3014 git
630 cd
568 ls
378 brew
355 mvim
304 ack
285 bundle
281 rm
260 be
204 rake
180 rvm
169 ssh
165 tig
160 lime
150 gem
142 cat
121 curl
117 l
109 sudo
90 rails
86 open
79 npm
79 gd
73 touch

Some of these are duplicates, like ls and l (l is alias for ls) mvim and lime are editors.

Let’s stare at this for a moment… I will continue tomorrow on what I did next.

Command Line Productivity (Part 2)