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.

Advanced JQuery

View more presentations from Francesca1980

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:

CSS: jump effect on icons

To create a nice jump effect on icons with CSS, all you have to do is to change the vertical value of the background-position property when a user hovers an icon with the mouse. The important thing to bear in mind is to use links target elements with the proper background image. First, let's start with our markup:

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.

CSS: modify a Wordpress theme

It's rare to find a Wordpress theme that doesn't need to be modified. Sometimes the required changes are so radical that it's almost impossible to keep the original theme intact. In this post I'll describe some approaches you can follow to accomplish this task.

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.

jQuery: Flash loader

In this post I will show you how to create a simple Flash loader with jQuery. As you will see, everything is performed by a simple JavaScript timer with a progressively incremented counter. The remaining part of our example is made up of our CSS styles. Let's start with our CSS styles first:

jQuery: bouncing menu

In this post I will show you how to create a nice bouncing effect on the items of a navigation menu. To accomplish this, we'll use the Easing jQuery plugin and its easeOutBounce value. To start with, let's take a look at our basic markup:

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: basic MySQL database class

Before digging into the details of PHP design patterns (including the Singleton pattern), I used to define my database classes as abstract to avoid instantiation. This is a rough solution and it's not really suitable for a MVC environment. However, in this post I'm going to show you a really basic implementation of a basic class that uses a MySQL database.

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: selectors tutorial

This tutorial on jQuery selectors is made up of two parts: the first one is a visual introduction to jQuery selectors using a YouTube video tutorial by ThinkVitamin. The second part, instead, is a more in depth analysis of how jQuery selectors actually work. If you're ready, we can get started.

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.

jQuery: plugin structure

To write efficient jQuery plugins, one must first understand how a jQuery plugin is structured. In this post I'll outline the structure of a jQuery plugin, namely Easy Slider, to help you understand how a standard jQuery plugin is internally organized.

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:

jQuery: create a slider plugin

In this post I'll show you how to create a jQuery automatic content slider plugin from scratch. Is it difficult? Absolutely not! All the work is done by simply calculations of widths and heights and by an internal JavaScript timer. Let's see how we can fulfill this task. First of all, let's start with our basic markup:

jQuery: image album

Creating an image album with jQuery is easy if you have the right plugin. In this post I'm going to show you how to create an image album using the Booklet plugin. As you will see, the most difficult part of this is only the setup.

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

jQuery UI image slideshow

Creating an image slideshow with jQuery UI is easy, because this framework provides the slider() component which handles everything automatically. In this post I'm going to show you how to accomplish this using the aforementioned jQuery UI component. As always, let's start with our basic markup first.

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.

Download

ZIP file

jQuery: shuffled content slider

We can create a jQuery content slider with a shuffle effect using the Cycle plugin. The incredible thing of this content slider is that Cycle handles everything with a single declaration, confirming this plugin as one of the most versatile in the jQuery world. First, our basic markup:

jQuery: a slideshow with ColorBox

Creating an image slideshow with the jQuery ColorBox plugin is incredibly simple. All you need to do is to make some preparatory work on your pages by referencing the main plugin file and its dependencies. Let's see how.

jQuery: inspecting elements

jQuery can be actually used to inspect the HTML content of a given element by turning its HTML string representation into a jQuery object containing, in turn, other object elements. To accomplish this, I've written a simple plugin that uses the html() method to fulfill this task:

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.

CSS: styling blog contents

In this post I'm going to show you a brief overview of the most used CSS techniques for styling blog contents. Either if you're a web developer or a normal CSS user who simply wants to create his/her blog from scratch, I hope you'll find these techniques useful. Let's get started.

jQuery: Facebook tooltip menu

In this post I will show you how to create a Facebook-like tooltip menu with the aid of CSS and the jQuery Tipsy plugin. As you will see, the jQuery code required to accomplish this task is very few when compared to the length of the CSS code used to lay out our menu. As always, let's start with our markup first.

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.