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 :)

In Austin TX for SXSW! Hackathon for Social Good and more.


Arrived last Wednesday at Austin, Texas. Pretty pumped. I am looking forward to meeting smart, motivated people and get inspired. If you are baseball enthusiasts, front end dev, or just good citizen of earth who are also in Austin for SXSW, shout out at @DaigoFuji and let’s meet up!

On Thursday, I attended Hackathon for Social Good at Adaptive Path, organized by Web Visions. It was very cool. It was the first hackathon where you already had a project and there is an assigned project manager. We created a js-Google Doc driven time line for history of Jewish Music for a non-profit, Idelsohn Society. Pretty random but came out pretty cool.

Off to SXSW!

Diving head first into sass(scss)/compass


For work, I am diving head first with scss, using compass to compile them. Awesome. This is something that I wanted to do — and looking for a right project — for a long time, but opportunity just found me. I love when that happens. This is a note to future myself as I change my mac’s environment for development reason, if/when I have to do it again.

Mac comes with ruby ready.

What’s my ruby version? ruby -v

What’s my ruby gem version? gem -v
You can update this by running sudo gem update --system at the time of writing, I have 2.1.5.

Do already have compass? compass -v

If not, run this:
$ sudo gem install compass

That’s it. It will install sass.

What you need now is to set the file strucuture, and have config.rb.

As I was working from a repo that is already set up to use sass, that was already set up. My config.rb looks like this:

With that, all I had to do was run compass with watch option:

mymac:dir daigo$ compass watch dir

>>> Compass is polling for changes. Press Ctrl-C to Stop.

That was simple. Then, when I edit the scss file, this automatrically happens:

>>> Change detected at 15:46:29 to: mobile.scss

overwrite hbr/css/mobile.css

Nice. I already own CodeKit, but didn’t even need it. I just wrote a simple function like this:

@function image-cdn($img) {
@return url('http://example.com/path/to/cdn/folder/'+$img);

I know I will be using sass version of founcation for my next project. I love the idea of setting $em-base and doing em-calc('22px');.

I have been tweeting for 6-years today


It is true. I tweeted for the first time 6 years ago today. At 10:05 am.

I tweeted (drum roll, please…)

Fascinating! (…or is it?)

I did not know that I could download all my past tweets from Twitter, hat tip to Aaron Lee, who posted a detailed “How to find your first tweet sent on twitter” on his blog. Thank you!

The downloaded archive is quite amazing. It is a full fledged, stand-alone bootstrap web app, and also include full json and csv. From README file:

In the `data` folder, your Twitter archive is present in two formats: JSON and CSV exports by month and year.
* CSV is a generic format that can be imported into many data tools, spreadsheet applications, or consumed simply using a programming language.
## JSON for Developers
* The JSON export contains a full representation of your Tweets as returned by v1.1 of the Twitter API. See https://dev.twitter.com/docs/api/1.1 for more information.
* The JSON export is also used to power the archive browser interface (index.html).
* To consume the export in a generic JSON parser in any language, strip the first and last lines of each file.

I’ve also been using Time Hop and it is interesting to see what I was doing a year ago. I wish it had last.fm data to see what I was listening then. Similarly, an interesting idea, you can send a email to yourself in the future from FutureMe.org.

Getting things done.

ima magazine’s (Have you heard? There is a new Japanese-English bilingual magazine starting in Boston! Help us now.) Creative Director, Ken Kimura, told me about GTD system, or Getting Things Done. It is really interesting.

I sort of do it, using this open source program called Wunderlist, which my friend Tom showed me. But this is really interesting.

In a interview in Harvard Business Review, David Allen, the author and creater of the system, says following about what he does and what his quick summary of his technique (May 2011).

I help people and organizations produce more with less input. I teach a set of best practices and a methodology that produce a greater sense of concentration and control.
I call what I’ve uncovered “the strategic value of clear space.” Say you’re going to cook dinner for people, it’s 5:00 PM, and they’re coming at 6:00. You want to have all the right ingredients. You want to have the right tools. You want the kitchen to be nice and clear. You need the freedom to make a creative mess. I teach people to achieve that freedom by taking very immediate, concrete steps: downloading all your commitments and projects into lists, focusing on “next actions,” and thinking about the context—work that needs to be done in your office, or on the phone, or on the computer. You don’t need to change who you are. You just need some simple but very powerful techniques.

From a great (and geek friendly) introduction to GTD by Merlin Mann’s 43 Folders blog:

Getting Things Done succeeds because it first addresses a critical barrier to completing the atomic tasks that we want to accomplish in a given day. That’s “stuff.” Amorphous, unactionable, flop-sweat-inducing stuff. David says:
Here’s how I define “stuff:” anything you have allowed into your psychological or physical world that doesn’t belong where it is, but for which you haven’t yet determined the desired outcome and the next action step.

He has done podcast on this topic and there is an excellent hour-and-half compilation of podcast.

Summary of the steps (Originally from the above link by 43 Folders, but edited to sort of fit my purpose.)

  • Collect Capture. Identify *all* the stuff in your life that isn’t in the right place (close all open loops) — get everything in one place, a list. *Everything* “What has your attention?” From answer the email to… what is my purpose/role on earth? Capture complete picture of your stuff — let system catch it and off my mind.
  • Process “Write it down, look at it.” — Analyze that list, organize. Break your work down to next actions. Is it actionable or not? IF not dump it or archive it.
  • Organize Get rid of the stuff that isn’t yours or you don’t need right now.. Put down what *you* can do about it. Put it in Do basket.
  • Review Put your stuff in the right place, consistently. If you have stuff on your mind, then put that down in the list. Iterate and refactor mercilessly — organize, organize!
  • Do Create a right place that you trust and that supports your working style and values. When you are “Doing” what’s on the list, you need to be able to “point and shoot” not thinking about it anymore. Crank the widget.” Do your stuff in a way that honors your time, your energy, and the context of any given moment.

Life Hack also have “Why Getting Things Done is the Best Productivity System”

Now, let’s get things done.

Responsive Adobe Edge Animate file embed

I went to Adobe Create the Web tour in Boston, at Bocoup (it was basically same as this video, so you didn’t miss much… except I got this cool HTML5 beer bottle opener keychain!)

I was really into Flash back in the day, and at one point I considered myself an expert of the ActionScript… I still have/wear hipster longsleeve Flash shirt, with logo [Fl] on the chest.

So it was sort of nice surprise that the Adobe is doing a lot of cool stuff using HTML5, and I just spend a weekend morning making the animation I just put up on Fujiwaras.comusing Adobe Edge Animate.

To make Animate work in responsive more, you need to design using percentage within Animate. This is sort of explained here on this video, but I had to really use it to figure it out. I struggled for a while trying to put it on the site, but you basically have to use iframe, becuase in published Animate html, you need to have <html style="height:100%;">

Then you use the same trick that was discribed in my past posting about Responsive YouTube video. This page has a good explanatio, but for animation that I created, which was based on 600px by 600px stage, I used the following css.

.embed-container {
    position: relative;
    padding-bottom: 100%; /* use 56.25% for 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

Thsi works because the percentage of “padding-bottom” somehow “refers to width of containing block and not height. Very interesting that it works, really.

On my animation, I used SVG for my sagari-fuji emblem (house emblem of my family) so when you zoom in, the emblem is extremely sharp. I have had bad luck with SVG being responsive, (a blog post about it that I found, I need to read it) but it is kind of neat that the Adobe Edge Animate handles this for you.

Learning FlexSlider API

Flexslider is awesome. Responsive design ready (screen resolution independent) and supports swipe out of the box. Just I needed for this new mobile project that I am working on.
This is what it says:

The new callback API gives you full control over all of your sliders. The callback functions currently available are start(), which fires after the plugin is initialized, before(), which fires before/asynchronously with every slide animation, after(), which fires after every slide animation completes, and end(), which fires when you reach the last slide. Each callback function will accept one parameter, which will embody the slider element.

The following example demonstrates how you could track slider counter information, such as “3 of 12″ using the callback functions. First, we use the start() callback to gather the total slides. We only need to do this once, so start() is a good place for this. Notice that start() accepts the slider element as a parameter and then calls the slider.count property. Count is just one of many properties tied to every slider instance that are available to you through the callback functions. The last step in this demonstration is using the after() callback to update the current slide information after each animation. You will notice another slider property used here to gather the current slide information, slider.currentSlide.

What I wanted to do was store some data-* stuff (text, url etc.) in the li tag of each slide, and after the animation is done, I want use jquery to load that stuff in other parts of the page.

Simple test
I have data-category in each of li. I just want to fire that up in “console.log.”

  <script type="text/javascript">
        animation: "slide",
        after: function(slider){

That was easy! All I have to do was wire the ids and .text to corresponding text. Love flexslider.

Displaying high res logo for retina display using CSS

Simple css rule to take advantage of Apple’s retina display.

/* iPhone 4 or higher with retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#logo a {
img {
display: none; }
display: block;
height: 36px;
width: 142px;
background: transparent url('[email protected]') no-repeat 0 0;
background-size: 142px 36px; }