Confoo conference

This year I am trying to do a talk at the Confoo conference, basically it’s an introduction course at code organization with jQuery, called jQuery Spaghetti. It’s probably not for most of you guys and I know it has been done in other js conferences, but I feel like Confoo will have quite a bit of ‘hobby’ jQuery devs since it’s really a diverse conference about all web technologies (hoo and it is also in french). Still, if you like the idea and you’re in Montreal, I could use a vote or 2 for my talk. (You can downvote too, any feedback is appreciate!)

Self-publishing a book

Did you know that anyone can wrote a book and self-publish it these days? and I am not talking about doing a pdf, I’m talking about a paperback book available from amazon. This is what lulu.com and createspace.com are offering. It does all the hard work for you (well beside writing the book of course).

It’s quite impressive to upload a pdf and have a paperback available from online stores, and even physical book stores with lulu.

A book on css, really?

Yup, I am writing a book about html and css templating, this has been done 30 times you might say, but I really think the approach I am taking has not been that used. In this book I am not talking about HTML5, CSS3, grids, etc. I am talking about doing templating efficiently on deadlines with a cross-browsers angle.

The book will walk you through 2 examples (a website homepage and an email), and explain you the problems you will encounter along the way. I’m already 80% done with the writing, but doing image assets takes quite a bit of times.

A book looking professional

Obviously if you are authoring a book, you want it to look professional. Unfortunatly most of us are not designers. Fortunately there is a couple of inDesign book template available, I even found one free, and its a really nice book template.

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.

@media screen and (-webkit-min-device-pixel-ratio:0) { }

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?

.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: hidden;
 
				/* -- transition is the magic sauce for animation -- */
				transition: all .4s ease-in-out;
				-moz-transition: all .4s ease-in-out;
				-webkit-transition: all .4s ease-in-out;
			}	
			.containerCard .elementA{
				-webkit-transform: rotateY(0deg);
				-webkit-transform-style: preserve-3d;
				-webkit-backface-visibility: hidden;
 
				/* -- transition is the magic sauce for animation -- */
				transition: all .4s ease-in-out;
				-moz-transition: all .4s ease-in-out;
				-webkit-transition: all .4s ease-in-out;
			}
 
				.containerCard:hover .elementA{
					-webkit-transform: rotateY(180deg);
				}
				.containerCard:hover .elementB{
					-webkit-transform: rotateY(0deg);
				}
				.containerCard{
					-webkit-perspective: 600;
				}
		     	.containerCard:hover .elementA{
					display:block;
				}
				.containerCard .elementB{display:block;}		
		}

Download

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

Download the source code

Now with @font-face we finally got a native way of using custom fonts in our websites. Unfortunately this is not as easy as it should be. This is probably why Google launched recently the Google WebFont Loader and the Google font directory. Two easy way of using @font-face without any trouble, well, less trouble.

The text flickering problem all over again

@font-face suffers of the same illness that its predecessors, until the font file is loaded it will display your text with the fallback font family. When you know that 20px with an hand written font can be a lot smaller than 20px with Arial, this becomes a major problem, you don’t want to see an enormous text until your custom font is loaded.

Google WebFont Loader at the rescue

I will be showing how you can use the google font loader to avoid text flickering and have a good fallback font in case the font file is not loading. You get the best of all world, but it comes with a price of a light javascript hack.

Getting started

Using the basic google font ability is easy (but it is quite a bunch of lines of code), you just embed the font you want!

 <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

As you can see, in this example you just need to change this line google: { families: [ 'Tangerine', 'Cantarell' ] } for the font you want from the Google Font Directory (other fonts are also available like those from typekit.com). There is also quite a bunch of options you can use, have a look at the loader API for more information.

Now this script does one thing interesting, it adds a css class to your document html, it will add wf-loading until the font is loaded, wf-inactive if it can’t load the font, and wf-active when it’s successful. We can use this at our advantage. You can provide a valid CSS fallback that protect yourself from enormous and actually define your fallback font instead of being dependent of the same line-height and font-size.

An example

<head>		
	<script type="text/javascript">
	      WebFontConfig = {
	        google: { families: [ 'Tangerine', 'Reenie Beanie' ] }
	      };
	      (function() {
	        var wf = document.createElement('script');
	        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	        wf.type = 'text/javascript';
	        wf.async = 'true';
	        var s = document.getElementsByTagName('script')[0];
	        s.parentNode.insertBefore(wf, s);
	      })();
	    </script>
 
	      <style type="text/css">
	      p {
	        font-family: arial;
	        font-size:20px;
                line-height:22px;
	      }
	      h1 {
	        font-family: serif;
	        font-size: 22px;
	      }
	      .wf-loading p {
	        visibility:hidden;
	      }
	      .wf-loading h1 {
	        visibility:hidden;
	      }
	      .wf-inactive p, .wf-inactive h1{ visibility:visible;}
 
	      .wf-active p {
	        font-family: 'Tangerine', serif;
	        font-size:33px;
                line-height:26px;
	      }
	      .wf-active h1 {
	        font-family: 'Reenie Beanie', serif;
	        font-size: 33px;
	      }
	    </style>
	</head>
	<body>
		<h1>This is a title with a custom font</h1>
		<p>No text flickering and got the somewhat the same font height in fallback</p>
		<p>View the source to have a look at the code</p>
	</body>

View demo

In this example we can see that we have a very good font-size fallback we use wf-active to set our custom font, and we just do our normal css flow as a fallback.

A flicker you say?

The text still flicker a bit at random times, specially in IE, this is because, wf-loading is added when the javascript file from Google is parsed in the document, and for some reasons (I guess it is a bug), even is we put async false, sometimes the wf-loading class is added to late.

The best way to avoid the flicker behavior is to add a class wf-loading to the html document in javascript ourself, you then add the rule visibility:hidden in css to it, and on .wf-inactive and .wf-active you simply add visibility:visible, the same css rules added in the last example. This way if the font can’t be loaded we will receive the wf-inactive and the text will be displayed.

With this solution your users with javascript disabled will still see your text with your normal fonts.

(This solution has been updated, Thanks to Paul Irish idea in the comments section)

         <script>
	      (function() {
	      	document.getElementsByTagName("html")[0].setAttribute("class","wf-loading")
		//  NEEDED to push the wf-loading class to your head
		document.getElementsByTagName("html")[0].setAttribute("className","wf-loading") 
	      	// for IE...
 
	        var wf = document.createElement('script');
	        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	        wf.type = 'text/javascript';
	        wf.async = 'false';
	        var s = document.getElementsByTagName('script')[0];
	        s.parentNode.insertBefore(wf, s);
	      })();
	    </script>
    <style type="text/css">
	       p {
	        font-family: arial;
	        font-size:20px;
	      }
	      h1 {
	        font-family: serif;
	        font-size: 22px;
 
	      }
	      .wf-loading p {
	        visibility:hidden;
	      }
	      .wf-loading h1 {
	        visibility:hidden;
	      }
	      .wf-inactive p, .wf-inactive h1{ visibility:visible;}
	      .wf-active p {
	        font-family: 'Tangerine', serif;
	        font-size:33px;
	        visibility:visible;
	      }
 
	      .wf-active h1 {
	        font-family: 'Reenie Beanie', serif;
	        font-size: 33px;
	       visibility:visible;
	      }
	    </style>

View demo

That’s it

Hope it will help you guys get your custom fonts working as you want!

Another nice project, cssSandpaper is a js animation framework making the use of CSS3 transform easy.

Check it out, those two are well worth the read.

Silverlight…

I do not see Microsoft go on the offensive, I am pretty sure in fact that it will not implement any ‘Multimedia’ feature like Audio, Video and Canvas any time soon, and certainly not before it is kind of obligated because Youtube, for example, switched to html5. Why? Silverlight… This technology is a competitor to all these technologies. If you are not really into extranet and intranet development, you might not even know what Silverlight is, well it was first introduce as a competitor to Flash (Adobe is certainly laughing themselves to death..). They tried to ship it on big websites as a video player component, now pretty much every site that was using it is back to flash. Too few users was installing it, and from what I saw, the video server was half the time down.

Now Silverlight is more a competitor to Adobe Air, which make sense, seeing no web designer in its right mind would like to work with Silverlight. Anyway coming back on IE, Microsoft never really cared to implement CSS3 and HTML5 like others browser vendors. Don’t get me wrong, they did actually implement some HTML5 features, they are just slow like a turtle shot in one paw. They actually said that they would have liked very much to ship CSS3 border-radius but did not have the time to implement it. I mean, how much time can that actually take to implement that..

The IE team

I could guess wrong there too, but when you think about Gekoo or Webkit, I think about hip young engineers, but the IE team inspires me nothing, I would not be actually surprise that most of the team just do not really care about the impact IE have on internet and on web developers. When you think about it, by the time Microsoft shipped IE8, Webkit was trying to pass the CSS3 acid test. IE8 is compliant css2.1, end of line.

Not just that, all browsers vendors teams are working faster than IE. IE is behind everyone on CSS compliance, HTML compliance and javascript engine speed. I do not have big hope for IE9. Personally I would be very happy if I would get border radius and border-shadow. This is the 2 things that CSS need most right now.

Just my two cents here.

On a mobile device you scroll a window, not the site

When you scroll on a mobile device, you are not really scrolling the site, in fact if you zoom out completely you will see the entire page, you are only scrolling your “window” around the site. When you understand this, your fixed footer dream really shatter, unless you are willing to use complex methods..

iScroll

And there start your quest, on your way you will find iScroll 3.0. This little script create the illusion of a fixed footer, but the performance price is rather high. It emulates scrolling alright, but this is not quite as snappy as the real thing, a big problem if you consider that your users will have a feeling that something is not quite right.

See iScroll in video.

Pastry Kit

You will probably also discover that pastry kit, the Apple Javascript framework for webkit, is doing it quite well. I cannot really comment how Apple is replicating it, they probably use a complex mathematic method to emulate the scrolling. The thing that really sucks with PastryKit is that Apple as not released it officially (not yet anyway), there is no documentation on how to use it, and it seems to be used only internally.

More information on PastryKit.

There is no perfect solution

Personally, I do not see myself implementing these solutions. I, however, stumbled on an interesting solution, make the footer fade out when you scroll, and fade is when you stop. This is not perfect, far from it (it is to wonder why Apple is not implementing something themselves in Webkit..). But I found this was the best solution offered to me.

I am working on a plugin for the jQTouch moible framework, I will probably release it in the weeks to comes.

Basically it enables you to create HTML from CSS snippet. It might not sound powerful at first, but when you start playing with, some wonderful things happen in your head (with no drugs). Let’s look at a simple example, let’s say you want a header with an id and a class followed by a list element. Here what you would do with zen:

div#header.home>ul>li*3

You do Apple-E (CTRL-E in win) and you get:

  <div id="header" class="home">
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>

There is much more about Zen, but this is the basic idea. Personally it replaced my basic HTML and CSS bundle. Now if you are on Windows, you are a bit out of luck, beside some IDE Zen is not available, however there is a Textmate bundle for it. Introducing you to E Text-editor, a port from Textmate on Windows. E is a pretty amazing text editor, and if you know nothing about bundle and textmate, I would suggest do a bit of research with Google. You can also get a free trial on the website.

A small problem with Zen, there is “illegal” characters in the HTML bundle, something Windows really doesn’t like. I however successfully extracted the bundle with 7zip, it’s not going to work with you basic winrar or winzip.

Cool, you got all your bundles now, you could put them in the bundle E folder, but this is not recommended, as reinstalling E will cause an erase of your bundles, it is better to put them in the application directory, usually something like “C:\Documents and Settings\[username]\Application Data\e”

Last thing! One problem you might get is that there is no self closing XHTML “/” with your tag, this is a variable you need to put in your settings -> Environnment : TM_XHTML /

Have fun and be Zen!

Keep it simple

Look at the Twitter registration, it does not ask for the password twice and there is only 6 fields. If you must have more fields then please let them register and ask for it in their profile. Less fields there are, more potential subscribers you get (avoid long form and duplicate if you can). Also please keep them focus on finishing you form, no distraction should interrupt the process.

The New Registration and Login Grammars
“Provide your name, email and password; verify the email; login to the site with username and password until you’re timed out. You know the drill. But a wave of new web apps and protocols is challenging the status quo”

Signing Up to Websites, 1999-2009. A Montage
“Following up The New Registration and Login Grammars, I thought it would be interesting to look at how signup forms have changed over the years.”

Why are we typing passwords twice?
“We are typing passwords twice because of legacy design patterns we forgot to abandon. There is no reason for why everybody should suffer just because a few can’t type their password correctly. I jump confirmation ship!”

Smashing magazine web design pattern
Smashing magazine web design pattern part2
“If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site.”

Help your users

Get tools to help your users complete your form faster with no frustration. Use a good client side validation, code completion and etc.

A list apart article on inline validation
“Web forms aren’t great conversationalists. They ask a bunch of questions, then wait until you answer them all before they respond. So when you register for that cool social network or use an e-commerce site, it’s pretty much a monologue.”

Position Absolute form validation plugin
This validation plugin can validate your fields on the fly, it can even send a inline request to see if a user is available in a DB for example.

Masked Input Plugin
“It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome.”

Stop masking password and the Password Unmasking Plugin
“Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.”

Autocomplete plugin
“Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.”

Installing ruby in some case can be out of the question, however, using a non intrusive php framework works quite better, and this is what xCSS seems to aim for.

And it works pretty well

Installing xCSS is pretty easy, it took me 5 minute to follow the instruction the first time, and the other times were a breeze.

The idea is simple, you put a folder named xcss on top of your css folder. You also add a source folder where you put your working css files. You go in your xCSS config file and a add path to your source file and hop! You are good to go, but this page explains it a lot better.

It instantly creates your CSS file every time you refresh the page, really, you do not feel that’s something is at work here.

What can you do with xCSS

Unfortunately xCSS is pretty young and is not the most complete abstraction framework feature wise. You get the basic variables, nested object and you can extend a class from another class, that’s it.

// Variable in Xcss
vars {
    $path = ../img/tmpl1/png;
    $color1 = #FF00FF;
    $border = border-top: 1px solid $color1;
}
.selector {
    background-image: url($path/head_bg.png);
    background-color: $color1;
    $border;
}

Personally, I do not care for nested objects, this is just not the way I work, however the other features can really extend your way of doing css. This is also where xCSS do things a bit differently, I really meant extending a class earlier. In xCSS you do some kind of oriented object CSS, basically, if you want to add all the properties from a class to another, this is what you would do: .specialClass extends .basicClass {}.

It might not be for everybody, but I like the feel of it. Also a nice little touch, when your project is ready to be push on the web, you can minify the CSS directly from xCSS by changing a small line in the config file.

And if we compare with others abstraction framework

Pros:
Simple to install in all your projects
No installation required on your computer or server
Generated CSS is instant
Can be minified on the spot

Cons:
A bit low on feature (no equation pains me)
@import not supported, need to be declared in the config file

Conclusion

I am quite happy with xCSS and I hope for more features in the near future. I decided to implement it in my CSS framework. It is that good.

Update October 27: xCSS has recently been updated with the equation feature

While I still think most of what you can do with this should be Javascript bound, I see applications where it could be really useful, notably with :hover.

You can see the patent yourself here.