I’ve known suberv­sion for a while, I didn’t use it that because I’m like a one-person-web-army, so I didn’t find the use for it and used Baz­zar – which you could do ver­sion con­trol by folder and with a nice GUI built in. The only rea­son I didn’t do a full blown ver­sion con­trol with Baz­zar was that there weren’t a lot of free hosts that host Baz­zar and I didn’t feel like installing one.

Why Git > Sub­ver­sion – a short intro

Sub­ver­sion is like a tourist bus, every­one has to get there at the same time and check in, if one’s miss­ing – oh crap.  If the bus crapped out, you ain’t going any­where either. Git is like a rental car, you check in when you’re done using it. If your car broke down, you can replace it with another. I thought this anthol­ogy makes sense if you want to visu­al­ize it.

Back to the nerd terms, here’s what they are. So finally, I just started a new job that I actu­ally work in a team that use Sub­ver­sion. It’s great and all, I still don’t like it as much.  Biggest prob­lem as peo­ple know is Sub­ver­sion is a cen­tral­ized ver­sion con­trol sys­tem, if the server is down, so are you. Well, not com­pletely, you work on your local copy, when the server is back up, there will be A LOT OF messed up merg­ing to do because it can’t keep tracks of what you’ve done up to that cer­tain point.  You are actu­ally wast­ing time.  Not to men­tion it has its own file struc­ture, it’s pretty “tidy” in a way. If you work like a mess like me, Baz­zar and Git are our heroes. Git is pretty much like Baz­zar, that you can do ver­sion con­trol in ANYWHERE you want.  You don’t have to have to let a server knows what you are doing in every 5 min­utes to keep things in check, you can just do it locally.  So imag­ine the server goes down for an hour, in that one hour you drew a nice look­ing dragon from your what­ever, col­orized it, added wings etc… and com­mit each of the change. When the server comes back up.  You tell the Sub­ver­sion server, hey, I did these. The server goes… what the hell are these craps?? I knew NOTHING about the dragon… it reminds me of my dad kicked my ass one time while I tried to explain why I didn’t do my home­works, because they were READING ASSIGNMENTS!!!  Now THAT’S a git!

Instead, Git tracks them all offline, so if the server goes down, who cares.  When it’s back up, you can tell the server what you’ve done, how many changes you’ve made, you drew a dragon, added some flames etc… the server WILL know what you did and so will every­one else because it keeps track all the ver­sions offline. So when you “push”, you are actu­ally upload­ing the old AND the new ver­sions to the server.  Bet­ter yet, if the server goes down in flames, you can just find another one, upload what you have and all good to go again. Imag­ine the Sub­ver­sion server goes down in flames… I can’t… I just can’t!  I don’t wanna think how to recover all of my awe­some drag­ons! I lied, you can, just not with all the ver­sions you’ve made. Just need to start a new one… me thinks…

Okay okay, here’s the 5 steps to setup Git to a remote server

Enough drag­ons, I’ve read at least 20 blogs, 10 docs to piece together how peo­ple can make the sim­ple setup process hard.  It’s not hard, but they’re just not on the same page for some odd rea­sons.  For the record, NOT every­one uses Github… I use unfud­dle

1. Sign up an account on either Github or Unfuddle
2. Go to Git-scm.com‘s down­load page to get msys­Git (full ver­sion to make things sim­ple – not the portable one) - just fol­low the steps for instal­la­tion… then it’ll ask you Select either Git Bash or Win­dows Com­mand - I’m not that smart, but I pre­fer to look smart, so I chose Git Bash over win­dows cmd. It’s just like win­dows cmd any­ways with a few nerd commands.
3. For remote hosts such as Unfud­dle or Github – they’ll need a SSH key to authen­ti­cate the con­nec­tion to their servers.  Each com­puter needs a new key, so if you are home, needs one. At work, needs one. At your ex’s house steal­ing his stuff, needs one. With­out it, you can’t get in, sim­ple as that. So let’s get that out of the way first. So let’s do this the easy way with­out typ­ing much.

   Open up Win­dows Explorer, find a folder, really, any folder, right click on it and you’ll see “Git GUI here” – click on it. You’ll see a box come up.  Click “Help” -> “Show SSH Key”.  If you see a blank box – click on “Gen­er­ate key” (Screen­shot).  Copy all of that to:

   • Github -> Account Set­tings -> it’ll nag you if you don’t have a SSH key added yet. So add it.
   • Unfud­dle -> Per­sonal Set­tings (top right) -> Scroll down you’ll find the box then paste all of it in also (give it a name if you want – I do Home, Work)
4. For the pur­pose of learn­ing, I highly rec­om­mend using Git Bash – if you learn the com­mands, you’ll under­stand how to use Git GUI later.  First, go to the folder that you would like to start ver­sion con­trol (just use your win­dows explorer) – then right click on the folder “Git Bash here”.  A linux com­mand prompt thingy pops up.
5. Cre­ate an new repos­i­tory on Github or Unfuddle
   • Github: believe it or not, Github gives you ALL of the instruc­tions you need!  So just type what they show you, then you’re good to go!
   • Unfud­dle: same for unfud­dle but they won’t show it to your face. After you’ve cre­ated a new repo, click on “Repos­i­to­ries” – you’ll see the new repo you just cre­ated, click on it then you’ll see the instructions.

Really, that’s all to it for set­ting up a new repo server to work with, but for some­one who don’t know much about com­mand prompts / shells stuff, it was hard and I’m sure some­one else out there had the same problem.

What gives?! Remote hangs???

If you see “Remote hang” – two possibilities:

1. You need to wait for the SSH key a bit longer (if you didn’t do it in step 3 – which should give it enough time, if not, wait a few more minutes)
2. You’ve entered a pass­word when you cre­ated a SSH Key. So if this hap­pens, make sure you leave the pass­word fields empty.  If you use Git Bash to gen­er­ate the key, just hit enter twice when it ask for pass­word. When you’re done, add the SSH-Key back in step 3 – wait a minute a two then try again.

Ignor­ing Files

Along the path, I’ve asked the same ques­tion and it took some dig­gings to find.  If you have a few files you want to do ver­sion con­trol, but want to skip files like .DS_Store, .project, .fla or whatever.

Ignore Files Way #1

1. Dur­ing “git add .” – instead of doing that.  Just do:
   git add filename.html filename.jpg
   You can add as many files on one line as you wish – DON’T com­mit yet
2. Type “git sta­tus” – you’ll see a list of “untracked files” – make sure those are the files that you DON’T want to track (ver­sion control)
3. Then type:
   git ls-files -o --exclude-standard >> .gitignore

   What this does is it will ignore all the files those were showed in “untracked” – then cre­ate the .git­ig­nore file for you

4. After you’re done: “git add .git­ig­nore” then commit

Ignore Files Way #2:

1. Fire up notepad and add the file names that you want to ignore. Exam­ple:
   .project
   .DS_store
   whatever.jpg
2. Save the file inside the same folder where you just ini­ti­ated a Git and name it ignorefiles.txt (or what­ever you want – some­thing simple)
3. Open up or switch back to Git Bash – assum­ing that you didn’t change direc­tory and didn’t close it (oth­er­wise, just go back to the folder and do a “Git Bash here”). Type “ls” to see if “ignorefiles.txt” is there.  If not, make sure you save the file here.  Oth­er­wise, type the fol­low­ing to change the file name to “.git­ig­nore”:
   mv ignorefiles.txt .gitignore
git add .gitignore
git commit -m "Added .gitignore"

You would say why not just change the file exten­sion inside Win­dows Explorer? Well, go try it, then you’ll see why. I’ll wait……… Done? Worded. As you can see, way #1 is eas­ier.  If you did way #1, and want to add more files later, it cre­ated the .git­ig­nore auto­mat­i­cally for you, so just dou­ble click on it and point it to Notepad to open it up.  Or Git Bash it…

Remove Files from Tracking

One more thing I found myself won­dered was how the heck do I remove one of the files after it got tracked?? Sim­ple:
git rm --cached filename
I’ve seen peo­ple tell oth­ers to do: git rm filename

That will delete your file for you, too! Did they even read the ques­tion??  I pre­fer remov­ing it then add to the ignore list, I don’t feel safe remov­ing a file phys­i­cally even though I got Git to watch my back.

Any­ways, these are the stuff I’ve ran into when I first try­ing to setup my work­space, hope this helps.  Once you’ve fin­ished this, you’re pretty much up and run­ning.  Refer to:  http://git-scm.com/documentation for tons of good­ies info.

I love Zim­plit‘s sim­ple idea, and rel­a­tively easy to setup (depend­ing on server’s con­fig­u­ra­tions). But of course it comes with a head-scratcher. Here are what I learned:

1. Local­host Time­out Error

As many sane devel­oper would do, you want to test almost every­thing on a Local server if you’re using Xampp Lite. I have been expe­ri­enc­ing time­out error. Maybe it’s due to the fire­wall at work, but I am going to inves­ti­gate more using a full veri­son of the Xampp server

2. “public_html” vs “www” Folders

This may sounds crazy, but I think it might have some­thing to do with the con­fig­u­ra­tions of the server. I tried upload­ing to my own server, every­thing works fine. But I couldn’t get it work­ing on my client’s server, it couldn’t CHMOD prop­erly. Crazy enough, I deleted every­thing and re-uploaded every­thing to the public_html folder, CHMOD the proper files, then it worked… I know both fold­ers are basi­cally the same thing, but why it hap­pened the way it did, CRAZY! I tell you. So I’m going to try to repro­duce this “bug” if it is even a bug or just me…

3. jQuery + zim­plit = Site Explosion!

Unfor­tu­nately, today I found out zim­plit will blow up your some parts of your lay­out if you have some sorts of script­ing going on in the back­ground, such as slideshow, hid­den divs. As soon as you insert an editable area, it auto­mat­i­cally inserts its own div and classes inside ALL OF YOUR DIVs! Drove me insane for over an hour why my sim­ple page stopped work­ing with a sim­ple slideshow. I mean it’s not the end of the world, you just have to rework your CSS to fit it in. But it would be nice IF SOMEONE TOLD ME BEFOREHAND!!

Over­all, zim­plit is still an awe­some idea, but it’s quite intru­sive. It works well if you have a very sim­ple web­site or planned ahead to use it at the begin­ning. If you decide to imple­ment after­ward, it is much more dif­fi­cult because you’ll prob­a­bly have to rework lots of CSS. But I think I will try my hands on it again next time when I build a site from scratch.  Just my 2 cents.

I finally launched the never-ending home­page redesign project yes­ter­day for my com­pany, so far so good, not every­thing I want, but at least got what my bosses want. I didn’t like the way how it was put together, but I had fun script­ing with jQuery once again. This time, he wants to do “wipe up” sort of effects and he resisted that me HTML-ing the hid­den con­tents because he wants it “the way it is” for the con­tents. *dies* So I’m stuck with image maps… the load­ing time on the page is “glo­ri­ous” to say the least… hey… I do what I asked of me. He didn’t want to hear load­ing time, the web stan­dards, best prac­tices, and stuff like that. Although, I added the help­ful image pre­loader plu­gin to speed things up just a bit, bet­ter than noth­ing. Over the course of the project, I’ve learned some lit­tle inter­est­ing things…

Inter­est­ing things I’ve learned…

1. If you add “padding” around an image that has “hotspots” over it; IE (no mat­ter what ver­sion) WILL off­set the coor­di­nates by the padding – the “hotspots” will be off by the amount of padding you put around the image. But in Fire­fox, the image map hotspots behave the way it should be. So if you need to adjust the spac­ing of the images when using image maps, use “mar­gins”, don’t use “padding”. Took me a short while to fig­ure this out…
2. Rel­a­tive + absolute posi­tions will snap pic­tures in any cor­ner you want. In my case, I wanted the image to be lower left cor­ner to achieve the “wip­ing” effect – oth­er­wise, it’ll just “slide” the image out if you don’t absolute posi­tion it.

     	<div style="position:relative">
       	<div style="position: absolute; bottom: 0; left: 0;">Image here</div>
       </div>

3. Too many image map hotspots is like Fred­die Cougar’s face… ugly as hell and a freak­ing nightmare
4. jQuery $.each() saved pounds of my hair once again
5. Do not add neg­a­tive padding inside a jQuery.animate() – it will crash like a 100 cars pile-up on a highway…
6. Don’t try to explain to my boss why adding more image hotspots inside an image map is such a bad idea – he looks at me funny and starts get­ting pissy

Besides all the pain and suf­fer­ing for a month, the most fun I got out of this project was script­ing the ani­ma­tions and solv­ing the “image map within an image map” prob­lem. Here’s the run-down of the project:

1. There will be main menu at the bot­tom of the screen, when the user hov­ers over each of time, the cor­re­spond­ing con­tent (the image) will “wipe up” – I am call­ing this Tier 1 menu
   1. Now “wip­ing” and “slid­ing” are two dif­fer­ent ani­mals, and my mini-boss specif­i­cally wants “wip­ing”, not “slid­ing”. So I had quite a bit of fun try­ing to make the image con­tents “wipe” up
   2. Solu­tion: cre­ate a “wrap­per” div that wraps all the hid­den “con­tent images” – default the “wrap­per” to 0px, then use jQuery to ani­mate the height of the “Wrap­per” to the full height when hover over. So I basi­cally cre­ated a “mask” to do this hide the images. Attach the cor­re­spond­ing image, show, then “wipe” up
2. Each of those image will have image map hotspots (no prob­lem here)
3. Within Tier 1 menu’s con­tents, one of the con­tents has mul­ti­ple links within it and has a Tier 2 menu – bet­ter yet, the Tier 2 menu has four sub-contents WITH DIFFERENT unique image maps…

The Prob­lem

The prob­lem? If you use the same map for all the images, they will have other hotspots show­ing up in images that you don’t want. Let’s say Image A is using #map1, Image B needs to have the same menu but has dif­fer­ent hotspot links. When Image B uses #map1 again, well, all the hotspots intended for Image A will also shows up. Of course, the obvi­ous solu­tion is to have mul­ti­ple maps. The prob­lem is the Tier 2 Menu shows/hides its con­tents. So if you have mul­ti­ple maps, the Tier 2 Menu won’t able to hide and show con­tent accord­ingly unless you want to code each of the Tier 2 menu with its own lit­tle script. Repet­i­tive, inef­fi­cient, and prob­a­bly won’t work.

The Solution(s)

After los­ing a cou­ple hun­dreds of my hair, the solu­tion? Cre­ate sep­a­rate image maps for each of the unique hotspots map. So Image A gets its own map, Image B etc… use jQuery to clone the map accord­ing to the active menu and attach to the the “main map” (#map1), add a tem­po­rary class, and then remove them when the user hov­ers over a dif­fer­ent menu item. Mean­ing: #map1 is the Tier 2 main menu and is defaulted to Image A. #map1 has the Tier 2 main menu, and the rest has its own unique hotspots maps with­out the Tier 2 Menu. Let’s say Image C has unique hotspot links, so when the user hov­ers over Image C. jQuery will tell this Image C to append #map3 hotspots (<area>) to #map1. When the user hov­ers to a dif­fer­ent one, it removes all the pre­vi­ously attached “hotspots” – I iden­ti­fied them by adding a dummy class in each of the attached <area> map, then append another set if needed. Painful, but not bad for a workaround I think.

I find front-end devel­op­ment is like solv­ing puz­zles, and I love solv­ing puz­zles espe­cially when it involves jQuery. Well, that’s it folks.

Haven’t wrote any­thing for a while, but here’s some food for ran­dom thoughts. With all the newest and great­est hit­ting web namely CSS3 and HTML5, how about giv­ing some love and thoughts to Multi-touch as the next big thing on the web, and prob­a­bly will be Web 3.0? Now you would say some­thing like, “Well, you know Mac­books have that awe­some fea­ture and peo­ple ARE using it on web­sites.” Well, can YOUR web­sites sup­port flip­ping objects around with 2 fin­gers? An inter­face to crop and edit pho­tos using your 2 fingers/hands on your web­site / web app? iPhone / Android phones can, but on web­sites? Nope.

First of all, I am one of those peo­ple who refused to support/buy any­thing with an “i” in front of it, it’s not that one day I wake up and decided to dis­like Macs. I owned an iPod before and I found myself almost throw­ing it against the wall. I have used Macs, and I can’t find myself lik­ing it as much as a PC. Don’t get me wrong, I don’t hate it, but I just pre­fer PC’s… that being said, the best thing Apple “invented” and poured so much thoughts into my brain is the lat­est and great­est the Multi-touch technology.

Where did I get the idea Multi-touch will be Web 3.0? Well, Javascript libraries such as jQuery, Mootools, Pro­to­type etc… changed the way peo­ple inter­act with web, and how it deliv­ered inter­ac­tiv­ity and infor­ma­tion to the users. Designers/developers don’t need to depend on Flash/Silverlight to have ani­ma­tions / effects, things load faster in the back­ground or don’t even have to reload a page thanks to AJAX. No longer the user has to open a new win­dow to see a pic­ture, instead, they can see them using a Light­box or sim­i­lar tool. I per­son­ally feel those are the most impor­tant ele­ments that dif­fer­en­ti­ate the good old web from Web 2.0. Some might argue Web 2.0 is all about the shiny graph­ics, but I beg to be dif­fered. Not only that, Multi-touch is already in smart phones and Apple already started it with their Mac­books / Magic Mouse, and Win­dows 7 with their own multi-touch inter­face. It’s only a mat­ter of time when all the web­sites don’t require a mouse to browse and adding more inter­ac­tiv­i­ties, because I don’t have to use a mouse to browse when I use my G1, why should a desk­top com­puter? The tools are already existed to get us there, the ques­tion is how soon. My guess? I’d say in a year.

To prove it, some cra­zies already made one of the world’s first Multi-touch web­site tak­ing advan­tage of Win­dows 7 multi-touch sup­port – of course it still works if you don’t have a fancy multi-touch screen or a Wac­com Bam­boo Touch (cost only $69 and works on both Macs and PCs – yes, even Win XP SP2).  Or a fancy Mac­book / Magic Mouse.

Although, I don’t think I’ll trade my CSS/HTML skills for multi-touch mak­ing web­sites in Sil­verlight. That being said, I think I was look­ing at the future of the web and prob­a­bly some­thing that will “encour­age” CSS3.x / and HTML4.x to sup­port multi-touch sooner, max­i­mize and push the web even fur­ther? Can I already say Multi-Touch Web 3.0, anyone?

A slight prob­lem of course Multi-touch is quite new, not many peo­ple have the tools to inter­act, or the neces­sity for it for the web at least. Never mind that, not a lot of peo­ple get the use of it. Multi-touch took me a few sec­onds to fig­ure out how to use it, now that I know, “wowser” is the word I’m using to describe it. To me, the web is all about two words: infor­ma­tion and expe­ri­ence. As designers/developers are con­stantly find­ing bet­ter and cooler way to cre­ate web­sites and deliver infor­ma­tion, Mutli-touch is def­i­nitely the next big thing on the web.

I don’t know about you, but I’m jump­ing on the band­wagon to look for a way to “fake” a Web 2.5 for now and make Web 2.0 sounds so 2008 while peo­ple still dig­ging the glossy/shiny but­tons, and debate the best way to clear floats.

You know… it’s prob­a­bly a silly real­iza­tion… but I’ve always copy & pasted vec­tor shape from Illus­tra­tor to Pho­to­shop, never the other way around. Today, I had to con­vert a shape that I wanted to use from Pho­to­shop to Illus­tra­tor (CS4 by the way), I was so sick of trac­ing it. I mean what’s the worst thing could hap­pened if I pasted some­thing a vec­tor shape from Pho­to­shop to Illus­tra­tor, right? Get an error some­thing, but to my sur­prise, it gives me a dia­logue ask­ing me whether I want to con­vert it to an Com­pound Shape or Path…

…son of a… learn some­thing new every­day, don’t we now…? A lit­tle less deprived

I finally gath­ered my brain­cells and launched my new port­fo­lio: Designloper.com today:

I was try­ing to “brand” myself in a way, what’s bet­ter than a made-up word that describes per­fectly of what I do, right?  I love the lime green col­ors, but I thought it was get­ting too bor­ing with the light gray and white.

So I spiced things up this time with dark brown and hot pink.  I was lov­ing the fun col­ors as I was design­ing, it looked almost “hippy” which fits my per­son­al­i­ties – I never did drugs in my life, but I seem so… (more…)

Ver­sion in this arti­cle: jQuery 1.3.2 / CSV2Table 0.03-b-2.9

Lately I started to like CSV (Com­mon Sep­a­rated Val­ues) more and more com­par­ing to XML.XML is a pain to setup even as enter­ing data, then grab­bing the data requires Einstein’s brain plus 3 sleep­less and hair-pulling days of cod­ing… okay, I maybe exag­ger­ated a bit, but that’s how I feel about XML. My first encounter with CSV was InDe­sign, in there, you can import a bunch of data and gen­er­ates PDF like Word’s Mail Merge fea­ture. Then one day, some­one asked me if I can find a bet­ter and eas­ier way to help the non web peo­ple to main­tain a site. I started out with search terms like “jQuery read text files” or some­thing like that, one of the results returned as using CSV and there is a plu­gin called CSV2Table in the jQuery Plu­g­ins web­site by Toshiro Taka­hashi writ­ten ear­lier this year. Test­ing… (more…)

This is going to be a short post. Magic Tags are very awe­some, but on the Pods CMS doc­u­men­ta­tion failed to men­tion some­thing very sim­ple yet use­ful. Before any­thing, here’s a quick run down of what Magic Tags are…

(more…)

Soft­ware note: Pods CMS Ver­sion 1.7.3 / WP 2.8.4

Doc­u­men­ta­tion: http://pods.uproot.us/codex/helpers

What are Input Helpers

An Input Helper lets you com­pletely cus­tomize the appear­ance of any input field… when adding new data contents.

In plain n00b Eng­lish: as an exam­ple, the default field “name” I had it to store last names, and a sep­a­rate col­umn to store first names (fname). The prob­lem of that would be when you’re using Bi-directional rela­tion­ship PICK col­umn to another Pod (let’s call this: Per­son) is you can only relate one of the columns, not both First Name and Last Name. So if you use the PICK col­umn the “name”; which stores the Last Names, and with the last name like John­son – you prob­a­bly can’t tell which John­son that is. Input Helpers can grab and dis­play the full names for you when you’re adding data. (more…)

I’ve been very silent on Face­book, Twit­ter, and this blog lately. That because I can’t con­stantly access Twit­ter any­more from work, they blocked me… so no more use­ful stuff to tweet and brag about excepted one thing: Pods CMS. Pods CMS is a Word­Press plu­gin that pretty much turn your blog into a CMS. You can build a Wiki, Glos­sary, Recipes, Hotel list­ing etc… the pos­si­bil­i­ties are end­less. Although, you will need to know at least some PHP to make this thing tuned to the way you want it to be. I have been play­ing with it in the past 2 weeks, I have to say I am very impress of how this plu­gin works. So I did a test on one of my hob­bies: Kendo. I’ve always wanted to col­lect data on Kendo Dojo, how many prac­ti­tion­ers, and Kendo tour­na­ment results in the U.S. I was able to cre­ate this very com­plex data­base that it can be listed by Fed­er­a­tions, State, Coun­try, Dojo, and down to the indi­vid­ual Kendo-ist data. The awe­some thing is? Each list­ing can be linked to one another. For exam­ple, if you view­ing by Fed­er­a­tions, you can list all the Dojo in that fed­er­a­tion, and with links to each Dojo AND the state. You can add BUILT-IN fil­ters and search on top! The back­end is all done for you, all you have to do is to make things pretty. Ain’t that grant?

(more…)