Archive pour la catégorie ‘Développement’

XAMPP : Utiliser le socket MySQL sur OSX

Dans la série « Je cherche », je voudrais l’emplacement du fichier de Socket de MySQL avec XAMPP 1.7.3 pour OSX. Notamment pour pouvoir travailler sur ma base en local avec Coda 2 (très bon soit dit en passant !).

J’ai croisé pas mal de développeurs qui cherchent la même chose sur le web. De mon côté, comme j’utilise aussi MySQLWorkbench, j’ai facilement retrouvé l’adresse du socket, mais je me dis que ça peut :
1) me resservir la prochaine fois (oui, j’avoue, c’est pas la première fois que je cherche),
2) faire gagner quelques minutes à plein d’autres développeurs qui ont mieux à faire de leurs mimines.

L’adresse du socket dépend en fait de l’endroit d’où vous exécutez XAMPP, mais grosso-modo, c’est là :

/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock

Attention, sur Mac, le mysql.sock ne se voit pas dans le système de fichiers.
Sinon ce ne serait pas drôle 🙂


Optimiser et sécuriser son site web

Votre site est-il convenablement sécurisé ? Que se passerait-il si un virus venait à s’installer sur votre dernière création ? Combien de temps vous faudrait-il pour remettre tout ça en ordre ?

C’est en cherchant à optimiser mon site en passant par un Content Data Network (CDN) que je suis tombé en rafale sur toute une panoplie de trucs sympas et efficaces.

CloudFlareCloudflare

CloudFlare est à la base un CDN. Tout bête, il stocke vos contenus statiques sur différents serveurs un peu partout dans le monde pour que votre site s’affiche de manière efficace quel que soit le pays d’appel. J’ai déjà parlé des nombreux avantages des CDN dans un billet précédent (et je n’ai pas changé d’avis).

Pour cette première partie, CloudFlare agit de manière assez intéressante et se configure de manière totalement transparente : il vient s’intercaler au niveau des DNS. Pas de nom de domaine étranger à glisser et l’internaute ne s’aperçoit de rien, pour lui, tout se passe chez vous. CloudFlare n’apparaît jamais tant que tout se passe bien.

Si on veut optimiser un peu la chose, on placera un sous-domaine pointant sur le répertoire où sont stockés les fichiers statiques (javascript, images, CSS, etc.), cette méthode permettra de conserver la parallélisation des téléchargements côté client, sachant que les navigateurs ne téléchargent que 4 ou 5 fichiers en même temps pour un même nom de domaine, ajouter un sous-domaine permet donc théoriquement de doubler la vitesse d’affichage du site.

Mais CloudFlare ne fait pas que ça…

Un bon nombre d’options sont disponibles. Vous pourrez à souhait minifier vos éléments statiques (voire même votre html), lutter de manière efficace (puisque mutualisé) contre le spam et les attaques diverses, ou encore précharger les différentes pages de votre site (dans la version payante en revanche).
Au passage CloudFlare offre aussi la possibilité d’activer des « apps » sur son site. La dernière fois que je m’en suis servi c’était une bannière pour informer mes lecteurs sur les dangers de l’ACTA. J’avais un peu oublié la date de cette « cyber journée d’information » et CloudFlare m’a permis de participer efficacement en quelques secondes. Utile.

CodeGuardCodeGuard

J’ai cherché un moment un outil de sauvegarde simple et efficace pour un site web. Il existe un tas de solutions, mais souvent chères ou inadaptées à ce que je voulais faire. CodeGuard me convient bien. Il travaille via FTP, il passe régulièrement voir ce qui a changé sur votre site et récupère les nouveaux fichiers s’il y en a. Tout se fait automatiquement après la configuration et il est gratuit jusqu’à 2 Go de données.

Comme CloudFlare, CodeGuard ne fait pas que ça…

Ce service dispose d’une détection de changements dans les codes, ce qui permet d’être averti à la première infection d’un malware ou d’un virus. Une « TimeMachine » est aussi disponible pour naviguer dans les anciennes version du site. Bien entendu, il est possible (c’est le but ultime) de restaurer son site avant les derniers changements, ce qui peut permettre de sortir d’un mauvais pas un peu plus facilement.

Le seul hic avec CodeGuard consistera à sauvegarder votre base de données si vous travaillez sur un site dynamique. Sur ce point, il y a deux solutions. CodeGuard propose un outil pour effectuer un backup de MySQL mais ce dernier nécessite des droits d’accès par un serveur tiers. Si vous êtes sur un serveur mutualisé, vous n’aurez certainement pas le droit de le faire. La solution de contournement consiste à utiliser un script qui exporte régulièrement votre base de donnée dans un fichier sur votre hébergement. C’est moins réactif, mais CodeGuard sauvegardera les différentes versions directement en FTP.


Utiliser la police de son choix sur son site internet

ArobaseL’intégration de polices de caractères sur un site web a longtemps été un casse tête pour les intégrateurs. On avait diverses solutions à portée de main : du flash, du javascript et quelques bidouilles assez incompatibles entres-elles pour lier directement une police dans le CSS.

Techniquement, si le W3C recommande depuis longtemps l’utilisation de Font-Face, celle-ci n’a pas toujours été implémentée comme il le faut dans les navigateurs. Aujourd’hui, l’horizon s’éclaircit progressivement même s’il faut encore fourber avec plusieurs formats pour arriver à un résultat efficace sur l’ensemble de la gamme des navigateurs. Dans l’ensemble on y arrive assez bien. Démonstration.

Tu l’a acheté ? Chuuuut ! Faut pas le dire sur internet…

Ah ! Un détail avant de vous lancer dans le code : une police de caractère est une oeuvre assimilable à un logiciel sur le plan juridique. Donc on touche au copyright (normal), aux droits d’auteur (un peu) et aux droits de diffusion (surtout). Si vous avez acheté une police, relisez bien les conditions d’utilisation, il est fort à craindre que vous n’ayez pas le droit de la proposer en téléchargement sur votre site web. Logique à priori, vous n’allez pas donner un truc qui se vend…

Sauf que… Les règles de Gutenberg ont un peu de mal avec le monde moderne. Si vous utilisez votre police sur votre site, il faudra bien que la machine de l’internaute la télécharge pour l’afficher. Même si l’utilisateur ne pourra pas (à priori, j’vous connais) s’en resservir dans un autre logiciel, vous placez cette police en téléchargement. C’est un fait. C’est stupide, mais c’est comme ça, sed lex.

L’idéal reste (once more) les polices gratuites ou sous Creative Commons. Perso, j’ai pris l’habitude de me fournir chez Google ou sur DaFont. Quitte à faire un petit don à l’auteur au passage (bah, au prix des polices payantes, ça reste tout bénef’ et vous assurez la pérennité du truc…).

Fourrer tout ça, proprement, dans son CSS…

Aller, une police libre dans une main, un ordi dans l’autre, comme l’ensemble des navigateurs ne comprennent pas tous la même chose, il faudra prendre soin de satisfaire chacun avec son ou ses formats de police préférés :

  • de l’Embedded OpenType (eot) pour Internet Explorer 4+
  • du Web Open Font Format (woff) pour Firefox 3.6+, Internet Explorer 9+ et Chrome 6+
  • et du Scalable Vector Graphics (svg) pour Chrome 3+, Opéra 9+
  • du TrueType (ttf) supporté par Firefox 3.5+, Opéra 10+, Safari 3.1+, Chrome 4+

Attention, l’ordre d’appel des différents formats dans le CSS compte et évitera à un navigateur qui comprend à la fois le SVG et le WOFF de charger le SVG à la place du WOFF. Au passage, ça vous évitera aussi quelques bugs sur certains navigateurs qui se mélangent un peu les pinceaux quand l’ordre ne leur convient pas (tatillons ?).

Pour convertir votre police dans les différents formats nécessaires à la pleine satisfaction les différents navigateurs Font Squirrel sera votre sauveur. Attention, ce dernier vous renverra à la loi si vous lui proposez une police handicapée d’un vilain copyright (et toc !).

Assez bavardé, voici le code magique à placer en tête de votre CSS.

@font-face {
    font-family: 'maPolice';
    src: url('fonts/maPolice.eot?')format('eot'),
         url('fonts/maPolice.woff')format('woff'),
         url('fonts/maPolice.svg#IdMaPolice')format('svg'),
         url('fonts/maPolice.ttf')format('truetype');
}

Explication de texte

  • La directive font-family permet de nommer la police pour les appels dans le CSS.
  • Dans les sources, on refile l’ensemble des formats aux navigateurs. Le navigateur s’arrêtera à la première qui lui convient.
  • Le point d’interrogation après l’extension eot permet de forcer le téléchargement sur IE afin qu’il n’interprète pas ce qui se trouve après ce caractère (ce qui permet d’ajouter les autres sources).
  • Le format eot s’appelle en fait embedded-opentype, l’utilisation d’eot leurre IE9 qui du coup ne connaît pas ce format et chargera le Web Open Font Format plus léger.
  • Dans le format SVG on notera une chaine louche après l’ancre. Il s’agit de l’identifiant du SVG. Vous le trouverez directement dans les premières lignes du fichier, dans une ligne qui ressemble à ça : <font id="IdMaPolice" horiz-adv-x="786" >.

Une fois la police incluse, elle sera utilisable comme les autres directement dans une directive font-family :

body { font-family: maPolice,sans-serif; } 

Optimiser une police de caractère…

En fonction de vos besoins, il est tout à fait envisageable d’épurer une police pour un usage web. Souvent les polices de caractères contiennent des caractères que l’on n’utilise jamais (symboles, autres langues, etc…) et que l’on peut retirer du package.
Pour ça, il existe deux solutions. Les plus courageux passeront par Font Forge, les plus pressés se concentrerons sur Font Squirrel. Dans le mode « Expert » de ce dernier, on trouve une option « Custom Subsetting » qui vous permettra de sélectionner très finement la gamme de caractères ou uniquement les caractères dont vous aurez besoin. On peut facilement imaginer faire passer le poids d’une police de 150ko à 6ko pour un titre de site par exemple. On est alors très proche du temps de chargement d’une image équivalente, et tellement plus accessible !

L’intégration en mode feignasse by Google

Parallèlement à cette technique qui peut paraître un peu longue à première vue, Google vient de lancer une bibliothèque de polices de caractères librement utilisables. On peut chercher, voir, et surtout, on peut intégrer ça dans son site en une seule ligne de CSS. Google fera le reste (et enverra le bon CSS au bon navigateur).

Google web font previewer

La bibliothèque n’est pas encore très fournie et cette API est encore en version Beta, mais c’est particulièrement prometteur.

Si le sujet vous intéresse, je vous conseille cette lecture ou encore celle-ci, et si vous avez vous aussi des petits conseils sur l’utilisation des polices sur le web, je suis preneur !!


CDN Gratuit : utiliser les serveurs frontaux de Google pour créer son Content Data Network

Un CDN (Content Data Network) permet à stocker des données statiques d’un site internet « in the cloud ». Cette méthode offre différents avantages non négligeables :

  • Réduction de la bande passante utilisée sur le serveur principal,
  • Réduction de la charge processeur sur votre serveur, l’économie peut-être consacrée au traitement des fichiers dynamiques,
  • Parallélisation des téléchargements côté client (donc plus rapide),
  • Les fichiers statiques sont servis à partir du serveur le plus proche de l’internaute, les « routes » sont donc plus courtes,
  • Les entêtes envoyées à partir du CDN sont personnalisables, il est donc possible d’envoyer du contenu sans Cookies (cookieless content) ni autres fioritures.

Bref, pour vous la faire courte, l’utilisation d’un CDN est un bon moyen d’accélérer l’affichage de son site tout en délestant son serveur.

Comment ça marche ?

Le principe est simple, le site web fait appel à votre domaine pour tout ce qui est dynamique et tout le contenu statique est appelé via un (ou plusieurs) domaine(s) dédié(s). Votre site utilise donc au moins 2 types d’url : www.mondomaine.ext et www.monCDN.ext.
Bien entendu, il est tout à fait possible de personnaliser l’url du domaine afin d’obtenir une adresse du type monCDN.mondomaine.ext, du coup, on ne touche pas au référencement et on n’en fout pas partout. Lire le billet »


Obtenir un graphique à partir d’une URL

Google Chart ToolsJe viens de découvrir via Cedric Motte un petit outil de Google qui permet de faire très simplement de beaux graphiques et de les appeler dans une page HTML ou un mail via une simple URL. Ca s’appelle Google Chart Tools ou Image Charts et ça me paraît particulièrement pratique. Fini les gros codes pour avoir un petit tableau de bord avec quelques graphiques faits à la volée dans une appli web.

D’autant que, pour simplifier un peu le truc (qui à la base est une API, donc un bidule pour connaisseurs), Google propose un éditeur, genre de bac à sable, pour vous permettre de dessiner très facilement vos premiers graphiques. La preuve :

Petit graph trèèèèès vite fait...