Random front end tips and tricks

I am learning tons this week. Very exciting. Working with smart people of Bocoup, learning/picking up tricks and tips on how to do many little “a-ha, that’s how you do it” things.

Here is my notes:

  • With Editor Config, you can create a project specific configfiles for your text editor of your choice. I am using sublime, and there is a package for that. Now we have a file on the project home that specify that we use tab for indentation for our project — that’s our style that we agreed on, and we are keeping it consistent — but I can start using two spaces for my other projects with this.
  • Bower is powerful. It’s managed by Twitter. Their stock is now at $40. Time to buy?
  • This gist by Matt Surabian is awesome. If you put it in your .bash_profile, your terminal shows your branch and with a * star if there is a change that needs commits. I use terminal with white backgroudn so I change like 38 to

    echo " on "$PURPLE$branch$dirty

    If you don’t want new line, get rid of \n from line 41.

  • I am learning about require js and Asynchronous Module Definition (AMD) API (Boy, do I have a lot to learn) but here are some example of diffrent types of AMD flavors by Tim Branyen and also, example of how to use it on multi page. I think I will start with Anonymous CJS style and see how it goes from here.

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


How to sync parts of a branch with other branch in GitHub

keep-calm-and-send-a-pull-request

Don’t panic. Above image borrowed from here.

This is awesome.

For my bbclub-font project, I am using master branch as a download only place, and gh-pages as a project homepage as well as the developmental main branch.

But within gh-pages, it contains all the core files, like font folder as well as the css.

I am developing on gh-pages branch mainly, and it is fine. But I need to make master branch up to date, but only some files (namely. one file in css, and font folder). I don’t need anything elese.

So what do I do?

Turns out, this guy has the same problemn, and his method totally saved my butt/time.

Here is what I did:


$ git status
# On branch gh-pages
nothing to commit (working directory clean)
$ git checkout master
Switched to branch 'master'
$ ls
README.md _site css font glyphs js
$ git status
# On branch master
nothing to commit (working directory clean)
$ git checkout gh-pages css/bbclub-font.css
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD ..." to unstage)
#
# modified: css/bbclub-font.css
#
$ git commit -m 'synching css file to gh-pages branch'
[master 30d2c17] synching css file to gh-pages branch
1 file changed, 43 insertions(+), 34 deletions(-)
mode change 100755 => 100644 css/bbclub-font.css

Awesome.

This is exactly what I wanted. Thank you, git! Thank you, jasonrudolph.com!


Interesting Web Browser trend

I use caniuse.com quite a bit. It is an awesome resource. They use the data from StatCounter Global Stats. This is also a very useful site and has very interesting browser stats.

So, here is up and down trends for top 5 browsers (Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari and Opera) of last 12 month, July 2012 to July 2013. What it looks like globally:

Source: StatCounter Global Stats – Browser Market Share

Look at Asia… (Notice how unpopular Safari is. Just around 4%)

Source: StatCounter Global Stats – Browser Market Share

And Europe… (Boy, they hate IE.)

Source: StatCounter Global Stats – Browser Market Share

But most interesting of all, I found, is specifically United States of America (North America is here):

Source: StatCounter Global Stats – Browser Market Share

Did something happen with Microsoft in April? Did Microsoft drop Windows 2000 support or something? I don’t know. And Windows XP support will end April 8, 2014. I didn’t notice till now, but looks like Google dropped support for IE8 November last year.

***

BTW those charts are made responsive by wrapping the div with css, the trick is expiained in my blog from couple of years ago, but using ratio of 3:2, that is 3 width vs 2 height, which means only difference is padding-bottom is 66.66666%. And I just pasted that into my WordPress editor window (so not semantic… Don’t try to validate this page!). I was actually very pleasantly surprised that it works (OK, it breaks my mobile view. But still.). Kudo’s to FusionCharts.


My notes from EyeO 2013

I was fortunate enough to attend this amazing conference called EyeO Festival in Minneapolis, MN. I heard that it sold out in 45 minutes after it went on sale. Insane.

It was, frankly, quite overwhelming amount of information in three days. I am still processing it all. I have 5 pages worth of pencil notes in my trusty spiral bound notebook (Though not as pretty as this. Wow.). So I am going to just create this entry here and add it as I process more of the notes, revisit the links that I scribbled down (often in the dark!).

There are quite a lot of stuff on twitter. and here are some of blog posts: WalkerArt, MIT civic data,

Every talk was really interesting and I ma looking forward to seeing the video posted so that I can watch them again, (like I need to see Kersten Schmidt’s talk again. It had so much info.) One that sort of stack to me was talk by Mike Bostock, a creator of d3.js and graphics editor at the NY Times. He posted his talk on his blog at here. You can also read and see his past talks, and they are also very interesting. As in most of his stuff (this is why he is so amazing), he puts all of his code on Jim Vallandingham is writing on his site. I saw him at eyeo as well and he is awesome.

Keynote by Zach Libereman was memorable. His idea for school for poetic computation is really interesting. I think WordPress had that thing that says code is poetry.

Another that just comes to mind without closely going through notes was the talk by Martin Wattenberg and Fernanda Viegas.

I will keep adding to this as I go through notes.

Take away from the conference? JUST DO IT. I will learn and create d3 project of my own. I was sitting in audience of “Show and Tell” and kicking myself for not having anything to share from myself. Next time? I will have my 5 min.


Open Refine on OS X Mountain Lion and Java Application Security on Mac

I attended Hack the Pats with open NFL Data Set” meet up by good people of Hacks and Hakers over the weekend. I produced this interactive named Regular season NFL team stats & winning the Super Bowl, and even won a little prize for it. Yay.

But the data that was available for this event was amazing.
People took the Advanced NFL Stats.com’s data and formated it like
playbyplay (by 10flow on GitHub) or nflplays (by veltman on GitHub). Data were pretty huge (nflplay was .csv file that was about 76.8 MB, 471,585 items) and my hope of running a quick pivot table on excel was immidiately vanished.

So I tried to download Google Refine, which I didn’t have loaded on my machine that day.

I didn’t know that Google Refine has now changed into “Open Refine” and found this instruction. "For Mac, Download, open, drag icon into the Applications folder and double click on it."

I did, and here is what I got.

Screen Shot 2013-01-22 at 12.08.14 PM

Damaged and can’t be opened? You should Trash it? Mmm.

I tried to download from diffrenet browser. Same results.

I gave up on it Saturday (used a different datasets from NFL.com, which worked out fine), but it was bothering me today so I was trying it again, and read up on it a bit.

Sounds like it is a “Security” issue that Apple updated when we upgraded to Mountain Lion from Lion. See it on this refine discussion thread.

It suggests that:

  1. Open System Preferences
  2. Open Security & Privacy Screen Shot 2013-01-22 at 12.13.34 PM
  3. Go to the General Tab
  4. Change the “Allow applications downloaded from:” setting to “Anywhere”
    Screen Shot 2013-01-22 at 12.14.24 PM

Well, I am not a security expert by any means, but that sounds sort of, um, unsafe, no?

As you were thinking that, Apple gives you this option.

Screen Shot 2013-01-22 at 12.14.55 PM

But wait, it doesn’t work. When you control-click and select Open, you still get “Damaged, you should trash it” message.

So, I resorted it to “Anywhere” option and it works, but not sure. Sounds like it is a sort of known issue, but it is to do with getthing a paid developer membership and a Developer ID certificate. But the error message, “The app is damaged and you should trash it.” is a very misleading and, well, pretty mean. I hope Apple resolve this issue soon.


Time to upgrade my MacPro!

My… Mac… is… so… slow…

Perhaps spoiled by my work computer. or, maybe because I let my son play MineCraft on this machine. (Don’t even get me started.)

It is a Mac Pro, and I should totally upgrade it. There is no reason it is so slow. Hopefully it won’t be way too expensive to make it much faster. I think I will be shopping for a RAM today.

Here is info from “System Information”

and, a ha!, the RAM info

Well, well. Lots of spaces to improve.

UPDATE: So, it looks like this is what I have: Apple Mac Pro “Quad Core” 2.66 (2009/Nehalem).

And cool, EveryMac.com has a little section about How do you upgrade the RAM in the “Early 2009/Nehalem” Mac Pro? How much RAM of what type does it support?. OWC has video on how to do it. I looked at NewEgg, TigerDirect and Crucial, but looks like OWC has the best price… also have a nice spec page.

One 8GB module for $70.99. Yay. I will have strange 11 GB of memory.


How to stop iPhone Spotify music from shuffling

(Note: Using free version of Spotify mobile? Scroll to the bottom of the post.)

Sometimes, I hate shuffling songs. It happend to me when I was using iTunes on iPhone couple of years back, and drove me crazy. And it is happening to me again. This time, Spotify on iPhone. It is driving me absolutely nuts. There is something about knowing what the next song is going to be. I feel in control. Especially when you are listening to my own Playlist. Hey, I went though the trouble of creating my list, can I at least have it play in the order that I put it on the list?

And there it is. Clearly an UI issue. I am not the only one. It only happens on Spotify on iPhone, not the PC version. Don’t get me wrong, I love Spotify.

Problem is lack of shuffle mode display. Once you are in your playlist, and click on “Shuffle Play” button, which is in the center of the screen, you are in shuffle mode. Clicking on the song name does nothing. You are doomed. There is nothing you can do from that screen. You will not know what the next song is going to be. So the “Shuffle Play” button only enables the shuffle mode, but does not disable the shuffle mode.

Here is what you do to fix it. You can either click on tiny “Now Playing” button on right top corner, or click on a song name to start playing a song. Then, from *that* screen, tap on the album cover. You will see something like this:

Shuffle mode in Spotify

Figure 1: See the green twisted arrows? You are in "Shuffle Songs" mode.

Non-shuffle

Figure 2: No longer shuffling songs!

See the “Shuffle” on the left bottom? If that is green, that means you are in shuffle mode. So click on it and make it gray/balck-white-gradient and you are no longer in the shuffle mode. That is it. Actually very similar to the iPhone “Music” app problem.

[UPDATE Dec 15, 2013] This post was written two years ago, when spotify was only available to premium subscribers. Now that they have opened the mobile app up for free users, it is little different.

Here is the snip from AP report (emphasis added):

Music service Spotify has launched a new free streaming service for mobile devices.

The Swedish-based company announced Wednesday that it will allow users to stream playlists for free as long as the songs are shuffled randomly. It’s a step closer to picking songs and albums on demand, a feature Spotify continues to reserve for premium members who pay $10 a month.

Users can play an artist’s entire catalog or their own playlists in shuffle mode. Free users won’t be able to shuffle play a single album without hearing other songs mixed in. Playlists that have too few songs will also have other songs mixed in. The free service launched Wednesday and includes ads.

So, if you are using free version, the answer is that you can not turn off shuffle unless you subscribe. Hope this clears some of the answers in the comments below.


My Kindle DX

Reading Haruki Murakami’s 1Q84 on Kindle XD, which I had an awesome deal on, and it is quite nice. Some memo here as I play with my Kindle…

Here is how to update your Kindle DX to most current software version. As of right now, the latest version is 2.5.8.

To check what version of Kindle software you are running, press the Home button, then press the Menu button. Navigate to “Settings” by moving the 5-way controller down, then press the 5-way controller to select. The version information is located at the bottom of the screen. Sometimes you may have to upgrade to next version before going into the latest version. I had that problem when I first bought this Kindle.

If your serial number is starting with “B004,” you have Kindle DX (US Wireless). “B005″ is Kindle DX (Free 3G), “B009” is Kindle DX (Free 3G) Graphite.

Apparently, if you run some hacks like 1(written in 2009) and this (June 2010) and you can put those very nice custom screen savers. I am sort of waiting for another reason to do that…. This is also really cool. So is this. in DX, it seems that the image size if 824 x 1200. Anyway…

I am also need to look into how to display Japanese title in the home menu. Looking at blog posts like this one or this one, which mentions this tool, it seems possible. I can download Japanese books from Aozora Bunko (which is much like Project Gutenberg for Japanese books) using this nifty Aozora to Kindle tool to create beautiful pdf version. Love it.

UPDATE: Here is a link to Mobile Read Wiki page.

The new Murakami book is good, but maybe my expectation was too high? or maybe it lost something in the translation. I am still undecided… I thought I would love it… I really want to know what will happen to Tengo and Aomame, though….

I was looking for a photo to go with this entry, and came across this amazing Murakami Tumblr blog.


Tech memo to myself: MySQL server on my Mac

MySQL logoAs I am getting more in to doing github stuff and running my machine as a development test server, I have need to have MySQL database set up and running locally, and since it requires me starting the server up every time, I figured it won’t hurt to write down what I did to set up my development environment. And everytime I see the MySQL logo with that dolphin like fish, I think: “So Long, and Thanks for All the Fish.” Continue reading…

ChatBot likes Justin Bieber.

Just downloaded ChatBot Qwerty. and here is my conversation with him, her, uh, it.

You: hungry
Qwerty: I’ve been waiting for you.
You: good. how it it going?
Qwerty: What do you really want to talk about? My logic and cognitive functions are normal.
You: what should I have for lunch?
Qwerty: Are you asking me for advice?
You: yes

Continue reading…