Updating old php scripts and learning PDO (PHP Data Object).

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.

Found this excellent website: phpbestpractices.org/

Here ares some notes that I kept while updating some of scripts.

First thing is the way I have been connecting to the database.

I was doing this:

$link = mysql_connect("example.com", "user", "password");
mysql_select_db("database");
$result = mysql_query("SELECT * FROM player WHERE SeasonID = 2014");
$row = mysql_fetch_assoc($result);
echo $row['name'];

New (Well, new to me.) way to do this is using PHP Data Object

$pdo = new PDO('mysql:host=example.com;dbname=database', 'user', 'password');
$result = $pdo->query("SELECT * FROM player WHERE SeasonID = 2014");
$row = $result->fetch(PDO::FETCH_ASSOC);
echo $row['name'];

Also, way I was doing mysql_num_rows($result) will now have to changed to
$result->fetchColumn();

As with mysql_data_seek($result),

Simple enough? I was cruising along, then I encounter the error. Or more like, NOTHING. By default, error is a blank screen, as it turns out.

My php.ini was in /Applications/MAMP/bin/php/php5.5.10/conf/php.ini (Note that it is not MAMP/conf as you expect, it’s in /bin. you can find this infor using . and display_errors was in line 277.

Actually, you need to put those two lines in the php file:
error_reporting(E_ALL);
ini_set('display_errors', '1');

Got some things fixed, but broke more things. Ugh. Still working on it. Ah, time. I wish I had more.
Continue reading…


Conflict resolution on git

cant-merge

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...
M	source/js/file.js
M	source/js/folder/file.js
Falling back to patching base and 3-way merge...
Auto-merging source/js/folder/file.js
CONFLICT (content): Merge conflict in source/js/folder/file.js
Auto-merging source/js/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)
To https://github.com/daigofuji/my-repo.git
 + 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

Continue reading…


My talk from css meetup: Vector-based Responsive Web Design

css-talk

I had a great time talking at April 22, 2014 Cascade Bos meetup. My talk was titled: Embedded web fonts, Icon fonts and SVG – Vector-based Responsive Web Design using CSS.

Coincidentally, the same day, Chris Coyer of CSS-Tricks have published a blog post titled: Inline SVG vs Icon Fonts [CAGEMATCH].

His conclusion is very similar to my conclusion but better!

If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it.

Definitely worth a read if you are interested in this topic.

Continue reading…


Foundation connecting my (front-end) world

foundation5
I don’t even remember how I first found Zurb Foundation, but it have almost become my obsession. It’s everywhere.

One of the smartest guy I know and a good firend in Tokyo, Keiichi, contacted me and told me that he is going to bootstrap this StartUp. I have not heard from him in a while, And I was really glad and I told him that I will help create his website. Immediately, I started thinking I will create something cool with Foundation and Jekyll. I need to update my repo

Lucky for me, Kianosh Pourian and Dale Sande’s excellent Sass in Depth book came out about the time when I was getting into Foudation and its beautifully crafted SASS, it has been a great help and timing. I took Advanced Foundation class last year, I’ve converted my blog to Reverie-based one and I have successfully integrated Pattern Lab (another of my obsession, you could say — and I know, I know, Brad Frost says “do the sh*t yourself…”) with Foundation for my work, on vagrant box, no less!

So perhaps it was just fitting that I made my first Open Source pull request on github today. On Foundation. Yay, Open Source!

Anyway, perhaps foundation js and require js integraton next? Who knows!

I am a huge fan of Zurb Foundation and I hope they will stop in Boston for their World Tour and perhaps organize a Boston Foundation Users Meetup? Not sure if there are enough interest? Maybe we can host Cascade Bos meetup?


Vagrant+Puppet is AMAZING!

vagrant-up

At my work on my team, we have five main developers. Two of us are on Mac, while the other three are on Windows. I, as a front end guy in the group, am advocating for SASS/Compass be used prominently on the redesign, like in depth use (great book btw). There is one little problem — workflow. To be able to developed locally, SCSS require pre-compiling, and it uses ruby. Mac comes with ruby, but Windows does not. Grunt could do it, but then you need node.js/npm. If I want everyone on my team to have it, I need to install all of those (ruby/sass/compass/node/npm/grunt)… that would be just way too much customization/potential places to break.

Enter Vagrant and puppet. It is just amazingly awesome. You can create a linux machine on VirtualBox – which is an open source VM. I am running latest puppet-enabled ubuntu box available from puppetlab, which is Ubuntu 13.10 (saucy Salamander).

Dealing with Vagrant really tickled my inner linux nerd-ness. Once upon a time, I was involved with running a group called BJLUG, Boston Japanese Linux Users Group — this was way back when, when you still had to pay for Apple’s CJK Language Pack to have Japanese installed on your machine, and I figured out that if you use linux, it was FREE to write email back to Japan etc. There were certainly a lot of LUGs back then. Not sure if they are around any more.

I learned how to install puppets, thanks to my colleague Kevin D. who patiently walked me through it, and was able to create box with apache and the likes.

Now we all need to download, and then just run vagrant up and vagrant provision. And your local scss changes, on your filesystem, using your favorite text editor on your OS, will be watched and css is compiled without any additional work. This is beautiful.

The Vagrant CLI documentation was useful for me, who have not used Vagrant before.

Some useful command:

  • vagrant up – Start the VM
  • vagrant provision – Provisions the VM
  • vagrant ssh – Logs into the VM with ssh
  • vagrant reload --provision – Restarts and provisions the VM
  • vagrant suspend and vagrat resume – If you don’t want fully shut the VM down
  • vagrant halt – Stops the VM
  • vagrant destroy – Deletes the VM

Actually, first time I saw use of vagrant was WordPress VIP team’s quick start. It includes all their server hosting environment. They do good work there over at VIP. And also there are ways to have local WordPress environment in vagrant such as Varying Vagrant Vagrants (VVV) environment. I am still using MAMP for my local wordpress theme/plugin development (when I have “free time”) but perhaps I should reconsider it. For new version of Daigo.org theme?
Continue reading…


Font awesome, and php split() to explode()

Couple of update notes

Noticed couple of things that I am doing over and over, and everytime I am doing it, i had to look it up (Thank you, Google for making us dumber and dumber…) thought to put it in a place for my future self…

Going from font-awesome 3.2.1 to the current 4.0.3

It used to be
<i class="icon-btc"></i>
but now you have to make it
<i class="fa fa-btc"></i>

PHP Split

split() is deprecated as of PHP 5.3.0. So if you want to convert something like 1974-05-25 into an array, an was using it, you can use explode() insted, like so:

list($Year,$Month,$Day) = explode('-',$info[dob]);
$stampeddob = mktime(12,0,0,$Month,$Day,$Year);
echo date("M. j, Y",$stampeddob); 


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!


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:


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!


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.