Archives de catégorie : CSS

Outils CSS3 – HTML5 – JavaScript : Episode 9

CSS, Developpement Web, JavaScript, , ,

Au menu, des liens, des outils, des présentations … sur HTML, CSS et JavaScript.

Talks

Voici quelques présentations que j’ai beaucoup appréciées :

HTML

CSS

  • Pure : Un framework CSS (gère le responsive)
  • Responsive Web Design
  • PlentyofFrameworks : trouver le framework CSS qui vous convient
  • Enjoycss : éditeur de composant CSS
  • CSSShake : Une feuille de style pour secouez vos éléments
  • Style Guide guide : site regroupant des générateurs de style guide (guide d’utilisation de vos style (un exemple))
  • CSS Values : permet de rechercher une propriété CSS pour facilement connaître son utilisation et les valeurs possibles
  • Bounce.js : un générateur d’animation CSS 3
  • CSS Stats : Statistique concernant CSS (nb de sélecteurs, couleurs, …) d’un site
  • Critical Path CSS Generator : Générateur de Critical Path. Critical Path est une technique qui consiste à injecter, directement dans votre code HTML(inline, dans le header) le code CSS minimal afin d’accélérer la vitesse de rendu de votre page. Le reste du code CSS est à charger via des fichiers CSS classique en fin de page. Cet outils permet d’extraire le code CSS à injecter en fonction d’une page.
  • Flexplorer : un générateur et outils de test de flexbox
  • une cheatsheet sur la propriété flexbox en css3

JavaScript

Divers

Outils CSS3 – HTML5 – JavaScript : Episode 8

CSS, Developpement Web, JavaScript, Web, , , ,

Html

  • Une liste d’articles sur l’utilisation d’Emmet(part 1, 2, 3 et 4) (mon article de présentation d’Emmet qui s’appelait à l’époque Zen coding) Toujours sur le même sujet, une cheat sheet de emmet assez complète.
  • Un article qui présente l’api de vibration
  • Responsinator : Permet de visualiser le rendu d’un site en mode responsive sur différents terminaux (iPhone 3/4, iPhone 5, iPad, Android, …) en portrait et paysage. Un exemple avec mon site.

CSS

  • Spinkit : Animations d’attente en CSS3
  • Myth : Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.
  • CSS Zen Garden : La nouvelle version HTML5 Zen Garden.
  • lesshat.com : collection de mixins less
  • extractCSS : permet d’extraire les styles inlines d’un code HTML
  • Stitches : un générateur de Sprites
  • CSS Animate : Outil de génération d’animations CSS

JavaScript

Divers

Présentation de Bower

CSS, Developpement Web, JavaScript, ,

La gestion des librairies externes (javascript, css, font, …) d’un projet front end peut rapidement devenir contraignant. Il faut aller sur le site de chaque librairie pour télécharger les fichiers nécessaires et les copier dans votre arborescence projet. Sans compter sur la gestion des mises à jour et des dépendances.

Bower est un outil de gestion de librairies pour le web (NuGet est le pendant pour le monde .NET sachant que celui-ci n’est pas restreint aux librairies .net mais aussi les librairies front end comme jquery par exemple). Développé à l’origine par les équipes de Twitter, il est utilisé par de nombreux projets open source comme Bootstrap, Normalize, AngularJS, ….

La récupération des librairies se fait majoritairement sur Github via git, il faut donc que git soit installé sur votre poste.

Installation

Bower est basé sur Node.js et npm qui doivent également être installés sur votre machine. L’installation de Bower se fait via la commande suivante :

npm install -g bower

Bower est à installer en global via l’option -g afin de pouvoir l’utiliser sur tous vos projets.

Utilisation

Bower se base sur un fichier JSON, bower.json, qui va définir, à la manière d’un package.json en node.js, la liste des dépendances de votre projet.

Voici par exemple, le fichier bower.json pour ma page de gestion de score de volley, avec les dépendances vers jQuery, knockout et modernizr :

{
  "name": "Volley",
  "version": "0.2.0",
  "description": "Application de gestion de score de match de Volley",
  "main": "volley.html",
  "keywords": [
    "volley",
    "game"
  ],
  "authors": [
    "Julien Roy"
  ],
  "license": "MIT",
  "dependencies": {
    "modernizr": "~2.7.1",
    "jquery": "~1.7.2",
    "knockout.js": "~2.3.0"
  }
}

Bower va récupérer dans la plupart des cas, le projet entier de la librairie et le copier dans le répertoire des dépendances (par défaut bower_components).

Liste des commandes

Voici la liste des principales commandes de bower :

  • install : installer toutes les dépendances du projet définies dans le fichier bower.json
  • install package-name : installer une dépendance via son nom (il est possible de spécifier une version spécifique via #1.2.3 ). Utilisez l’option –save ou -S pour que la dépendance soit rajouté dans votre fichier bower.json
  • update : mettre à jour les dépendances d’un projet
  • search : rechercher des dépendances dans le répertoire de bower (possible de rechercher sur bower.io/search/).
  • uninstall package-name : supprimer une dépendance du projet (avec –save ou -s pour supprimer du fichier bower.json).
  • list : affiche la liste des dépendances

Configuration

Bower peut être configuré en utilisant un fichier JSON .bowerrc. Il permet de configurer par exemple le dossier dans lequel seront installées les librairies, le proxy à utiliser, ….

Voici mon fichier .bowerrc qui redéfinit le dossier dans lequel seront téléchargé les dépendances :

{
  "directory": "libs/"
}

Voici le lien vers la documentation.

Liens

Conclusion

Bower est un puissant outil de gestion de dépendances de projet web permettant de facilement installer un nombre impressionnant de librairies (prés de 7900 actuellement). N’hésitez pas à le coupler avec Grunt sur vos projets (déplacer vos dépendances dans un dossier build, concaténation, …).

Chrome : Bien débuger avec la barre d’outils # 2

CSS, Web,

Cet article fait suite à l’article Chrome : Bien débuger avec la barre d’outils.

Ajouter une Watch Expression

Lors de debug JavaScript, vous devez regarder dans vos objets pour surveiller l’évolution des valeurs de vos variables. Chrome permet de rajouter des expressions afin de plus facilement surveiller ces valeurs. Ces expressions sont gardées au rafraîchissement de la page.

Les Watch Expressions sont gérés dans l’onglet Sources, dans la partie droite, dans l’accordéon du même nom. L’ajout se fait en cliquant sur le +. Il suffit ensuite d’entrer l’expression dans la textbox qui propose l’auto-complétion. Les valeurs sont automatiquement mis en jour en debug et il est possible de les rafraîchir via l’icône de rechargement.

WatchExpression

Emuler les événements de touch

Aujourd’hui les tablettes et smartphones sont de plus en plus répandu et beaucoup les utilisent pour naviguer sur Internet. Sur ces appareils sans souris, ce sont des événements « touch » (avec les doigts) qui sont émis. Chrome permet d’émuler ces événements touch. Pour cela il faut aller dans la barre de développement de Chrome, aller dans les préférences (icône en bas à droite en forme d’engrenage), et aller dans Overrides et cocher la case Emulate touch events. Bien entendu, vous ne pourrez pas simuler plusieurs doigts mais c’est déjà ça !!

Emuler les événement touch

Emuler un User Agent et la résolution d’un appareil

Chaque navigateur peut être identifié par ce que l’on appelle un User Agent. Cette information est envoyée à chaque requête au serveur et contient notamment des informations concernant le nom de l’application, la version, le système d’exploitation, la langue, etc…

Il est ainsi possible de modifier la réponse en fonction des informations de l’User-Agent comme renvoyé une page spécifique pour les appareils mobile par exemple.

Chrome permet de modifier cet User-Agent. Pour cela, il faut ouvrir la barre de développement de Chrome, aller dans les préférences (icône en bas à droite en forme d’engrenage), et aller dans Overrides et cocher User Agent. Une liste des principaux navigateur et appareils sont pré-configurés (Firefox, IE, IPhone, IPad, Android, …)

Il est également possible de simuler une résolution (j’avais expliqué dans un post précédent comment le faire avec Firefox) encochant l’option Device metrics. On peut choisir une résolution de manière manuelle et définir le facteur de zoom (Font scale factor). Dans le cas d’un appareil mobile, la sélection d’un user agent met à jour automatiquement la configuration avec celle de l’appareil choisi. Super Pratique !!!!

Voici en exemple mon CV configuré pour un téléphone Android Nexus S.

Emuler un User-Agent et une résolution

Simuler une géolocalisation

Aujourd’hui, de plus en plus d’application utilise la géolocalisation pour offrir des résultats adaptés à notre localisation (ex : pages jaunes). Chrome permet de simuler une géolocalisation et une position non disponible.

Emuler une géolocalisation

Emuler un média CSS

CSS permet d’adapter le rendu suivant le média sur lequel est affiché le site (écrans, projecteurs, imprimante, tv, Synthèses vocales, …). Chrome permet d’émuler un média. Cela se fait toujours dans les préférences de Chrome, Overrides, cocher Emulate CSS media et sélectionner le média à cibler. Cela s’avère très pratique notamment dans le cas de l’impression (j’avais évoquer la gestion des liens lors de l’impression dans un précédent article). Ci dessous, l’exemple de mon CV via l’émulateur avec le média print :

Emuler le média print

Console.Table

Vous utilisez surement abusivement de console.log pour débuguer vos scripts. Console.table est une méthode qui permet d’afficher le résultat sous la forme d’un tableau. Cela est pratique pour visualiser les objets de types Arrays mais également les objets.

Console.Table

A noter, que console.table() est également disponible sous Firebug.

Voici un article complet de présentation de console.table().

Liens

Outils CSS3 – HTML5 – JavaScript : Episode 7

CSS, Developpement Web, JavaScript, Web, , ,

L’épisode 7 des outils liés aux technologies du web …

JavaScript

  • Une liste de plugins essentiels JQuery
  • jsdb.io : Un site qui répertorie les librairies JavaScript regroupés par thèmes avec recherche.
  • SnapSvg : une librairie pour gérer du SVG. Créée par Adobe (qui s’y connaît en vectoriel) en open-source, un des principaux développeurs est le concepteur de la librairie Raphael.js, une autre librairie qui permet de gérer du SVG.
  • Un article concernant la détection et l’avertissement lors d’une déconnexion d’un utilisateur
  • Normes de codage JS de airbnb (le site de réservation d’appartement entre particuliers)

CSS

  • Topcoat : une librairie CSS par adobe
  • Create CSS3 : Un générateur de règles CSS (assez complet, support des préfixes)
  • Koala : Une interface pour générer du CSS à partir de  LESS/SASS/Compass et du JavaScript à partir de CoffeeScript. Compatible Windows, Linux et Mac

HTML

  • Un très bon article sur sitepoint.com concernant la géolocalisation.
  • Real favicon generator : générateur de favicon (image représentant un site. Permet de générer également des icons pour Win 8, tablettes (iOS, Android, Windows Phone).
  • Ionicons : la police d’icône du framework ionic, pour créer des applications mobile en HTML5.
  • Runnable.com : permet de rechercher du code et de le tester (compatible avec pas mal de technos web (PHP, .NET, Ruby, NodeJs, …)
  • Une très bonne présentation (en anglais) sur l’automatisation de la partie front d’un projet
  • Un très bon article sur le Responsible Web design avec une boite à outils

Outils CSS3 – HTML5 – JavaScript : Episode 6

CSS, Developpement Web, JavaScript, , ,

Une petite liste d’outils/librairies/… pour les développeurs web trouvés ici et là …

JavaScript

CSS

  • CSS3 Flexible Box Layout Explorer : Comprendre le layout flexbox de CSS3
  • Preboot : une collection de fonctions utiles (mixins, variables) pour less
  • CSS3 Click Chart : Exemple d’utilisation des propriétés CSS3
  • Stylify Me : Affichez facilement les couleurs, police, dimensions d’un site web.
  • Tridiv : Un éditeur CSS pour créer des formes 3D
  • CSSLisible : CSSLisible va réindenter vos blocks de code, ordonner vos propriétés, afin de fournir un code CSS Lisible et plus maintenable. Attention, les commentaires internes aux sélecteurs sont retirés !

HTML

Tout ce qu’il faut savoir les favicons

Font

Fontello : Un Générateur de police d’icône.

Divers

Une liste de points à vérifier lors de vos développements web :

DevDocs : un site regroupant la documentation pour HTML/CSS/JavaScript/DOM/JQuery/… bien fait avec la compatibilité par navigateur.

CSS : Tuile Responsive

CSS, Developpement Web,

J’ai dans un article précedent parler de responsive design afin d’adapter un site en fonction des devices des visiteurs. Nous allons voir comment faire des tuiles responsive.
Nous allons repartir de l’exemple d’un article précédent montrant comment tronquer du texte en CSS. L’exemple montrait des tuiles carrées. Nous allons adpater le design pour avoir des tuiles rectangulaire si la largeur est inférieure à 480px.

Une tuile est définie par un titre, une description et une image.
Le code html d’une tuile est le suivant :

<li>
<a class="tile" title="Partager avec un Ami" href="#">
<h1>Partager avec un Ami</h1>
<img src="share.png" alt="">
<p>Partager sur Twitter, Facebook, ...</p>
</a>
</li>

Voici le code CSS qui permet d’afficher les tuiles sous formes d’un carré.

div#home[role="main"] ul#tiles-panel li {
	display: inline-block;
	list-style: none outside none;
	margin: 0 8px 8px 0;
	vertical-align: top;
}

.tile {
	-moz-box-sizing: border-box;
	background: none repeat scroll 0 0 #F0F1F4;
	border-bottom: 3px solid #7B4F9D;
	display: inline-block;
	height: 176px;
	text-decoration: none;
	vertical-align: top;
	width: 176px;
}

.tile h1 {
	color: #253340;
	display: block;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 10px;
	text-decoration: none;
	white-space: nowrap;
	text-overflow : ellipsis;
	overflow : hidden;
	text-align : center;
}

.tile img {
	left: 50%;
	margin: 5px 0 10px -25px;
	position: relative;
}

.tile p {
	color: #6A747E;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 0 10px;
	text-align: center;
}

Voici la démo de cet écran sans adaptation.

On peut voir qu’avec un petit écran, cet affichage n’est pas du tout adapté. Nous allons le modifier afin d’optimiser l’affichage sur les petites résolutions. Pour cela, nous allons :

  • afficher les tuiles sous formes rectangulaires les unes à la suite des autres
  • réduire l’image et la placer à la gauche de la tuile

Voici le code qui permet d’adapter le résultat pour une utilisation pour petits écrans avec l’utilisation d’une média queries ciblant les écrans ayant une largeur maximum de 480px : 

@media only screen and (max-width: 480px) {
    h1 {
	font-size : 24px;    
    }
	
    div[role=main]#home   ul#tiles-panel  li {
	display: block; /*passage en block pour affichage les uns en dessous des autres */
	position : relative;        
    }
	
    /*Tiles*/
    ul {
        padding : 0;   
    }
    
    .tile {
        width : 100%;
        height : 55px;    
        display : block;
        border-bottom : 0px;
        border-left: 3px solid #7B4F9D;
    }
	
    .tile  h1 {
        padding : 0;    
    }

    .tile  h1, .tile p {
        margin-left : 50px;    
    }
	
    .tile img {
        position: absolute;
        top : 5px;
        left : 5px;
        width : 45px;
        height : 45px;
        margin : 0 1px; 
    }
}

Et voici le résultat avant/après (utilisation de la vue adaptative de Firefox pour tester) :

Tuile non Responsive

Tuile Responsive

La page de démo

Dans cet exemple, j’utilise les mêmes images pour les 2 versions alors qu’il serait mieux d’avoir des images adaptées en fonction de la résolution, ce qu’on appelle responsive images. Il faut savoir qu’il sera bientôt possible de définir plusieurs sources d’image afin de gérer ce cas (via l’attribut srcset de la balise image ou via l’élément picture) et qu’il existe déjà des polyfills comme srcset-polyfill. Pour en savoir plus, je vous conseille responsiveimages.org.

Firefox/Chrome : Forcer l’état d’un élément

CSS, Developpement Web,

Les navigateurs modernes possèdent aujourd’hui des outils pour développeurs très puissant que ça soit pour le HTML, CSS, JavaScript, profiling, … En CSS, la possibilité d’éditer les styles en « live » est très pratique mais peut s’avérer complexe dans certains cas comme la gestion des états (hover, focus, …). Voyons comment debugger plus facilement ce cas avec les consoles web de Chrome, Firefox et Firefug (extension pour Firefox bien connue des développeurs web). (Je n’ai pas trouver comment faire sous IE et n’utilise pas d’autres navigateurs comme Opera ou Safari …)

En effet il est possible de forcer un état sur un élément avec ces outils, ce qui est très pratique notamment pour l’état :hover (survol d’un élément).

Chrome

Il faut faire un clic droit sur l’élément dans l’inspecteur d’élément (Onglet Elements dans la barre d’outils développeur. F12 pour l’ouvrir) et choisir l’état dans le menu Force element state.

Les états gérés sont :

  • active
  • hover
  • focus
  • visited

Forcer un état sous Chrome

Firefox

Sous Firefox, cela fonctionne de la même façon que sous Chrome à la seule différence que l’état visited n’est pas disponible.

Forcer un état sous Firefox

Firebug

Avec Firebug, l’activation est un peu plus difficile à trouver. Une fois l’élément sélectionné dans l’explorateur HTML, il faut cliquer sur la flèche de l’onglet Style pour pouvoir activer l’état voulu. Firebug ne gère que les états :hover, :active et :focus comme Firefox.

Forcer un état avec Firebug

CSS : Tronquer du texte

CSS, Developpement Web

Voici une petite astuce afin de tronquer un texte en CSS si celui-ci dépasse de son conteneur.

Voici le code CSS qui permet d’effectuer cet « effet » qui est très bien supportée même sous IE ;).

h1 {
    white-space : nowrap; //permet de forcer le non retour à la ligne
    overflow : hidden; //permet de masquer si ça dépasse
    text-overflow : ellipsis; //permet de rajouter ... si ça dépasse
}

Une petite démo avec des boites style Modern UI (Windows 8).

Texte tronqué

Références

Outils CSS3 – HTML5 – JavaScript : Episode 4

CSS, Developpement Web, JavaScript, Web, ,

HTML

Savez-vous qu’il est possible d’utiliser des caractères Unicode en tant qu’icône. Voici un tableau des différentes Icones web Unicode.

CSS

Les sélecteurs CSS

On retient souvent dans les nouveautés CSS3 ce qui concerne l’affichage (transformation, gradients, …) mais de nouveaux sélecteurs puissants ont également été introduits (:nth-child(expression), :contains(value), :checked, …). Voici un article qui explique les différents sélecteurs en CSS3 et une librairie selectivizr qui permet de supporter ces sélecteurs dans IE de la version 6 à 8.

Framework CSS

  • KNACSS : développé par Alsacréations
  • Ratchet : Un framework dédié au mobile. Idéal pour du prototypage.

Outils CSS

Divers

2 articles sur Smashing Magazine concernant des techniques JS/CSS qui peuvent s’avérer utiles (le premier et le deuxième). Voici 2 techniques/outils qui ont retenus mon attention :

JavaScript

Fuites Mémoires

Google a sorti Leak Finder un outil JavaScript open source pour trouver les fuites de mémoire dans vos applications

Framework MVC

TodoMVC : comparateur de framework JS MV*(M ou VM). Une application de gestion de tache (todo list) est implémentée avec différents framework (angular, ember, blackbone, knockout, …). A vous de choisir en fonction du type de la philosophie à adopter pour votre projet; Cela permet de comparer le code et d’avoir des bonnes pratiques pour débuter.

LINQ Pour JavaScript

Ceux qui travaillent dans le monde .NET doivent probablement connaitre LINQ qui est une technologie qui permet de requéter des sources de données hétérogène (base de donnée, objet, fichier XML, …). Il existe plusieurs librairies JavaScript qui permette d’effectuer des requêtes LINQ sur des objets JSON :

Librairies

Quelques librairies qui peuvent s’avérer pratique :

Jster : Catalogue de librairie JavaScript (plus de 750 à l’heure actuelle)

Mobilité

10 outils pour le Web mobile sur Alsacreations