quick & dirty js function throttle

This is especially important when invoking "heavy" function rapidly. By "heavy", I mean, accessing the DOM, which is considered heavy on performance. by "rapidly" I mean many times per second. Many times executing the same function only 5 times per second would be enough and would really take the load off the CPU (or GPU), and produce the same results.

Read more…

dateRangePicker – pick month range easily

So again, I needed something, and found nothing useful online, so I went and coded it. It's a pretty basic month picker, which lets the user chose from a variety of presets or he can chose a custom "from"/"to" month range.

The code was actually from almost a year ago, I just never got the time to publish it. Setting it up is pretty easy, you you need to do it bind it to some text input field and that's it. It is depended on jQuery, and I use the great Tether utility to position it on screen. Tether is not a must and you can remove it's dependency, but I think Tether is perfect for this kind of things, because it gives solutions to many edge-case issues.

It's very flexible in terms of CSS and easy to understand and manipulate as you wish, so check it out:

Read more…

simpleGrid – jQuery plugin

This grid is good for items which have the same proportions, and are to be aligned perfectly within their containing element. The grid works in percentage units, and only changes the DOM when it should (when number of items-per-row has changed). Also, the amount of DOM elements does not matter to performance, since the grid does not loop over the items, but uses it's own dynamic style element to change the width of the elements. Check it the demo page:

Read more…

Fancy Input – jQuery plugin

I've made an experimental jQuery plugin which basically makes it fun to type text. it works with input fields wrapped with a div, in a way that hides the actual input field (but still "communicates" with it), and put a span element containing the character pressed (in a normal use case), and every span element is being transitioned in a nice CSS3 way. The end result is a mimicked text input field which tries to simulate a real input field as much as possible, including copy, paste, undo and text selection changes. Read more…

Photobox – CSS3 jQuery image gallery

I wanted 3 things from any image gallery script: first, it to be beautiful and posses a great look & feel. second to be lightweight and not use many assets, and third, I want a script that was built with performance at mind.

I was working on something else entirely when I had to find a nice image gallery script. I wanted one of those that the user would basically click a thumbnail and the larger version of the image would be displayed on top of the page, in a modal window fashion.

Read more…

Mini-page navigation

I went to sleep and suddenly I had a thought, that I must create a script that lets the user navigate through a web page using a "mini-page" helper on the side of the page, so the user could see where he is in relation to page as a whole. I don't really think it's super helpful to anyway, but I sure did wanted to create it. and 2 days later I have my first prototype using a bunch of wonderful code that others wrote and I incorporated into my solution.

Read more…

DOM text marking

Marking text in a given DOM structure is not something you want to do yourself in 2012. Someone probably has done the work for you, and that would be me (in this very specific case). I have coded a nice piece of JS that scans the DOM, wrap whatever text you want in it's own element (default is 'mark') and from then you can do whatever you want. Ho, and it's lightening quick (after a ton of optimizations).

Read more…

Translation system

An application, a website, or anything that might be using language files for content translation, would probably need to be managed in some convenient way which will allow translations to be done much faster. So I wrote a front-end system that handles all this, just ready to be hooked up to the server.

I am talking about internalization of content, also known as “i18N“.

Read more…

validation, styling & semantics of forms

This post is about web forms and how they should be coded, validated, and styled (the proper way). The javascript validation code is based on jQuery, but in the future will be non-library dependent. The Validator is cross-browser and will give you the power to use future-proof input types such as 'tel', 'email', 'number', 'date', and 'url'. I can sum this as a 'template' for creating web forms.

Read more…

Getting started with Notepad++

Notepad++ is my favorite editor, and no doubt by many others. It’s extremely light on memory usage, but at the same time provides massive power to us coders with lots of tools, plug-ins, manipulations and keyboard shortcuts that really makes work easier and more fun.

In the past I used to work with Dreamweaver (ages ago), Eclipse, Aptana, netBeans, visual studio, whatever. Most are heavy and also cost money. It’s not for me to remedy your ways of coding, and I would even make a recommendation for the exquisite VIM editor which is the best out there.

Read more…

Sticky floating box

This is a jQuery plugin I wrote back in 2009 (improving it regularly since). It’s highly useful for side menus that you wish to float or to be “stuck” on screen as the user scrolls around your website. It’s funny because I still get fan mail for making this plugin, so I recently re-released it with extra features, so check it out.

Read more…

Sudoku game in Javascript & HTML5

This Sudoku game was started as a personal project to bring me back on track with web development after spending months traveling and not using a computer all this time. I thought I forgot most, but it seems getting back to business took less time than I thought, and was also fun process.

I wanted to build a Sudoku game in pure JS, after playing lots of Sudoku on my iPhone. At the beginning the game was simple, I managed to create a board with random numbers which followed the rules of the game:

Read more…

connect-four game in javascript

I always wanted to created a connect4 (some call it connect-four) game in javascript. As always, performance are vital in the design of this game (for me at least). Its never about getting stuff to work, that is boring. It’s only about how to make stuff THE BEST you can. Quality if of the essence.

Read more…