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.
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.
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.
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.
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…
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:
<p>Latest from <a href="http://YOURBLOG.tumblr.com/">our Tumblr blog</a>...</p>
<p><a href="http://bostoncitylights.tumblr.com/"><i class="fa fa-tumblr-square"></i> READ MORE POSTS</a></p>
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 188.8.131.52)
Windows Firefox (Version 31.0)
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.
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”.
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 :)
I started making websites in 1998. Gosh, in the internet years, that’s a forever ago. Remember Perl CGI and its cgi-bin folders? I have also written a lot of website using php along the way, and LAMP stack was sort of my thing for a while. But since I started to focus every efforts on front-end stuff, it have been a while since I looked at simple backends. Some of the sites that I created long ago desparaetly needs some updates. I have, in the past, thought or looked into converting sites to ruby on rails at one point, then looked into python, then thought hard about switching to some kind of static site generator engines (like jekyll or assemble.io), and finally more recently, thought about converting them to MEAN stack. But, really, who has time for that? Lately, I am thinking about just upping my php level and “patcing” it right in php5. Or at least keep the database structure and convert the backends to be more like API or services, still using php.
This weekend, I have been sort of playing with one of my old project: Softball Stats, written by David Carlo. It is an awesome little project.
“SoftballStats is a collection of PHP4 scripts and a MySQL database that track the stats, games, players, and every play made in multiple softball/baseball seasons. SoftballStats also compiles statistics for each player.”
I could use this on my work co-ed softball team, or also use it for my son’s summer league. I started updating it on my github.
Git is just amazing. Learning command line git is one of the best thing that has happen to me. I’ve been lucky to work with some talented guys from bocoup, and I’ve gotten to know quite a bit about it lately and just wanted to document things that I do when I encounter that dreaded (well, not THAT bad) “We can’t automatically merge this pull request.” message.
Also if you have not seen this Cheat Sheet do yourself a favor and take a look.
So, pull request can’t be merged. It’s because what you worked on (likely your branch) have some conflicts with what you are trying to merge, likely origin/master. this stack overflow answer was useful in understanding what I am doing.
My instinct was to git pull. But that is a bad idea (Quick! git reset origin/your-working-branch --hard to get what you have pushed to github!). When you encounter “can’t merge” message, git’s help suggest this:
Step 1: From your project repository, bring in the changes and test.
git fetch origin
git checkout -b your-working-branch origin/your-working-branch
git merge master
fetch then merge is much better than pull. Pull does too much under the hood (as my co-worker Tim says “too much magic”). But still, chance is that you may end up with WAAAAY too many conflicts and therefore very hard to resolve them. Perhaps there is even better idea:
git fetch --all (You may not have to do –all, but I am paranoid and this is my feels safe blanket, if you know what I mean. It’ll ensure you have the latest remotes.)
then git rebase origin/master
Ah, rebase. I had sort of hard time understanding concept of rebase, but perhaps git’s message explained it to me the best. It says “First, rewinding head to replay your work on top of it…” All your commits are “replayed” after changes that are already in master. People used words like “flattening the history” when explaining rebase, which was confusing to me. but “replay your work on top” explanation worked best for me.
When you rebase, or “replay your work on top,” you resolve conflict one by one, as it encounters conflict.
You may get a message like this:
Applying: My commit 1.
Using index info to reconstruct a base tree...
Falling back to patching base and 3-way merge...
CONFLICT (content): Merge conflict in source/js/folder/file.js
CONFLICT (content): Merge conflict in source/js/file.js
Failed to merge in the changes.
Patch failed at 0002 My commit 1.
When you have resolved this problem, run "git rebase --continue".
If you prefer to skip this patch, run "git rebase --skip" instead.
To check out the original branch and stop rebasing, run "git rebase --abort".
Nice to have that –abort option. Unlike merge or pull, you can just forget about the whole thing. Continue till you are done.
But because rebase changes the history, you may get message like this.
Your branch and 'origin/your-working-branch' have diverged,
and have 95 and 2 different commits each, respectively.
(use "git pull" to merge the remote branch into yours)
If you push force that message will go away git push origin your-working-branch --force
$ git push origin your-working-branch -f
Counting objects: 51, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 1.56 KiB | 0 bytes/s, done.
Total 13 (delta 8), reused 0 (delta 0)
+ 368da98...4266772 your-working-branch -> your-working-branch (forced update)
When you push force you’ll see the previous sha and the new one, so if you mess up and want to revert, simply reset hard on that previous sha and push force again
they look like previous_sha…new_sha
so in this case git reset 368da98 --hard
In case of “Oh Crap, I made a spelling mistake and I just pushed that.”
You could git reset HEAD~1 -- soft to undo last commit and re do it, OR,
change the file, then git commit --amend
Either way, since you already “Pushed” you need to push –force to make it work.
If your working directory is dirty (meaning you have conflicts) and you don’t have any work you need to save:
# Cleans the working directory.
git reset HEAD –hard
# Reset the branch to the remote (in this case your-working-branch.
git reset origin/your-working-branch –hard
Good people at Bocoup puts out this kick-butt conference in Boston every year. I am lucky to have participated in both of those years.
I’ve been posting links that I liked at Posterous (RIP) and then my tumblr blog. Here are the week worth of Articles that I liked: Friday, May 9, 2014: