May all living beings be happy

Mettā Bhāvanā

May I be happy. May I be well. May I be free from suffering and safe. May I be peaceful and at ease.

May you be happy. May you be well. May you be free from suffering and safe. May you be peaceful and at ease.

May my loved ones be happy. May my loved ones be well. May my loved ones be free from suffering and safe. May my loved ones be peaceful and at ease.

May all living beings be happy. May all living beings be well. May all living beings be free from suffering and safe. May all living beings be peaceful and at ease.

May people with whom I have difficulty be happy. May people with whom I have difficulty be well. May people with whom I have difficulty be free from suffering and safe. May people with whom I have difficulty be peaceful and at ease.


Using Font Events to speed up your perceived performance.

I’ve been lucky to work with Mat “Wilto” Marquis from Bocoup on web performance issues around Harvard Business Review, and it has been a blast learning new stuff.

One of the approach that we are taking is that we will be using “Font Events” approach to avoid “FOIT” (Flash of Invisible Text). This is pretty cool.

More info on this in an excellent write up by Scott Jehl: “Font Loading Revisited with Font Events”

TLDR here.

Our current situation: Using good old standard @font-face

The browser registers the font, but the font is not immediately availabe to the browser. FOIT. Each font files could be ~100KB per weight/variation of the font, we have 12 files, about to be 14!

Perceived performance = poor.

After our re-factor is done, each css is actually just referencing fall back font stack, so no FOIT. Contents are rendered and immediately readable in a fall back font. For example, our National fonts will appear as Helvetica or Arial.

We’ll use fontfaceobserver.js to check to see if the fonts have been loaded, then add .fonts-loaded class to html tag as successful callback.

CSS rules will look like this (* this is grossly simplified css, but you get the point)

h1 {
font-family: sans-serif;
}
.fonts-loaded h1 {
font-family: National, sans-serif;
}

Fortunately, using sass’s nesting, this is pretty easy:

h1 {
font-family: sans-serif;
.fonts-loaded & {
font-family: $national-ff;
}
}

On the subsequent request though, I am hoping that server can just add .fonts-loaded class to the html tag. For now, we can bake this right into js/cookie, but eventually we would like to work with backend.

Another thing that Wilto uncovered was Foundation out of the box prefers optimizeLegibility as default text-rendering. Just switching this paragraph setting to optimizeSpeed and headers (i.e h1, h2, h3 etc) to auto, we made almost a full second perceived performance improvement on the slower network. Did not know that made that kind of impact.


It’s not too late to sign up for 2015 Baseball Hack Day

cp-banner2

It is almost here. A fun, friendly one-day hacking/coding/designing competition for baseball fans. If you have not signed up yet, it is not too late, follow this link

MLB.com is graciously back as our sponsor, continuing our four-year partnership. We are happy to report that winning teams of each local Baseball Hack Day will win an annual MLB.TV Premium subscription! Also the winners of each city will be judged for Baseball Hack Day grand prize, RBI Baseball 15, and major bragging rights.

Details on each city pages:
Boston
Philly
Montreal

Not interested in competing? No problem. To encourage participation of developers and designers of all levels, there will be three tracks? (*In Boston)?:

  1. “Hacking track” is our usual, Baseball Hack Day track. You come with a project and recruit people, or come and find a project to join and work on it for the day.
  2. “Project track,” we’ll have a project/challenge ready to be worked on. There will be a “project manager” who will lead the team(s) to solve the challenge.
  3. “Learning track” is designed for first-time hackathon attendees (no coding experience necessary). This is where you can learn how to hack from our mentor volunteers. This will be less competitive and more like a workshop. You will be eligible for the “Rookie of the Year” award!

We’d like to give shoutout to our sponsors, for without their generous support, this event would not be possible:
Act Blue Tech Services, Boston Globe Media, Chez Boris, CitiCoHo, DraftKings, evenko.ca, Forge Conference, General Assembly, Plank Design, Seat Geek, Shado Sports, Shopify, Sports Data LLC, thoughtbot, TicketLeap, TiqIQ, View From My Seat, Vitamin T, Yelp


Desiderata

Go placidly amid the noise and haste, and remember what peace there may be in silence.
As far as possible without surrender be on good terms with all persons.
Speak your truth quietly and clearly; and listen to others, even the dull and ignorant; they too have their story.
Avoid loud and aggressive persons, they are vexations to the spirit.
If you compare yourself with others, you may become vain and bitter;
for always there will be greater and lesser persons than yourself.

Enjoy your achievements as well as your plans.
Keep interested in your career, however humble; it is a real possession in the changing fortunes of time.
Exercise caution in your business affairs; for the world is full of trickery.
But let this not blind you to what virtue there is; many persons strive for high ideals;
and everywhere life is full of heroism.

Be yourself.
Especially, do not feign affection.
Neither be critical about love; for in the face of all aridity and disenchantment it is as perennial as the grass.

Take kindly the counsel of the years, gracefully surrendering the things of youth.
Nurture strength of spirit to shield you in sudden misfortune. But do not distress yourself with imaginings.
Many fears are born of fatigue and loneliness. Beyond a wholesome discipline, be gentle with yourself.

You are a child of the universe, no less than the trees and the stars;
you have a right to be here.
And whether or not it is clear to you, no doubt the universe is unfolding as it should.

Therefore be at peace with God, whatever you conceive Him to be,
and whatever your labors and aspirations, in the noisy confusion of life keep peace with your soul.
With all its sham, drudgery and broken dreams, it is still a beautiful world. Be careful. Strive to be happy.

Max Ehrmann 1927


Introducing “daisy” a sass/pattern-lab workflow solution using Vagrant

daisy-vagrant

I have been a big fan of Brad Frost and Dave Olsen‘s project, Pattern Lab.

Anyone that knows me heard me say “Embrace the fluidity of the web!”. Atomic Web Design is a concept that I always circle back to whenever I’m talking about web. I am also a big fan of sass, and also of Zurb Foundation.

We were able to use a lot of those ideas on a hbr.org’s new responsive site, which launched November 10. My colleagues, Kevin Newman, Fred Lalande, Matt Wagner, Kevin Davis and I just did a presentation on SASS and Pattern-Lab team workflow using Vagrant/Puppet at our Boston CSS meetup, Cascade Bos. Topic was really wide, we talked about anything from Object-Oriented CSS to Web-based Style Guide to deployment method to… everything. You can go through our slide deck here.

But for the “workflow” part, here is the gist of it.

HBR’s pattern-lab work flow

  • Instead of installing all our dependencies — such as php and apache for pattern lab, ruby and compass for css preprocessor and node for grunt and bower — into each of our individual computers, we have a Vagrant/VirtualBox virtual machine that are committed in our github repo.
  • What is really nice about Vagrant is its pass-through file system. Meaning you can edit the file on your OS (be it Mac, Windows, or Linux) using your favorite text editor locally (without going through virtual window), and it can be accessed by both host and virtual machine.
  • So we edit our www/source/scss folder, and www/source/_pattern folder right on our machines. Then, with power of grunt, you can view your changes appear on your browser, served right from your VM.
  • After we like what we see on our local machine, we make a pull request (we commit the whole thing, Vagrant and everything) in github. We have a internal agreement that you don’t merge your own request… so it gets reviewed by peers and then, eventually, gets merged to the master branch.
  • Then our hardest working member of the team, Mr. Jenkins, who watches the changes on the master branch, sees that it changed. And he pulls the latest, compile sass, compile pattern lab, and then he puts the public folder part of the pattern lab onto our internally available web server (is “intranet” still a word?). This is our living style guide. Our backend developers uses it to grab markup code out of it. Designers and editors, as well as marketing people, can access it any time they want.
  • Only part that goes directly out of our pattern lab to production is compiled CSS (it gets minified on its way to our production). But CSS HAS TO BE EDITED IN pattern lab, which forces everyone to first create a new pattern inside our pattern lab. This also ensures that our style guide is most up to date. Win-win!

That’s basically our workflow. I understand that pattern lab is not the silver bullet that works for everyone, but I am pretty proud of how it turned out for us. Another nice thing about committing your entire dev environment in the repo like this, is, say, if you spilled a full glass of red wine on your MacBook Pro by accident (Oops!). All you have to do next day is to get a loaner from IT and download your text editor and you are right back at it. If I had to install node on my machine again ON A DEADLINE, I think I am going to cry. But anyhow…

One of the thing that I wanted to do was release public version of our pattern lab github repo. One without styles in it, and one that is a stand alone virtual machine which runs Pattern Lab.

And, lo and behold, (Thanks to Matt Wagner and Kevin Davis) we were able to release it. It is available for you to download.

Introducing daisy.

Check it out. Star it, fork it. Comment it. File issues on it. Even make pull request on it!

I would absolutely love for you to try it out and let us know what you think.

Continue reading…


Hackathon Memo: How to put Foundation SASS site working with Ruby on Rails backend

Ruby on Rails is pretty cool. Pretty magical. If you need a site up for the duration of weekend hackathon, it is an amazing tool.

I had a pleasure of joining a team over the weekend on AthenaHealth’s More Disruption Please and MIT Hacking Medicine’s well-organized and well-funded hackathon. (Unfortunately my contributed github code is in a private repo… a bummer. I should have told them that open repo would be preferred… that’s the thing about some people’s approach of hackathon. But that is beside the point) Though I was only there for only the part of Saturday, I got a bit done and learned (and re-learned) a lot of things that I wanted to do, working with Ruby on Rails developers. I love working with smart people.
Here is my runnig notes. Probably doesn’t make sense, but I am hoping to revisit and edit later to make some sense, eventually make it into how to put Foundation SASS site working with Ruby on Rails backend
Continue reading…


Using Tumblr API to put the latest update on a static website

Helping an old friend with good cause making his website update much simpler and more efficient. WordPress site is even too complicated, but twitter was too simple (though probably could have done the job). What we decided to do was use Tumblr.

Using Tumblr API, I made this very simple jquery ajax jsonp call to get the posts, then dump it right on the site. Crude? Yes. But it does the job. First you need to get a key.

Here is the code:

HTML

<p>Latest from <a href="http://YOURBLOG.tumblr.com/">our Tumblr blog</a>...</p>
<h2 id="blog-headline"></h2>
<div id="blog-body"></div>
<p><a href="http://bostoncitylights.tumblr.com/"><i class="fa fa-tumblr-square"></i> READ MORE POSTS</a></p>
<ul id="blog-more">
</ul>

JavaScript

	// Get tumblr post
	function getTumblr() {

		$.ajax({
			type: 'GET',
			url: "http://api.tumblr.com/v2/blog/YOURBLOG.tumblr.com/posts/text?api_key=KEY",
			async: false,
			jsonpCallback: 'jsonCallback',
			contentType: "application/json",
			dataType: 'jsonp',
			success: function(json) {
				var latest = json.response.posts[0];
				$("#blog-headline").text(latest.title);
				$("#blog-body").html(latest.body);
				json.response.posts.forEach(function(el, i) {
					if(i > 4) return false;
					$("#blog-more").append("<li><a href='"+ el.post_url +"'>"+ el.title +"</li>");
				});
			},
			error: function(e) {
				console.log(e.message);
			}
		});
	}


Flexbox justify-content and Internet Explorer

UPDATE: March 20, 2015. The answer is using vh to set the height and min-height.

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

Restrictions/assumptions:

  • 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-chrome

Mac Firefox (Version 31.0)
mac-firefox

Mac Safari (Version 7.0.6)
mac-safari

Windows Chrome (Version 37.0.206.102)
pc-chrome

Windows Firefox (Version 31.0)
pc-firefox

and finally,

Windows IE11 (Version 11.0.9600.17239)
pc-ie-11

Ugh.

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