Simple function to detect Array in JavaScript

JavaScript doesn’t really separate Arrays from Objects. In other words, if you check typeof for something like { red:44, green:57, blue:220 } or [44, 57, 220], they both return “object”, even though the second one is an Array (the two are similar but not exactly the same, for example, you can’t access the “red” value of the object via index 0). So I needed a quick way to detect array as opposed to an object and came up with this short function.

function istype(obj) {
	return (typeof obj !== 'object' || typeof obj[0] === 'undefined')
		? typeof obj
		: 'array';
}

GitHub Mark istype.js gist on GitHub

CSS based loading spinner icon

This is a CSS only loading spinner icon. It’s just a quick experiment I decided to conduct, to see if I can do a loader spinner using only CSS, without any images or JavaScript. It actually turned out much easier than I thought. You can check out the full CSS below. It does look a bit messy but only because of all the vendor prefixes I had to use.

The CSS mainly uses transform, animation and keyframes styles and works in most modern browsers, with the exception of IE9 and below of course. Although at least in IE9 it does render the “first frame” correctly (i.e. the initial state of the loading icon). You can easily tweak colours, thickness, length or spacing of the lines. Oh and the html is dead easy, it’s basically just a .spinner div with a bunch of .spin-line divs inside. If you want to play around with live code you can check out my jsFiddle for it.

If you like this one, you should also check out this spin.js project by Felix Gnass that adds a bit of JavaSscript to give you more flexibility, control and provide better compatibility with older browsers including IE.

Read more »

Google+ search shortcuts for Firefox

Unless you’ve been living under a rock you heard of Google Plus. The new social project from Google is exploding like crazy and has already suppressed 10 million users – that’s after 2 weeks with very limited invitations for the first one. So if anything, it’s going to grow even faster once Google fully opens it up. As users are exploring Google+ they’re finding out the ins and outs of the service and figuring out various shortcuts and tricks that can be used, in fact they even started a collaborative project to keep track of everything there is to know about Google+.

One of the tips that caught my eye was for searching Google+ posts and profiles right from Chrome’s url bar. I quickly realized that this is easily doable in Firefox as well. So here’s a quick guide to setting up the Firefox awesome bar to search Google+ posts and profiles. Read more »

Optimizing JavaScript and jQuery

I’ve been working on a new project – a web application of sorts. Basically, unlike a regular web site, everything in this web applications occurs on the one page. Moreover, due to the nature of the webapp there’s a lot of javascript code handling everything from keyboard input, through DOM updates and to Ajax requests. While not time critical, it is nonetheless essential to keep this webapp working smooth and fast, and so as part of my development work on it I have been delving deeper into the “science” of optimizing javascript code, and also more specifically optimizing jQuery.

I have always been very performance conscious. It probably comes from my work as PC game developer where a single line of non-optimized rendering code could mean the difference between getting 60fps and 20fps during gameplay. In any case, I really enjoyed discovering some new tricks to squeeze more performance out of my code, and admittedly remembering some old ones as well. So I wanted to share some of those tricks, both the basic, but essential ones and the more advanced techniques. Read more »

Better jQuery Placeholder Plugin

A while back I made a post about a simple placeholder script I wrote. The idea was to provide the placeholder functionality that browsers like Chrome and Safari have, to browsers that don’t have it, like Firefox and IE. The script was very simple though and not smart in a few ways, including inability to handle password fields and an incorrect way of checking placeholder support in the browser. Since then I wrote an improved version of the script, in the form of a jQuery plugin. The highlights of this improved script include

  • proper use of jQuery’s plugin framework to create a fully chain-able plugin
  • support for password fields and text areas
  • correct check for placeholder support in browser
  • and just overall a better written piece of code

You can see a demo of the plugin in action and download the commented source file (4.7kb),  or the minified source file (1.7kb), or the clean (not minified but not commented) source file (2.6kb). Below I’ll go over some of the more interesting parts of script. Read more »

Cool CSS only buttons

I love CSS because it’s like having Photoshop inside a browser. Okay, maybe I’m exaggerating, but with modern browsers there are a lot of very cool things you can do with just CSS, without needing any of those pesky images with their overheads and extra kilobytes to download. In my work though I don’t often get a chance to try anything really interesting with buttons because they’re either simple, or if they’re not then I have to make them IE (worse yet, IE6) compatible so I end up reverting to mostly images anyway. So I decide to “go wild” and see what I can do without having to care about any of that compatibility nonsense.

Sidenote: Can you imagine if first cars had to be made horse-compatible? Yeah, think about that for a second.

So anyway, this is what I came up with.

CSS buttons

Look ma, no images!

Here is a demo of the buttons, pretty much exactly what I used for the screenshot above. I go over the styles after the break.

Read more »

Write single-page Ajax web applications with Sammy.js

Tutsplus.com has a great intro tutorial to Sammy.js, a small JavaScript framework that allows you to write single page web apps, similar to Gmail for example. Because Sammy.js is built on top of jQuery it’s very small, only about 20kb. With this framework you can keep track of your app’s state via hash (#) in the URL, without the need to refresh the site as you go from page to page, and of course it allows you to use the browser’s back button as well.

Check out the full tutorial at net.tutsplus.com.

Page 1 of 212