Determining Event KeyCode on Mobile Browser (Chrome, Android, Firefox)

Recently, I run into a very common issue with regards to determining the Event KeyCode when entering text into a textarea on a mobile device. This had me scratching my head for a good couple of hours, but eventually I managed to get a solution that works perfectly well on desktop and mobile for the same piece of code. Continue reading “Determining Event KeyCode on Mobile Browser (Chrome, Android, Firefox)”

Advertisements

Raphael.js: Get Value Of A Text Node

When using the Raphael.js library for SVG manipulation, setting the text of a text element is as easy as

var paper = Raphael(10, 50, 320, 200);
var textEl = paper.text("My Text", 0, 0); // create a new element

// and later if we want to update the text
textEl.attr('text', 'My New Text');

However, getting the current text in this node is not as straight forward. The library dictates you should do something similar to var currentText = textEl.attr('text');, but logging that to the console outputs an Object and not a String. I’ve searched the net for months for the answer to this, and the solution I finally came up with today, after inspecting the DOM and seeing the elements being returned, is as simple as

var currentText = textEl[0].attr['text'];

The reason it needs to be this way is because the library treats the text node as a “Set” of two text elements instead of a simple HTML Element with inner text. I hope I’ve helped someone today. Happy JS Development, y’all.

HTML5 Form Validation Quirks: Opera, Chrome And Firefox

I decided to implement an HTML5 Form validation for one project I was working on recently, and came across several interesting quirks with the implementation across Opera 11.11, Chrome 12 Beta and Firefox 4.0.1.

First off, the basic thing I realized needed to do was check if validation worked at all, so I created my form, slapped on a few “required” attributes on some fields and fired of the form submission. Here is the basic form below along with the HTML and CSS references so we know what we are working with Continue reading “HTML5 Form Validation Quirks: Opera, Chrome And Firefox”

Avoid JQuery.post() or JQuery.get() If Possible. Use JQuery.ajax() instead

Over the past few several months, work has been crazy developing a JS intensive application for one of our clients. It been going great and I’ve finally found a need to use Node.js and Websockets after reading so many good things about them.

During development as Team Lead on the project, I’ve taken the opportunity from time to time to review the code being written for various parts of the application, especially when things break. I noticed that most often when some feature broke, it was usually because of some AJAX call that failed to load something. Upon inspection, I would find that $.post() or $.get() is being used to make the AJAX calls. I would usually fix the code by using $.ajax() instead, and the “error” callback to determine what is failing in the response from the server.

I noticed most often that $.post() or $.get() was used because it was more convenient to code, however, I believe its usage is too trusting of the response of the server, which for many reasons could fail to return the right response. $.ajax() may be more verbose to type, but I feel is a better option because you can explicitly handle the error condition if the response should not be as expected.

If you would want to use $.post() and $.get() for syntactical brevity, then I would recommend you setup your global JQuery AJAX options before hand, to handle the error conditions, but I believe that is not the best option in all cases, because sometimes you need to have fine grained control of error handling.

So to conclude, I recommend, staying away from $.post() or $.get() when doing heavy duty AJAX communication in which error handling should be priority, and using $.ajax() instead.

I would be glad to hear other experiences and whether or not this view is supported by the larger web application development community.

—————————————————————————————————————————

While you here, take a break from your hard coding life to enjoy some Twi Pop music.

Making a KAN CMS Downloads Component

KAN CMS is a great tool with a well developed CMS interface, but there are still a few things lacking, and some of those are a great set of easy to use and integrate components. There are a few, but the documentation and tutorials on building more is a not as public as it needs to be.

A friend asked for assistance recently on how to build access the list of downloads uploaded via the CMS interface using KAN CMS RC2. After a bit of thinking, here are the options to achieve that: Continue reading “Making a KAN CMS Downloads Component”

So You Don’t Like Facebook’s Small Font? Here’s A Solution

With the recent re-design on facebook things have changed quite a bit and one of them is the font-size of the News Feed. I personally don’t like the small font size and I hate to strain my eyes. So here is a 3 minute, 3 step solution to get your News Feed looking nice and dandy. Continue reading “So You Don’t Like Facebook’s Small Font? Here’s A Solution”

Create A Blog Site With KAN CMS 1.0 Beta RC5+

To set up a blog using KAN CMS is fairly simple with the upcoming KAN CMS RC5+, with the introduction of the Unified Articles Management. All that would be required is to setup/create a theme with Blog specific functionality and a fair bit of imagination. We will demonstrate how put together a simple theme which mimic the Enterprise WordPress Theme. Continue reading “Create A Blog Site With KAN CMS 1.0 Beta RC5+”