Name Mon Lu

Love jQuery/CSS

Blog about Webdev

Twitter supawaza

RSS Twitter Flickr

What I am up to:


Archive for July, 2009

Inspi­ra­tions come in all places, some of mine seems to come from dreams…

A few days ago, I told myself that I need to reject the idea that I can’t draw.  So I started to look at tuto­ri­als how to draw and learn how to “think”.  One of the meth­ods is to think each objects in line and shapes how that object is made up instead of let the brain telling me what that object is.  Using that method, I tried vec­tor­iz­ing an image.  I feel that helps me to learn how to put the shapes together as much as draw­ing – and the prod­uct was my USB icons.   The result was quite good, and that was a very good exer­cise appar­ently… (more…)

After 2 days, 16 hours of work, I intro­duce my new theme UnDe­prived :)   Feels good… :D

I would even­tu­ally do a writeup for my entire design process of com­ing up with this theme.  That because I think I am hav­ing a case of early alzheimer or some­thing.  I can’t remem­ber what I want to do in the next 5 min­utes, and I have to resort to use a task man­ager (Remem­ber the Milk) to remind me of things lately.  (more…)

Quick object dupli­ca­tions in Illustrator:

Disort & transform

Disort & Tranform tool

This allow you to dupli­cate the same object with pre­cise dis­tance, fast and easy.

I ran into an inter­est­ing error this morn­ing when I tried to open an Illus­tra­tor file from home to work.  When I opened it up, I got this error:

ai-error

If that hap­pens, use Task Man­ager to “End Task” for Illus­tra­tor – then hit the “Can­cel” but­ton on the error popup.  Did 2 min­utes of google, this arti­cle came up.  Even though it was for Flex, it seems to apply here.  (more…)

I was tak­ing pic­ture of my phone to prac­tice turn­ing it into an icon, then I acci­den­tally zoomed into my watch too close, and snapped the pic­ture.  It was a happy acci­dent.  I did a bit of color bal­ance and added some fil­ters, but hmmm… I’m lik­ing it!  Might use it for a near future project.

If you want to use it, you may down­load for per­sonal or com­mer­cial use. May not redis­trib­ute and or sell in any type of media with­out my per­mis­sion.  Just as long as I don’t rec­og­nize it, you’re good to go.

Blurred Circles Texture

Did I say I can’t draw?  Well, I can’t.  Any­ways, this is my first attempt of “trac­ing” an icon off a photo I took.  No, I don’t mean using the Bitmap Trace in either Flash or Illus­tra­tor, I hand traced this using a com­bi­na­tion of tech­niques I know using the Pen Tool, Gra­di­ents, and Gauss­ian Blur.  I’m hav­ing a hard time with Gra­di­ent Mesh, I’m going to try my hands on them again later.  Below are: 256×256, 96×96, and 48×48 PNG.  You may down­load the fol­low­ing PNG for per­sonal use only.  Feed­back are appre­ci­ated. (more…)

  1. jEd­itable passes val­ues as $_POST as default
  2. It grabs the ID from the con­tainer as value to the $_POST. Exam­ple: (more…)

One of the first few things I learned in jQuery, impor­tantly enough that I can’t live with­out this func­tion.  I like to note that when I first learned jQuery, I was a bit con­fused of the Selec­tors and the each() core func­tion. After I got a hang of how to use the Selec­tors, I slowly grasp the usage of each(). A few things to note about the two:

  • $(selec­tors) selects every­thing that you feed to it
  • The each() func­tion is used con­junc­tion­ally with $(selectors)
  • The each() func­tion sep­a­rates each of the returned item from the $(selec­tors) individually

Why you prob­a­bly can’t live with­out each()

Let’s say you want to change all the para­graphs (<p>) into I don’t know… say “No para­graph for you!” to all of them:

From:

This is a paragraph 1

Second paragraph

3rd paragraph

To:

No paragraph for you!

No paragraph for you!

No paragraph for you!

All you have to do is one fell swoop with jQuery:

	$("p").text("No paragraph for you!");

What if you want to change the text indi­vid­u­ally ONLY when the user clicks on each of the para­graph? That’s when each() comes in as hero of the day:

$("p").each(function(){
    $(this).click(function(){
        $(this).text("No paragraph for you!!!");
    });
});

The above exam­ple / Image Swap Exam­ple using each()

That’s just the most basic use of the each() func­tion, if you still don’t see the light with the above exam­ples, let me know.

Image Swap Example

  1. Cre­ate thumb­nails and dump them all in a “thumbs” folder with the same file names
  2. OR add some­thing to iden­tify the thumb­nails such as: image01-th.jpg, image02-th.jpg etc… (more…)

twitter

I got this idea of this arti­cle after me and Java­Junky talk­ing and given a tuto­r­ial of how Twit­ter works to a cou­ple of our friends at my birth­day party.  When they went home, 3 peo­ple were on Twit­ter.  I guess me and Java­Junky did a good job on the sales pitch. (more…)