Atomic Web Design and Pattern-Lab (Links I liked: Nov. 8)

Not that this is article that I came across this week, per se. But I was thinking about it all week.

atomic-web-design

I recently stumbled across this article of how to organize web design by Brad Frost called “atomic web design”, and while this is basically what we do already, thought it maybe a good way to communicate the approach to the whole group. It is a simple — but brilliant — concept.

Pattern-Lab’s “Why” section links to Dave Rupert’s Tiny Bootstraps, for Every Client article. The whole article is awesome but snipped here (bold highlights by me):

…From the exterior, it may appear to be a single page but the homepage is actually comprised of Lego®-like building blocks designed to be combined together. The look and feel of new components like form controls, navigation, and carousels are informed by the colors and type that define the brand.

Good components make code reusable. Tyson Matanich, developer at Microsoft, was the main driver and lead enforcer to ensure that all components were reusable at their core, running each component though stress test scenarios. He coached us in how their components might be reused and continually pushed us to “componetize” even further.

The highlight component, for example, can be re-purposed and “themed” in the news section using a simple CSS class. While they are different visually, they possess the same underlying code structure. All these components are then strung together to create complete page layouts.

Working on isolated components made the iteration process faster as well. Faster and more reusable means that the work our agency performed resulted greater value for their company.

I love smart people. (I wish I was one of them. Something to be inspired/ aspired to.)

I would like to create my work’s own pattern library using something like:
Pattern Lab, here is git repo. And a demo.

I am also thinking of recommending using Foundation into large scale project, which will be there for a long haul. It would be ideal if I can combine pattern lab into foundation css structure. Need to look into it.

***
Also, we hosted a nice HTML5 meetup this week. About HTML5’s canvas element. Links below are a lot of library mentioned in that.

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

Continue reading…


Game 6, then lost scorebook (my tweets: Oct 27 to Nov 2)

fenway-pano

Panorama of the Fenway after the win.

I got to go to Gamer 6 of 2013 World Series. I am forever in debt to my friend David Laurila. As we say in Japan, I will never able to sleep with my foot pointed at his direction (What a strange saying… translation doesn’t do its justice). The same goes to my friend Dan Brooks who gave me a chance to go to game 2 of ALCS. They were both absolutely amazing night at the ball park. I will remember those two games forever.

Anyway, It was just amazing. What a night. What a week. World Series Game 6. First Fenway World Series clinching game in 95 years. Then a parade. All my photos are viewable here.

Then, in the mob of Kenmore Square rush after the Game 6, while rushing to catch the Green Line inbound train, I dropped my scorebook. I am pretty bummed about that. It was a new one for the seaosn. I try to use one up for one season. I kept everygame that I attended this season (maybe about 4 games or so? then 2 games in the playoff.) I also like to keep score when I am watching games on TV, or best ones are when keeping score listening to the radio. I did few games thsi summer while vacaying in the Cape. I also kept score of most of playoff games. I am sure it is gone by now. But it looks like this. In the back, there is a Japanese “Yankees Suck” and under it is my two twitter hadles (one if Japanese @DaigoRedSox and one is my main one @DaigoFuji). It is precious to me. I am now thinking about it, and really bummed about it. Oh, well. Don’t cry over the spilled milk, as they say.

scorebook

Last view of my scorebook. Sigh.

******

I’ve been tweeting nonsense since May 19, 2007 (such long time ago, can you believe that?). I put weekly digests of my tweets on this blog, so that I can search for it quicker using my blog’s search function. I tweet awfully a lot about baseball (I am a Red Sox fan, if you didn’t notice), but if you are interested, please follow me at @DaigoFuji. Here are my tweets between Oct 27 and Nov 2: Continue reading…


Most Amazing Lemon Squares that I ever had. (and links that I liked: Fri, Nov 1)

I had a most amazing Lemon Squares that I ever had in my life, created by a colleague. It was, as my other co-worker put it, life changing. I asked here for a recipe and she shared it with me. Awesome.

Susan F.’s Lemon Square recipe

Ingredients A

  • 2C flour
  • 1C butter (1/2 lb), melted and liquid (I nuke it)
  • 1/2C powdered sugar

Ingredients B

  • 4 eggs
  • 2C granulated sugar
  • 1t baking powder
  • 5T lemon juice
  • Dash of salt

Steps

  1. Preheat oven to 350º
  2. Prepare 9”x13” pan by lining it with aluminum foil and then coating foal with nonstick spray (I use butter flavor)
  3. Blend Ingredients A with finger tips until mixed.
  4. Put evenly into bottom of pan and bake for 20 minutes or until edges are golden brown.
  5. Beat together ingredients B. Pour over baked crust and return to oven for 20 to 25 minutes or until top gets bubbly and golden brown.
  6. Cool and pull out entire block of lemon squares by lifting tin foil. Peel off foil and cut into squares.
  7. Sprinkle with powered sugar.
  8. Store in fridge—otherwise they get soft and goopy fast!

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

Continue reading…


Keeping your forked git repo in sync with its original

Git is awesome. I’ve been using reverie as a parent theme and my theme used here is a child theme.

Reverie is awesome. But since the theme is not installed through WordPress’s eco system, it doesn’t automatically get updated like some other themes. I noticed that the theme had update. I haev forked the theme to my repo, and wanted sync the changes.

Thank you stackoverflow. It suggested “adding a remote.” and found a great blog post about it: How to GitHub: Fork, Branch, Track, Squash and Pull Request on gun.io.

So here is what I did

$ git remote add --track master upstream git://github.com/milohuang/reverie.git

to add remote, then

$ git fetch upstream
remote: Counting objects: 16, done.
remote: Compressing objects: 100% (12/12), done.
remote: Total 13 (delta 5), reused 8 (delta 1)
Unpacking objects: 100% (13/13), done.
From git://github.com/milohuang/reverie
* [new branch] master -> upstream/master

Created a new branch upstream/master

$ git merge upstream/master
Updating 650455f..d442acb

—–

[UPDATE April 10, 2014]

I had to use this again and learned couple of new (for me) tricks. if you do

git remote -v

It will show you origin and upstream (if set).

Now, I can take this one more step and I can automatically deploy to my server when I commit to the git repo. A great blog post by How to deploy WordPress themes with Git.

I need to do this!


You gotta love Seiji Ozawa in Big Papi jersey (tweets: Oct 20-26)

I Love it.

seiji-ozawa

That’s Seiji Ozawa in Big Papi jersey conducting the brass section of BSO doing brass-off with St. Louis Symphony Orchestra.

I still can’t believe that the Red Sox is in the World Series. Almost winning… Just. One. Game. Away.

Before the season, seeing and doing podcast for the 93-loss season, I predicted that they will finish last place again, or 4th place at best. I am wrong, and happy about it.

I been tweeting nonsense since May 19, 2007 (such long time ago, can you believe that?). I put weekly digests of my tweets on this blog, so that I can search for it quicker using my blog’s search function. I tweet awfully a lot about baseball (I am a Red Sox fan, if you didn’t notice), but if you are interested, please follow me at @DaigoFuji. Here are my tweets between Oct 20 and Oct 26: Continue reading…


17 example of long-form online story/interactives with parallax effects and HTML5 video (Snow Fall-like)

There are just so many conferences that I wish I was going, but it is impossible to go to all of them. SABR National, SABR Analytics, AAJA, EyeO (I was lucky to go this year), SXSW (I’m going next year!) Sloan Sports Analytics Conference, Open Vis, NICAR, IEEE VIS Week, HTMLDevConf, Artifact, W3conf, Ampersand, FrontEndConf to name just a few…. and ONA is one of them.

I was unable to go to Atlanta this past week, but I follow tons of people who were there on twitter and especially one of the session really piqued my interest. Session was called “Snow Fall for all” by Adam Schweigert (of INN) and Jessica Plautz, and there is a hackpad that was contributed by attendees. There are bunch of very interesting blog posts like Lisa Williams’s write up (is excellent), Tweets wrap-up and such, but I thought it would be helpful to list all the “snowfall”-like interactives here for future reference.

There is a pattern, such as bigger photo, parallax effect, larger font size with more white space, subtle (and sometimes not so subtle) css/js animation and html5 videos (as well as technique called cinemagraph) and stuff, and each tricks are not that difficult. But the successful one is just really good old-fashioned “story telling” combines many tricks, appropriately.

Long form story telling examples

UPDATE: More links and more links

…and more links. (Send me a link of new and old or comment below and I will keep adding them to this list.)

Tool shed

As I see more cool tools, I will add it here:

Libraries

Services

I have not used them at all, so not an endorsement.

[UPDATE 1/24/2014] Came across this: Huge list of crowd-sourced list of “snowfall” like stories.


Animated Gifs and really neat online data to svg conversion tool. (Articles that I liked: Fri., Oct. 25)

A coleague told me about a really neat tool that convert data into svg using d3, called RAW by Density Design. It is awesome. You copy and paste excel or tab or comma deliminated data into a text field on the website and you get a beautiful d3 graphics. Format supported are Treemap, Bubble Chart, Aluvial Diagram, Circle Packing, Circular Dendrogram, Dendrogram, and Binned Scatterplot. It can export SVG, PNG (BETA at the moment) and JSON data. Quite amazing.

Also I came across couple of animated gif related site like Zeega where you can combine audio and animated gifs like this, and GIPHY search engine where you can search and find a gif that you once saw and laughed so hard, but never was able to find it again… until now:

One more notable find this week: Harvard’s School of Engineering and Applied Science had a vert intersting post about “Chart Junk” called What makes a data visualization memorable?. In the similar way, my colleague Scott Berinato (who was the one who told me about RAW above) articulate for me what I’ve always had in back of mind in his article “Visualizing Trouble“. Both very good reads. Continue reading…


Red Sox in the World Series (my tweets: Oct 13- 19)

koji-uehara-alcs-barry-chin-boston-globe

Photo: Barry Chin/The Boston Globe

CRAZY.

My prediction before the season was that they will finish last in the division. I expected better than 93 losses, but I thought this will be a “bridge” year.

That’s how much I know about baseball. I guess I could say this is why the baseball is so funny/interesting. Anyway, the game starts tonight. And my tweet last week was basically all #RedSox all the time. Koji Uehara ALCS MVP.

I been tweeting nonsense since May 19, 2007 (such long time ago, can you believe that?). I put weekly digests of my tweets on this blog, so that I can search for it quicker using my blog’s search function. I tweet awfully a lot about baseball (I am a Red Sox fan, if you didn’t notice), but if you are interested, please follow me at @DaigoFuji. Here are my tweets between Oct 13 and Oct 19: Continue reading…


Memo: How to manage symlinks on mac

I’m developing WordPress themes using multiple repos (git and svn) and found that using symlinks to be the simplest way to manage it.

Here is my memo how I did what and how to check/re-do symlinks.

To create symlinks from from wp-config/themes

$ ln -s ../../../path/to/my/repo/mytheme mytheme

To check what is linked

$ ls -l
total 1
lrwxr-xr-x 1 daigo localhost Users 44 Oct 15 16:07 mytheme -> ../../../path/to/my/repo/mytheme

To remove the link
Didn’t know this, but looks like you can use both rm and unlink


Best game that I have seen in person in Fenway

This happened last Sunday. Game 2 of ALCS. I was one of 38,029 that was there at the park, and have a photo to prove it:

alcs-big-papi-grand-slam

Photo by Al Bello/Getty Images

where I am up there on the left hand side of that photo. Sitting Bleacher Section 41, Row 05, Seat 10. Last playoff I’ve been to was ten years ago, ALDS Game 3 in 2003, when Eric Byrnes was tagged out by Jason Varitek after failing to touch home plate. Also was there when the Red Sox hitters hit 4 home runs back-to-back-to-back-to-back against Yankees. That was 2007, Manny Ramirez, J.D. Drew, Mike Lowell and Jason Varitek homered in consecutive at-bats against Yankee left-hander Chase Wright, a first in Red Sox history. That was wild, high fiving with strangers. But this TOPS that. Red Sox were down by 4, 2 outs in the 8th. Bases are loaded and David Ortiz. It was the best game. And I have a photo to prove it. Awesome. I heard that this photo is also in Sports Illustrated.

Here is my storify of my tweets.