Creating a CSS3D hovering state with fallback for older browsers

HTML5 & CSS3 are a big sugar rush in the front-end community currently, you can see those nice CSS3 buttons popping everywhere around the web. For one project I am working on I wanted to use a nice 3d flip effect like this one.

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.

.containerCard {
height:194px;
position:relative;
background:#fff;
width:144px;
}
.containerCard .element{
height:194px;
position:absolute;
top:0; left:0;
background:#fff;
width:144px;
} .containerCard .elementB{
display:none;
} .containerCard:hover .elementA {
display:none;
} .containerCard:hover .elementB{
display:block;
} @media screen and (-webkit-min-device-pixel-ratio:0) {
.containerCard .elementB{
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility:…

Handling javascript errors on production websites

Handling javascript errors as always been sort of a problem for me. Testing every combination possible in a big application is hard, and there is always a chance you will miss something.

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…

Form validation engine 2.0 is live

As said previously a rewrite of the validation engine has been in the work for sometimes and today it is finally live, the API changed a lot, might be a good idea to have a look at the new documentation if you are upgrading.

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.

stackJS, a javascript module loader and dependencies handler

Writing good and maintainable javascript is hard, especially when your first javascript framework was jQuery. Couples of years ago, you could be ok using document.ready for implementing your minimal features. Now not so much, web application use more and more javascript, and there comes a time where using anonymous functions with a ton of events is just not enough. jQuery is pretty good at handling everything cross-browser, but is does nothing to help you implement a clean architecture and rectifying that is the basic idea behind stackJS.

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…

Managing string localization in javascript files

One thing that is really frustrating to deal with is localization. There is nothing funny about localizing text from your application. But this is a necessary step when you want to go for very a broad market in multiple languages. So while your there, why not having a localization infrastructure in all your front-end.

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…

A javascript module framework starter

This is the following article to part 1 on javascript patterns.

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…

jQTouch HTML5 database api extension

If you want to dive in mobile website and you are a good jQuery developer, you will love jQTouch. It’s one of the best mobile web framework out there.

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…

Best front-end workflow within a production team

Optimizing front-end teams’ workflow is hard, there is always something that comes in the way, but it is important to at least try to optimize the front-end work. It could save your team considerable time over a project. Front-enders could work more efficiently together and within the production team.

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…

posAbsolute CSS Framework, website starter kit

Web development companies have a bad habit of doing inconsistent websites depending on which developer coded the website. It is one of the reason we have so much back-end framework. However front-end teams are a bit more in the dark. While there is basic guidelines for CSS and JS, there is generally less management by team leaders. It becomes a big gray zone where inconsistencies often become the norm. This is what this framework aims for, empowering your front-end developers with a tool to make their JS and CSS code more coherent.

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…

Display your tweets in real time, a basic twitter API use.

Recently I began optimizing social networking on Position Absolute, which lead me to the Twitter API. I wanted to display tweets in the top corner of the site. However I did not want to display my last tweet, but display my tweeting in real time.

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…