Disable CSS transitions and animations… temporarily or permanently!

There’s a fairly easy way to diable all transformations, transitions and animations introduced in CSS3, which often are being used in a nasty way, just as Flash animations were used ten years ago and as .gif images were used twenty years ago.

This can be done purely in CSS, when disabling them permanently or with a little bit help from Javascript (actually jQuery or Zepto), when willing to disable them just for some time or event.

This article also show how to set styles for absolutely every element in document.

Read More “Disable CSS transitions and animations… temporarily or permanently!”

Quick mobile UI review

I don’t like jQuery Mobile for being ugly and slow and I don’t like paid full-featured stuff like Sencha or Kendo. You won’t find them here. I like fast and beauty mobile applications, especially those written in PhoneGap. So you will find performance-first, beauty-second UI frameworks here. With special emhasis on being PhoneGap-oriented. Only quick review without any unnecessary blah-blah.

Read More “Quick mobile UI review”

A link to the same URL with a different port

Let’s say, that you need to make a <a href=""></a> link, that will point you to the very same URL (as page, in which have this link), but to a different port. Even though there are no reasons for not implementing support for links like <a href=":8080">jump</a>, as of writing this, such support is not implemented in any known browser. And thus, neither this link work nor pure-HTML solution is available.

You must hire Javascript to resolve this problem.

Read More “A link to the same URL with a different port”

Fine-tuning CKEditor 4’s toolbar

Forcing CKEditor 4’s toolbars to look exactly as you’d like is a bit hard task. Somewhere in official docs it is said, that you should use config.toolbarGroups configuration settings for this purpose. This is, of course, a complete mistake. Benefits are weak and you’re actually loosing all the control over which button, in which group and in which line of toolbar should appear. This article will help you design CKEditor 4’s toolbars exactly, as you wish to have them, using old, good config.toolbar-way.

Read More “Fine-tuning CKEditor 4’s toolbar”

Where should I keep JS and CSS code — inline or in an external file

Hamlet’s great question (“To be or not to be“), turns in web development and mobile world into Javascript (or CSS stylesheet) asking the developer: “To be inline or not to be”. In other words: what is better — to put code inline of HTML page or to put it in an external file? I was more than sure, that the answer is pretty straightforward — external file is always better. And I keep myself with this answer. However, I found a few arguments, that my sound interesting at first, but must be answered.

Read More “Where should I keep JS and CSS code — inline or in an external file”

A library for gauges, charts or data visualisation

There are certain drawing and graphic libraries in Javascript that can be considered for:

  • drawing charts,
  • doing some data visualization for the website,
  • using them as gauges / clocks for the mobile client

(gauges can be used in limited manner on the website as well).

This article deals with most interesting ones that you may consider for above purposes.

Read More “A library for gauges, charts or data visualisation”

The simplest, static map from Google with no API key required

You must be a member of Google APIs Console and obtain a valid API to embed Google Maps into your website or web application. That’s a well known fact.

Not everyone knows that this is required only, if you want to embed a fully-featured Google Maps, i.e. with ability to scroll, zoom, use markers, calculate routes etc. For embedding a static image of Google Maps showing requested location you don’t need API and required Javascript code is nearly a one-liner.

Read More “The simplest, static map from Google with no API key required”

Get English language name and ISO code basing on local (native) language name

For one of my PhoneGap project’s I needed a function that will convert local (native) language name into international (English) language name. And another one that will return correct two-letter language code (ISO 639-1), again, based on native language name. This was required because PhoneGap applications are returning local name for currently selected language (so, you’ll get polski instead of Polish, Tiếng Việt instead of Vietnamese and so on).

Here are these functions for future reference and for others, who could possible find them useful.

Read More “Get English language name and ISO code basing on local (native) language name”

noUiSlider — a jQuery Range Slider [updated]

Twitter Bootstrap is my main framework for creating websites and mobile PhoneGap application and it actually has anything I need, except a good slider.

Note, that I’m talking about a bar and a knob on it, which you can drag to set the value. I’m not talking about any kind of image slider, gallery or presentation. As most people know, Bootstrap has such thing, which is called Bootstrap Carousel.

I tired to use jQuery UI’s slider, as it is quite small (39,4 kB of minified JS and CSS code). This is not very much, when compared to whole jQuery UI library size. But it is way too much, when we thing that this 40 kB of code does nothing that building a simple slider (I’m not using jQuery UI at all). Plus: it works more than poorly on mobile devices with Android 2.x.x (a bit better on Android 4.1.x).

So, I was urgent need for an alternative. Thanks to Stack Overflow, I came across noUiSlider — jQuery Range Slider. And immediately felt in love with it.

Read More “noUiSlider — a jQuery Range Slider [updated]”

Function is not defined, when using setInterval or setTimeout

Javascript can be challenging and is full of traps for the beginners. Today I was caught into one of such traps and I was struggling with Uncaught ReferenceError, functionName() is not defined error, for way to long. Solution seems easier than I was thinking, so I wrote this short memo to future myself to avoid falling into the same trap again.

Read More “Function is not defined, when using setInterval or setTimeout”

Some issues about links in PhoneGap applications

It is uncommon and not to often to place external links (leading to an external pages) inside application built with PhoneGap. However, if you decide to do so, read this article to get knowledge about issues you may run into. If you target Android 2.x as well, you’ll also find some interesting information here.

There are generally two things, you should consider about links in PhoneGap applications. One about external links and second about links under overlay.

External links

Links to external pages replaces (covers) entire are of your application and thus made it nearly completely unusable to the user.

If you use direct link (<a href="http://www.acrid.pl/">acrid.pl</a>) and user taps it, contents of destination page (or eventually an error message) will cover entire application area, completely replacing contents of your mobile application. What is more important, device’s back button won’t work in this case, meaning that your application is actually dead upon user taps such link.

There is no going back and leaving app, going to home screen to restart your application again, will restore it from memory in previous state — that is, with external webpage open, not with contents of your application. The only option user have to get back to your application is to force to close it from task manager and hard-restart it. This is not wanted behavior in most situations.

To avoid these problems, always open links to external webpages using specific Javascript code. For example:

window.open(url, '_system', 'location=yes');

Part location=yes is important. Leaving third parameter empty will result in above mentioned behavior.

This code is tested to work in Android. According to PhoneGap documentation and blog, it should work in other platforms as well.

For your own convinience and purity of your code, you should consider enclosing this in a handy function:

function openUrl(url)
    window.open(url, '_system', 'location=yes');

and call it using either jQuery binding:


or direct linking:

Visit <a href="#" onclick="openUrl('http://acrid.pl/');">this page</a> for more information.

Either way is good and prevents your application from falling into above mentioned problems.

Overlayed links

PhoneGap app under Android 2.x ignores full-page overlays and allows tapping links below it.

If you’re using any Javascript library to replace dully Javascript alert(), confirm() and prompt() functions with cool looking modal dialog boxes — like Twitter Bootstrap, Apprise and many more — keep your eye on some trobules you may run into under Android 2.x.

I tested this issue on two different versions of Android and on two separate mobile devices:

  • GSmart Rola G1317D with Android 2.2.2,
  • LG GT540 with Android 2.3.3 and CyanogenMod.

Under first one, user were able to tap links below full-page overlay, but nothing happened as a result of this.

Under LG GT540 with Android 2.3.3 and CyanogenMod, tapping links below overlay sometimes resulted in opening target link. If such link wasn’t “secured” using method described above, again entire content of mobile application was replaced by external webpage content, making application unusable.

Android 4.x is free of this problem (tested under Samsung Galaxy Nexus with Android 4.2.2). You can’t tap at all anything below full-page overlay.

I wasn’t able to further investigate, whether this problem is caused by PhoneGap, used Javascript library (Bootstrap, Apprise, etc.), Android system or CyanogenMod mode.

AJAX and JSON cross-domain calls from PhoneGap application

This is just as quick as possible example on getting you to the subject, without unnecessary blah, blah. Only pure detail on how to sent AJAX / JSON calls (cross-domain!) from your PhoneGap application. With references to other intresting and more comprehensive sources in the end.

BTW: You don’t even need a response server ready to get started! Example is based on JSON Test — Simple testing for JSON-based applications service.

This article assumes that you’re using jQuery in PhoneGap application.

Read More “AJAX and JSON cross-domain calls from PhoneGap application”

Adding extra client-side validation to file upload form

For one of my projects I required a client-side validation in file upload form, that would warn user on every attempt of submitting that form, when file field would be empty or selected file would contain incorrect (not allowed) extension.

I decided to share this code here. Maybe someone else will also benefit out of it. Note, that this is rather solution, for example — it does string-only check for file extension. It does not check real mime-type, so it is still open on any kind of threats, that would exploit sending file with a forged extension.

Read More “Adding extra client-side validation to file upload form”

Getting root path in Javascript files included in Yii application

A server-side root path in client-side Javascript code? Are you mad? Why would I need this? Well… For example, when referencing image files (placed on server, right?), that are using dynamic paths or for any other reasons can’t be added statically (for example using CSS).

Getting root path in Javascript files is a hard task itself. When do you need to combine this problem with Yii client-assets publishing mechanism, it can become even harder. However, I found nice, clean and simple solution, using HTML5’s data- attributes.

Read More “Getting root path in Javascript files included in Yii application”

CSS and JS minifier/beautifier that rocks!

I definitely love and adore Avivo’s CSS/JS Minifier/Beautifier. Mostly for options that similar tools lack. Like: braces on own line, preserve empty lines and ability to select intend character.

It has a small bug in CSS Beautifier. Every : is beautified to : (with space), which breaks pseudo-classes like :hover and and pseudo-objects like ::before. But, this can be easily fixed (manually; simple find-and-replace in text editor).

So, even with this, Avivo’s tool is just fabulous!

Simple element blocker with and without jQuery

If you’re using jQuery the best (the only reasonable?), in my opinion, way to block an element or entire page (for example for updating it contents) is to use blockUI plugin. But, if you only have to block one or two small elements then you may consider writing your own, very simple blocker instad of using blockUI. And if you’re using jQuery only for that purpose (really small project or task), the you may try to do the same without jQuery at all.

Read More “Simple element blocker with and without jQuery”

Free Javascript chess engines and notation board presenters

I had to find a free Javascript based chess engine for one of my projects. I must admit, that I’m a low-level player and much, much lower level chess developer, so I assumed, that there is no chance, you can write such advanced thing like complete chess engine in such simple language like Javascript. Turned out, I was wrong. I was actually devatated (again and again) with the power and possibilities behind Javascript.

Read More “Free Javascript chess engines and notation board presenters”