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:


letterer.js – Breaks text into words & letters

Performance in mind, like always, I've constructed a tool which scans any given DOM structure and breaks all text nodes into individual words and letters, WITHOUT messing up the DOM semantic structure, and these letters and words can be animated using a separate script and some CSS magic.


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:


radio buttons that actually look cool

These radio buttons can finally work with the new Chrome fix for transitioning pseudo elements. only took them abut 3 years to fix this bug, but it opens a new world of possibilities for people who like Chrome for some odd reason. So check it out, fresh from the over, radio buttons which aren't boring to look at.


super simple CSS3 side-menu

This is more of a phone app-like side menu this can be shown/hidden by pressing a button. It's very basic, and is all almost all is done via CSS, expect the button event (which is actually a hidden checkbox). no javascript, only CSS.

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. (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.


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.


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).


smart input field position indicator

I played a little with JS today and had an idea: for a given input field, it would be cool to indicate the current cursor position and how much text is occupying it. I also wanted it to be easy to implement in any website without modifying the DOM at all. So I've made a jQuery plugin.


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“.


CSS3 loading animations

Its very popular now days to create nice loading animations using only CSS and in that way save some bandwidth, and as well these animations are vector-based, and not pixel-based, so they look great no matter how you scale them. BUT, they work only on the great browser Firefox. because of major bugs in Chrome, nobody in Google bother to fix:

rolling stones: css-only rolling menu items

I have came up with this method recently while thinking of a nice effect to create for my blog’s main menu.
“It should be cool” I thought. Then I remembered my old days of flash, when I used to create menu items which vertically roll and change to different text style when hovered on. The point was to make it with only using only with CSS and minimal DOM as possible.


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.


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.


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.


iPhone-like iOS5 toggle buttons

I love the buttons on the iPhone iOS-5, they are so cool, with their round trigger instead of the blocky older one introduced on the previous versions. I thought these toggle buttons would work nice as a checkbox, and with some CSS3 magic it can look pretty much identical to the iOS ones. although with a severe Chrome bug, I wouldn't think the implementation would work on Chrome for while

Client-side apps statistics

So you have your own application now, you’re a big important person with lots traffic and eye balls directed on your web application everyday. Statistics are crucial for you.


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:


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.


CSS3 highlighted bullets

One day I was coding an un-ordered list, which was supposed to have a “classic” look & feel, with round default disc bullets, and then a thought accrued to me. why are bullets not interacting with the user? it would be cool if a bullet would look bigger when the user hover over a list item, but only on the text itself.