Emmet is AWESOME

emmet

While I thought it was great idea, I was not super crazy about HAML. Thanks to css and jquery, I always think DOM in css selectors. However, I just couldn’t stick with HAML. I liked to be able to code in html with < and >.

Meet Emmet.

Yes! Just like haml, you can write html with css selector, but you are coding in html. Let me show you what I mean. For example:

.row>.medium-3.small-6.columns.mycalss$*4>h3{Headline}+img[src="http://placehold.it/400x200"]+p>Lorem

Will produce

<div class="row">
	<div class="medium-3 small-6 columns mycalss1">
		<h3>Headline</h3>
		<img src="http://placehold.it/400x200" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, aspernatur ex magni magnam tempora hic accusantium expedita quia quaerat dolorum natus minima doloribus nostrum laboriosam autem ab voluptatum laborum maiores!</p>
	</div>
	<div class="medium-3 small-6 columns mycalss2">
		<h3>Headline</h3>
		<img src="http://placehold.it/400x200" alt="">
		<p>Ipsam, dolores, facere voluptatem deleniti at qui sunt! Facere magnam aspernatur eos adipisci doloremque vel explicabo magni! Tempore, quisquam, architecto, nulla facilis ducimus ex sequi porro nam mollitia placeat odio?</p>
	</div>
	<div class="medium-3 small-6 columns mycalss3">
		<h3>Headline</h3>
		<img src="http://placehold.it/400x200" alt="">
		<p>Quaerat, deserunt, odit eveniet impedit error quo necessitatibus tenetur ab sunt suscipit ipsam eligendi ea quibusdam! Error, modi, repellendus quos est doloribus temporibus ea sed voluptas reiciendis hic sunt assumenda.</p>
	</div>
	<div class="medium-3 small-6 columns mycalss4">
		<h3>Headline</h3>
		<img src="http://placehold.it/400x200" alt="">
		<p>Recusandae eligendi nisi ipsam nam. Assumenda, omnis reprehenderit distinctio illo at obcaecati nemo vitae magni iste enim molestias consequuntur debitis soluta eius sunt aspernatur ipsam sequi id sed maxime quos.</p>
	</div>
</div>

See the Pen plwIt by Daigo Fujiwara (@daigofuji) on CodePen

Amazing. $ for number, * to multiply, and lorem to put lorem ipsum in there. Awesome.

To install emmet on my sublime text 2, I have already had Package Manager installed on it, so all I had to do was run Package Control, which you could do by Menu > Tools > Command Pallete. Or hit Cmd+Shift+p. Type in install, select “Install Package.” Find Emmet, select. Done.

But what really sold me on Emmet was the “action” for comments. You can comment things with Command-/. Which works with both html and css (didn’t try with js, yet).

In css, m is margin, p is padding, bd for border, bg for background, etc. Great cheat sheet here.

Open a new file, save it as index.html, type ! and hit tab. Boom. HTML5 document is created. Crazy. I love it. Thanks Emmet!


Simplicity, patience, compassion.

“Simplicity, patience, compassion.
These three are your greatest treasures.
Simple in actions and thoughts,
you return to the source of being.
Patient with both friends and enemies,
you accord with the way things are.
Compassionate toward yourself,
you reconcile all beings in the world.”

— Lao Tzu, “Tao Te Ching


Precious life

Every day, think as you wake up, today I am fortunate to be alive, I have a precious human life, I am not going to waste it. I am going to use all my energies to develop myself, to expand my heart out to others; to achieve enlightenment for the benefit of all beings. I am going to have kind thoughts towards others, I am not going to get angry or think badly about others. I am going to benefit others as much as I can.

— Dalai Lama XIV


Front-end Style Guides (and Articles that I liked: Fri., Nov. 22)

I just bought this book this week, and it is excellent. It may have been one of the best spent $3.
“A Pocket Guide to Front-end Style Guides.” by Anna Debenham

Quote from the book:

“Where front-end style guides excel is in encouraging collaboration between designers and developers. I love sitting down with designers and going through the guide, making tweaks straight in the CSS with them. It saves a lot of time (and sanity) that I used to spend going back and forth between mock-ups and live sites, and it also prompts some great conversations about responsive design.”

She gives a lot of examples of style guides

More useful links on Front end Style Guides:

At my work, we are embracing the Atomic Web Design principal and probably create a pattern-lab for our selves, but something like Pattern Primer would also work. Much less overhead than the Pattern Lab (though Pattern Lab is AWESOME!)

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


Installing node and npm on my Mavericks MacBook Pro

npm-yo-grunt-bower

Package management is great. Yes, it is… WHEN IT WORKS. At least that was my attitude before.

As I anticipate release of Zurb Foundation 5 on November 21st, I couldn’t wait for it to go live. So, I decided to peak into their github branches. They are using Grunt in their process, and Foundation will be included in bower. And documentation is built with Grunt using assemble.io. OK, those things are things that I have not have time to play with. I hear all the good things that node.js and its npm installed application can do… a lot of it like magic, they say. I just have never done it, partly because I was using Red Hat’s rpm when it went from Red Hat to Fedora and it stop working, and more recently, something went wrong with ruby version control RVM thing.

I am still a designer-turned-himself-into-developer, and even with all of my geekiness, still don’t quite understand, or still have a fear, about “computer science”.

Anyway. I decided that the time is now. Just do it.

So, here are my notes while I struggled through it all. I will likely have to do it again when I get a new computer or anything like that. I figured it would be good to leave trace.

(Note: If you are here for “npm: command not found” problem, skip the middle part when I struggle with it and go to the end of the post for solution. It’s a permission issue and you need to run this: sudo chown -R $USER /usr/local)
Continue reading…


A mess, that is Posting System. (and articles that I liked: Fri., Nov. 15)

Posting system. What. A. Mess.

They were restructuring or revisioning the system, so I heard. Good I thought. The system is terrible. But as it turns out restructuring was all for the benefits of owners of MLB teams. It does not concern or address problems that players like Hiroyuki Nakajima or Hisashi Iwakuma had. Their rights were won, but the team with winning bids — Yankees in 2011 with Nakajima, and Athletics in 2010 with Iwakuma — didn’t negotiate players compensation fairly. After all, Japanese player have no leverage for negotiation once the bidding is over, which I think is the biggest flaw of the system. Japanese Players Association, just reluctantly accepted the deal because they really had no choice. Now, the MLB says the deal may not happen because “When we made that proposal, we told them it was important that they give us a timely response. Unfortunately, they have not been able to do that.”

What a mess. Makes me sick. Japanese baseball is really just becoming the farm system for the MLB. Very sad. Or, from what I can see, at least the people who run it is treating Japanese leagues like one.

Also watched a great video about MLB schedule makers who were recently replaced by computers.

schedule

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


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!