A better reset password system

When building a website with sign up / login, we have to build a feature that allow user to reset his password if he forgot it. There are many technical ways could do this. But I am gonna show you a better way to do this in elegant user experience and less code lines.

Read more...

Plain Text Widget for Mac

MAC ONLY SOFTWARE!

This is a small widget which allows you to save a piece of plain text right in your dashboard.

You can paste/copy/edit/save plain text here.

The text here is saved automatically when you close dashboard.

The text is saved to your hard drive. When you remove the plain text window in dashboard and re-add it, you won't lost your text. And the text is safe if you restart your computer, too.

You can add multiple plain text window in your dashboard.

download zip file here

Github page

screenshot

Read more...

jQuery Date Range Picker Plugin

jQuery Date Range Picker is a jQuery plugin that allows user to select a date range.

  • Requires jQuery 1.3.2+, Moment 2.0.0+
  • Supports IE6+, Firefox, Chrome, Safari and other standard HTML5 browsers.
  • Supports multi-language
  • Fully CSS styled
  • Written by Chunlong ( jszen.com )

screenshot

Read more...

How to create a pinterest like bookmarklet

This is an article teaching how to make a pinterest like bookmarklet to collect images from other site into your site. I am only talking about javascript part.

Read more...

Chain your javascript callbacks

This is a small javascript function to rescue you from infinite callbacks.

Read more...

The better way to define a Javascript "Class"

We can use a Javascript function as "Class". For example:

function Test()
{
    this.key1 = "JKLDSJKLFJDSKLJFLKSJFKLDSJFLJKDSLFJKDLSJFK";
    this.method1 = function()
    {
        var a = "DJKLJFKSDLFLKSD";
        var b = new Date();
        return a+b.toString();
    }
}

In this case, each time when we create a new instance of Test, the javascript engine will run the content of the Test function and define the methods and properties. If we create 10000 instances of Test, the engine will create 10000 "key1" properties and 10000 "method1" methods.

But we can put the properties and methods to the Test function's prototype. When we create instances of Test, javascript engine will not re-define the properties and methods, but the properties and methods defined on prototype is still accessable by "this". This works just like the parent class for other languages.

function Test()
{
}

Test.prototype.key1 = "JKLDSJKLFJDSKLJFLKSJFKLDSJFLJKDSLFJKDLSJFK";
Test.prototype.method1 = function()
{
    var a = "DJKLJFKSDLFLKSD";
    var b = new Date();
    return a+b.toString();
};

Now, let's do some test to check which one is better. Here I use nodejs( V8 engine ) to create 10,000 instances of the Test function and see the memory used by the instances.

For method 1 ( defines properties and methods inside the function ), it uses about 1.5MB memoery. For method 2, it only uses about 800KB.

Now you know how to define a frequently used "Class" in Javascript.

Read more...