LeMondeDuDev

If you’re to nail CSS, Less is more – part 3 : mixins, client and server side

bruce — Thu, 07 Mar 2013 14:25:37 +0000

So, we’re here. We now know how to create a neat Less file that will generate the CSS file we want, we know how to use variables, how to nest styling rules and how to set up the watch mode on our browser. We still have a couple of things to see before we start talking about the console and the Less compilation : we need to talk about mixins, client-side and server-side.

Mixins

This feature is awesome. Imagine if you could define styling rules not just as such, but as functions, with parameters. Less makes it possible.

For example, you might want to use rounded-cornered boxes here and there on your page, but with various corner-radius and different background-colors. There’s an easy way to do that with less (and before you start screaming the hell out of me, the classnames i’ll be using in that example are just for the sake of the example, you should know i’m not that dumb) :

.rounded-box (@radius: 5px, @bgcolor: #000) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
  background-color: @bgcolor;
}

.red_small_box {
  width: 200px;
  height: 200px;
  .rounded-box (4px, #c00);
}

.blue_huge_box {
  width: 800px;
  height: 800px;
  .rounded-box (16px, #99f);
}

don’t you like it when it’s just that easy ?

Server and client side

I know what you’re going to say : Less is CSS managed by Javascript, so it’s client managed. And, strangely, you are not that wrong. But let’s see what’s available for you.

Client side

Well, we’ve been doing that all along, so the basics are already known : if you want to use Less properly, you should load your .less (with the rel attribute set to stylesheet/less) files BEFORE loading your less.js file, within the section of your page :

...
  
    ...
    
    
  
...

But here’s a couple of things you don’t know yet (unless, of course, if you already do) :

you can set things on a global less object before you load the less.js script file :

You can as well modify the content of your Less styles in run-time, using simple javascript within your page; for example, if you want to change a variable :

less.modifyVars({
  @bgcolor: #c0c0c0;
});

Since you can modify the styling at run-time, you might as well have fun with the console (console on Chrome and Safari, Firebug on Firefox, etc.).

Also, same way you can launch the watch mode using the URL suffix #!watch, you can add other options, such as : #!dumpLineNumbers:mediaQuery.

And that’s about it regarding the client side.

Server side

The server side is completely related to the Less compiler, and therefore will be talked about in the next post. See ya !

If you’re to nail CSS, Less is more – part 2

bruce — Sat, 02 Mar 2013 01:16:26 +0000

In the last post, we’ve started running Less script to use variables in dynamic CSS file. Now, we’re going to get a bit more real and start designing sort of a real web page, with what would’ve usually been a header, a menu, a sidebar with blocks, a page container and some stuff in it. We’re gonna do it all using CSS first, then Less.

Nesting styles

In your project directory, create a new file, called nesting.html. For the sake of this post only, let’s also create a nesting.less file within css/ directory. Here’s the content of both the files :

Less is more

This is the nesting page

Menu 1
Menu 2
Menu 3
Menu 4

Block 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Article title 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.

Article title 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.

It’s long, but nothing fancy here.

Fun trick first

Here’s a fun trick; in your browser, open the nesting.html page, which will look roughly like that at this point :

Now, in your browser, add the following to the url, right after nesting.html : #!watch (e.g. http://localhost/less/nesting.html#!watch).
This way, you enter the watch mode; the fun part of it is, whenever you change the CSS/Less file (and save your changes), the page will automatically be updated. Neat, right ?

The classic CSS

Here’s a classic CSS content (in nesting.less) :

body,div,p,ul,li,table,tr,td, h1 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font: 12px normal Arial, Sans-serif;
	color: #666;
}
#header {
	margin: 0;
	width: 100%;
	height: 100px;
	background-color: #ccc;
}
#header h1 {
	font-size: 36px;
	margin: 0;
	padding: 10px 5px;
	color: #000;
}
#header ul {
	position: absolute;
	top: 60px;
	left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 100%;
	background-color: #ddc;
}
#header ul li {
	float: left;
	padding: 10px;
	width: 25%;
	height: 40px;
	border-left: 1px solid #333;
	text-align: center;
	font-size: 18px;
}
#sidebar {
	float: left;
	padding: 10px 20px;
	width: 25%;
	top: 0;
	bottom: 0;
}
#sidebar .block {
	text-align: justify;
	margin-bottom: 12px;
	background-color: #ccd;
	padding: 0 5px 10px 5px;
	border-radius: 5px;
	-moz-border-radius : 5px;
	-webkit-border-radius: 5px;
}
#sidebar .block h1 {
	font-size: 18px;
}
#container {
	float: left;
	width: 75%;
	padding: 10px 20px;
}
#container .article {
	font-size: 15px;
	text-align: justify;
	margin-bottom: 15px;
	background-color: #ddf;
	padding: 0 10px 20px 10px;
	border-radius: 10px;
	-moz-border-radius : 10px;
	-webkit-border-radius: 10px;
}
#container .article h1 {
	font-size: 24px;
	padding-left: 20px;
	border-left: 4px solid #666;
}

Let’s just forget the first 5 lines of the code that are supposed to handle the padding behaviour in different browsers (more info on this page). Here’s the tree of styles :

- body
    - header
        - h1
        - ul
            - li
    - sidebar
        - block
            - h1
    - container
        - article
        - h1

And it looks like this (oh, wow) :

The Less version

Now we’re to use one of the most powerful features of Less : the nested rules. For example, the #header h1 will be defined as h1 within #header, which will look like this :

#header {
	margin: 0;
	width: 100%;
	height: 100px;
	background-color: @middle_color;

	h1 {
		margin: 0;
		font-size: @font_size*3;
		padding: 10px 5px;
		color: @dark_color;
	}
}

It doesn’t really cuts on the size of the file, but it reads easier. And combined with usage of variables, we get the following file :

/* variables */
@font_size: 12px;
@dark_color: #000;
@intense_color: #666;
@middle_color: #ccc;
@menu_color: #ddc;
@block_color: #ccd;
@article_color: #ddf;

/* Take care of padding */
body,div,p,ul,li,table,tr,td, h1 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Nested styles */
body {
	margin: 0;
	padding: 0;
	font: @font_size normal Arial, Sans-serif;
	color: @intense_color;

	#header {
		margin: 0;
		width: 100%;
		height: 100px;
		background-color: @middle_color;

		h1 {
			margin: 0;
			font-size: @font_size*3;
			padding: 10px 5px;
			color: @dark_color;
		}

		ul {
			position: absolute;
			top: 60px;
			left: 0;
			margin: 0;
			padding: 0;
			list-style-type: none;
			width: 100%;
			background-color: @menu_color;

			li {
				float: left;
				padding: 10px;
				width: 25%;
				height: 40px;
				border-left: 1px solid @intense_color/2;
				text-align: center;
				font-size: @font_size*1.5;
			}
		}
	}

	#sidebar {
		float: left;
		padding: 10px 20px;
		width: 25%;
		top: 0;
		bottom: 0;

		.block {
			text-align: justify;
			margin-bottom: @font_size;
			background-color: @block_color;
			padding: 0 5px 10px 5px;
			border-radius: 5px;
			-moz-border-radius : 5px;
			-webkit-border-radius: 5px;

			h1 {
				font-size: @font_size*1.5;
			}
		}
	}

	#container {
		float: left;
		width: 75%;
		padding: 10px 20px;

		.article {
			font-size: @font_size*1.25;
			text-align: justify;
			margin-bottom: @font_size*1.25;
			background-color: @article_color;
			padding: 0 10px 20px 10px;
			border-radius: 10px;
			-moz-border-radius : 10px;
			-webkit-border-radius: 10px;

			h1 {
				font-size: @font_size*2;
				padding-left: 20px;
				border-left: 4px solid #666;
			}
		}
	}
}

It looks like this (oh, wow) :

Same, right ?!

And that’s pretty much all you need to know about nested rules.

In the next topic, we’ll talk about functions in Less, as well as Client Side and Server Side usage (and, if you behave, we’ll talk about the Less compiler LessC and when to use it)

If you’re to nail CSS, Less is more

bruce — Thu, 28 Feb 2013 18:09:51 +0000

Here’s the deal : a while ago, i wrote an article about CSS and how one’s not supposed to forget about the C in CSS (C meaning Cascading, you noobs…); but the fact is, the more i’ve been working with people, the more i’ve seen stuff that just give me the Gee-Bees : people confusing classes, ids, creating #containers in nested .containers containing .contents. Of course, it wasn’t that bad, it’s been a long time since i’ve seen CSS code with a .red-background classname (FYI, last time i saw one, the background color was actually blue, which helps understanding why it is so wrong). However, for a couple of years now has emerged a new way to design CSS, and when i say « design CSS », i mean neat, clean and beautiful CSS, with a capital C.

Meryl Streep is that good for a reason

It might only be a legend, but it’s been told that Meryl Streep considers the fact that being an actor doesn’t really rely on what you do as much as on what you don’t do; she would say that less is more. Funny i mention it, because we’re going to talk about a way to create awesome CSS design using less code, and it’s called Less CSS.

First of all, Less CSS (hereafter simply « Less ») is nothing but a cutie-lighter-than-light-javascript-file. There, i’ve said it !

What it does is it gives you all the gifts you always wanted regarding CSS files : variables, nested information, functions, etc. Ten years ago, i used to work with CSS files that were actually PHP files (completely dynamic), and i’m not proud of it (i was, then), but the fact is that Less succeeds where server-side scripting had failed : it lets you focus on what you’re doing and prevents the distraction of how you’re doing it (and i’ve seen some long-ass CSS files in my career, knowing that whoever wrote them had been running out of synonyms for « container », « menu_item », « side_menu » and so on).

Head first

Where do we start ? You go to lesscss.org, follow the « Download less.js » button link, copy the content displayed and save it on your computer in a less.js file. Let’s assume you’re following this post with a directory that contains nothing but : an index.html file, a js/ directory and a css/ directory. Well, then, put your less.js file in the js/ directory. Then, in the css/ directory, create an empty style.less file (yes, the extension is .less and not .css). Finally, open your index.html and copy this incredibly sharp and witty code :




  Less is more

Note — because it’s really important — that the less.js file is called AFTER the style.less file. Believe it or not, you’re all set to work way better than you’ve been used to.

First sample code

Understanding variables

Open your index.html and insert the following within the of your document :

Live long and prosper

I know…great, right ?

Now open the css/style.less file. Here’s a good impression of what can cross your mind as you try to make your index page unforgettable :

i don’t know what color i want to use yet;
i know i want a border around the greetings div;
i know i’ll probably use the same color for the border and for the text within that div;
maybe i’ll go with rounded corners;
should i set up some margins for the body ? for the div ? What about padding ?

And because all those questions will keep on running as long as you’re not done with your project, it tends to get hard to keep track of everything you change so that you’re sure you’ve changed it everywhere.

Let’s assume i’d go with the following CSS file :

body {
  margin: 0;
  background-color: #fff;
  font: 11px normal Helvetica,Sans-serif;
}

#greetings {
  border: 1px solid #999;
  color: #999;
  border-radius: 5px;              /* mostly for IE */
  -moz-border-radius: 5px;      /* mostly for Firefox */
  -webkit-border-radius: 5px;   /* mostly for Safari and Chrome */
}

Well, you should normally be able to tell the weaknesses of such a file :

if you feel like changing the color of the border and text, you need to change two values;
if you feel like changing the radius of the div corners, you need to do it at three different lines.

At this point, i’m already bored just reading myself and, let’s face it, our index page lacks a certain je-ne-sais-quoi that really could improve its quality.

Now, let’s write the exact same CSS code, but using Less instead : (go to your style.less file and edit the following)

@a_color: #999;
@radius: 5px;

body {
  margin: 0;
  background-color: #fff;
  font: 11px normal Helvetica, Sans-serif;
}

#greetings {
  border: 1px solid @a_color;
  color: @a_color;
  border-radius: @radius;
  -moz-border-radius : @radius;
  -webkit-border-radius: @radius;
}

You’re done (you may look at the page now, but be aware you will not feel rewarded for your hard work…not yet). Now what did we do ?

@a_color: #999;

This is setting up a variable, called a_color (prefix with the character @ to indicate it’s a variable); then the writing is the same as for CSS : after naming your variable, use a colon and write down the value (it can be anything supported in CSS, such as : #ccc, 12px, none, etc. and it can even be another variable — we’ll see that later).

Then, in what looks just like a regular CSS file, you may write the variable instead of the value (which is really programming 101, but may seem new to some of you regarding CSS) :

border: 1px solid @a_color;

means exactly

border: 1px solid #999;

More variables

Let’s now make it a bit better. We have now figured out that we probably won’t be using the same color for the body background and the greetings background; however, the greetings background color should, somehow, be related to the text and border color; moreover, the greetings div should be smaller (right now, it’s page wide); also, the radius of the corners of the greetings box should be related to the text size…and to the padding…etc.

Empty the content your style.less file and let’s try the following :

@main_color: #000;
@second_color: #999;
@background_color: #ccc;
@font_size:12px;
@radius: 6px;
@padding: 12px;

body {
  margin: 0;
  background-color: @background_color;
  font: @font_size normal Helvetica, Sans-serif;
}

#greetings {
  margin: 100px auto; /* 100px from the top, horizontally centered */
  width: 300px;       /* why not ? */
  padding: @padding;
  border: 1px solid @main_color;
  color: @main_color;
  border-radius: @radius;
  -moz-border-radius : @radius;
  -webkit-border-radius: @radius;
  background-color: @second_color;
}

The content is quite self-explanatory, and the result looks just like that :

We almost did what we said we would, but not completely : we didn’t create any relationship between variables; so let’s just change the first lines of style.less (the variables declarations) into that :

@main_color: #000;
@font_size:12px;

@second_color: @main_color + (.6 * #fff);
@background_color: @main_color + (.8 * #fff);
@radius: @font_size/2;
@padding: @font_size;

It roughly didn’t change anything, and you’d better believe it : you may now add, multiply, divide (watch out for the per zero division), subtract colors, lengths, etc.

To get what we’re doing, just change the first two lines now, for example into :

@main_color: #6a5199;
@font_size:26px;

Watch the difference :

In the next topic, we’ll talk about nesting information within Less files.

Gérer le padding dans les différents browsers

bruce — Wed, 06 Feb 2013 13:24:04 +0000

Le problème est le suivant : vous créez une page web avec des div dans tous les sens, des liens, etc. À un moment donné, vous allez vous intéresser à l’aspect de votre page web et rentrez dans votre CSS. Partons du principe, pour l’article, que vous êtes sur du CSS from scratch (vous n’utilisez ni Less, ni Bootstrap, ni aucune feuille de style reset.css trouvée sur le web). Vous créez un certain type de div, disons de la classe « article » en mettant bien que la hauteur du div doit être de 150px et la largeur de 400px (oui, vous le faites en pixels…). Par ailleurs, vous souhaitez que le texte ne colle pas les bords de votre div, aussi mettez-vous un padding de 10px partout. Comme vous n’avez aucun goût, vous décidez de mettre un bord noir d’un pixel d’épaisseur autour de votre div. À ce stade, vous en êtes là :

.article {
  height: 150px;
  width: 400px;
  padding: 10px;
  border: 1px solid #000;
}

Et, pour le HTML :

...
Lorem ipsum dolor sit amet

Comme vous êtes quelqu’un de consciencieux, vous décidez de tester votre magnifique page dans tous les principaux navigateurs. Cette page sort plutôt bien sur l’ensemble de ceux-ci mais, en y regardant de plus près, il apparaît que, sous Safari, votre div est plus grande que sur les autres navigateurs; en effet, les autres navigateurs ont bien dessiné un div de 150×400 pixels, tandis que Safari en a dessiné un de 170×420 pixels. Il a tout simplement considéré le padding comme une dimensions supplémentaire.

Standards HTML

En matière de boxing (l’art de concevoir des boîtes), tout le monde s’est à peu près mis d’accord pour dire qu’on peut définir une box avec quatre éléments :

le margin : c’est l’espace réservé par la box au-dehors de celle-ci (marge externe, si vous voulez);
le border : c’est le bord de la box;
le padding : c’est la marge comprise entre le bord de la box et la zone de contenu (marge interne);
la zone de contenu : c’est la zone que vous pouvez naturellement remplir avec du texte, des images, des liens, d’autres box, etc.

Les standards HTML étant ce qu’ils sont (et, surtout, ayant été ce qu’ils furent par le passé), chaque navigateur a sa propre interprétation de ce qui correspond à quoi, de ce qui prime sur quoi, etc.

Concernant Safari, il considère que les dimensions données à une box sont en fait les dimensions de sa zone de contenu, là où la plupart des navigateurs considèrent que ce sont les dimensions mesurées au bord de la box. Nul ne peut dire qui a raison ou tort, ce n’est qu’une question d’interprétation de ce qu’est une box. En revanche, ce qui importe, c’est de faire en sorte, lorsque vous concevez une page HTML au pixel près, que l’affichage de celle-ci soit le même indépendamment de l’environnement.

Box-sizing

Il existe une directive CSS (ou plutôt une règle) pour chaque kit de browser qui vous permet de définir une fois pour toutes le comportement des éléments d’une box, c’est le box-sizing.

Dans votre fichier CSS, vous ajoutez, par exemple pour les divs uniquement, le code suivant :

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.article {
  height: 150px;
  width: 400px;
  padding: 10px;
  border: 1px solid #000;
}

Et le tour est joué.

Regardons de plus près ce code :

-wekbit-box-sizing est une règle du webkit (principalement Safari et Chrome) pour déterminer la mesure des dimensions d’une box ; -moz-box-sizing est l’équivalent Firefox et autres Gecko, tandis que le simple box-sizing vaut pour Opera et Internet Explorer.

La valeur border-box signifie très exactement ce dont on parlait à l’instant, c’est à dire la mesure aux bords de la box.

Indiquons les différentes valeurs possibles de ces règles pour bien comprendre le fonctionnement :

content-box : la mesure se fait à l’intérieur du bord d’une box;
border-box : la mesure se fait à l’extérieur du bord d’une box (si votre border fait 25px, la différence avec le précédent sera de 50px);
padding-box : la mesure se fait uniquement sur la zone de contenu (la padding et le border sont ensuite ajoutés).

Conclusion

Ok, cet article est court et tient plus du Tip que du dossier de fond; mais il illustre surtout, selon moi, le besoin d’aller chercher, dans les kits navigateurs, les subtilités de chacun, les moyens d’obtenir les mêmes résultats sur des environnements différents, etc.

Du coup, je vous invite à visiter les sites suivants (mais également de nombreux autres, tous plus ou moins bien faits, mais qui ont le mérite d’exister) :

Salt’n Pepper on passwords; spicy enough ?

bruce — Wed, 03 Oct 2012 10:19:44 +0000

You heard a lot about it and, let’s face it, from time to time, you talked about it yourself with a cute touch of self-confidence that usually makes you sound like you know what you’re talking about. But salt & pepper ? On passwords ?

Is it safe ? Is it safe ?

All right, if you’re under 30 you didn’t get the joke, but i don’t really mind. Let’s first talk a bit about passwords because, let’s face it, you know for sure the weak link won’t be your code, but the fact that people tend to use their birthdate or kids name for passwords. So how can you make sure it is safe ?

There’s no such thing as safe

This is your first mantra : THERE’S NO SUCH THING AS SAFE PASSWORD; cracking a password is always a possibility, and only a matter of time and will (of course, i’m talking about regular security; don’t post a message telling that a self-destructing database after one password error is safe…and it’s really not, btw).

Whether you know exactly how or not, password encryption is actually become quite good; with a sh*tload of mathematics, prime number compositions, and so on…What you need to know about it is that they’ve managed to create an encryption system that is not a bijection (meaning there’s no algorithm — at least it hasn’t been found — that can take you from the encrypted password to the original password). What it means to you is that your passwords should be protected against brute force attacks.

Brute Force attacks

A brute force attack is encrypting every possible string until the encryption you get matches the encrypted password; it’s called brute force because it’s as brainless as it is ruthless, enough time given. Theoretically, it can’t miss…but it can take days or weeks. And because it’s long, crackers (i.e. people hacking passwords) have developed strategies to get faster where they want to go.

Dictionaries

Simple, neat, elegant. They try real words; they can even choose a most-likely-to-be-used language; so if your usual password is « password », « secret », « admin », « poodle » or « steam-pipe », you may want to reconsider (you also may want to reconsider being a software developer anyway). There’re also first name dictionaries out there so, unless you named your kid « @3#dZgv4éS4″ (poor child), you want to avoid first names.

Character tables

Most crackers are not trying to get your password; trey try to get any password; whether it’s yours or not is completely irrelevant. So, since they try to get as far as they can, they brute-force-attack the weakest passwords, in terms of brute-force-attack strength. That means that they try to crack the passwords with the weakest combinatory, ergo the less amount of different characters.

For example, if you can only use the letters A and B to create a four-letter password, possible passwords are very limited :

AAAA, AAAB, AABA, AABB, ABAA, ABAB, ABBA (waterloo), ABBB, BAAA, BAAB, BABA, BABB, BBAA, BBAB, BBBA, BBBB = 16 cases

If you only add the letter C, you get 81 cases. Add D and you get 256 cases. Now make the password five-lettered and you get 1024 cases.

What they do is, they try all possible passwords, from 1 to 14 characters, using all the letters of the latin alphabet, both uppercase and lowercase ( so A to Z and a to z ) as well as digits ( 0 to 9 ). If your password is less than 8 characters and only using those characters, it’s a matter of seconds. That’s exactly why you’re usually told to use other characters, such as ponctuation marks ( ! , ? # – _ @ $ an so on).

Databases

Because crackers are usually anything but morons, they chose to do it another way; they’ve created a database, where they store all possible encryption; they have tables with — to make it simple — two columns : the first one is the original password, the second one is the encrypted password (they usually have one column per encryption mode; so there’s one MD5 column, one SHA1…). But since it’s impossible to store all the possible strings (because they’re limitless, duh !), they had to narrow it as well. So it may seem that the problems are still the same, but they’re not.

First of all, the attack is completely local, a simple query on a database, not the kind of things that make the feds loof after you); second, it’s incremental, they constantly add new passwords. But it also gets larger and larger (meaning they need huge hard drives — which is not a problem anymore, thank you cloud computing — but also the queries get longer time to get executed — you can’t imagine the size of the indexes).

So…is it safe ?

To sum it up, it’s not less safe than before, given the fact that you protect yourself properly. If you use long passwords, with all different kind of characters and symbols, you should be fine. But your users, they hate it ! And remember this : they consider that security is your problem as they’re being the weakest link in your security chain (those bast*rds !!!).

Salt & Pepper

Actually it’s pepper and salt, but we’ll get to it. So the question is : how can you enforce users to use strong passwords ? Many different strategies here : you make them change every month (lame), you show them a green light when their password is strong enough…There are many ways, we’ll only talk about our favorite : the DIY password strengthener…

Wouldn’t it be great if you could change passwords to stronger passwords ? That’s exactly what we’ll do. It’s not a new idea (if you ever heard of public/private key exchange, it’s not the same at all, but it will help you to understand the deal), but it’s smart enough and, if you do it right, it’s a hit.

Your user is asked to provide a password; since he’s completely clueless on digital security, he provides one of the best passwords ever : « password » (it’s a .02 sec on a brute-force).

Before you encrypt it, you add a prefix (with a P, as in Pepper) and a suffix (with an S, as in Salt) to the password, to make it strong enough : @&é89_)#password___-°§éé&ù

That’s a good one. Now, whenever the user is asked for his password, add the Salt’n Pepper before encryption to match the password. And obviously (needless to say, but i’ll say it anyway), encryptions such as MD5 or SHA1 do not show salt or pepper; you can’t deduce them from an encrypted password.

Is it safe ?

Wanna make it safer ? Change the salt’n pepper from time to time; make it automatic and programmatic; for example, when a user logs in (let’s say once a month), you change the salt’n pepper to new values (again, once a month); you just need to set a flag on the user in order to know if the change has been made or not. This way, you can have them change passwords as often as you want without even being aware of it.

IMHO, that’s as safe as it gets.

Report score on Game Center leaderboard

bruce — Fri, 14 Sep 2012 16:04:28 +0000

A quick one…

many of you – nay, many of us – shared this problem while developing a game on iOS : you’ve set up properly the Game Center Leaderboard for your application, you log in on your device’s GameCenter Sandbox, you try to report scores, the debugger chills, no problem at all, but no score shows up, the leaderboard remains empty as a geek’s fridge (except for some mustard, although nobody knows exactly why).

You’ve been told many things :

you need to cast your score as an int_64t, whatever that may be (that’s actually correct);
you need more than one account on your sandbox to have the scores displayed (that’s absolutely not mandatory);
you suck (well…some of you do).

I found the answer, but i won’t take credit for that, because it was completely unexpected.

Get it right on iTunesConnect

When you create a leaderboard for your app on iTunesConnect, you set a couple of things, including :

its reference (aka Leaderboard reference);
its id (aka Leaderboard ID).

Right now, that doesn’t help, but you’ll see in a minute that, sometimes, it’s all about the words…

Report the score on your Leaderboard

You’ve seen those couple of lines everywhere; it’s so easy, it’s actually boring. To report score on your GameCenter Leaderboard, you need to initialize a GKScore, set the score and send the whole thing; you need not to worry about the user, about being authenticated (well, you need to, but not here !). It’s great ! It’s got a giant Apple on its ass for being so good. For the sake of it :

- (void) reportScore: (int64_t) score forCategory: (NSString*) category {
    GKScore *scoreReporter = [[[GKScore alloc] initWithCategory:category] autorelease];
    scoreReporter.value = score;

    [scoreReporter reportScoreWithCompletionHandler:^(NSError *error) {
        if (error != nil) {
            // handle the reporting error
        }
    }];
}

BTW, read this page, it’s quite complete…
You’ve seen this code on many forums, but nobody never bothered to ask :
Well, when you initialize your GKScore with the category, WTF is the category ?

Good question; as far as i know, about 1/3 of the people get it wrong about it. For a while, i thought that the category was the leaderboard reference (because « category » doesn’t sound as a unique item that would be used to identify it).

It turns out category IS ACTUALLY the leaderboard id.

Let’s get it loud and clear for the google bots outside :

CATEGORY == Leaderboard ID

When i fixed this, the Sandbox Game center started working fantasticulously (i know it’s not a word…i don’t care) !

By that, i mean : scores get posted instantly, with only one sandbox account (in your face, you elusive doppelgänger of mine…)

Anyway, hope that will help. If so, please leave a message, so that i know i’ve been helpful to one and probably will rot in hell a bit less time. You can also visit the page of my own iPhone game app : WarpOut :

http://itunes.com/apps/aelif/warpout

http://www.facebook.com/com.aelif.warpout

La viralité, ou comment seul je ne peux rien, mais ensemble nous pouvons tout…

bruce — Wed, 12 Sep 2012 22:59:30 +0000

Post court, simplement pour évoquer une certaine reflexion autour de cette fameuse question du buzz…Comment une idée devient-elle virale ?

Ma compréhension de l’App Store, c’est qu’il y a les applis qui ont été vendues en tout moins de 200 fois, et celles qui se vendent à au moins 200 exemplaires par semaine. Mais où se fait la bascule ? Mettons de côté immédiatement les sociétés qui mettent des millions dans la communication, je sais bien que ça marche, mais je ne dispose pas de ce genre de budgets…Les indépendants, même très sociables, ont un cercle restreint d’amis (une ou plusieurs centaines, mais guère plus); pourtant certains franchissent le seuil. Comment ?

Allez donc voir ailleurs

Une fois n’est pas coûtume, je vais d’abord vous demander d’aller voir ailleurs, non pas si j’y suis (car je n’y suis pas), mais pour qu’on parle bien tous de la même chose. Le formidable document disponible sur ted.com intitulé « How to start a movement » ne dure que quelques minutes et, s’il est en anglais, dispose de sous-titres dans presque toutes les langues communément parlées :

How to start a movement, par Derek Sivers

Cela étant fait, procédons.

Gaining momentum

Comment atteindre ce momentum, ce seuil ? Prenons l’exemple du jeu WarpOut que je viens de lancer sur l’App Store…Bien évidemment, depuis qu’il est en ligne, mes parents, mes cousins, mes plus proches amis, gamers ou non, l’ont acquis. Mais cela ne suffit pas à faire d’eux les premiers suiveurs. Il faut encore qu’ils notent l’application, qu’ils en fassent une critique (si possible pas trop dithyrambique) et, le point le plus important, qu’ils en parlent autour d’eux, qu’ils provoquent eux-mêmes à leur tour des ventes.

Mais attention ! Rappelons-nous bien que nos amis ne sont pas des commerciaux, et ne sauraient être traités comme des employés (on y perdrait bien plus que des ventes).

La difficulté est justement là; il faut que votre cercle le plus proche devienne « spontanément » un vecteur de communication de votre produit : il faut respecter vos amis (bon, je dis surtout ça pour le coup où j’aurais des amis qui lisent l’article).

En pratique, je fais quoi ?

En pratique, un outil merveilleux vous facilite (un peu) la tâche : le livre des faces (ou facebook, pour les bilingues — Amazing !).

Outre le fait de poster comme un porc sur votre mur (sur le vôtre, n’allez pas spammer vos amis), il vous faut créer une page; cette page est le QG de l’info, c’est le site internet de votre produit qui est déjà prêt à rencontrer vos amis, leurs amis et divers inconnus, prêt à être détroussé comme une paysanne moyen-âgeuse par Google.

Cette page, vous n’y couperez pas, il faut que 30 personnes l’aiment (sinon votre page est invisible, pour ainsi dire). Votre premier cercle d’amis; croyez-moi, vous pouvez compter sur eux.

Ensuite, il faut générer du contenu, et ce contenu doit être viral, au sens ou Facebook l’entend. Qu’est-ce à dire ?

Un contenu est viral, pour Facebook, lorsqu’il commence à être vu par des témoins de 2e rang (vous diffusez une image, vos amis la voient : 1e rang; ils l’aiment ou la partagent, leurs amis voient ce like ou ce partage : 2e rang, bravo, vous êtes viral).

À ce stade, ne demandez pas à vos amis d’aimer votre contenu, car vous ne feriez, au mieux, qu’étendre votre cercle d’amis à leur cercle d’amis; vous ne pourrez en aucun cas demander aux amis de vos amis d’aimer ce que vous faites. Du coup, vous devez faire du contenu que les gens aiment. Et c’est là que votre page Facebook est un formidable vecteur de communication.

Si vous avez un site internet, même formidable, mais que personne ne le visite, vous ne faites rien.

Si vous avez une page avec beaucoup d’abonnés, votre moindre remarque leur sera présentée (d’où l’intérêt d’un contenu de qualité).

Le contenu

Selon votre produit, vous pouvez produire du texte, des photos, des bandes sonores, des vidéos. Dans ce dernier cas, créez un compte Youtube et publiez vos vidéos sur youtube, vous les lieerez ensuite à votre page.

Pour les images, vous pouvez utiliser un compte Flickr (ou autre), ou bien directement intégrer les photos dans Facebook (en utilisant comme il faut les identifications).

Soyez patients, cela prendra du temps; mais, en quelques semaines, vous serez visible sur Google, vous aurez un grand nombre de spectateurs, abonnés ou non, et il suffira de peu de contenus exceptionnels pour franchir la barrière.

Mon exemple

Sur ma page WarpOut, j’ai décidé de ne pas parler du jeu, ou presque pas. Mais d’y faire constamment référence. Voici, en images, ce que cela peut donner :

Premier cas — la fausse pub qui tombe bien, niveau actualités

Deuxième cas — la fausse pub qui tombe bien, niveau culture pop (attention, toutefois, la référence réduit clairement votre cible)

Troisième cas — la fausse pub qui tombe bien, parce qu’elle tombe bien partout où elle tombe

Autre chose ?

Beaucoup d’autres choses : n’oubliez jamais le lien, soit vers votre page (idéalement), soit vers l’appli (notamment si vous pensez que les ventes pourront être directement réalisées).

Ensuite, créez un compte twitter spécifiquement pour votre produit ( ex : twitter.com/warpout1 ) et liez le contenu de votre page Facebook à ce compte; ça prend une minute.
Puis abonnez ce compte au maximum de comptes twitters liés à votre produit que ce soit (ça prend plus qu’une minute), mais attention à ne pas vous abonner à des comptes inactifs depuis 3 ans, ou bien des comptes à 3 followers…

Si avec tout ça vous n’êtes pas encore abonnés à ma page, c’est que je ne sais pas du tout de quoi je parle.

Addendum de dernière minute…

Si votre produit est une appli mobile (comme c’est le cas pour mon WarpOut), pensez à intégrer les fonctionnalités socialisantes :

le Game Center donne de la visibilité dans le monde entier (il y a partout des gamers fous dont le seul but dans la vie semble être de battre tous les records de tous les jeux);
Facebook, encore une fois, est un formidable vecteur : permettez à vos utilisateurs de voir, parmi leurs amis, ceux qui jouent au même jeu, de comparer leur score…Offrez la possibilité aux gens d’inviter des amis à jouer à votre jeu; au début, il ne se passera rien; mais un jour un déclic se fera (ou pas) et vous aurez enfin obtenu ce « ‘momentum ».

Je vous le souhaite autant qu’à moi…

Développer un jeu sur iPhone : WarpOut

bruce — Sun, 09 Sep 2012 16:25:20 +0000

Voilà un certain temps que je restais muet…Qu’est-ce que je peux bien dire à ma décharge, cher lecteur ? Je bosse, je n’arrête pas de bosser, et quand par miracle j’ai une minute de libre, un nouveau projet arrive (ce qui, par les temps qui courent, est — je vous l’assure — un miracle). Ceci étant, je me suis permis quelques jours (quelques parties de nuits, pour être parfaitement exact) de liberté, et j’en ai profité pour assouvir un vieux rêve : créer un jeu pour iPhone.

Et voilà ! WarpOut, le premier jeu iPhone de la maison Aelif est désormais disponible sur l’App Store (d’ailleurs, je le prouve grâce au « badge App Store » de circonstance)

WarpOut est un jeu de blocs comme plein d’autres, mais pas comme les autres. Comme plein d’autres, en effet (à l’instar de Bejeweled, Diamond dash, iGem, etc.), il y a des blocs, dans une grille, et il convient de les faire disparaître (en les reliant, en les alignant, etc.).

Mais WarpOut se distingue par son gameplay innovant (j’en ai bien ch*é comme il faut niveau algorithme, mais le résultat y est): en effet, au lieu d’être statiques, les blocs orbitent autour du centre de la grille, d’où émanent constamment de nouveaux blocs. Pour l’instant, il existe deux modes de jeux, le mode classique ( tant que tu tiens, tu mets des points ) et un mode puzzle, le tout en français, anglais et chinois (traditionnel et simplifié…évidemment !!).

Je prépare en ce moment même la version 1.2 (avec Game Center, Facebook, et de nouveaux puzzles).

Je ferai un post prochainement sur (je n’ai pas encore décidé, donc n’hésitez pas à proposer) :

l’intégration GameCenter avec Leaderboard (les meilleurs scores dans le monde);
l’intégration Facebook (comment mon appli communique avec FB pour récupérer la liste des amis du joueur qui jouent au jeu et partager les scores, mais également poster sur le mur du joueur à quel point il est un nolife gamer);
l’intégration multilingue A à Z pour iOS 5 (et supérieur);
l’utilisation d’un framework (pour ne pas réinventer la roue, autant avoir une voiture).

En attendant, je vous invite à aller découvrir le jeu et, s’il vous plaît (enfin…si le jeu vous plaît), à en parler autour de vous et, pourquoi pas, à le noter sur iTunes. Pour le coup, cela relève plus de l’expérience qu’autre chose, mais je cherche toujours les ingrédients de la viralité et, ma théorie actuelle, c’est que cela relève, du moins dans les premiers temps, d’un engagement de quelques uns.

À ce sujet, faites-vous plaisir et allez regarder cette vidéo sur TED.com « Comment lancer un mouvement » (il y a des sous-titres en français, ainsi qu’en plein d’autres langues)…il faut encore que je comprenne ce qui amène au « Momentum », au point de bascule, par exemple entre le blog suivi par 3 personnes pendant un mois et le blog suivi par 100 personnes depuis plus d’un an; entre l’appli qui est achetée à 200 exemplaires sur deux semaines, puis plus rien, et l’appli qui est téléchargée 200 fois par semaines depuis des mois.

J’ai déjà quelques idées, mais on s’éloigne de la technique et on rentre dans le marketing…en quelque sorte…mais je pense que nous autres « techniciens » savons utiliser les outils lorsqu’on comprend comment ils fonctionnent…

Peace out, pour le moment

Bonne année 2012

bruce — Tue, 03 Jan 2012 11:23:14 +0000

Tout est dans le titre, ou presque. Désolé pour les abonnés RSS qui, voyant une nouveauté sur le site sont d’un coup devenus complètement fébriles à l’idée d’un nouvel article (« quoi ? enfin ! pas trop tôt ! mon cerveau crie famine… » et ce genre de choses), car ce n’est pas pour tout de suite (mais bientôt, c’est promis; il faut juste que je trouve un peu de temps pour cela).

Je vous souhaite donc une excellente année 2012 (sauf si vous êtes un gros connard, cela va de soi) ainsi que le succès dans vos différents projets (sauf si nous sommes concurrents, cela va de soi), et profitez-en bien surtout, car il semble que la fin de l’année 2012 marquera également la fin du monde…je l’ai lu sur internet et vu à la télé, donc cela doit forcément être vrai…

Pourquoi Qt est cool ?

GreG — Sun, 16 Oct 2011 19:17:13 +0000

J’ai découvert Qt en tant que développeur il y a un peu plus d’un an et je voudrais partager avec vous les meilleurs moments lorsqu’on le découvre, un peu comme si je voulais vous donner envie d’essayer vous aussi…

1. Les signaux et les slots: tisser les appels de méthode dynamiquement à l’exécution

Les objets peuvent émettre des signaux qui ressemblent furieusement à des appels de méthode, mais dont on ne connaît pas le destinataire. Et les objets peuvent également porter des slots qui sont des méthodes particulières qui peuvent être connectées à des signaux. Cette connexion peut se faire soit à la souris dans l’IDE si les objets concernés sont des widgets graphiques, soit programmatiquement avec une méthode qui s’appelle connect. La cardinalité des connexions est bien sûr n-m, c’est-à-dire qu’un même signal peut être connecté un nombre quelconque de slots et qu’un slot peut-être connecté à un nombre quelconque de signaux.

C’est évidemment très pratique en matière d’interface graphique (un bouton émet le signal clicked que l’on peut connecter à ce qu’on veut, etc.) mais c’est au moins aussi pratique pour des tas d’objets non visuels. Par exemple Qt fournit une classe qui s’appelle QNetworkAccessManager et qui permet en quelques lignes de code de faire des requêtes HTTP de façon asynchrone et d’être rappelé par un signal lorsque la requête est finie ou pour donner un pourcentage d’avancement de l’upload ou du download qui s’en suit.

C’est également très agréable pour gérer la communication entre plusieurs threads (un thread émet le signal, mais c’est un autre qui exécute le slot) ou pour simuler un fonctionnement multithread avec le seul thread exécutant la boucle d’événements principale: chaque slot est éxécuté à son tour, car l’appel de slot asynchrone est un événement. C’est de loin le modèle de communication le plus simple que je connaisse qui permette à la fois de faire des appels synchrones, et des communications multithread fonctionnant aussi bien avec des threads préemptifs et non préemptifs.

Pour en savoir plus c’est ici: http://doc.qt.nokia.com/latest/signalsandslots.html et éventuellement là: http://doc.qt.nokia.com/latest/qnetworkaccessmanager.html

2. La réflexivité et le Méta-objet

On vient de parler des signaux et des slots, évidemment ils ne sont pas mus par magie et bien sûr vous vous demandiez en me lisant: comment donc les connexions peuvent-elles être dynamiques à l’exécution alors que C++ est un langage compilé?

Point de sorcellerie. Qt arrive avec un modèle dit de méta-objet qui est proche de la réflexivité Java et stocke sous forme de chaîne de caractères les signatures des méthodes appelables dynamiquement (notamment les slots), pour les objets identifiés comme pouvant porter de telles méthodes (toutes les classes héritant de QObject). Et cette couche basse est directement utilisable: même sans signaux et sans slots il est possible d’appeler une méthode à partir de son nom dans une chaîne de caractère. Pour passer un callback c’est très plaisant. Et bien sûr l’appel peut-être asynchrone (cf. mon exposé précédent sur la communication entre threads).

Pour en savoir plus, le point de départ est ici: http://doc.qt.nokia.com/latest/qmetaobject.html#invokeMethod

3. Une bibliothèque de classes riche et très agréable

Là on est à la limite de l’esthétique, je le reconnais, mais les classes Qt sont extrêmement agréable à utiliser. Beaucoup moins théoriquement belles que les classes Java par exemple mais beaucoup plus pragmatiques. Un seul exemple:

Les collections sont un vrai plaisir à utiliser (notamment grâce à l’implicit sharing, voir point suivant), mais un peu déroutante au début avec par exemple la QList dont le temps d’accès en indexé est constant, juste parce qu’en vrai ce n’est pas une liste chaînée…

Plus ici: http://doc.qt.nokia.com/latest/containers.html#algorithmic-complexity

4. L’implicit sharing ou la copie gratuite d’objets

Un nombre important de classes Qt pratiquent l’implicit sharing, qui n’a rien à voir avec l’adultère ou les parties fines, mais fait que deux copies différentes d’un objet comme une chaîne de caractère (QString) ou une image bitmap (QImage) n’occuperont quasiment qu’une seule fois la place mémoire et se copieront quasi instantanément, tant qu’aucune des deux n’est modifiée. À la première modification en revanche il y a allocation mémoire et copie, c’est une sorte de copy-on-write.

Ça a l’air d’un gadget, mais cela simplifie diablement la gestion des collections et d’une façon générale le dilemme qui existe en C++ entre le passage d’objet par valeur ou par référence: les objets qui pratiquent l’implicit sharing peuvent être passés par valeur pour éviter que l’appelé puisse modifier l’original (comme ce serait le cas s’ils étaient passés par référence) sans avoir à supporter l’essentiel du coût mémoire et CPU de la copie.

Plus d’info ici: http://doc.qt.nokia.com/latest/implicit-sharing.html

5. Qt Creator: un IDE de rêve pour le C++, avec toutes les extensions apportées par Qt

L’environnement de travail de Qt Creator est, avec mes goûts et mes exigences à moi, quasi équivalent à ce qu’est Eclipse au monde Java (je ne parle pas des modules C++ pour Eclipse qui sont très en deçà de leurs pendant Java), en un peu moins lourd (ne nourrissez pas le troll je ne suis presque pas en train de dire que C++ est moins lourd que Java).

Évidemment il gère toutes les spécificités apportées par Qt au C++: complétion automatique des noms de signaux et slots dans les macros Qt, support de l’instruction foreach pour itérer sur les collections, etc.

Plus d’info et une vidéo de démonstration ici: http://qt.nokia.com/products/developer-tools/

6. QGraphicsView: un framework de dessin 2D multi-vues clefs en main

Je ne parlerai qu’un tout petit bout de la bibliothèque de widgets graphiques: le framework de dessin 2D qui tourne autour de la QGraphicsView.

Version courte: on peut mettre n’importe quel objet 2D (un item) dans une scene et visualiser cette scene dans un nombre quelconque de views. On peut avoir plusieurs scenes mais ce sont des mondes séparés sans aucun partage d’items. Les items de base sont des rectangles, ellipses, bitmaps, etc. mais il est très facile de faire son propre item. Le fonctionnement de base de la view permet à l’utilisateur d’interagir en sélectionnant déplaçant, etc. les items sans aucune ligne de code, à tel point que l’un des exemples livrés avec Qt est un Visio-like (ou du moins un Dia-like) de seulement quelques centaines de lignes de code.

Il paraît aussi que le modèle scale à plusieurs dizaines de milliers d’items. Je n’ai pas essayé, mais avec les précautions prises (stocker les items dans un BTree…) et les références commerciales (Walt Disney, industrie aéronautique…) je veux bien le croire. En tout cas pour quelques dizaines d’items c’est le pied.

Plus d’info ici: http://doc.qt.nokia.com/latest/graphicsview.html

7. Les deux évidences: un toolkit GUI riche et une portabilité exemplaire

Je le garde pour la fin car ce sont les deux points forts de Qt, tellement évidents qu’il n’en sont pas amusants: le toolkit graphique de base est très riche (je veux dire en dehors de QGraphicsViews dont je viens de parler mais qui n’est qu’un détail) et la portabilité sur Windows, Linux, MacOSX, et les systèmes embarqués Nokia est exemplaire. Il paraît qu’on peut aussi l’utiliser sur d’autres plateformes (Unix propriétaires, Android, etc.) mais je ne crois pas qu’il soit possible d’acheter du support pour cela, donc c’est un peu l’aventure, et je ne l’ai pas tentée.

8. Installation en deux clics

Sur la page d’accueil de Qt (http://qt.nokia.com/) il y a un gros bouton download, ensuite c’est setup.exe sous Windows et équivalents sous Linux et Mac OS X. Et sinon n’importe quelle distribution Linux décente package Qt Creator et ses dépendances.

Donc vous n’avez aucune excuse pour continuer à lire ce billet plutôt que d’aller installer l’environnement de développement Qt.

9. Les sujets que-je-n-aborderai-pas-faute-de-place-pourtant-j-en-avais-envie

En vrac, si vous n’êtes pas encore convaincus: le système de traduction est nickel pour permettre de séparer le cycle de développement du cycle de traduction; tout est disponible entre triple licence GPL, LGPL ou commerciale; c’est made in Europe; on peut utiliser Qt avec d’autres langage que C++ (il existe des bindings Python et Java, notamment) mais moi j’aime le C++ (au moins avec Qt); il y a des classes de bases très décentes pour gérer facilement des accès aux bases de données SQL et le multithread; le modèle model-view des widgets pour collections (QListView, QTreeView, etc.) est bien pratique une fois qu’on a fait l’effort de le comprendre et les versions simplifiées pour développeur pressés des mêmes widgets évitent le nœud de neurones.