Do everything with javascript

vim wombat colorscheme on Mac iTerm

Written by julian on December 29, 2010 — 3 Comments

The wombat colorscheme is so far the best scheme I found. It is from Lars H. Nielsen http://dengmao.wordpress.com/2007/01/22/vim-color-scheme-wombat/


Both image directly link from Lars H. Nielsen's blog

You can download that colorscheme from his blog as the link listed above, *but it doesn’t work on iTerm*. The reason is the iTerm default have 8 colors only. So you need to make the iTerm to 256 color and download a modified version of the colorscheme which works on 256 color.

To change the iTerm color setting, select Bookmarks -> Manage Profiles from the menu. Select xterm-256color as shown below:

Go to http://www.vim.org/scripts/script.php?script_id=2465 download the wombat256 colorscheme, put the file under /usr/share/vim/vim72/colors/. (vim72 is the version of vim I am running, you may have a different number). Then edit .vimrc in your home directory, add a line “colors wombat256″. Done.

Posted in Misc | Tagged , , , ,

Installing and running firefox 3, firefox 4 beta on Mac

Written by julian on December 28, 2010 — Leave a Comment

If you want to test out FF 4 without overwriting your FF 3, just download it from mozilla http://www.mozilla.com/en-US/firefox/beta/ , open the dmg file, you should see the screen shot below:

Do not drag the firefox icon to the application, instead drag it to desktop and rename. (e.g. Firefox_4b8, try to avoid using space). Drag the renamed FF 4 from your desktop to application. Then you are half done.

Now if you try to open your FF 3 and FF 4, it will complain that firefox is already running. The reason is they are using the same profile. So you need to create a different profile to run FF 4. To start profile manager, open terminal, type:
/Applications/Firefox_4b8.app/Contents/MacOS/firefox-bin -profilemanager
Change the part in bold accordingly.

Create a new profile (e.g. 4b8). Now if you want to create a short cut in dock, it would take more work. First, ⌘+space, lookup script editor. Open script editor. Paste the following line into script editor:
do shell script "/Applications/Firefox_4b8.app/Contents/MacOS/firefox-bin -P 4b8 &> /dev/null &"
Again, change the part in bold accordingly.

Then save it. Give it a file name, put it under Application folder and change the file format from Script to Application as follow:

To change the icon, control click on the script, open Get Info. Then control click on a firefox short cut, open Get Info. Then drag the firefox icon to replace the script icon. Now you can drag the script to dock and run firefox 3 and 4 at the same time.

In case you running Jetpack SDK with this setup, the default path Jetpack will look for is /Applications/Firefox.app/ when it try to launch FF. So it will launch FF 3, but Jetpack SDK support FF 4 only. I don’t know the proper way to change the config, i just did a grep and change the python code. The path is under JETPACK_DIR/python-lib/mozrunner/__init__.py. Look for the line “appdir = os.path.join(‘Applications’, name.capitalize()+’.app’)” edit the path here and the cfx command should launch the FF 4 correctly on cfx run and cfx test.

Posted in Misc | Tagged , , ,

A play with HTML5 – audio mixer with canvas

Written by julian on September 17, 2010 — 1 Comment

Finished a prototype with the audio and canvas feature in HTML5. It is quite a sad thing that no single audio format can work cross browsers. HTML5 Doctor had a table showing the supported audio format from different browsers.

In the prototype I implemented the box filter documented out at Gamasutra. The blur function is applied to 6 canvas at every 100ms. Just chrome can run it smoothly….Maybe Firefox 4 can do that too, but I didn’t test it on FF4, also the mp3 may not be able to play on it…The link to the prototype (Google Chrome Only).


Screen shot with the audio mixer. Let’s play~

Posted in HTML5, Javascript | Tagged , , , ,

Dumping Firefox XUL object

Written by julian on November 24, 2009 — Leave a Comment

I am not sure is it correct to call it XUL object, what I mean to do is transversing javascript object. It sounds silly as we got firebug but it makes sense when working on firefox addon where the script debugger in firebug doesn’t work for javascript running in chrome.

There is a XUL reference in MDC(https://developer.mozilla.org/en/XUL_Reference). It listing out objects and its associated attributes, properties, and methods, but seems not all the reference are update and complete. Sometimes I don’t even know what kind of xul object I am dealing with, I need to have something like var_dump or print_r in PHP. And I have written my own object dumping function.
Read more »

Posted in Firefox Addon, Javascript

Rackspace cloud hosting (256MB Ram) and wordpress performance issue

Written by julian on October 24, 2009 — 3 Comments

Any one out there is using rackspace cloud hosting with 256MB Ram and hosting a wordpress? I was doing fine with it, but after I install the subversion on the Fedora VM, I found my apache become very very slow and take over 60s to serve a request….

Actually this is the second time for me to head into this performance issue. I did a rebuild on the VM and setup the whole thing again last time. Everything goes fine with the new build right before I install subversion. This time I tried to upgrade the machine to 512MB Ram package without any configuration change, everything just back to normal. Not sure if other peoples are having the same experience or just me had the problem…

Posted in Admin

Nice way to check dom node className

Written by julian on October 21, 2009 — Leave a Comment

It happen quite often to me that I need to check the element className in the event handler and to determine what function to trigger. element.className contains all the class name separated by space. e.g. “classA classB classCCC”. So it is bad to check the className like:

if (element.className === "classA") {...}

or 

if (element.className.indexOf("classC") > -1) {...}

Sure we can do it with regular expression but there are faster way to do it.

I use YUI all the time and there is a YAHOO.util.Dom.hasClass, I read the source code and found they got a clever way to do it. It just add space in front and behide the className and do a indexOf. But one thing to note that you should not add the space to the className property directly instead you obtain a copy of the className string by getAttribute.

The code will look like:

function hasClass(el, class_to_match) {
    var c;
    if (el && el.className && typeof class_to_match === "string") {
        c = el.getAttribute("class");
        c = " "+ c + " ";
        return c.indexOf(" " + class_to_match + " ") > -1;
    } else {
        return false;
    }
}

Tidy and neat!

Posted in Javascript

Detecting page dimension with Javascript

Written by julian on October 20, 2009 — Leave a Comment

I just come to a problem that need to create a canvas element the will cover on top of the whole page. This prevented me from using style.width and style.height as the drawing will become scaled by the style setting. So I have to calculate the exact page width and height then assign it to the canvas element.

IE 6 had a handy document.body.scrollWidth and document.body.scrollHeight to check the size of body element. Just one thing to note with document.body.scrollHeight is that If the total height of the content is less than the view port / screen size, you will need to use document.body.clientHeight.

While for Firefox, I just need to go through different properties in the window object and body element to find the correct numbers for the calculation.

width = window.scrollMaxX + document.body.clientWidth;
height = window.scrollMaxY + document.body.clientHeight;

Do not mistaken window.innerWidth and window.innerHeight into above as innerWidth and innerHeight will include the scrollbar (if there aren’t any scrollbar, window.innerWidth will equals to document.body.clientWidth and window.innerHeight will equals to document.body.clientHeight)

Posted in Javascript

Using custom event on jQuery

Written by julian on September 9, 2009 — 3 Comments

When doing Javascript, it is common to handle different DOM event like click, mouseover, keydown… This is cool that with the DOM triggering those events, we can create custom handling / behaviors on it. Say, when user click on the button, a edit panel fade in. But this is not good enough when we have to deal with a complex / feature rich interface. For instance, if a feature require a series of action on different components, how can we do it in a proper way? Here is custom event come into play.

There are different ways of making custom event to works, following will show:
1. Using jQuery.bind and jQuery.trigger
2. Using the jQuery plugin jQuery.mhub
Read more »

Posted in Javascript, jQuery

A classname to save, using negative magin to remove the "first" / "last" class in your list

Written by julian on August 26, 2009 — Leave a Comment

It is common to create a list with a separator in between like this:
Item 1 | Item 2 | Item 3

One common way of doing this is create a list (ol / ul) then apply the border-left and add a class “first” to the first li setting the border to 0px. This is good, but this can be done in a better way.

Read more »

Posted in CSS

A play with "frontend application"

Written by julian on August 25, 2009 — Leave a Comment

After created the yqlClient, it looks like I can do something fun with it. I love investing in stock market that sounds good if I can do something about it.

Here i created a quote panel which use YUI, jquery, flot extension on jquery, my yqlClient…etc. Everything done with HTML, CSS, Javascript. 0 lines PHP. But there are problems that as cookie was used as a permanent storage, so user cannot bring along the data when they switched a browser / computer…

This application used a html page in Yahoo! Finance, a xml call from the flash chart, Yahoo news RSS feed. Then use YQL to pulling the data and re-construct the interface in the way I want. This is fun that with the help of YQL, data can be pulled together quickly and creating some demo app in a short time to get user feedback and change again.

The quote panel.

Screen cap of the quote panel

Screen cap of the quote panel

Posted in Javascript
« Older Entries