Unfortunately that kind of effect is currently only achievable with Safari and Chrome, so to make this thing work I needed a normal hover behavior for other browsers, and that is what I wanted to show you how to do here.

Setup

I’m not going to be talking about how to do the flip effect, there is already several posts about that. What I will show you is how to use it intelligently and make it fallback.

So, why this effect is not working on Firefox you might ask? Firefox had css3d since version 3.5 after all, well webkit implemented a new property, *currently a w3c draft* called backface-visibility. This nifty property allow you to hide the back face of an element. I guess you can imagine and this can come handy in a flip effect. This is something that IE9 and Firefox does not currently support.

Creating a version compatible with other browsers

For achieving this, we will need to use 2 absolute positioned elements, and show and hide them with display:none on the hover state, pretty easy in fact. The tricky part is that we also need to override this behavior on webkit based browsers(and maybe other browsers one day). For this, we will need to use a nice css feature called media queries.

Media queries

Yup, you can do conditionals statement in CSS. This is really handy if you want to implement edgy stuff on browser that supports it, and still give a nice level of support for older browsers (it’s, of course, useful for other very important things). For our little project we will use this media query.

So why use -webkit-min-device-pixel-ratio? Well because this property has been added at the same time that backface-visibility. So yes, this is a hack! But it works, I would like to have something cleaner but this will do for now, we will also need use something similar when firefox will implement backface-visibility.

So what our CSS code looks like?

Download

There we have it! As usual the code can be found on github.

Download the source code

Of course, we should always strive to make an application as bug free as possible, but users seems to always find a way to break it. You can always expect them to do something you never have think of, and this is one of the reason I created this plugin.

When a javascript error is detected, this plugin will do an ajax request to your server and then sends an email, of course you could also log it in a database. It’s certainly not a revolutionary idea, but still, I was finding the idea cool enough to add it to my list of online plugin.

It’s also very useful for debugging big live applications that you have not written. In which case you want to know if some users hit javascript errors already.

Download the source code

Integration

Load the plugin just after the jQuery library

Your done.

Options

By default the plugin automatically fetch the domain and add it to the email subject, but you can overwrite it.
You can also define a from attribute, I would highly recommend that you change the from setting in the plugin file (jquery.onerror.js) if your going to use this plugin on multiple websites.

The Email

The email received will look like this:

A javascript error has been detected on www.position-absolute.com

Error: variable is not defined
Url: http://www.position-absolute.com/creation/onerror/
Line: 21
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

Limitation

The plugin works on:
Firefox 3.6+
Chrome Latest
IE 7+

It does not work on Safari (but it will not break your application)

I will be updating the documentation today, but the most up to date doc will always be the readme on github. The legacy 1.7 documentation and download can be found under package when you hit download on github

Time to stop squeezing ketchup (inside joke) and hail to the beast.

Most of you guys are probably aware that some frameworks have popped up to fill this blank, like the excellent javascriptMVC (a jQuery MVC framework), another good example would be backbone.js. I really like what javascriptMVC has to offer, it’s really a professional offering with all the bells and whistles. But It is actually kind of too much for me. There is a lot of features in jMVC and on a daily basis I really don’t need them all. jMVC is pretty big and understanding all the underlying mechanics would also be a bit too long for me.

Introducing stackJS, or how to take your code one step further

Generally your back-end framework control the javascript and css files loading. With stackJS, all dependencies are controlled by javascript configurations files, both globally and per modules. In your HTML file you only include the stackJS file and you define by parameters which module you want to load. I am also working at a version that use sammy.js as a router for loading modules.

stackJS is loosely based on Nicholas Zakas proposed architecture. Here the features stackJS attempt to fill :

• Javascript module loader & dependencies
• Move DOM focused code to functionality focused code
• Better Code organization
• Handles plugin dependencies globally and per module separately
• Stop module accessing other modules (loose couple them (pub/sub yay!))
• Library agnostic

What it look like on paper

requireJS

The dependencies are handled by requireJS in stackJS, this make for a nice opportunity. With the framework is bundled the optimization tool of requireJS. Which make it pretty easy to optimize all your js files in a production folder and only change a variable in stackJS configuration to access the optimized version on your live server.

Beta…

This is still in beta, but I am currently integrating it in a production project and hope to release a 1.0 version in 1 month or 2.

You can see an example below, I also linked a download link, it include the full documentation in the readme.md. Obviously choosing between a solution like JavascriptMVC and stackJS is a no brainer (take jMVC), but if your looking to evolve the way you do jQuery a bit, I suggest you take a peak at stackJS, it’s only about 300 lines of code and if your looking to build a framework yourself, that could be a good starting point, or at least inspire you a bit.

Download the source code View demo

Symfony plugin

I am currently for working on a symfony helper for loading modules, I will bundle it with the project once it’s finished.

Most PHP frameworks and JS widget libraries can now be easily customized as far as localization is concerned. However your bound to have some string messages in your javascript modules. Not thinking about the localization of these little pesky messages leads to painful hours of looking through every files to find some strings that have not been localized.

Consolidating your localization architecture

Okay your widget has 2 or 3 files, each for one language, that’s a start, but why not centralized all that on the front-end? The idea here is to create one one or multiple objects, that will handle all the localization for your application.

Meaning that in your javascript application code, instead of actually writing down the localization, you will be doing a look up using a function to a single object that will be containing every language localization for this string. That also means that you need to set a variable with the current language your app is in.

Let’s try to be a little bit clearer

Here is what we are going to do.

1. First we need a way of knowing your current language state. It could be a javascript variable outputted form your framework or an attribute on your body tag, that you will store in js, for exmaple:

of simply

2. Create a JSON object (or multiple) with all your languages translations

The idea here is to use the current language and fallback to english if some strings are missing. So a good idea could be to separate the object in separate files per language and only load the english localization and the _insert current language_.

3. A central function that will route all messages to the current language state.

This part is little bit more complicated but, the idea is that when you need a string, your going to call the function like this : tools.getLocalisation(globalTraductions[currentLanguage], ['validation', 'required'])

For example, this would look in your object for globalTraductions.en.validation.required node. The way getLocalisation is written, if the string is not found, it’s going to default to the “default language” (currently English), and if this is still undefined, it’s going to actually output the object lookup (in this case: validation required)

Download the source code View demo

That’s it

Following this pattern you never create javascript error with undefined properties, and it can also default to English or to a, somewhat, understandable state. Hope it can help you guys get your localizations going!

A namespace to rule them all

This is a small javascript framework that I use for starting my javascript/jQuery project. I think it could be most beneficial for those coming from libraries like jQuery. Dojo being quite expressive on how to work with it, and Mootools and Prototype being a bit more structured.

A small note, I used jQuery in the framework because of the AOP plugin (and because I mainly work with jQuery), you can erase any jQuery reference easily in less than 30 seconds .

What this framework aims to do:

• Easy to understand
• Modular
• Each module will heritage a set of tools and each module can be instantiate
• One namespace
• Can apply tests or unit test out side of the application itself.
• Use the jQuery aop plugin (aspect oriented programming) to add logs to internal functions

Download the source code

** I am not an expert in javascript design patterns, but that is what I have come to in light of my experience, I will certainly take constructive comments, and if you like it, please use and modify it as you want.

Schema

Download the full version in pdf

How it works

LABjs to load all your scripts
First thing first, in app.html you will see that JS files are loaded asynchronously from the bottom body tag with LABjs. This tools will make you js files load faster and your script will no longer block page resources download (images, etc). You can use .wait() to define load order if necessary. Have a look at the documentation. The major drawback from loading asynchronously is that you might have a situation where someone clicked on a button and the script associate with it might not be loaded.

Namespace
I try to use only one or 2 namespaces for all my applications or even websites. This is why in objectUtils.construct.js you will see that the global namespace is define by this line:

Each module will be declared using this object. So for example, a lightbox class would be declared this way : ApplicationNamespace.lightboxClass = function(){}

Modules

A typical module in your app should look likes this:

We have a pretty cool module here. Let’s get a bit into details here.

This is a private function that will not be available in the global scope. These method cannot also be tested externally, unless doing a small trick that I will talk later on.

This is our privileged function that can access private functions and can be accessed outside after we instantiate it by using, in this case : class.privilegedFunction

This will be called after we instanciate (var class = new namespace.Classname()) and automatically launch this init function. You should also note that this might happen before the DOM is ready, if you use jQuery you need the DOM ready wrapper here.

This is where we declare the prototype associate at our module and method shared by every instance of the module.You can have more informations on prototype in my other article.

This is where we get or create the utility module shared by every modules.

And finally we instantiate the module. There is probably a lot of modules that you might have to instantiate only one time.

Modules utilities object

The utility object is shared across every modules. the definition is done in objectUtils.construct.js.

This is notably important if you want to run some unit test or run some debug from outside your modules. One thing I really like to do,is using the jQuery AOP (Aspect oriented) plugin. This will allow you to bind debug methods to any functions in any modules, it also give you the DOM caller if it exist and it’s context. Here is an example:

As you can see the object is created even if live is false (in production you might want to enable and disable it often), normally this file should not be loaded when the project goes live.

Unit Tests

I really wanted to include QUnit as a part of my work flow, unfortunately, you can’t load QUnit dynamically for now. I really want my unit tests to be in a small lightbox and decide to load it in my app from a small variable state. I will probably create a really small unit test plugin in the near future, I think this is really important to test regressions.

That’s it, here it is

I am certainly not going to say this is a perfect solution, but that’s what I use for now, it will certainly evolve with time.

Download the source code View demo

Version 0.5 Online

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!

However, one thing I found it was missing, was some database api. In webkit you now have access to one database per website address. Think of it as a better cookie. You could for example easily create a To do list with this feature.

Webkit is touchy about its database

You don’t mess with the webkit database, if you do, there is a good chance it will crash. Building this script, I never saw so much crash in Safari! so be careful using it. This script creates an abstraction of the webkit database api, it will enable you to write faster and less bloated code. It makes it really easy to play with the database, look at the demo, the HTML5 database section is all loaded from the webkit database.

View demo
(The Demo works only on Safari and webkit devices)

It can really be beneficial performance wise to use the database as a cache, this loads a lot faster than ajax web page, but you need to be careful on how much information you load from it. The iPhone is not a power house, you will need to find a balance. Also, used with the offline mode, you can really create powerful app that can be used offline.

Update: Apple is also doing database cache with the iPhone web user guide, interestingly enough they cache 1.4mb, the entire guide in the database in one shot. I personally did not see great performance when adding thousands of rows in the database, I am currently looking at how the pastry kit deal with the database executions. A good solution would be to create the database on the web application loading screen(when the application is added at the home screen).

How to use it

In fact what you see in the demo runs with basically 7 lines of code. Here a typical use of the extension:

The API

Open database

jQT.dbOpen(“name”, “version”,”descriptione”, size);
This function is needed on every page where you use the webkit database, be careful with version and size. Set a bigger size that you think you need, trying to add space later could prompt users permission. Example:
jQT.dbOpen(“databaseTest”, “1.0″,”jqTouch web application database”, 200000);

Create Tables

jQT.dbCreateTables(json)
You would use this typically to create the basic structure of your database, I would store it in another file called dbstructure.js, or something like this, a quick reference to go to when you need to change something in the structure. It can also be used to simply add a table at a selected time.
An example of the json structure to follow:

Create Rows

jQT.dbInsertRows(json)
You would use this typically to add rows in your table.
An example of the json structure to follow:

Delete table

jQT.dbDropTable(“table”)
Delete a table with all its information

Basic Delete Row

jQT.dbDeleteRow(“table”,”key”,”value”)
Delete a row following the statement WHERE KEY = VALUE. An example : jQT.dbDeleteRow(“listRecipe”,”id”,”‘5′”)

Get all the content from a table

jQT.dbSelectAll(“table”, callback(result))
Get all the information from a specific table. An Example:

Custom query

jQT.dbExecuteQuery(“Query”,”Debug text”, callback(result))
You can create your custom query and get a callback with the result. you will probably not need the debug text. Example:

Debug mode

I added a debug mode that you can enable in the extension, change the variable debugging to true. It will add an overlay and tell you about every query executed in the script.

Still in a early stage

I consider this release as beta v0.1. It works pretty well for what it does, but it’s not optimized and it’s not thoroughly tested, so be careful and have fun.

Download the source code View demo

Tested on:
Safari 4
Iphone webkit

Version 0.1 Online
December 22, Initial release

Let’s take a look at front-enders’ typical relationship within a production team: (take it lightly)

First, you got designers that, generally, do not really like front-end developers because they do not render exactly there graphic design, and you got front-enders that “hate” designers because they are doing complicated design, costing too much money and time to render to HTML.

Back-end developers also have a general tendency to be a bit careless with HTML, which, not visible at first sight, can cause trouble on older browsers and pass without no one seeing it on live versions. Improving this type of team relationships should be a priority.

Now that you have taken these relationships within your team in consideration, you have to know that every front-ender has a way of doing CSS a bit differently. Many ways of doing the same thing can be good in CSS. But somewhere in the middle, a team needs interoperability, everyone needs to be comfortable with the CSS and Javascript of the others. This is one of the main reason I launched my own “CSS Framework“.

My workflow

Assigning a lead front-end developer by project was a tough choice, but was inevitable. You need someone to refer to with a strong knowledge of the project and who can fix things easily. As he makes the main template, most of the CSS is based on his style of coding and he is clearly the man for the job if something turns bad. He is lead on the project but not necessary the lead front-end of the team.

Another nice thing here, there is actually someone in charge! You know how it goes in a project. Front-enders come and go, but even if one lead is not really doing any work on the project, he needs to take a look time-to-time to be sure the front-end code quality is matching his expectation.

Having the designer look at the first templates will also save you 90% of the problems a designer can cause looking at a final product. This can be disastrous if no validation is done before transforming the HTML template to the CMS..

Don’t be afraid to add your touch and present this to your boss. You will probably save time, and your boss’ money, and a boss really likes to save money.

What about you?

You’re doing this work yourself? Want to share your way? Send me your work flow with some explications and I will put it on this page, editorial [at] position-absolute.com.

Why use a CSS framework

Better quality and coherence coding inside a front-end team
Preset CSS classes, know where your going with highly reusable classes
A collection of some of the best jquery scripts
A solid cross browser compatible stylesheet

A new project means getting JS plug-ins together, clean a CSS and restart. This framework is intended to be your project starter, and in most case, you can jump in the project right away with a solid css foundation. This is not really a CSS “framework” but more a website starter kit.

The framework is based on a 960px grid, but is very easy to manipulate to get the grid you want. It is however not intended to be used as a liquid grid.

Download the source code View demo

It includes:

A basic tree folder, with good practice implemented
A valid XHTML template with basic website foundation and a small demo of every plug-ins implemented.
A Basic CSS style, using a reset style, and a import for elements like form design.

It also includes jQuery with most frequently used plug-ins
jquey.cookie.js // Cookie simplified
jquey.easing.js // Make your animations more pro, without the high KB cost of jquery UI
jquery.validationEngine.js // Beautiful form validation
jquery.linkFader.js // Make your CSS sprite fade, implemented on the Nav framework
jquery.tooltip.js // Nice elastic tooltip
jquery.colorbox.js // A nice lightbox.

Why jQuery and those plug-ins?

jQuery is probably the most common JS library right now, it is easy to use, easy to understand and can help you save a lot of time. The plug-in core implemented are mature (which means they have been implemented in a lot of website easily) and have a high level of re-usability, that said you can add or delete the ones you don’t want. Remember that while all these plug-ins are there, there is absolutely no obligation to link them in your web site, you can just let them sit there until you need them.

One problem with JS plug-ins is the bad repartition of images and CSS involved with them. In this framework, every images and CSS stay in there plug-in folder, and every plug-ins you will add needs to follow this rule! It gives you a less bloated CSS and images folder, which will hold only website items.

CSS practices

The framework heavily promotes indentation, remember that C in CSS means cascading. It also promotes the use of CSS sprite in general and especially for your navigation, if you look at the implemented template, the navigation use CSS sprite with the linkfader script, which gives it a nice hovering fade animation (add the class linkFader to your link and your done)!

The framework use the CSS functionality @import to link other stylesheet inside global.css. This gives you a great way to link to different style sheets for special purposes. Currently, it imports a reset, external links and basic form style sheets. I do not recommend importing to much style sheets, keep it simple.

The print CSS is basic, it deletes everything but the #contentSection, and add the print logo. In a general way, printing the entire website looks bad, printing the text content makes it nicer to read.

Hey! font-size are not in em!

While em give a great power over the way font-size are displayed on a website, it has some downsides. First, it is harder to manipulate, em is unfortunately not relative to the body, but to it’s parent. You basically need a reference to know which size to apply when relative em’s collide. It makes it harder to maintain, you could change a parent font-size without knowing that a children on another page will be affected.

All modern browser can resize px font-size, only IE6 can’t and I would argue that only a small fraction of it’s user base know and use this tool

I know that em is a good practice. I certainly don’t want to start a crusade against it, but I just find it unpractical, especially when working with a team, 1 pixel difference for a title can make a designer scream. So if I can avoid it, I will.

HTML practices

While this template validates strict Doctype, you are welcome to move back to transitional doctype any time you want. You can’t control user input content, and this will probably make your template invalid. Keep it clean and indented, the use of HTML comments is not recommended as there is sometimes quirks with IE6 (It sometimes add spaces, which is pretty bad).

Javascript practices

Please put all your javascript code, related to a specific website, in common.js. The framework has some light examples in the demo page, also there is some basic jQuery events in common.js, to make it easier to remember the syntax.

Download the source code View demo

Tested on:
Internet Exploder 6 & 7
Firefox 3+
Safari 4

Version 1.0.1 online
1.0.1: Small fixes, removes JS includes, added new clearfix method

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!

Real time ?

This way I do not alienate frequent users with tweets pop-up. When you click on the appearing tweet box, it redirects you to my Twitter account.This is only a small JavaScript plug-in, so it unfortunately resorts to intervals, after 10 seconds it does an API call, after it happens every 30 seconds. By this time if I tweet something, it will appear to everyone on the site.

This may not seem much, but over time I think it may pay off.

One thing you must remember is that you can only call a maximum of 150 times per hour per person (a twitter limitation). For this reason, and for convenience, an interval of 30 seconds is necessary, more than that was a tad aggressive and this way you will never go over the limit. Also the demo is not linked to any Twitter account and faking the actual result.The downloadable version, however, is the same version used on this site.

View demo

Now how it works

Receiving your last tweet is really quite simple you call a JavaScript from Twitter like this:

Hop, you got a callback, which is in fact a JavaScript function with a JSON of your last tweet as parameter. Of course you only receive one tweet because of the &count=1. Now you want to call the Twitter API at a frequent interval, the response will automatically call the function twitterCallback2() each time:

Getting your tweet from JSON is quite simple, tweet[0].text. As you can see, you can also get all sorts of cool informations.

The rest is a bit of jQuery and some CSS ( CSS included in js for convenience).

Add the last jQuery version and jquery.tweetInterval.js to your website, change the Twitter account, tweetInterval(“twitterName”), and you got your tweets pop-up working automatically on your website.

Download the source code View demo

Tested on:
Firefox 3+
Internet Exploder 7
Safari 4
Limited support on IE6 (You will need to do some CSS tweak)

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!