How to style select, radio & checkbox form elements only with css

by Cedric Dugas on July 4, 2013

Form elements have always been a problem for designers, they are ugly as fuck and never match a website or app style. In an earlier age javascript plugins popped up to solve this problem, at the expense of creating new problems. First let me make a case about not using js in this situation and then I will show you how you can very effectively style form elements with css while progressively enhancing & using the default style for older browsers like ie7.

You can skip ahead to the form element styling if you don’t want the rant about not using javascript.

Why not replacing native implementation by your own with javascript

The behaviour

Making a javascript plugin that make a select element behave exactly like the native one is…

Continue reading

backbone-generate scaffolding plugin becomes better, evolving into Grunt-generate

by admin on May 26, 2013

3 months ago I open sourced bb_generate, a grunt plugin that scaffold files for backbone.js, the idea was to have an easier solution than yeoman to generate a custom scaffolding solution for specific projects.

It seems I was not the only one thinking about having an easier solution. Camille Reynders thought the same thing and decided to take my project and push it one step further. That iteration is called grunt-generate.

It got the same awesome stuff that bb_generate had plus a few nice goodies, like passing your paths configuration. There is also now only one folder for all backbone template files, meaning adding another framework is trivial.

All round that’s just a superior solution and if you are into scaffolding, love grunt, and are not quite sure about yeoman,…

Continue reading

The weird state of mobile web apps

by Cedric Dugas on May 12, 2013

There are countless of articles debating going native or HTML5 for your next mobile app. But with Linkedin recently deciding to going back to native I am really starting to ask myself if HTML5 is still part of the equation for mobile apps at the current moment. Let’s look at a small retrospective & see what conclusions we can extract of the mobile web current state.

Linkedin reverting to native app = broken heart

Linkedin had one of the most polish html5 iPad app in the market but they recently decided to kill it off after countless of articles describing HTML5 as a viable solution for mobile. What triggered that 180 on their position? Well contrary to popular believes (that all html5 apps are slow), it’s not…

Continue reading

iPresent, mobile mockups presenter

by admin on May 5, 2013

At CakeMail we are ramping up our mobile effort with a new mobile web app, recently we hit a milestone & completed most of the interface design. It got me wondering what could be the best way to get my coworkers to experience on their phone what this was going to be all about.

Turns out, about 3 years ago I asked myself the same question. How can I effectively present mockups for mobile beside just trowing them in basecamp or powerpoint. So I prototyped a project to do just that using jQtouch.

A video will probably explain better than words what this is all about, see below.

A live example helps too (better experienced on a phone). CakeMail let me use our first design iteration for the demo, so you have…

Continue reading

jQuery Engage, a plugin taking a stab at better engaging blog readers

by Cedric Dugas on March 18, 2013

Optimizing user interactions is a never ending quest in software development. Fortunately in our time and age innovative ideas are rapidly incorporated and improved by other developers.

In that mindset I present today jQuery Engage, a plugin that helps you optimize user interaction with blogs & articles. This plugin adds a social toolbar when the reader finishes reading an article. This toolbar contains customizable zones (comments, subscribe newsletter & share social) that help better convert your readers.

You can test the plugin by scrolling down this page! There is currently 3 content zones on this page. That’s a bit crowded and create quite a lot of noise but that’s customizable and you can have 2 zones instead if you like that better.

The idea

One of the first to…

Continue reading

Data mining user behaviors in web apps

by Cedric Dugas on March 6, 2013

tl;dr I got a jquery plugin that track agitated user behaviors.

Do you currently track user behaviours? Most people would say yes, if you have google analytics installed you do track behaviors, at least a form of it. But do you do the extra mile to understand your users? That’s a question that could be really interesting to ask to a room full of product owners.

Let’s take an example of a behavior that most people do not track: a user that made the extra mile and finished reading an article. GA track how much time a user passes on a page, but we never track how much of our users really finish reading articles. Can you do something interesting with that information? Well let’s check what…

Continue reading

Scaffolding backbone.js generators with grunt.js

by Cedric Dugas on February 27, 2013

Following my encounter with yeoman, I wanted to see if I could easily create my own generators with Grunt. Not because yeoman ones were bads, they are in fact pretty good, but I just do not work exactly like Yeoman wants me too.

Another thing is that I wanted easily modifiable generators that could be used in any projects, not just with backbone.

While it’s not really hard to create that kind of functionality with Grunt once you know your way, i”m still pretty new to this and it was my first try at creating a plugin with “advanced” tasks. Still, I am happy to present my last project: grunt-bb-generate.

The idea behind this project is, yes, to provide backbone generators, but my real goal with…

Continue reading

Yeoman and friends

by Cedric Dugas on February 26, 2013

Isn’t it every developer dream to have his own command line & scaffolding tool? Do we really save time by creating and using those? I’m not quite sure but I certainly feel fancy when I use them.

Enter Yeoman, a tool that streamline your front-end development. or so it seems.

Frankly while I now “get” grunt.js and bower, I’m not sure I completely get Yeoman. The idea behind yeoman is to give you the best boilerplate possible to get started with your app development. In some way, yeoman is awesome, from the get go you get a css preprocessor compiler, js compiler, folder watchers, test server and much much more.

But that just how grunt work (pure awesomeness), that’s just one gruntFile.js that you can steal, integrate and…

Continue reading

Death to monolithic libraries

by Cedric Dugas on February 7, 2013

If you write code for the web you have dealt with them, gigantic libraries that does everything for you in one nice package. I’m not talking about utilities libs & frameworks like jQuery and backbone. I’m talking about Lightboxes, sliders, form validators, file uploaders, wysiwygs, and etc. They offer you tons of features, a big code base, a big following and well, they generally come with a ton of bugs too.

I find myself guilty of writing one of those too, my validation engine got from 400 to 2000+ LOC in 3 years. Adding features, one by one, it has becomes overweight, and it has becomes harder and harder to debug.

A long time ago..

Ask me 4 years ago if you should delve into doing a lightbox…

Continue reading

The jQuery 1.9 & 2.0 upgrade awkwardness

by Cedric Dugas on January 23, 2013

In a recent study it has been said that about 50% of major websites use jQuery. It has become omnipresent and you can actually find job listings that does not list javascript as a skill but list jQuery.

You don’t have to search far to understand why. Using jQuery is the easiest way to add interactions to a website. The api is intuitive, easy to use, the documentation is solid, it works cross-browser & that api very rarely changes.

Or was.

2.0 will be a major rewrite removing support for ie8 and earlier releases, it also removes a bunch of deprecated methods. 1.9 already started the ball removing a lot of stuff in preparation of 2.0, including the live api, and that made a bit of drama.…

Continue reading