out through the winter throat

out through the winter throat le blog de Anahkiasen.

Articles taggés avec ‘css’

Depuis quelques temps j’ai envie d’écrire une mince série de billets sur ce que je fais plus concrètement au travail. Histoire de partager, recueillir quelques avis et puis pouvoir discuter un peu de sujets qui me passionnent avec des gens qui traversent la même chose. Comme je l’avais mentionné dans un précédent article, j’ai commencé à travailler il y a deux ans et demi de cela. Quand je suis arrivé, j’avais quelques vagues et lointaines connaissances de PHP, des connaissances un peu plus récentes en CSS3 et xHTML, et puis c’était environ tout.
Projection aujourd’hui, où j’ai peu à peu monté et amélioré mon propre framework PHP avec tout le confort et la simplicité dont j’ai besoin; où j’ai la tête plongée dans le CSS3 et le HTML5, ses normes et avancées quotidiennes en termes d’interface et d’ergonomie. Je tâte un peu de Javascript et d’AJAX. Je suis quelques blogs, me tiens au courant des dernières modes et nouveautés, participe activement au développement des projets qui me sont chers sur Github, etc. Sans jamais vraiment arriver à m’appeler webdevelopper, j’ai parcouru bien du chemin et tiens beaucoup mieux le rythme face au flux perpétuel de changements d’un web qui se renouvelle en permanence.

Je comptais diviser ces articles en quelques points, un peu au hasard. Aujourd’hui, et parce que c’est ce qui me passionne le plus en ce moment, je voulais aborder un peu le monde des préprocesseurs qui ont le vent en poupe depuis quelques mois*. Ils existent depuis plus longtemps certes, mais j’ai l’impression que c’est vraiment depuis peu qu’ils ont explosé et se sont démocratisés.
Qu’est-ce qu’un préprocesseur ? C’est comme son nom l’indique une sorte de langage supplémentaire dans lequel on va coder, et qui va ensuite être processé (compilé quoi) vers un autre langage. L’intérêt d’employer des préprocesseurs CSS, JS ou HTML ? C’est qu’ils rajoutent des couches assez exceptionnelles de fonctionnalités, d’améliorations de syntaxe et de possibilités, à des langages vieillissants. Ils simplifient des tâches répétitives, sont plus souples, et l’intérêt comme ils sont ensuite compilés et non calculés en direct, c’est que le client ne voit aucune différence.

* Ma copine me précisant que cette expression lui fait penser à « PD comme un foc », à cause du vent en croupe.

LESS, SASS et Compass

sass
696863337

Petite note préambule : je n’aborde pas les autres préprocesseurs car moins connus et ou plus mis à jours (Stylus etc).
LESS et SASS sont tous les deux des préprocesseurs CSS, qui à mes yeux de tous les langages était celui le plus vieillissant. Comme l’abordait Chris Eppstein, le créateur de Compass, le CSS est devenu un langage qui ne répond plus aux attentes et besoins du web moderne. Beaucoup de choses ont contribué à l’alourdissement de ce langage : son interprétation variable selon les navigateurs, sa syntaxe trop simpliste, les différents moteurs qui l’empoisonnent de propriétés propriétaires et contribuent à sa non-uniformisation. Entrent en jeu les préprocesseurs, ici LESS, SASS. Tous différents mais se rejoignant sur un ensemble de grands thèmes : la création de fonctions (ou mixins), des bouts de CSS dynamiques qu’on peut pré-créer et réemployer, l’ajout de variables au CSS, de fonctions permettant le calcul de mesures et de couleurs, et le nesting de classes. Ce n’est pas tout bien sûr mais c’est l’essentiel. De là découlent énormément de possibilités.


À gauche du SASS, à droite le résultat en CSS

À l’idée d’aborder ce paragraphe j’étais teinté d’une légère honte en ayant l’impression de retourner ma veste. Deux articles plus bas j’encensais LESS par sa simplicité d’intégration et ses possibilités, et à contrario descendait le SASS par sa difficulté pour le premier venu. LESS pouvant être compilé à la volée via du Javascript, et SASS devant être compilé via Ruby, à l’ancienne dans la ligne de commande (sauf si votre projet est lui aussi en Ruby, par exemple via Ruby on Rails).
Mon changement d’opinion s’est fait alors que je tentais de transposer un fichier SASS en LESS; alors que tout se passait plus ou moins bien, je ne cessais de buter sur des fonctions et choses diverses complètement irréalisables en LESS. Pour une raison simple : SASS possède des syntaxes de boucles et de conditions (if, for, while, else etc) que le développeur de LESS refuse d’intégrer par principe. J’ai alors peu à peu entamé ma migration vers le SASS et quand j’ai mis la pointe du pied dans l’océan de possibilités qu’offrait Compass, je n’ai plus regardé derrière moi.
Compass est une librairie de fonctions pré-créées en SASS, une sorte de toolkit prévoyant tout ce qu’on peut imaginer avoir besoin pour faire du CSS de nos jours. Création de sprites à la volée, gestion dynamique des dossiers, myriades de fonctions et mixins, grille CSS, et j’en passe. Je me suis peu à peu rendu compte en codant en SASS des limitations du LESS et ai compris que le seul vrai point noir de ce langage était sa documentation déroutante et peu aguichante pour le nouveau venu alors que LESS propose un site simple en une page. Un point que le développeur assure être en train de corriger via une équipe dédiée à la refonte du site et de la documentation de SASS.

Le poids le plus important à mon goût c’est que Twitter lors de la création de Bootstrap, son framework CSS, a décidé de le coder en LESS. J’ai mis un peu de temps à faire la transition, moi qui suit le projet aux derniers commits, mais après création d’un petit script de conversion LESS->SASS ça ne me pose plus de problèmes.

CoffeScript

267-coffeescript-basics

Au niveau du Javascript je passe désormais toujours par du CoffeeScript. D’une parce qu’il m’évite des erreurs de débutants, moi qui n’emploie pas autant le Javascript que d’autres langages, et de deux parce qu’il simplifie sa syntaxe à un point que je n’imaginais possible. Les exemples en page d’accueil sont à mes yeux les plus probants donc je vous laisse y jeter un oeil.
De paire avec des bibliothèques comme jQuery c’est désormais un plaisir d’apporter interactivité et dynamisme à des pages plates, et je n’ai à ce jour rien trouvé que sans grandes connaissances en JS je ne puisse faire à l’aide de ces deux outils.

HAML

haml

HAML est un préprocesseur HTML. J’en parlerai moins parce que de tous c’est celui que j’emploie le moins, la plupart de ce dont j’ai besoin pouvant déjà être fait en PHP. Il reste cependant utile lors de la création de longues pages HTML complexes (emailing etc), car il simplifie énormément la syntaxe HTML, un peu à la manière de ZenCode.
Il est aussi assez peu mis à jour, le créateur étant celui de SASS et étant du coup assez accaparé par ce dernier. On retrouve une syntaxe justement proche du SASS, avec des { } qui sont omis au profit de l’indentation, et une intégration du Ruby assez soutenue. La possibilité d’y dédier des zones “filtres” où l’on peut par exemple employer du Markdown ou autre, rend la mis en page de contenu très simple et ça reste un bon gain de temps par rapport au fait de taper le HTML à la main. C’est aussi beaucoup plus facile de revenir dessus pour corriger des choses.

Conclusion

Cet article était plus dédié à ceux qui ne connaissent pas la chose qu’aux autres. En tout cas dans mon travail à l’heure actuelle ce sont désormais des outils dont je pourrais pas me passer. Revenir au simple CSS maintenant, avec toutes ses contraintes et ses lourdeurs, me serait impossible.
Pour ceux qui ont du mal ou manquent de courage quant à se lancer dans Node.js, compiler à la console et autres, je suis prêt à vous guider si vous le voulez. Ce ne sont pas les tutoriaux qui manquent mais étant moi-même passé par là je sais à quel point il est dur d’entrer dans le monde du Ruby, des gems et compagnie quand on n’a jamais touché à autre que du PHP.

LessCSS : mon coup de cœur du moment

Mercredi 21 décembre 2011

Je ne parle pas beaucoup de webdesign et de programmation sur mon blog. Pendant longtemps la raison a été que je ne me sentais pas forcément à l’aise avec ce que je faisais - pas assez au point par rapport aux nombreux standarts du web et à la qualité de ce qui se faisait ailleurs. Depuis le travail en agence m’a fait énormément progresser : moi qui n’avait à l’origine que quelques lointaines connaissances en PHP, ai désormais codé mon propre framework pour les sites qu’on me demande de faire. Avec gestion des templates, mise en cache des pages, code orienté SEO avec URL Rewriting et consorts, gestion du multilingue, admin intégrée etc. Le tout en OOP et conforme aux standars actuels du web (xHTML/HTML5/CSS3 et des touches de jQuery).

Le tout est plus formaté à mes propres besoins qu’à un usage public mais reste que depuis mon entrée dans le monde du travail, j’ai énormément progressé, principalement parce que je suis curieux et que j’adore apprendre sans cesse de nouvelles choses. Ma découverte du moment ? LessCSS.
Il n’est pas rare que dès que quelqu’un découvre ou redécouvre quelque chose de nouveau en webdesign, tout le monde s’emballe du jour au lendemain (voir le cas des CSS Media Queries). LessCss est à l’origine une extension Ruby qui propose d’enrichir le langage CSS via un panel de fonctions qui jusque là manquaient cruellement - le but étant de rendre le langage CSS plus flexible et lisible. Malgré son énorme potentiel (tout comme SASS, une extension CSS du même genre), la contrainte du langage Ruby a fait que le tout est jusqu’à peu resté dans l’ombre. Ce qui a changé il y a peu justement ? C’est que LessCSS est désormais proposé comme une script Javascript. Ça veut dire que concrètement tout ce qu’il y a à modifier dans son code c’est ça :

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>
<script src=”less.js” type=”text/javascript”></script>

Il suffit de changer l’extension de sa feuille de style par .less et de joindre le fichier en ligne LessCSS, et c’est tout. On a une extension CSS portative, facile à intégrer, et universelle. Mais qu’apporte concrètement LESS pour ceux qui ne connaissent pas ? Pour peu que vous ayez un peu de connaissances en CSS, voici un exemple de code LESS que vous devriez comprendre et qui vous donnera un aperçu de ce qu’on peut faire :

// Fonctions
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha)
{
	@val: @x @y @blur rgba(0, 0, 0, @alpha);

	box-shadow:         @val;
	-webkit-box-shadow: @val;
	-moz-box-shadow:    @val;
}

// Mixins
.gras
{
	font-weight: 900;
	text-decoration: underline;
}

// Blocs principaux
div
{
	@base: #f938ab;

  	.gras;
  	color:        saturate(@base, 5%);
  	border-color: lighten(@base, 30%);

	a
	{
		text-decoration: none;

		&:hover { color: red; }
		&:active { color: blue; }
	}
	p.introduction
	{
		background-color: @base - #333;
		.box-shadow(0, 0, 5px, 0.4);

		strong { .gras }
	}
}

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Création de fonctions, de variables, de mixins (des propriétés que l’on pré-créer et ensuite réattribuer), mathématiques des couleurs, nesting des propriétés, et j’en passe. Le joli petit site officiel détaille mieux la chose que moi (et avec de la coloration de code surtout), toujours est-il qu’une fois qu’on y a goûté il est dur de s’en passer. Les possibilités sont vraiment nombreuses, comme par exemple cette grille dynamique en LESS.

La cerise sur le gâteau c’est - pour les soucieux de l’infime temps de calcul de LESS - les nombreux compileurs gratuits et multiplateformes qu’il existe, comme LESS.app qui vous demande un dossier de projet et qui ensuite compile des fichiers .css propres et valides en réel à mesure que vous travaillez sur vos .less. On a donc là une extension de langage qui peut-être à la fois vu comme une aide au code ou/et comme une extension matérialisant vos rêves les plus fous de design dynamique.
Je ne sais pas ce que vous allez en penser, peut-être des gens plus experimentés se prononceront-ils sur des défauts majeurs m’ayant échappés, mais pour l’instant LESS c’est mon petit coup de cœur et je ne suis pas seul.

Peinture fraiche

Jeudi 18 décembre 2008

Je refais les murs, ne faites pas trop le bazar pendant ce temps.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor magna at nisl. Aenean porta, nunc vitae adipiscing porta, nibh velit lacinia nulla, non tincidunt diam magna non lorem. Proin ultrices iaculis felis. Vestibulum tempus metus nec nisi. Morbi dui. In accumsan. Quisque eu justo. Mauris vel mauris. In pellentesque nibh aliquet lectus malesuada pharetra. Aenean cursus tellus vitae ligula. Integer vel erat eu nisi mattis hendrerit.

Curabitur dapibus semper tortor. In libero. Quisque non diam. In hendrerit, nisl porttitor tincidunt venenatis, elit nisi pulvinar ante, et ultricies ipsum nisi at eros. Quisque nec tortor non diam accumsan lobortis. Nunc facilisis enim ac neque. Aenean vitae pede. Vivamus lacus enim, tempor ornare, faucibus non, eleifend at, ligula. Nulla magna mauris, volutpat at, faucibus id, tempus in, urna. In ultrices, libero quis egestas congue, leo leo faucibus lacus, at suscipit nisi lorem quis nibh. Praesent ornare mollis sapien. In in leo. Duis porttitor, tortor eget pellentesque molestie, purus nisi elementum nisi, nec suscipit enim nisi quis libero. Pellentesque et mi. Fusce sodales, lectus vehicula sagittis gravida, tellus ante consequat erat, non sollicitudin erat diam at dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In nec risus vel mi aliquam vulputate.