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…


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

SXSW2014

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

compass-logo

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

Wow.

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">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        after: function(slider){
          console.log($('.flex-active-slide').attr('data-category'))
        }
      });
    });
  </script>

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; }
}
}


Random rambling thoughts (about “old” musc).

I was sitting at Parish Cafe in Boylston Street tonight, the bartender played a song by Weezer ( the song was Island In The Sun). I was like, “I haven’t heard a song by them in a while, I used to worship them.” So I looked up in Spotify. I couldn’t believe that the Weezer debut album was made in 1994. Geez. That is like 18 years ago.

Earlier in the month, MCA the bass player of Beastie Boys has died, and that brought back the memory. I wrote on my facebook:

My highlight of college day was when I was photo intern at the Worcester Telegram, I got a press pass and front row access to shoot Beastie Boys at Worcester Centrum (now it is called DCU center). My friend Mike was in town and we waited in the morning to get the newspaper, it was 2-inch square black and white photo of Mike D (I think) but it was one of my best(?) work, ever. It was awesome. I wonder if I have the prints or negative in the basement… I think it was 1993?

I came to United States in 1992. I was enrolled into ESL program in Tuson, Arizona in the summer, and then came to Massachusetts in the fall. It is hard to believe it has been 20 years. Crazy. Time flies.

But then again, I think 100 years is a long time, since it is the 100th year anniversary of Fenway Park opening and all. But I biked along passed the Okazaki Castle everyday of my high school life, and Okazaki castle was built in 1455. Isn’t that CRAZY or what? Even if the current one was built in 1590, the Okazaki castle was already over 300 years old by the time Fenway was constructed. It is all about point of view, I guess.

Anyway, the Weezer album contained a lot of great songs. Two of my favorite then, and now that I hear it back, are “The World Has Turned And Left Me Here” and “In the garage.” But ones that bring back the memory most is Say it ain’t so and “Undone – The Sweater Song”, which I hated it at the time. Say it ain’t so, not so much, but I hated the sweater song, as I believed at the time it was such an inferior song to much of other songs on that album but got a lot of radio play. But again, I didn’t even realize that I had such a strong feeling (positive and negative) about this album.

It is so interesting that the music of time defines so much.


Very cool live election coverages

This is kind of night when I am amazed for Twitter. I have twitter list for infographics people and newsroom developer types, and this Iowa Caucus night, people are posting up some really cool stuff.

NYTimes

Washington Post

LATimes

WNYC Public Radio has a pretty good idea where each county is split into Patchwork Nation categories. I saw John Keefe speak at ONA and he sounded like real cool person. I did a patchwark nation graphics here at BostonGlobe.com couple of month ago.

Google

Talking Point Memo