Author Archives: May Yan

jQuery Transfer with Flair

jQuery UI’s Transfer effect is a very convenient utility to give an illusion that an element flies to another element. You just need to do the following: $( “#fromElem” ).effect( “transfer”, {to: “#toElem”, class: “transferElem”}, 500); jQuery creates an new … Continue reading

Posted in JavaScript | Leave a comment

Triangle

Often you are asked to create a button like this: Solution 1: The entire button is an image, with text on it. This solution increases your number of request; relies on CDN, effects accessibility. Solution 2: Use CSS3 border-radius for … Continue reading

Posted in Tips | Leave a comment

innerHTML vs innerText

This seems to be a very old topic. However I encountered a very interesting bug lately made me think about it again. What do you think the following jQuery code will display? myDiv1.html(“A&W”); myDiv2.html(“A&W Restaurant”); If you are like me, … Continue reading

Posted in JavaScript | Leave a comment

CSS3 TypeWriter

Have you tackled this before? I got this in a recent job search, and they asked me to do this offline exercise. Using Object Oriented Native Javascript (no libraries) come up with a solution to produce a typewriter effect. The … Continue reading

Posted in CSS3 | 3 Comments

HTML5 SVG

In my previous post, I explained how to draw an American flag using HTML5 <canvas>. In this post, I’ll explain another solution using SVG. For this example, I’m using <polygon> tag. You can let server produce the polygons’ markup, or … Continue reading

Posted in HTML5 | Leave a comment

HTML5 <canvas>

Implement an American flag without using image. Here is one solution using <canvas>. Most front-end engineers can use simple <div>s and css to show the red/white strips and the blue rectangle at the upper-left corner. To output the 50 stars, … Continue reading

Posted in HTML5 | Leave a comment