tformer.js - empower your HTML forms
Apr 25, 2013      11:11:11

Introduction:

Have you ever tried to develop forms? Or wrote a script for the validation of these forms on the client side? Did you have to use the already existing plugins for form validation?

I had to, but I've never been 100% satisfied with any approach to neither solving the problem directly (own validation script for each project under its forms), nor how the existing third-party plugins works.


The Problem:

The main problems of own scripts and plug-ins have always been - the flexibility, convenience and simplicity.

A large number of data-attributes, required for configuration scripts (as in Parsley.js) makes the code less readable, and never remembers how to write them correctly. Not so simple ...

Not all plugins are well suited for the desired HTML-forms, and constantly write own scripts for different forms are not always convenient and reasonable.


Objective:

Create something flexible, easily configurable, a fully controllable, with an intuitive syntax and the main idea - to validate.


Solution:

The solution resulted in a small opensorsny plugin, called tFormer.js.


W3C Conf 2013 stream
Feb 21, 2013      14:41:45

W3Conf is W3C's an­nual confer­ence for web pro­fes­sion­als. If you are a web devel­op­er or designer want­ing to hear the lat­est news on HTML5, CSS, the open web platform and your place in it, come join us!

Watch it


Custom JavaScript Events
Jan 29, 2013      21:57:36

While working on a JavaScript plugin I decided that it is great when plugin informs user about what it have done or on what it is working right now. This functianality is the same as some events in javascript like 'click', 'keyup' or others. And the plugin should use it's own events.

But how to fire own crossbrowser event?

Red more to see details.


Open foreign domain links in a new window
Sep 14, 2012      16:59:45

Few weeks ago I saw a piece of code on my friend's website. Main task of this code - open foreign links in a new page.

$(document).ready(function(){
    $('a').each(function() {
        var a = new RegExp('/' + window.location.host + '/');
        if(!a.test(this.href)) {
            $(this).click(function(event) {
                event.preventDefault();
                event.stopPropagation();
                window.open(this.href, '_blank');
            });
        }
    });
})

Do you think this code is correct? As for me - I don't think so.

I can add few lines to this code to improove it:

  • "/*" before this code;
  • "*/" after this code;

Base64 vs. CSS Sprites: battle for performance
Jul 15, 2012      17:17:17

Tones of developers fighting with unneeded kilobytes of data on their web projects to increase their performance. Minimization of pages weight, reducing the number of requests, place of including scripts and many other things affect the speed of loading and displaying the pages. Developers using css3 sprites to reduce the number of queries when page loads. Base64 image encoding also using in this context and in some way it is more convenient.

... Read more to know the benefits and drawbacks



Stop all active ajax requests
May 31, 2012      07:18:03

Several months ago I encountered a problem - "How to abort() all current requests on the project page?". If you have a project built on AJAX you'll definitely need this functionality. Moreover, if your project is not built entirely on AJAX, but uses it in some cases to accelerate the navigation on the project you would not have prevented the use of abort() for such requests.

In a single use of AJAX it is simple. The XMLHttpRequest has a abort method, which cancels the request.

// creating our request
xhr = $.ajax({
	url: 'ajax/progress.ftl',
	success: function(data) {
		//do something
	}
});

// aborting the request
xhr.abort();

But what if we have a lot of requests and we wand to abort all of them?



Block the loading of your site through iframe for third party sites
Mar 10, 2012      12:34:48

How to block using your website throught iframe? It's simple!

<script>
	if (window!= top) // if your website window is not top
		top.location.href=location.href
</script>

The problem with the audio tag
Feb 27, 2012      06:50:00

I was faced with an interesting problem while adding the sound effects to locking and unlocking my iPhone in CSS3.

When I was trying to specify the "src" attribute of audio source tag it cause Safari overload and the browser stopped responding. Here is the code:

<audio id="soundLock" controls="true">
	<source src="/p/iphone/sound/lock.ogg" type="audio/ogg" />
	<source src="/p/iphone/sound/lock.mp3" type="audio/mpeg" />
</audio>

12