Bon, je ne sais pas si il y a encore beaucoup de monde qui passe par ici depuis que le site est moribond mais j'ai besoin d'avis donc je tente le coup

Celà fait pas mal de temps que j'ai envie de reprendre un peu l’écriture sur ce blog, mais force est de constater que mes domaines de compétences et centres d’intérêts évoluent, du coup je m’interroge sur la pertinence de certains sujets que je pourrais publier ici à l'avenir.

Alors évidement du coté de mon amour pour WordPress rien ne change, il y a aura donc toujours ponctuellement des articles sur ce thème, ainsi que sur de la programmation front-end. Par contre j'ai aussi souvent l'envie d’écrire des articles en rapport avec l'high-tech et la photographie. Mais j'ai peur que ça transforme un peu le site en un fourre-tout ... d'un autre coté ça me motiverais surement plus à rédiger de façon régulière.

Vous avez un avis sur la question ?

PS: un changement de thème est prévu, mais en attendant j'ai fait le ménage, suppression de vieux articles complément obsolètes et "rustine" pour rendre le site responsive (oui oui j'ai fait ça à l'arrache, c'est juste le temps de changer de thème)

Est-ce qu’on peut installer une application plusieurs fois ? (genre avoir 3 Instagram) ...

Alors pour avoir été confronté au problème il y a quelques mois, la réponse est : Oui, il est possible d'utiliser plusieurs comptes Instagram sur un même appareil Android ou ordinateur (mais pas IOS apparemment). Il existe différentes solutions plus ou moins efficaces que je vais détailler un peu ici.

1ère solution : Instwogram !

Instwogram? Mais qu'est-ce donc ? Et bien il s'agit d'un clone de l'application d'Instagram. Un développeur a décompilé et recompilé l'APK d'instagram en changeant les noms de packages et l'icone. Résultat, on se retrouve avec 2 applications Instagram qui peuvent tout à fait fonctionner en simultané (même pour les notifications, très pratique). Par contre il y a quelques points négatifs, c'est que même si le dev met son application à jour régulièrement, il y a toujours un petit retard par rapport à l'app d'origine. Mais aussi qu'on ne peut utiliser "que" 2 comptes à la fois. Et dernier point, cette version est-elle 100% clean (enfin depuis le temps que ça traine sur xda, je pense que si ça ne l'était pas elle aurait dégagé) ?

2ème solution : Se deloguer et se reloguer sur Instagram

Un peu fastidieux. Tout simplement se déconnecter et se reconnecter avec un autre compte directement sur l'application. L'avantage c'est qu'on est pas limité par le nombre de compte, mais l’inconvénient c'est qu'on ne reçoit les notifications que pour le compte utilisé actuellement.

3ème solution : Utiliser le multicompte d'Android Lollipop

La version 5 d'Android permet d'ajouter autant de comptes utilisateur Google que nécessaire. Chaque compte lié a ses propres appls et ses propres paramètres. Avantages : autant de compte que l'on veut, pas besoin de se reloguer dans chaque Instagram. Inconvenients : pas de notifications simultanées et devoir utiliser un compte google par compte instagram.

4ème solution : L'emulateur Android Genymotion

Une solution un peu à part car il faut utiliser un ordinateur (Mac, Windows ou Linux). Genymotion est une virtualbox qui permet de faire tourner des versions d'Android prepackagées. Et on peut "installer" autant de machine Android que l'on veut (donc autant d'Instagram que necessaire). Avantages : on peut directement charger des images se trouvant sur l'ordinateur. Inconvénients : ce n'est pas très "mobile", et encore moins "live" (sauf à utiliser la webcam). Et ça peut finir par prendre une place folle si vous voulez utiliser beaucoup de comptes différents.

Et si vous voulez, vous pouvez me suivre sur Instagram

Brackets dispose de plein de fonctions sympa tel que l'extraction de code a partir de .psd (Extract), l’édition "en ligne" du CSS et la prévisualisation en direct (uniquement via Chrome pour l'instant). Si ce n'est encore fait, je vous invite a y jeter un œil, il pourrait bien vous surprendre

Bref, j'installe donc la bête, je commence à bidouiller un peu le "projet" par d'exemple inclut dans Brackets, puis viens le moment où je tente d'activer l'aperçu en direct ... Et là, c'est le drame ! Un beau message d'erreur :

Et là je me souviens que j'utilise un version "portable" de Chromium, et de fait, Brackets ne peut pas trouver l'endroit où se trouve le .exe pour lancer l'aperçu.

Du coup, va falloir aller ajouter le chemin de votre executable Chrome ou Chromium portable dans la base de registre de Windows pour qu'il puisse être trouvable.

Voici la manip:

Dans le champs de recherche de votre windows, tapez: regedit.exe puis validez

Naviguez dans l'arborescence jusqu'à "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\" et créez une nouvelle clé (clic droit sur le dossier "App Paths") et nommez là "chrome.exe"

Double cliquez sur la chaine par défaut et entrez le chemin de votre exécutable chrome/chromium

Il faut maintenant ajouter un nouvelle chaine pour indiquer le dossier parent. Dans la même fenêtre, faites un clic droit puis "nouveau" -> "valeur chaine" et nommez la "path", puis double cliquez dessus pour entrer le chemin

Et voilà, vous avez maintenant accès à l'aperçu en direct

PS: évidement évitez de changer votre dossier d'applications portables, sinon il faudra venir modifier les valeurs pour indiquer le nouveau chemin.

Pour mes besoins, j'ai pondu un petit script Google qui vous permettra de faire la liaison entre Gmail et ce nouveau service. Autrement dit, à chaque fois que vous recevrez un mail correspondant à un libellé précis, vous recevrez automatiquement un SMS sur votre mobile.

Mais pourquoi ?

Pourquoi s’embêter à recevoir des alertes par sms alors qu'on peut les recevoir direct par mail ?

-vous n'avez pas de forfait internet (forfait 2€ de Free)
-vous n'avez pas de "smartphone" (téléphone de boulot, téléphone de secours, ...)
-domotique via SMS
-etc ...

Comment activer votre service de notifications SMS ?

Le principe est simple, activez l'option gratuite dans votre espace abonné, rendez-vous dans vos options et activez les "Notifications par SMS". Vous obtiendrez alors une clé d'identification au service, notez là dans un coin car elle est nécessaire au bon fonctionnement de l'envoi.

Comment ça marche ?

Voici le fonctionnement de base (explications venant de freemobile)

L'envoi du SMS se fait en appelant le lien suivant : https://smsapi.free-mobile.fr/sendmsg
avec les paramètres suivants :

    user :  votre login
    pass :  votre clé d'identification générée automatiquement par notre service
    msg :  le contenu du SMS encodé sous forme d'url (Percent-encoding)

Exemple : Envoyer le message "Hello World !" sur votre mobile :

https://smsapi.free-mobile.fr/sendmsg?user=18579358&pass=wUxxnu1DdRMF9k&msg=Hello%20World%20!

Vous pouvez également, si vous le préférez, envoyer les paramètres en POST.
Dans ce cas, le contenu du message n'a pas besoin d'être encodé.

Le code de retour HTTP indique le succès ou non de l'opération :

    200 : Le SMS a été envoyé sur votre mobile.
    400 : Un des paramètres obligatoires est manquant.
    402 : Trop de SMS ont été envoyés en trop peu de temps.
    403 : Le service n'est pas activé sur l'espace abonné, ou login / clé incorrect.
    500 : Erreur côté serveur. Veuillez réessayer ultérieurement.

Recevoir un SMS pour chaque nouveau mail correspondant à un libellé précis

Voici mon script, je vous donne les détails et la mise en place après.

Donc en gros ce script sera exécuté chaque minute (ou plus, voir la suite), il va chercher tous les mails non lu ayant le libellé défini dans LABEL_SMS, les envoie par SMS et change le label par celui défini dans LABEL_SMS_LU (pour éviter qu'ils ne soient envoyés à appel du script). Donc indiquez vos libellés et vos identifiants dans la section "Globals" du script.

Update du 16/06/2014 (V1.1): Ajout d'une verif "if (compt != 0)" pour empêcher une erreur du script
Update du 17/06/2014 (V1.2): Ajout d'une option qui permet de choisir si l'on reçoit une notification SMS à chaque nouveau message d'une conversation (mails empilés) ou juste lors du 1er message de la pile. En mettant THREAD_SINGLE_ALERT sur true, vous recevrez donc un sms a chaque nouveau mail qui s'ajoute à la conversation (avec le contenu du dernier message de la pile)

Ok mais je fais comment pour activer ce script ?

Ce script est un "Google Apps Script", et pour qu'il soit pris en compte, il va falloir l'ajouter dans votre Google drive de la manière suivante:

1. Créez ou ouvrez une feuille de calcul dans votre drive
2. Allez dans le menu "outils" puis "éditeur de scripts"
3. Choisissez "Projet vide" et collez le script dans la nouvelle fenêtre
4. Enregistrez le script et ajoutez un déclencheur
5. Dans le nouveau déclencheur, choisissez d’exécuter la fonction "EnvoiSMS" dans le menu déroulant, puis "En fonction du temps", "Minuteur" et "chaque minute" .... Et "enregistrer"
6. Une alerte d’autorisation va apparaitre, cliquez sur "Continuer"
7. Dans la nouvelle fenêtre, cliquez sur "J'accepte"
8. C'est enfin fini !

Étape par étape en images:
- -

- -

- -

Et voilà !

PS: si quelqu'un arrive à envoyer les données en POST dans le script (j'ai toujours eu des erreurs 400), ça permettrait de pouvoir garder les sauts de lignes dans le sms.

Il y a 4 sections dans le logiciel:

• Music Renamer: permet de renommer les fichiers en se basant sur les Tags de celui-ci
• TAG Editor: permet de modifier les TAG en masse (ou pas)
• Tag Processor: permet d'ajouter des tags à vos fichiers en se basant soit sur son nom (et/ou dossier) ou via une recherche dans une base de données online (qui ajoute la pochette en plus)
• List Maker: permet de faire un listing complet et précis de vos MP3 sous différents formats (.csv, .html, .m3u, .txt, .xml) avec prise en charge de vos propres modèles.

Voici quelques exemples concrets ...

Lancez Tag Scanner et faites glisser un dossier ou un groupe de MP3 dans la fenêtre du logiciel. A noter que si vous faites glisser un dossier, le contenu des sous dossiers sera lui aussi affiché.

Sélectionnez les titres que sur lesquels vous désirez intervenir (ctrl+clic ou ctrl+a pour tout). Voilà un peu dans quel ordre je procède :

Tag Processor

Cliquez sur le bouton "Obtenir les infos sur le Web" (1) et faites une recherche du nom de l'album dans la zone prévue a cette effet à droite (2) (sur Discogs ou Amazon). Une fois l’album trouvé, cliquez dessus. Vous pouvez aussi éventuellement cliquer sur la petite flèche pour vous assurer que c'est les bon titres et même en décocher si votre album n'est pas complet (3). Maintenant cliquez sur "Prévisualiser" en bas (4).

Assurez vous que les tags correspondent aux bons morceaux, il est possible que vous ayez à réorganiser manuellement l'ordre de votre liste. Les TAGS en mauve sont ceux qui vont être changés/mis à jour. Si celà vous convient, cliquez sur "Sauvegarder"

TAG editor

Facultatif, vous pouvez maintenant allez faire un petit tour dans l'onglet TAG editor pour changer quelques infos (le "genre" par exemple) Et même en virer certaines qui ne sont pas forcement utile (Editeur/ISRC).

Music Renamer

Vous allez maintenant pouvoir renommer vos chansons selon vos gouts. Personnellement pour les albums j'aime les renommer de la façon suivante: Artiste (Album) - Numéro de piste - Titre (Format: %artist% (%album%) - %track% - %title%). Cela permet de toujours garder un ordre cohérent même si vous mettez tous vos albums dans un même dossier (sans sous-dossiers), ce qui peut s’avérer pratique pour certains lecteurs MP3.

Donc entrez le format désiré (1) (vous avez un aperçu rapide juste en dessous (2)) et cliquez sur "Prévisualiser" (3)

Si celà vous convient, cliquez sur "Renommer".

Et voilà, ensuite vous pouvez vous amuser à faire des listes si vous en avez l'utilité.

• Site internet : http://xdlab.ru/en/
• Téléchargement : Dernière version - Mirroir (v5.1.598)
• Version testée : 5.1.598

iTypo est donc un thème WordPress simple et léger. A la base, je cherchais un thème pour un petit projet personnel qui soit assez épuré et léger pour mettre le contenu du blog en avant. Après de nombreuses recherches dans la jungle des thèmes WordPress, rien ne me convenait, et comme j'avais une idée très précise de ce que je voulais, j'ai fini par le faire moi-même ... l'histoire classique de la naissance d'un thème en somme

Il est évidement "Widgets ready", compatible WordPress 3.0+, disponible en 4 coloris et 6 langues, convient parfaitement pour un blog perso ou un mini blog "à la Tumblr" et est absolument gratuit.

Telecharger le thème gratuitement

iTypo est sous license GPL, vous pouvez l'utiliser gratuitement pour vos projets sans restrictions

• Live demo
• Large preview (.png, 310 Kb)
• Guide d'installation et documentation
• Telecharger le .zip, v1.0.2 (zip, 353 kb)

Features

• Widget ready (footer et sidebar)
• Disponible par défaut en 6 langues (et plus si nécessaire)
• 4 coloris différents
• Facile à personnaliser avec sa page d'options
• Choix de miniatures carré ou large sur la page d'accueil
• Choix d'afficher un extrait ou le post complet sur la home
• WordPress Post Thumbnail activé
• Shortcode pour miniature
• JQuery Colorbox Lightbox (désactivable via la page d'options)
• "Sticky post" skinné
• Commentaires en "thread" (discussion)
• Mise en avant de l'auteur
• Logo personnalisable (upload d'image)
• Compatible Feedburner
• WP-pagenavi ready
• Et encore plein de petites choses ...

Captures

(Commentaires)

(Avec miniatures larges)

(Accueil avec les billets complets)

(Page d'options)

(Page d'upload de logo)

A noter que même si il fonctionne sous IE6 et supérieur, certains effets CSS3 ne seront pas pris en charge (typographie personnalisée, ombres, inclinaisons, ...)

Voilà, en espérant qu'il plaira à certains d'entre vous ! Comme je le distribue gratuitement, il serait fairplay de laisser les crédits du footer

Que-est ce que des "Sprites CSS"

Rien de bien sorcier en fait. Il s'agit d'une technique qui consiste à regrouper toutes (ou une partie) de vos images utilisées dans vos CSS en une seule et de la positionner ensuite via des coordonnées X et Y. Les parties de votre site ayant besoin d'afficher une des images agiront en fait comme une fenêtre donnant sur votre sprite !

Voici une illustration :

Le bloc H1 laisse apparaitre une des images se trouvant sur le sprite, les autres n'étant pas visibles puisque "hors bloc". Pour vous, la seule chose qui change c'est qu'au lieu de mettre :

Vous aurez quelque chose du style:

Voici un exemple de sprite venant de youtube:

Pourquoi utiliser les sprites CSS ?

Le fait de remplacer une dizaine (ou plus) d'images par une seule va permettre de soulager votre serveur qui ne devrait plus se taper des dizaines de requêtes HTTP à chaque page affichée. Cela se traduit donc par une charge moins élevée (et donc de la puissance disponible pour d'autres taches) et un affichage plus rapide. De plus, si vous utilisez des liens avec des images au survol (:hover), il n'y a plus de temps de latence pour l'utilisateur puisque toutes les images sont chargées d'un coup.

Pour ce qui est du poids, là rien de spécial, en général le sprite fait sensiblement le même poids que l'ensemble des images le composant, même si la superficie est plus importante. De plus, vous pourrez optimiser (voir smush.it) votre sprite en une seule fois, plutôt pratique.

Trop beau pour être vrai ?

Les sprites sont à manipuler avec précautions. Le positionnement de vos images doit être bien réfléchi pour ne pas se retrouver avec des problèmes de conceptions (plusieurs images visibles dans un élément, ....). Un des autres inconvenant c'est que pour faire une simple modification de l'une de vos images, il faut re-générer le sprite en entier.

Et enfin, les sprites ont leurs limites, notamment dans le cas d'images répétées (repeat, repeat-x, repeat-y) ou d'alignement différent (background-position: top right; background-position: bottom left;). Nous verrons ces cas particuliers un peu plus loin.

Je suis convaincu, je veux faire mon 1er sprite CSS !

Selon la complexité de votre design, il va être plus ou moins facile de faire votre sprite. Dans le cas où vos images ne sont pas répétées et s'alignent toutes du même coté (droite ou gauche), la méthode est assez simple puisqu'il suffit "d'empiler" vos images en laissant une marge entre chaque, comme ceci:

Pensez a laisser le fond transparent (ou blanc si votre design le permet) et d'enregistrer le tout en gif ou png avec transparence.

Ensuite, il faut placer votre sprite de la manière suivante:

Donc ici on a décalé notre sprite de 320 pixels vers le haut. Cette valeur correspond tout simplement à la distance entre le haut du sprite et le haut de l'icône "Forum". Pour l'icône "Facebook" qui se trouve à 95 pixels du bord, on écrira:

Cela n'a donc rien de bien sorcier

Et si vous ne voulez pas sortir votre photoshop, il existe des générateurs de sprites permettant de créer une image unique depuis un zip contenant toutes vos images. Personnellement je recommande celui-ci: spritegen
Il est assez complet et en français. Il vous suffit dons d'uploader votre zip contenant vos images et l'application vous retournera le sprite ainsi que les positions CSS à appliquer !

Pensez bien à laisser une marge suffisante pour que 2 images ne soient pas visibles dans vos éléments (ça arrive lorsque vous utilisez un padding trop important par exemple)

Parfait, mais mon design utilise des images alignées de manières différentes

Si vous utilisez des images qui doivent s'aligner à droite et d'autres à gauche ou parfois en bas, la conception de votre sprite va demander une petite adaptation ! Attention, je parle ici d'images de background ayant un conteneur beaucoup plus grand qu'elles, comme la cas d'un titre Hx (largeur souvent importante), du body (hauteur importante), etc ...

Voici un exemple :

(On ne se moque pas de mes images hein ! -_-)

Donc les images qui doivent s'aligner à gauche sont placées à gauche (en fait, ce n'est pas obligatoire, mais c'est plus simple) et les images alignées à droite sont placées sur le bord droit. Pour les images devant s'aligner sur le bas, là il serait préférable de faire une sprite à part pour les regrouper de façon horizontale.

Tout ce bidouillage à cause du manque d'offset pour les alignements droite et bas. Car autant il est possible de placer une image précisément tout en la "fixant" à gauche ou en haut, autant dès qu'on la fixe à droite ou en bas il est impossible de préciser la valeur en pixels. L'autre chose ennuyante avec les alignements à droite, c'est IE6 ! Oui encore lui ! Il semblerait que le fait d'utiliser une valeur en toutes lettres et une valeur en pixels dans le positionnement créer des bugs d'affichage, par exemple un background-position: right -100px; risque de ne pas donner le résultat escompté.

Les images répétées

Les images utilisant la propriété background-repeat: repeat; ne peuvent pas être incluse dans une sprite, tout simplement parce qu'elles ont besoin d'être répétées à la fois sur la verticale et sur l'horizontale

Pour les autres, il suffit de regrouper les images qui doivent se répéter sur l'axe Y dans une sprite horizontale et les images qui doivent se répéter sur l'axe X dans une sprite verticale.

Un détails qui a son importance, comme en général vos images de répétition servent à remplir parfaitement une zone de votre design (sans espaces/marges donc), il faut penser à bien remplir toute la surface (en hauteur dans le cas d'un repeat-y et en largeur dans la cas d'un repeat-x). Voici un exemple (va falloir zoomer pour bien vous rendre compte). Donc sur cette sprite, les images prennent toute la hauteur (2 pixels dans ce cas) sans laisser de vide pour pouvoir être répétées verticalement.

Conclusions

Les sprites CSS permettent d'améliorer les performances de votre site de façon significative. Par contre selon la configuration de votre design il pourra être plus ou moins laborieux de construire vos sprites.

• Smush.it (optimisation d'images) : http://developer.yahoo.com/yslow/smushit/
• Spritegen (générateur de sprites) : http://fr.spritegen.website-performance.org/

NB: pour les amateurs de thèmes WordPress, je vous invite a jeter un oeil au thème "Kubrick On Crack" de la liste WordPress

Et n'oubliez pas que je partage quelques-uns de ces liens en temps réel sur mon twitter, et que pour voir a veille "mobile", il faut vous rendre sur Mobiliens

PHP

1. nedmartin - Site Guide - Caching Rappel sur les techniques de mises en cache disponible via PHP
2. TimThumb PHP Script Released Script php pour la création de miniatures d'images à la volée (avec système de cache)
3. Image Resizer Redimensionneur d'images à la volée
4. Online PHP Editor - PHPanywhere.net Editeur de code online pour coder depuis n'importe quel ordinateur
5. UserCake - Opensource PHP user management system Script PHP Opensource pour gérer un espace membre

Photoshop

1. 79 tutoriales para crear plantillas en PSD 79 tutoriels pour creer des designs web
2. Create a Clean and Colorful Web Layout in Photoshop Créer un web design sobre et coloré avec photoshop
3. 70 Of The Best Photoshop Actions For Enhancing Photos 70 "actions" photoshop pour embellir vos photos
4. Design a Minimal and Modern Portfolio Layout with Photoshop Faire un design minimaliste et moderne de portfolio avec Photoshop
5. Design a colorful theme for wordpress Fabriquer un thèmes worpdress coloré avec photoshop
6. 75 PSD to HTML Resources for Web Designers 75 .psd pour webdesigner
7. 40 Amazing Photoshop Brush Directories and Collections 40 sites/collections de brosses pour photoshop

Typographie

1. 50 Examples of Effective Uses of Typography Within Web Design 50 exemples de bonnes utilisations de la typographie en webDesign
2. 50+ Exceptional Collections of Typography Tutorials 50 tutoriels sur la typographie
3. 90 Exciting Typography Posters and Designs 90 designs typographiques intéressant
4. 40 Beautiful uses of Typography in Web Design 40 jolies utilisations de typographies dans des design web
5. 25+ Experimental Typography Showcases 25 designs typographiques expérimentaux
6. 40 Spectacular Typography Videos 40 vidéos typographiques spectaculaires
7. 104 Free Fonts for Web Designers and Logo Artists 104 polices gratuites pour web design et logos

Javascript/jQuery

1. Build a Simple Password Strength Checker Fabriquer un vérificateur de sécurité de mot de passe
2. jQuery-gestures- Image gallery Gestion de mouvements via jQuery
3. Pluralink© Script permettant d'inclure plusieurs liens en 1 via un menu au survol
4. Validatious 2.0 - Easy form validation with unobtrusive JavaScript Validation de formulaire en javascript, valide, fonctionnant avec ou sans framework js
5. 15 jQuery slideshow/gallery plugins 15 plugins jQuery pour faire des diaporamas (slideshow)
6. 10 Awesome Techniques and Examples of Animation with jQuery 10 incroyables techniques et exemples d'animations avec jQuery
7. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Faire un diaporama dans le style Apple
8. Mu — Mu Connect Librairie javascript pour vous aidez à intégrer FaceBook Connect sur vos sites
9. Simple Draggable Element Persistence with jQuery Rendre un élément "draggable" avec mémorisation via jQuery
10. 30 Amazing jQuery Plugins To Play With Tables 30 plugins jQuery pour jouer avec vos tableaux html
11. How To Parse XML Using jQuery and Ajax Comment parser du XML en AJAX via jQuery
12. Plugins And Tutorials To Enhance The Images Of Your Website With jQuery Plugins et astuces pour améliorer vos images web grâce à jQuery
13. Floom Diaporama original avec Mootools
14. 9 Useful Twitter Retweet Button Scripts For Blogs 9 scripts de boutons "retweet" pour votre blog
15. Making a Google Wave History Slider Reproduire le slider d'historique de Google Wave via jQuery, CSS, PHP et mysql

Inspiration et (web)design

1. 28 Delightful Blog Designs That Will Make You Say WOW 28 designs de blog incroyables
2. Blog Headers: 20 Great Examples and Best Practices 20 exemples et bonnes pratiques de "header"
3. 40 Killer Minimalist Blog Designs 40 designs de blog minimalistes
4. Modern CSS Layouts: The Essential Characteristics Les caractéristiques d'un design CSS modern
5. Super-Clean and Minimal Web Designs: 70+ Stunning Examples and Resources Exemples et ressources de webdesign minimalistes et propres
6. Best of Best WordPress Cusom Login Page Designs Sélection des meilleurs pages de login WordPress
7. 111 CSS Gallery To Submit Your Design 111 galeries CSS pour soumettre vos designs web
8. 40 Adobe Illustrator Text Effect Tutorials 40 tutoriels pour faire des effets de textes avec Adobe Illustrator
9. 25+ Tools, Cheat Sheets and Inspiration for Designers working with Color Themes 25 outils/astuces/inspirations pour vous aider avec vos "schémas de couleurs"
10. 55 Astonishing Online Generators for Web Designers 55 générateurs web pour designers
11. Best Practices for 6 Common User Interface Elements Bonnes pratiques pour 6 éléments d'interface communs
12. 80 Stunning Background Patterns For Your Websites 80 motifs pour vos backgrounds de sites
13. How to create your best website layouts ever Article expliquant la manière de procéder pour créer une maquette de site web

CSS/CSS3

1. Quickie CSS3 Tricks with Fallbacks Quelques effets CSS3 avec leurs "fallbacks"
2. Minimal and Modern Layout: PSD to XHTML/CSS Conversion Comment convertir un web design .psd en HTLM/CSS
3. Investing in the Grid Petit rappel/survol sur les frameworks CSS à base de "grilles"
4. Essential CSS/HTML Lists Styling Techniques Les principales techniques pour styliser vos listes HTLM/CSS
5. Créez des info-bulles avec CSS 3
6. Table of CSS3 border-radius Compliance Tableau du support de la propriété CSS 3 border-radius
7. Fluid Grid System Framework CSS permettant de construire des design fluides (extensibles)
8. 25 CSS CHEAT CODES: Designers & Developers Delight 25 feuilles d'astuces (Cheat Sheet) pour CSS
9. 15 CSS Tricks That Must be Learned 15 astuces CSS à connaitre
10. How to Achieve Cross-Browser @font-face Support Rendre le support de la propriété CSS @font-face compatible avec les principaux navigateurs
11. The Blueprint CSS Framework – Tutorials, How-to Guides and Tools Collection de ressources pour le framework CSS Blueprint
12. Using Rounded Corners with CSS3 Utiliser les coins arrondis en CSS3
13. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them Petit rappel sur l'utilisation des sprites CSS
14. 15 Useful Firefox Add-Ons To Make CSS Developers Lives Easier 15 plugins Firefox pour faciliter le développement CSS

WordPress

1. Kubrick On Crack - Free WordPress Theme Thème wordpress gratuit très sympa et aéré qui se dit être un "Kubrick" (thème par défaut) amélioré
2. I Like This « WordPress Plugins Plugin WordPress pour ajouter un bouton de vote (positif seulement) à votre blog
3. YouAre Theme · Promote your real-life identity Nouveau thème WordPress pour promouvoir votre identité numérique
4. 101 Pro and Free WordPress Themes for Personal Blogs 101 thèmes wordpress gratuits pour votre blog perso
5. WordPress hack: Extend the body_class function Étendre la classe "body" de wordpress
6. WordPress Visual Cheat Sheet Jolie feuille d'astuces (Cheat Sheet) pour WordPress
7. Useful WordPress Plugins for Statistics Collection de plugins de statistiques pour votre blog WordPress
8. How to Improve your WordPress Theme with 9 Useful Plugins 9 plugins utiles pour améliorer un thème WordPress
9. Easier And Better Solutions To Get Pictures On Your Posts - only the first image, last image from the Gallery , first 2 pics, last 2 pictures, last two pictures, HTML Worpdress : Quelques solutions pour intégrer/recuperer vos images
10. 45+ great looking free WordPress Themes 45 thèmes WordPress pas trop vilains
11. Top 10 Free Halloween WordPress Themes 10 thèmes wordpress gratuit pour Halloween
12. 24 WordPress Image-Based Plugins 24 "plugins d'images" pour wordpress
13. 18 Alternative Ways To Use WordPress 18 utilisations alternatives de WordPress
14. 20 Premium WordPress Themes Released In October 2009 20 thèmes wordpress premium sorti en Octobre 2009
15. Top 30 Awesome WordPress Plugins That You Must Have In Building A New WordPress Blog Le top 30 des plugins Worpdress à installer lors d'une nouvelle installation
16. WordPress Hack: Anything Can Be Added Anywhere In The Post Content WordPress: Ajouté la fiche de l'auteur dans un article et insérez de la pub après l'intro
17. 9 Useful Minimalist WordPress Themes 9 thèmes wordpress minimalistes

Divers

1. HYPE Un framework pour coder facilement en Action Script 3 (AS3)
2. Coda: A Collection of 120+ Plugins, Clips, Snippets and Tuts For Designers and Developers Collection de ressources pour developper avec CODA
3. 21 Fresh & Stunning Drupal Themes 21 thèmes Drupal "frais"
4. 10 Free Server & Network Monitoring Tools that Kick Ass 10 outils gratuits pour monitorer votre serveur/reseau
5. 101 Ways to Promote a New Blog 101 façons de promouvoir un nouveau blog
6. Les auto-entrepreneurs parlent de leur expérience
7. Building your First ExpressionEngine Plugin Construire votre 1er plugin ExpressionEngine
8. 60+ Promotional Websites to Promote and Submit Your Design Related Articles and News 60 sites pour promouvoir et envoyer vos articles en relation avec le "design"
9. Solving a Sudoku using Recursive Subquery Factoring Résoudre une grille de sudoku via sql
10. Configuration d'un serveur dédié de A à Z Rappel: comment bien configurer votre dédié
11. HTML 5, le renouveau du Web standard Dossier sur l'HTML 5, en français
12. Best of High-Dynamic-Range - Fotos, Weblogs, Tutorials, Software, Books Collection de ressources pour la photographie HDR (inspiration, blogs, tutoriels, logiciels, ...)
13. 200+ Free Exclusive RSS Icons: “Supra” 200 icônes RSS ("Supra")
14. Six free antivirus programs made for your Windows 7 system 6 antivirus gratuits pour Windows 7

Inspiration et Design

1. Showcase Of Professional Looking Website Designs Sélection de sites au design professionnel (inspiration)
2. 62 Intelligent And Integrated Logos For Typography Lovers 62 intégrations intelligentes de typographies dans des logos
3. A Showcase of 35 Beautiful Typographical Illustrations 35 jolies illustrations typographiques
4. How to Create Remarkable 3D Text in Photoshop Comment créer un texte en 3D avec photoshop
5. 80+ Identity Logo Design With PSD Files 80 logos avec fichier .psd
6. 75 Creative And Unique Business Card Designs For Your Inspiration 75 cartes de visites creatives pour votre inspiration
7. Beautiful Gradient Typography in Web Design Exemples d'utilisation de polices dégradées en webDesign

WordPress

1. Theme: Cleanr Focuses on Typography and Space Thème worpdress simple et épuré
2. 20 Best WordPress Typography Plugins To Enhance Readability 20 plugins WordPress pour améliorer la lisibilité
3. 20 Pure Typography based WordPress Themes for FREE – Part 1 20 thèmes wordpress "typographique"
4. 10 Outstanding Corporate WordPress Themes for Freelancers and Small Business Owners 10 thèmes premium pour blogs d'entreprise
5. 10 Useful WordPress Coding Techniques 10 techniques utiles pour WordPress
6. 15 Most Important WordPress Plugins To Help You Fight Spam 10 plugins wordpress pour combattre le spam
7. 10 Most Useful Google Plugins for WordPress 10 plugins wordpress utilisant les services google
8. TAC - Theme Authenticity Checker WordPress Plugin Plugin wordpress pour vérifier si vos thèmes sont infectés

Typographie

1. Compte rendu : « La typographie pour le web »
2. Rich Typography On The Web: Techniques and Tools Techniques et outils pour améliorer vos typographies sur le web
3. 8 Javascript Plugin Effects and Tools to Beautify and Control Web Text 8 effets javascripts pour améliorer et contrôler vos textes web
4. Fonts on the web and a list of web safe fonts Tableau sur le compatibilité des fonts selon les navigateurs
5. Fonts for Designers Series Issue no. 1 Sélection de polices de caractère pour designers
6. 55 Unconventional And Original Free Fonts For An Unique Design 55 polices de caractère gratuites non conventionnelles et originales

Webdesign/CSS

1. #eCSStender.org Unification du support CSS via Javascript
2. Top reasons your CSS columns are messed up Pourquoi vos colonnes CSS ne régissant pas comme vous le désirez (solutions)
3. Ten Most Popular Firefox Plugins of Web Designers Les 10 plugins firefox pour web WebDesigners les plus populaires
4. Create a Clean Business Web Template Design in Photoshop Creez un webdesign d'entreprise simple et propre avec photoshop
5. 51 Web Apps for Web Designers and Developers – Web.AppStorm 51 applications online pour WebDesigneurs et développeurs
6. Custom Checkboxes, Custom Radio Buttons, Custom Select Lists Personnalisez vos Checkboxes, Radio Buttons et Select Lists via CSS et jQuery
7. Solution For Very Long Dropdown Menus Astuce en CSS et jQuery pour faire de long menu defilant
8. HTML, CSS, and Web Development Practices: Past, Present, and Future L'évolution des pratiques du développement web
9. Is Your CSS Reset Doing More Harm Than Good? Petit reset CSS bien expliqué
10. 15 Ways to Improve CSS Techniques Using jQuery 10 techniques jQuery pour faciliter vos CSS
11. Icones.pro, la plus grande collection d'images PNG et d'icônes Moteur de recherches d'icônes
12. The Mystery Of The CSS Float Property Découvrez tous les mystères de la propriété CSS "float"
13. 8 different ways to beautifully style your HTML lists with CSS 8 manières de présenter de jolies liste html

Javascript/jQuery

1. 10 Superb Image Effects and Slider Tutorials with Jquery 10 tutoriels jQuery pour faire des effets de gliddements
2. 25 Cutest jQuery Plugins 25 plugins jQuery pour des effets amusants
3. Introduction to building jQuery plugins Les bases pour développer un plugin jQuery
4. How to Create an Image Gallery Powered by Picasa Comment créer un galerie d'image à partir de Picasa
5. 35 Fresh and Useful jQuery Plugins 35 plugins jQuery récents et utiles
6. 35+ Web Developers Useful Ajax Tutorials 35 tutoriels utiles sur l'AJAX
7. 10+ astonishing jQuery resources to spice up your website 10 ressources jQuery pour booster votre site
8. Drag to Share Tutoriel pour ajouter un drag & drop à la Mashable sur votre site
9. 10+ jQuery Form Enhancement Plugins 10 plugins jQuery pour améliorer vos formulaires
10. 17 Amazing jQuery Rollovers – Examples and Tutorials 17 manières originales de faire des "survols" (rollovers) via jquery
11. Making A Cool Login System With PHP, MySQL & jQuery Tutoriel pour faire votre propre zone membre avec PHP, MySQL et jQuery
12. jQuery Approach by Scott Robbin Un plugin jQuery qui gère les animations en fonction de la position du pointeur de votre souris

Divers

1. jekyll Générateur de blog statique (via rsync et serveur local)
2. Fast Picture Viewer | WIC Codec Pack for Windows 7, Vista and XP Pack de "codec" Windows pour visualiser les fichiers RAW directement depuis l'explorateur
3. EZFlar: Opensource Code For Augmented Reality Productions Outils open source pour utiliser la réalité augmentée
4. File Management and Organization Tools and Ideas Sélection d'outils d'organisations
5. 20 Handy Photoshop Tips For a Faster Workflow 20 astuces pour travailler plus rapidement avec photoshop
6. 10 Best Content Management Systems for Designers Top 10 des CMS pour Designers
7. 9 Open Source Microblogging Applications 9 applications de micro-blogging open source
8. 5 Rules To Write More Readable CSS Files 5 règles pour rendre vos CSS plus lisibles
9. 5 Cool Ways to Add Graphs to Your Website 5 façons d'ajouter des graphiques sur votre site
10. Killer Xcode Tips and Tricks – Tips 1 to 10 10 astuces utile pour Xcode
11. Top 10 Tiny & Awesome Windows Utilities Top 10 des petits utilitaires pratique pour Windows
12. 70 Free Useful Portable Applications You Should Know 70 applications portables gratuites à connaitre

WordPress (4)

1. 31 WordPress Plugins That Turn Your Blog Into a CMS 31 plugins pour transformer votre blog wordpress en CMS
2. Creating Custom Write Panels in WordPress Créez vos propres champs additionnels avec wordpress (CMS style). A voir !
3. 45+ Free Premium WordPress Themes with Magazine or Grid Layouts 45 thèmes magasines/grilles wordpress gratuits
4. 6 WordPress Plugins for Better Comments 6 plugins WordPress pour améliorer la gestion de vos commentaires

Logo (5)

1. Logo Design Inspiration: 60+ Exceptional New Designs 60 logos au design exceptionnel
2. Logo Design: 40+ Must Have Tutorials 40 tutoriels pour faire des logos
3. 57 Creatively Designed Examples Of Typography In Logo Design 57 exemples créatifs de typographie utilisé dans des logos
4. Free 83 Professional Logos With PSD Files 83 logos "pro" avec leur .psd (photoshop)
5. Logo Design Toolbox: 60+ Resources for Logo Design 60 ressources pour vos Logos

jQuery (6)

1. Display JSON Data with jQuey and Ajax Petit exemple pratique de creation de JSON via PHP avec affichage via jQuery
2. 26 jQuery Plugins for Superb Navigation 26 plugins jQuery pour faire de superbes menus de navigation
3. AJAX User Poll Using jQuery and PHP Fabriquez vos propres sondages en PHP avec jQuery
4. Free Slideshow, Gallery And Lightboxes Scripts Collection de scripts de diaporama, lightbox et galeries
5. Building a jQuery/PHP Powered Chat Room Créez votre propre salle de Chat via jQuery/PHP
6. A jQuery Twitter Ticker – Tutorialzine Comment se fabriquer son propre widget Twitter via jQuery

Inspiration et Design (5)

1. 40 Beautifully Designed Vintage Websites 40 webdesigns vintages
2. 18 Really Beautiful and Creative Web Designs 18 webdesigns créatifs
3. 30 Impressive vCard Web Designs 30 vCard (Carte de visite online) au design impressionnant
4. 70 Beautiful Handpicked CSS Galleries 70 galeries CSS pour votre inspiration ou soumettre votre site
5. Comment Form Styling: Examples and Best Practices Exemples et bonnes pratiques pour styler vos formulaires
6. Tips for Designing an Awesome Coming Soon Page Conseils et inspiration pour réussir une page de lancement
7. 40+ simple and elegant business card designs 40 exemples de design élégant de cartes de visite
8. 90+ Latest Trends of Business Cards 90 dernières tendances de cartes de visite

CSS (13)

1. Browser support for CSS3 and HTML5 Récapitulatif des propriétés CSS3/HTML5 supportées par les différents navigateurs
2. CSScaffold Fraework CSS configurable via PHP (optimisation à la volée)
3. How to: CSS Large Background Petit rappel sur les bonnes pratiques pour utiliser un large background en CSS
4. Juicer - a CSS and JavaScript packaging tool / Ruby Outils pour packager vos CSS et Javascript en ligne
5. 20+ Awesome Resources To Learn and Improve CSS 20 ressources classées par difficulté pour apprendre le CSS
6. Breadcrumbs en CSS Tutoriel pour faire un menu de navigation de type "Breadcrumbs"
7. 53 CSS-Techniques You Couldn’t Live Without 53 techniques CSS intéressantes
8. CSS Differences in Internet Explorer 6, 7 and 8 Les différences d'interprétation CSS entre IE6, 7 et 8
9. Really simple CSS trick for equal height columns Astuce CSS pour avoir des colonnes de hauteurs égales
10. CssDispatcher - Manage your CSS like a pro Script PHP pour gérer (surcharger, mixer, compresser, ....) vos feuilles de style CSS
11. HOW TO: Elegant CSS Message Boxes for Blogs Des exemples de jolies boites d'informations en CSS
12. CSS Font-Size: em vs. px vs. pt vs. percent Explications sur les unités de mesures px pt % en CSS
13. xCSS - OO CSS Framework Framework CSS orienté objet

Webdesign (8)

1. How to Make a Creative Blog Layout Comment créer un design créatif de blog avec photoshop
2. 25 Free Online Tools for Web Designers, Developers, Freelancers and Individuals 25 outils en ligne gratuits pour les webDesigner et développeurs
3. 30 Stunning Fonts To Enhance Your Designs 30 polices de caractères pour améliorer vos designs
4. CU3ER – flash 3D image slider! Visionneuse d'image en flash avec effet de transitions en 3D (Papervision), magnifique
5. 1st Photoshop Web Design Professional Layout Tutorial Créez un webdesign professionnel avec photoshop
6. Quelques conseils pour designer une interface
7. sendcube email marketing: Get All Free: View Our Free Templates Quelques joli templates de newsletters gratuits
8. 101 Five-Minute Fixes to Incrementally Improve Your Web Site 101 astuces de 5 minutes pour améliorer votre site

Divers (6)

1. 27.000 photoshop gradients 27000 dégradés pour photoshop
2. Supercharge Website Performance With AWS S3 and CloudFront Comment mettre en place un CDN pour votre site avec AWS S3 et CloudFront
3. 5 Must Have Sans Serif Fonts 5 fonts "Sans Serif" incontournables
4. 8 Hand Drawn Icon Sets For Bloggers 8 packs d'icônes sociales avec un effet dessiné
5. Titres, intertitres, chapeaux : les niveaux de lecture Niveaux de lecture : 7 clés pour multiplier les points d’entrée d’un texte web
6. Best PHP Frameworks to build quickly complex web applications Sélection des meilleurs frameworks PHP