Mosaiqy: a jQuery plugin for image galleries

Fabrizio Calderan has just released Mosaiqy a jQuery plugin that handles image galleries based on a flexible and customizable grid system. With this plugin you'll be able not only to resize and adjust the grid and image order, but also to add some stunning effects on the images themselves. I've already downloaded the plugin and I'll give it a try shortly. Stay tuned. The best is yet to come. smile

Advanced jQuery

The following Slideshare presentation shows some interesting and advanced uses of jQuery. Some of the examples contained in the presentation are already known to many advanced jQuery developers, but I think that this presentation can be actually considered as a good starting point for further explorations and testing.

Choose the right jQuery plugin

Choosing a jQuery plugin is surely more difficult than using it. There are thousands of jQuery plugins on the web that perform a wide range of tasks but only a few of them are really useful and usable. The overwhelming majority of jQuery plugins make you feel frustrated because we usually spend a significant amount of time trying to make them work but without results. Sometimes we feel stupid, other times we simply trash the plugin and start another Google search. That's because such plugins were not designed with usability in mind. Usually we define a plugin poor when it doesn't satisfy all the jQuery coding guidelines. This can be misleading, because even a poorly written plugin can turn out to be the right plugin to us. It's not about coding: it's all about usability.

Firefox and Wordpress PHP widgets

Today I've tested a Wordpress site in Firefox and I found out that a PHP widget on the sidebar didn't work. More precisely, Firefox showed the raw PHP code instead of the normal HTML generated by PHP. The theme used on this site is Mystique, but I don't think it's caused by the theme, because it worked just fine in all other browsers. I tested it with Firefox for Mac. I don't understand how this is possible, because the page's loading was complete.

jQuery: toArray() on objects

The jQuery's toArray() method works on DOM elements in a wrapped set and returns a plain array of them. It would be handy if such a method worked also on JavaScript objects. Unfortunately, it does not. For that reason, I've implemented a global jQuery method which takes an object and returns an array containing its properties and their corresponding values. With very poor imagination I called it toArrayFromObject(). Its code is as follows:

jQuery: multidirectional gallery

In this post I will show you how to create a multidirectional image gallery with four arrow-shaped controls. Only the very first image will be visible by default. When a user clicks on a control, the corresponding image will be shown with a movement that takes one of the four cardinal points as origin. This example is all based on CSS absolute positioning within a context, so it's vital that you understand the CSS code before digging into the jQuery animations. First of all, let's start with our markup:

Wordpress: fixing permissions

One of the most frequent causes of failure for a Wordpress installation are the wrong permissions set on your document root directory. This is due to the fact that most hosting companies set such permissions in a way that simply blocks Wordpress (in some cases) or, more frequently, causes several side effects which are not immediately noticeable after the first installation. These side effects include broken permanent links, a plethora of HTTP 404 errors and, sometimes, broken RSS or Atom feeds. Fortunately, the solution is pretty simple.

jQuery: file upload that works

There are hundreds of jQuery plugins that claim to be able to handle file uploads, but how many of them really work? Have you ever felt frustrated after trying to make a plugin work but with no results? This is what's happened to me with file upload, until I discovered the File Uploader plugin. Actually, this script is made up by two stand-alone classes that can work even without jQuery, but still. The fact is that this plugin is able to handle also multiple file uploads very easily. The problem is that it's a little bit tricky with its base configuration, especially on the server-side. In this post I'll tell you more about my experience with File Uploader to help you to avoid my errors and be ready to use it effectively.

Benefits of semantic HTML

Semantic HTML is not just the latest fad on the web nor another way to show that your web site and your coding style is trendy. On the contrary, semantic HTML is the only way to get consistent results across web sites and environments. As web developers, we're all accustomed to run several projects simultaneously. The point is that without a consistent, semantic way of naming and using our HTML elements, we'll always end up with having several web sites that feature inconsistent and incompatible element nomenclatures. What does this mean? Simply put, we can't globally change our site styles across our web sites, not to say that it's hard to remember the structure of each site we're working on. Let's see some examples.

jQuery: sliding menu items

jQuery can actually add some interesting visual effects to our menus with a minimum effort. In this post I'll show you how to create the effect of sliding menu items on a simple navigation menu. Our menu will have only the first item visible by default. When a user moves the mouse over an item, the next one will be shown with a sliding movement. And so on. To start with, let's take a look at our basic markup structure which basically consists of a plain unordered list:

CSS: headings and web fonts

Web fonts can be used with CSS on any textual content of a web page, but I think that they make the difference mainly on headings. This is due to an accessibility reason: if you use a web font on a large section of text, you may actually annoy users with sight problems, not to mention users with cognitive disabilities who can be easily distracted by your design choices. Instead, headings are generally very short and for that reason they're just perfect to test some fancy web fonts to create interesting typographical effects. In this post we'll use Google Web Fonts, because they're easy to use and do not affect too much the overall performance of your web pages.

jQuery: a slideshow with overlay

So far we've always seen simple slideshows where the only animation available was the sliding effect on the main slide container. In this post I'll show you how to add a further animation on the slides that will make a simple overlay element appear when the sliding movement is complete. This can be easily achieved with jQuery and the aid of some default CSS rules. To start with, let's take a look at the basic markup structure of our slideshow:

CSS3 transitions example

CSS3 transitions occur between the states of elements, for example between the normal state of a link and its hover state. The following video tutorial explains very well how to implement a navigation menu using CSS3 transitions on links. Bear in mind, however, that the final result may vary slightly from browser to browser, because CSS3 transitions are not the same as JavaScript transitions.

Introduction to CSS3 gradients

CSS3 gradients are quite a complex topic due to the current inconsistencies among web browsers related to the various and different syntaxes in use. The following video tutorial explains very clearly the two most used syntaxes for working with gradients in Firefox and Webkit-based browsers (Safari and Chrome). With its newest release, Opera has introduced its support to gradients through a vendor-prefixed extension. You can find a useful tutorial here.

Web fonts blocking page loading

After the deep and thorough studies by Steve Souders on web fonts, there's surely a lot of concern among web developers about web fonts and their impact on page performance. However, such a concern should not be taken too seriously, because the interesting results reported by Steve concern only web fonts included via the CSS @font-face rule. In short, Steve found out that this kind of font embedding creates a peculiar effect on web pages: fonts are first rendered without the specified web font and only later the font is completely loaded. This actually slows down page loading.

jQuery: RSS reader

Fetching a remote RSS feed with jQuery is one of the most frequently asked questions in a million. jQuery can't handle a remote feed by itself due to the same-domain policies of the AJAX standard. For that reason, we need a server-side script which accepts two parameters, namely the absolute URL of the feed and the number of items you want to display. In our example we'll use PHP, obviously after making sure that the passed URL is a valid URL and that we're actually dealing with an RSS feed. Here's the script:

PHP: cross-platform email validation

An important part of email validation is to check if an host is alive or not. On a Unix platform this can be easily achieved with the PHP's getmxrr() function. Unfortunately, this function is not available on Windows. For that reason, I ran an extensive search on the web to find a script that performs this task in a cross-platform fashion and I found the following script by Setec Astronomy (released under the GPL license):

jQuery Facebook Social Plugin on Bitbucket

My jQuery Facebook Social Plugin has been successfully uploaded on Bitbucket a couple of minutes ago, after a series of goofy attempts to use Mercurial in the right way. There's nothing new in this version except for the fact that I've followed the jQuery plugin writing conventions very strictly, resulting in a file size of less that 2Kb. Now you can follow the project more easily, because every change I make to the files will be automatically detected by Mercurial and what you will see is what I'm currently doing. Enjoy! smile

Project Page

Main Page

Installing Mercurial on Mac OS X

Installing Mercurial on Mac OS X requires only a few steps. After you've downloaded the right Mercurial package for your system, unzipped it and ran the installer (.pkg), you have a command line tool installed in your shell (Terminal). Mercurial requires that you start a new project to run the first time. First, you need to get your username and password from the site running Mercurial (in my case is BitBucket). Then you can follow these steps.

PHP: Zend framework and include path

Using the Zend framework implies a radical change in the way we usually handle the file structure of our projects. In fact, the Zend framework is based on a strict separation between the core application files and your front-end files, where front-end files means the files that will be served to web browsers. In older versions of PHP web applications, that is, prior to Zend and the MVC design pattern, the file hierarchy was basically contained within the document root of your web server. Supposing that your document root is called public_html, then the old hierarchy was something like the following:

PHP: a DOMNodeList is not an array

Most developers who start using the PHP's DOM extension sometimes get confused by the concept of DOMNodeList. In the DOM terminology, a node list is an ordered collection of nodes which has a length and an item property. The former returns the number of elements contained within the node list, while the latter accepts an integer as its value (starting from 0) by which you can access a given node within that list. The DOM specifications (created by the W3C) state that a node list is actually an interface, not an array. PHP implements this component as a class (object), not as an array (thus following the DOM specifications).

PHP: image gallery widget

When I created this widget, which automatically generates an image gallery from a given path, I was thinking about a possible integration with Wordpress because the public method GalleryWidget::outputGallery() returns a string representation of the HTML contents of the gallery. It's a small, lightweight class that you can also include in your template system with a minimum effort. It uses regular expressions to match all the most popular image extensions, including JPEG, GIF and PNG. Anyway, if anyone knows a way to include it in Wordpress, please let me know. In the meantime, feel free to test it and suggest every possible improvement.


ZIP file

jQuery: Chili syntax highlighter

Chili is a powerful syntax highlighter based on jQuery which supports a wide range of languages, including HTML, CSS, JavaScript, PHP (even with all of its built-in functions) and many others. Chili is designed to run with a single, unobtrusive jQuery declaration that you can insert when the DOM has finished loading using the ready() event (or one of its shortcuts). As with many other syntax highlighters, Chili is made up of a core file and several language files (called recipes). You can even insert all the language files in one file using the recipes.js JavaScript file included in the download.

JavaScript: the Zepto framework

Zepto is a lightweight and powerful JavaScript framework created to handle all the aspects of the mobile development for Webkit-based browsers (Safari, Chrome and related browsers). Zepto uses almost the same syntax and language features of jQuery, which makes this framework very easy to be integrated with other libraries (jQuery above all). Zepto is able to handle AJAX, selectors, touch events, animations, effects and browser detection plus all other features which are typical in a mobile environment.

CSS: Facebook layout

Recreating the basic Facebook layout from scratch with CSS is surely one of the most interesting style exercises that you can try to refine your CSS skills. There's nothing really difficult with this, except that the final result must be a fluid layout with percentages. The only thing that still doesn't convince me is the fact that for certain elements we have to specify heights in pixels, which is bad when a user decides to change the base font size.

jQuery: AJAX image slideshow

In this post I'm going to show you how to create an image slideshow where all the images are fetched via AJAX. To accomplish this, we'll create a PHP script that loops through all the images of a directory, stores them into an array, sorts this array by date and finally returns a JSON object. If you're not accustomed to PHP programming, don't worry: it's sufficient to say that the main work is done by the json_encode() function combined with the appropriate HTTP header (here set to application/json) and that the PHP script must be put in the same directory of your images. Said that, here's the core of our slideshow:

jQuery: sticky blog dates

In this post I'm going to show how to create sticky blog dates using jQuery and CSS. CSS will be used to display our dates in the correct position, while jQuery will provide the basic date formatting. My source of inspiration for this post is the Wordpress Lightword theme, though I made some minor changes to the date formatting. As always, let's start with our markup structure:

jQuery: plugin documentation best practices

One of the most frequent reasons of failure for a jQuery plugin (and also one of the most frequent causes of frustration for users) is when a plugin is poorly documented. It doesn't matter if the plugin in question is stunning and a real masterpiece of the finest jQuery coding ever seen because what users need is to understand how a given plugin works and how they can configure it to make it suit their needs. The first thing to bear in mind while writing your plugin documentation is to provide all the information that a user may need. Explaining the basic configuration options of your plugin is not writing a documentation, but simply provide the minimum information required. Of course this is not enough, because users usually need more. I know that because I made this mistake myself.