Flexbox justify-content and Internet Explorer

A CSS layout challenge from a colleague: We have two columns, longer one on left, couple of items on the left. But the designer wants right side contents to align bottom with the left one.


  • Cross browser responsive website. Modern browsers, plus graceful fall back (“can read content”) to IE 8.
  • Right side contents, while most likely be shorter than left, can be any height. But must show the contents/not hide.
  • Do it with CSS, and (try) not use JS
  • As this will be part of template, make it as flexible/extensible as possible.

“Sure, you can do that” I said, “You can use the flexbox.. Every modern browser supports that. Even IE!

Or does it?

Here is my code pen:

See the Pen Flexbox justify-content by Daigo Fujiwara (@daigofuji) on CodePen.

What I found was not pretty. But here are my findings.

Mac Chrome (Version 37.0.2062.94)

Mac Firefox (Version 31.0)

Mac Safari (Version 7.0.6)

Windows Chrome (Version

Windows Firefox (Version 31.0)

and finally,

Windows IE11 (Version 11.0.9600.17239)


What happened there? After playing around with IE’s inspector, it seems the issue is with “min-height” rather than the flexbox itself.

So, if you give, say, a height: 1px; in the .flex-container-column, it works (then the height will be min-height). However, height of 100%, or height of auto will not. Mmmm.

So, I tried old trick featured on Chris Coyers site (Love CSS-Tricks!), but since it defaults to auto, it still doesn’t work.

Setting height would work, for example in the pen above, if you comment out line 14 in css (height: 250px;), flex would behave as expected. But since now the height is set, and not flexible, say if the right-one div had a height of 300px, right-two will disappear. We can’t have that.

Continuing the investigation

History of Japanese payers in MLB All Star Games

Cross-posted to JBP blog: Koji Urehara, Yu Darvish and Masahiro Tanaka: 2014 All Stars. I ment to get this up much quicker but finally did it!

History of Japanese payers in MLB All Star Games by year:

  • 1995: 1 Nomo
  • 1996: 0
  • 1997: 0
  • 1998: 0
  • 1999: 0
  • 2000: 0
  • 2001: 2 Ichiro Sasaki
  • 2002: 2 Ichiro Sasaki
  • 2003: 3 Ichiro Matsui Hasegawa
  • 2004: 2 Ichiro Matsui
  • 2005: 1 Ichiro
  • 2006: 1 Ichiro
  • 2007: 3 Ichiro Saito Okajima
  • 2008: 2 Ichiro Fukudome
  • 2009: 1 Ichiro
  • 2010: 0
  • 2011: 0
  • 2012: 1 Darvish
  • 2013: 2 Darvish Iwakuma
  • 2014: 3 Darvish Tanaka Uehara

Continue reading…

CSS Framework…

Excellent presentation/research by Harry Roberts, one of the css guy that I follow, called What Is A CSS Framework Anyway?.
My favorite quote:

What is wrong with css? [It's] “an old, loose, leaky, globally-operating, inheritance-based language which is entirely dependent on source-order, except when you introduce its own worst feature: Specificity.”

That quote reminded me of a presentation at Boston CSS meetup, given by Bocoup’s Greg Smith: “CSS is Awful”.

Speakerdeck: What Is A CSS Framework Anyway? by Harry Roberts Published May 10, 2014 at Industry Conf

Personally, I am a big fan/advocate/apologist for Zurb Foundation. I like it because, while it is true that the code gets bloated with some unused stuff/overrides and it is “trying to be all things for all men”, they actually do a good job of keeping it simple (relatively speaking), have great/flexible “settings” file, and best of all (this is true to a lot of open sourced projects) having a community of issues, discussion/solutions and a solid documentation. Since we have a small team, but everyone is hands-on, I think it is important that we can have some place where each developers can just look up something to see if this is some issue that people are having or not to trouble shoot. Anyway, great presentation and was inspiring. I love CSS!

But Harry has a good point, why do people geeks wear jQuery t-shirts but almost never zurb foundation t-shirts? I’d wear it :)

Updating old php scripts and learning PDO (PHP Data Object).

I started making websites in 1998. Gosh, in the internet years, that’s a forever ago. Remember Perl CGI and its cgi-bin folders? I have also written a lot of website using php along the way, and LAMP stack was sort of my thing for a while. But since I started to focus every efforts on front-end stuff, it have been a while since I looked at simple backends. Some of the sites that I created long ago desparaetly needs some updates. I have, in the past, thought or looked into converting sites to ruby on rails at one point, then looked into python, then thought hard about switching to some kind of static site generator engines (like jekyll or assemble.io), and finally more recently, thought about converting them to MEAN stack. But, really, who has time for that? Lately, I am thinking about just upping my php level and “patcing” it right in php5. Or at least keep the database structure and convert the backends to be more like API or services, still using php.

This weekend, I have been sort of playing with one of my old project: Softball Stats, written by David Carlo. It is an awesome little project.

“SoftballStats is a collection of PHP4 scripts and a MySQL database that track the stats, games, players, and every play made in multiple softball/baseball seasons. SoftballStats also compiles statistics for each player.”

I could use this on my work co-ed softball team, or also use it for my son’s summer league. I started updating it on my github.

Found this excellent website: phpbestpractices.org/

Here ares some notes that I kept while updating some of scripts.

First thing is the way I have been connecting to the database.

I was doing this:

$link = mysql_connect("example.com", "user", "password");
$result = mysql_query("SELECT * FROM player WHERE SeasonID = 2014");
$row = mysql_fetch_assoc($result);
echo $row['name'];

New (Well, new to me.) way to do this is using PHP Data Object

$pdo = new PDO('mysql:host=example.com;dbname=database', 'user', 'password');
$result = $pdo->query("SELECT * FROM player WHERE SeasonID = 2014");
$row = $result->fetch(PDO::FETCH_ASSOC);
echo $row['name'];

Also, way I was doing mysql_num_rows($result) will now have to changed to

As with mysql_data_seek($result),

Simple enough? I was cruising along, then I encounter the error. Or more like, NOTHING. By default, error is a blank screen, as it turns out.

My php.ini was in /Applications/MAMP/bin/php/php5.5.10/conf/php.ini (Note that it is not MAMP/conf as you expect, it’s in /bin. you can find this infor using . and display_errors was in line 277.

Actually, you need to put those two lines in the php file:
ini_set('display_errors', '1');

Got some things fixed, but broke more things. Ugh. Still working on it. Ah, time. I wish I had more.
Continue reading…

Conflict resolution on git


Git is just amazing. Learning command line git is one of the best thing that has happen to me. I’ve been lucky to work with some talented guys from bocoup, and I’ve gotten to know quite a bit about it lately and just wanted to document things that I do when I encounter that dreaded (well, not THAT bad) “We can’t automatically merge this pull request.” message.

Also if you have not seen this Cheat Sheet do yourself a favor and take a look.

So, pull request can’t be merged. It’s because what you worked on (likely your branch) have some conflicts with what you are trying to merge, likely origin/master. this stack overflow answer was useful in understanding what I am doing.

My instinct was to git pull. But that is a bad idea (Quick! git reset origin/your-working-branch --hard to get what you have pushed to github!). When you encounter “can’t merge” message, git’s help suggest this:

Step 1: From your project repository, bring in the changes and test.

git fetch origin
git checkout -b your-working-branch origin/your-working-branch
git merge master

fetch then merge is much better than pull. Pull does too much under the hood (as my co-worker Tim says “too much magic”). But still, chance is that you may end up with WAAAAY too many conflicts and therefore very hard to resolve them. Perhaps there is even better idea:

git fetch --all (You may not have to do –all, but I am paranoid and this is my feels safe blanket, if you know what I mean. It’ll ensure you have the latest remotes.)
then git rebase origin/master

Ah, rebase. I had sort of hard time understanding concept of rebase, but perhaps git’s message explained it to me the best. It says “First, rewinding head to replay your work on top of it…” All your commits are “replayed” after changes that are already in master. People used words like “flattening the history” when explaining rebase, which was confusing to me. but “replay your work on top” explanation worked best for me.

When you rebase, or “replay your work on top,” you resolve conflict one by one, as it encounters conflict.

You may get a message like this:

Applying: My commit 1.
Using index info to reconstruct a base tree...
M	source/js/file.js
M	source/js/folder/file.js
Falling back to patching base and 3-way merge...
Auto-merging source/js/folder/file.js
CONFLICT (content): Merge conflict in source/js/folder/file.js
Auto-merging source/js/file.js
CONFLICT (content): Merge conflict in source/js/file.js
Failed to merge in the changes.
Patch failed at 0002 My commit 1.

When you have resolved this problem, run "git rebase --continue".
If you prefer to skip this patch, run "git rebase --skip" instead.
To check out the original branch and stop rebasing, run "git rebase --abort".

Nice to have that –abort option. Unlike merge or pull, you can just forget about the whole thing. Continue till you are done.

But because rebase changes the history, you may get message like this.

Your branch and 'origin/your-working-branch' have diverged,
and have 95 and 2 different commits each, respectively.
 (use "git pull" to merge the remote branch into yours)

If you push force that message will go away
git push origin your-working-branch --force

$ git push origin your-working-branch -f
Counting objects: 51, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 1.56 KiB | 0 bytes/s, done.
Total 13 (delta 8), reused 0 (delta 0)
To https://github.com/daigofuji/my-repo.git
 + 368da98...4266772 your-working-branch -> your-working-branch (forced update)

When you push force you’ll see the previous sha and the new one, so if you mess up and want to revert, simply reset hard on that previous sha and push force again
they look like previous_sha…new_sha

so in this case
git reset 368da98 --hard

In case of “Oh Crap, I made a spelling mistake and I just pushed that.”

You could git reset HEAD~1 -- soft to undo last commit and re do it, OR,
change the file, then git commit --amend
Either way, since you already “Pushed” you need to push –force to make it work.

If your working directory is dirty (meaning you have conflicts) and you don’t have any work you need to save:

# Cleans the working directory.
git reset HEAD –hard

# Reset the branch to the remote (in this case your-working-branch.
git reset origin/your-working-branch –hard

Continue reading…

Open Vis Conf 2014 was amazing! Love that conference.

Good people at Bocoup puts out this kick-butt conference in Boston every year. I am lucky to have participated in both of those years.


I only was able to go to one day of it this year, but it was very interesting and inspiring as last years. I whole heartedly agree with Mike Bostock’s sentiment of “design is hard” and it was helpful for me to see his breakdown of why. Neat to know about “Fitts’s Law.” NYTimes git tool called “Preview” which takes screenshot of git commits are pretty cool. Thoughts on explanatory graphic vs exploratory graphic. He says don’t be afraid to fail. Try bad idea deliberator to evaluate it. He says “Javascript” is “One True Language.” Sam Selikoff’s js framework talk was very interesting and I need/can’t wait to see the code. Kennedy Eliot of WaPo and Jen Christiansen’s talk was very close to my field. Print publication with online challenges. Finding “Narrative” in data. Story telling is important. All good design/presentation is a god story. ICanHaz.js sounds really interesting. I need to check it out. All the other talks, I have notes to go over, but was great. Nice to see all the folks too. Those are my people. Very inspiring.

I’ve been posting links that I liked at Posterous (RIP) and then my tumblr blog. Here are the week worth of Articles that I liked: Friday, May 9, 2014:

My talk from css meetup: Vector-based Responsive Web Design


I had a great time talking at April 22, 2014 Cascade Bos meetup. My talk was titled: Embedded web fonts, Icon fonts and SVG – Vector-based Responsive Web Design using CSS.

Coincidentally, the same day, Chris Coyer of CSS-Tricks have published a blog post titled: Inline SVG vs Icon Fonts [CAGEMATCH].

His conclusion is very similar to my conclusion but better!

If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it.

Definitely worth a read if you are interested in this topic.

Continue reading…

Got Galaxy S5 with Android KitKat 4.4


I know the photo is terrible, but I wanted to capture the screen size. It is large enough to view any responsive websites without trouble while still fitting in my pocket.

Did it. I have been an iPhone user for a while, but switched to Android. Got myself an Galaxy S5, and like it alot. I noticed that there are bunch of apps out there, perhaps more choices, but quality seems to vary a bit. Looks like you need to be more selective what you choose to use. So far, the transitions were very smooth. I was using Google for most of my stuff — like gmail, contact, google calendar etc — anyway, so that was very simple. And Dropbox integration was great. It is definitely more like computer than phone, and I like it. Samsung Health app have replaced my (lost) fitbit and Sleep as Android app seems fine replacement for SleepCycle. Al the other apps that I was using on iPhone, like MLB At Bat, Waze, FoodSpotting, Wunderlist, Social Media apps (facebook, Twitter, Linkedin, Foursquare, Instagram), Evernote, OpenTable, Fantasy Baseball apps (Yahoo, CBS and ESPN) all have native android native versions. Google Play Books are as good as iBooks, and iCloud/Find iPhone capability can be (seems to be, anyway) found on Android Device Manager.

Couple of memos:

  • Lost my “Alternative Password” once already. To reset it, you just deregister all if your finger prints, and when you strat the process over, it will ask you to set alternative password.
  • I was recommended to check out Google Now, Keep, & Newsstand. All services that I was not familier with, but it looks interesting. Especially Keep.
  • Chromecast and its $35 price tag is really enticing.
  • A Tech friend, and Google guy, recommended following utility stuffs for me: Advanced Task Killer is good for keeping on top of background processes, ES File Explorer is a good general purpose file manager.
  • I am looking for pod catcher. He recommended AntennaPod, but it looks a bit too basic… Trying out Pocket Casts, (not free) but liking it so far.
  • MBTA Bus stuff, I was using Catch the Bus on iPhone, just because it was one of the first one out and did its job but since there are bunch of free ones now I am trying out YourBus MBTA. It is pretty good and seems accurate.

I’ve been posting links that I liked at Posterous (RIP) and then my tumblr blog. Here are the week worth of links:

Foundation connecting my (front-end) world

I don’t even remember how I first found Zurb Foundation, but it have almost become my obsession. It’s everywhere.

One of the smartest guy I know and a good firend in Tokyo, Keiichi, contacted me and told me that he is going to bootstrap this StartUp. I have not heard from him in a while, And I was really glad and I told him that I will help create his website. Immediately, I started thinking I will create something cool with Foundation and Jekyll. I need to update my repo

Lucky for me, Kianosh Pourian and Dale Sande’s excellent Sass in Depth book came out about the time when I was getting into Foudation and its beautifully crafted SASS, it has been a great help and timing. I took Advanced Foundation class last year, I’ve converted my blog to Reverie-based one and I have successfully integrated Pattern Lab (another of my obsession, you could say — and I know, I know, Brad Frost says “do the sh*t yourself…”) with Foundation for my work, on vagrant box, no less!

So perhaps it was just fitting that I made my first Open Source pull request on github today. On Foundation. Yay, Open Source!

Anyway, perhaps foundation js and require js integraton next? Who knows!

I am a huge fan of Zurb Foundation and I hope they will stop in Boston for their World Tour and perhaps organize a Boston Foundation Users Meetup? Not sure if there are enough interest? Maybe we can host Cascade Bos meetup?

Random front end tips and tricks

I am learning tons this week. Very exciting. Working with smart people of Bocoup, learning/picking up tricks and tips on how to do many little “a-ha, that’s how you do it” things.

Here is my notes:

  • With Editor Config, you can create a project specific configfiles for your text editor of your choice. I am using sublime, and there is a package for that. Now we have a file on the project home that specify that we use tab for indentation for our project — that’s our style that we agreed on, and we are keeping it consistent — but I can start using two spaces for my other projects with this.
  • Bower is powerful. It’s managed by Twitter. Their stock is now at $40. Time to buy?
  • This gist by Matt Surabian is awesome. If you put it in your .bash_profile, your terminal shows your branch and with a * star if there is a change that needs commits. I use terminal with white backgroudn so I change like 38 to

    echo " on "$PURPLE$branch$dirty

    If you don’t want new line, get rid of \n from line 41.

  • I am learning about require js and Asynchronous Module Definition (AMD) API (Boy, do I have a lot to learn) but here are some example of diffrent types of AMD flavors by Tim Branyen and also, example of how to use it on multi page. I think I will start with Anonymous CJS style and see how it goes from here.

I’ve been posting links that I liked at Posterous (RIP) and then my tumblr blog. Here are the week worth of links: