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.

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…)

Quickie note, a very sim­ple script to pick a ran­dom num­ber between 1–5, instead of 0–4

	var rand = Math.floor(Math.random()*5);
	if(rand > 0){
		rand = rand+1;
		alert(rand);
	} else {
		rand = 1;
		alert(rand);
	}

…and con­trols to pause and play the time line.

I’ve been using this script quite a bit, and I think it’s time to jog it down some­where. A few things to keep in mind when using this script: (more…)

Keep­ing a jour­nal is a great tool to learn and con­tin­u­ous improve­ments.  So, I need to start jog­ging down my thought process when doing things and hope­fully improve more in the future.

Before I came up with this theme, I was mess­ing with one of the Woo Themes called Irre­sistible.  In a mat­ter of fact, I was so zoned into mod­i­fy­ing that theme, that I was com­pletely stuck.  My boyfriend also told me that isn’t “me” that the theme was too dark and grungy.  He said I need some­thing “happy”.  Got a few ideas of “happy grunge” and things like that, but just couldn’t incor­po­rated the idea.  After a while, I just decided to scrap the entire thing and started off some­where else.

I started to work on the logo first, and I had a good idea what I want.  I really like the + signs embed­ded inside the logo that because that trans­late my idea of “learn­ing” – also inspired by video games such as The Sims.  When a Sim learns some­thing new, it gets a ++ sign over their heads as in gain­ing level.  After work­ing on the logo for a while and picked two col­ors I really like, Orange and Dark Gray – I took a break:

Then I ran­domly grabbed a photo book lying around on my desk – which was by Getty Images – titled Infin­ity.  Flipped a few pages, and there I had it:

Then I drew the lay­out on a piece of paper, along with the logo I already had to glue the ideas together.  I’ve always been a sucker for sim­ple designs, and flat col­ors.  So it is ended up as what it is right now.  A few peo­ple sug­gested, actu­ally 5 of 3 peo­ple sug­gested that it is bet­ter cen­tered.  Up till yes­ter­day, the lay­out was still left aligned.  So there, I’ve taken other people’s advice and made it cen­tered.  I am still fix­ing minor things here and there, but the site looks 90% the same across most major browsers – espe­cially IE6.  There are a few plu­g­ins seem to be bro­ken, because it is scream­ing when you open the site in IE – need to sort that out.  Even­tu­ally, I’ll have to fix up Socia­ble because it has a lot of invalid HTML/CSS, even though my theme is validated.

One last note, if you are using WP-Spamfree’s con­tact form, the Sub­mit but­ton align­ment will prob­a­bly drove a lot of you crazy.  That because the author add a <label> before each <input> field excepted the Sub­mit but­ton.  If you dig inside the plu­gin and find the “con­tact form” and insert <label></label> before the sub­mit but­ton, you will able to adjust the align­ment a lot easier.