L’apparence de ce dernier ne change pas beaucoup, étant donné que j’ai toujours aussi peu de compétences en design, mais c’est sous le capot que beaucoup de changements se sont produits.

Principaux changements

• Les fichiers du thème sont versionnés sur Git. Pratique pour le déploiement, pour les backups, et pour garder une trace de son évolution.
• Les commentaires n’ont plus de nofollow. Je vais probablement regretter la vague de spams, mais tant mieux pour les commentateurs.
• Le thème est en responsive web design. Donc enfin un vrai thème mobile
• Beaucoup moins de plugins derrière. Donc plus de WP-Page Navi, WP-Similar, et donc de meilleures performances.
• Le code derrière est plus solide, et mieux rangé.

Le changement le plus significatif pour moi est le départ sur une nouvelle base propre, qui me permettra tôt ou tard de publier le code de ce thème, et d’y apporter des modifications intéressantes !

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Darklg Blog fait peau neuve
Partager cet article sur Twitter

Logiciels pour l’intégrateur

• TextExpander (34.95$)
  Gérer des snippets dans n’importe quel logiciel.
• TextMate (44.85€)
  Editeur de code léger et puissant, bourré d’astuces.
• Google Chrome (Gratuit)
  Un navigateur rapide et efficace, doublé d’un inspecteur de code.
• MAMP (Gratuit)
  Apache, MySQL, PHP. Mise à jour "complexe".
• Git (Gratuit)
  Un logiciel de gestion de versions. Indispensable.
• Github (Gratuit)
  Une interface agréable pour Git
• VirtualBox (Gratuit)
  Gestion de machines virtuelles pour le débug (<3 IE)
• ImageOptim (Gratuit)
  Optimiser le poids des images.
• Adobe Photoshop (Cher)
  Difficile de se passer de cet éditeur avancé pour découper des maquettes.
• SpriteRight (3.99€)
  Gérer et concevoir vos sprites CSS.
• Gradient Pro (3.99€)
  Gérer et concevoir vos dégradés avancés CSS.
• Widget HTML Entities (Gratuit)
  Un widget simple pour retrouver des entités HTML.

Autres logiciels

• Sequel Pro (Gratuit)
  LE logiciel pour gérer vos bases de données.
• Reeder (7,99€)
  Un des meilleurs lecteurs RSS de bureau, synchronisé avec Google Reader.
• Fluid (Gratuit/4.99$)
  Transforme un site web en application de bureau.
• Sparrow (7,99€)
  Un logiciel efficace pour votre boîte Gmail (et autres).

Et vous, quels sont vos logiciels préférés pour l’intégration ou le développement front sur Mac ?

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Logiciels utilisés pour l’intégration HTML/CSS sous Mac OS X
Partager cet article sur Twitter

• Crontab : Exécuter des tâches automatiquement, sans déranger les visiteurs avec des faux crons. Magique.
• Gestion de la performance : Installer APC ? Adapter sa configuration de serveur pour servir principalement des fichiers statiques avec NGINX.
• De nouveaux langages : Vous voulez faire du Ruby on Rails ? Installez-le sur votre serveur ! Vous désirez utiliser les nouveautés de la dernière version de PHP ?.
• Des sous-domaines/Sites « illimités » : Vous n’avez que des petits sites statiques, et le fait de devoir repayer pour un autre hébergement vous embête ?
• Pas de restrictions farfelues : Limites de trafic mensuel, de nombres de bases de données, d’utilisateurs FTP …
• Un proxy : Un serveur dédié peut tout à fait servir de relais pour passer outre certaines restrictions de DNS ou autres.
• Votre Cloud : Pas confiance en Dropbox, Apple ou Google pour conserver vos données ? Installez un serveur mail, un accès FTP, un serveur CalDav, rsync !
• La formation : Mettre les mains dans le cambouis, et les yeux dans la ligne de commande vous apprendront beaucoup sur les coulisses du web.

Un serveur, c’est forcément plus compliqué qu’un hébergement tout fait, mais les avantages sont non négligeables … Et le prix n’est plus vraiment un souci avec les offres Kimsufi ou Dédibox !

Pour ceux qui sont convaincus, jetez un oeil au tutoriel d’Alsacréations sur les bases de la gestion de serveur dédié, tout simple, rapide à mettre en place, une merveille pour démarrer.

Vous avez des idées pour allonger cette liste ? : )

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Pourquoi un serveur dédié ?
Partager cet article sur Twitter

Accélerer Aperçu / Preview

Il suffit de désactiver la restauration des fenêtres : quittez Aperçu avec CMD+Alt(option)+Q, puis tapez ceci dans un terminal et validez. Source
defaults write com.apple.Preview NSQuitAlwaysKeepsWindows -bool false
(Ou comme me le souligne ShadowKris : « Préférences Système > Général et décocher « Restaurer les fenêtres à la fermeture[…] » plutôt que de geeker au terminal  »

Accélerer Photoshop

Une traduction partielle de l’excellent PhotoshOptimize. Ces conseils valent pour un intégrateur, qui n’a normalement pas à modifier de PSD (mais qui doit le détruire minutieusement), et je ne garantis aucun résultat, forcément. Mais chez moi, OS X Lion et Photoshop s’entendent mieux :’)

Réduire les niveaux de cache
Dans Photoshop → Préférences → Performances.
Choisissez ’1′ comme valeur pour le nombre de Niveaux de cache.

Réduire le nombre d’états dans l’historique
Dans Photoshop → Préférences → Performances.
Choisissez un petit nombre d’états d’Historique (5 pour moi)

Désactivez la prévisualisation des polices
Dans Photoshop → Préférences → Texte.
Décochez la taille d’aperçu de la police

Désactivez la prévisualisation des images
Dans Photoshop → Préférences → Gestion des fichiers.
Sélectionnez « Ne jamais enregistrer » les Aperçus d’image.

Désactivez l’export du presse-papier
Dans Photoshop → Préférences → Général.
Décochez « exporter le presse-papier »

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : [Tips] Accélerer Photoshop et Aperçu sous Mac OS X Lion
Partager cet article sur Twitter

Ces sites ont un défaut qui m’a été rappelé l’autre jour, quand PlaceKitten est tombé hors ligne, et que mes intégrations ont été déshabillées d’un coup. Aucun moyen de monétiser (Bannieres sur le site, bof, insertion de marques dans les images, bof), donc une durée de vie limitée en cas de succès soudain et d’absence de sponsors.

J’ai donc mis en place un petit script permettant d’installer votre propre service de placeholders sur votre serveur/machine, afin d’éviter les soucis liés à l’utilisation d’un service externe, tels que le ralentissement de vos sites locaux, le manque de fiabilité, etc.

Ce Script doit être dézippé/cloné sur votre serveur/hébergement utilisant Apache & PHP, avec mod_rewrite et GD activés. Plus qu’à le lancer, glisser des images en JPG dans le sous-dossier images/ et c’est parti !

PlaceHugger est un script en PHP, disponible sur GitHub

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Obtenez vos images PlaceHolders avec PlaceHugger !
Partager cet article sur Twitter

Heureusement, des hacks existent pour permettre de gérer l’opacité d’une couleur sous Internet Explorer, pour un background. Des filters avec aRGB, demandant une certaine structure, un recalcul des valeurs, un niveau d’opacité en hexadécimal.

Lors d’une petite pause dans mon travail chez Colorz, j’ai monté GiveMeRGBA un outil rapide permettant, en fournissant uniquement la couleur en hexadécimal, et le pourcentage d’opacité, de générer tout le code nécessaire pour avoir un fond semi-transparent sur la plupart des navigateurs (dont Internet Explorer 7 et plus). C’est un script sans prétention, disponible sur Github et ouvert à tout commentaire.

Testez directement GiveMeRGBA

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Générez du RGBa compatible Internet Explorer avec GiveMeRGBA !
Partager cet article sur Twitter

Exemple : « {Bonjour|Salut}, je m’appelle {Kevin|Darklg} » pourra produire « Bonjour, je m’appelle Kevin », « Salut, je m’appelle Darklg », « Salut, je m’appelle Kevin », …

Pour les besoins de mon dernier projet rigolo (PhilMyFields, un bookmarklet qui remplit automatiquement les formulaires d’une page), j’ai eu besoin de creer un script permettant du Content Spinning en JS.

C’est pour vous, pas besoin de librairie JS, ça peut s’optimiser, mais c’est cadeau :

// Retourne un élément au hasard dans un tableau
function phil_rand_arr(tableau){
	return tableau[Math.floor(Math.random() * tableau.length)];
}
 
// Retourne un texte "spinné"
function phil_content_spinning(txt){
	var matches = txt.match(/{[^{]+}/g);
	if(matches[0]){
		for (i in matches) {
			spin = matches[i]+'';
			ori_spin = spin;
			spin = spin.replace("{", "").replace("}", "");
			spin_strs = spin.split('|');
			txt = txt.replace(ori_spin,phil_rand_arr(spin_strs));
		}
	}
	return txt;
}
 
// La démo, la démo, la démo !
console.log(phil_content_spinning('{Bonjour|Salut}, je m’appelle {Kevin|Darklg}'));

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : [Snippet] Content Spinning en Javascript
Partager cet article sur Twitter

J’ai donc suivi un tutoriel d’installation, pour arriver à un fichier Microsoft Internet Explorer 7.app dans mon dossier d’Applications.

Le résultat est à la hauteur de mes attentes. L’interface est buguée, le JS semble difficilement géré, les polices laissées au soin du navigateur ( font-family:serif; et autres sans-serif ) sont hasardeuses, et il semble ignorer les conditions HTML & body multiples.

Malgré ça, il se lance en une poignée de secondes, est donc bien plus rapide qu’une machine virtuelle, et vous permettra de lancer ponctuellement Internet Explorer sur votre Mac en début de projet, plutôt que de devoir faire des « pauses machine virtuelle » pour vérifier les bugs éventuels de vos intégrations.

Une arme à double tranchant, mais tout de même une astuce à partager ; )

* Grosse référence

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Débug rapide d’Internet Explorer 7 sur Mac
Partager cet article sur Twitter

Attention, si certains de vos post-types ne doivent pas être affichés en front, plusieurs choses à retenir, à la génération du post type :

Si le post type ne doit pas du tout apparaître en front, comme me l’a rappelé Raherian sur Twitter, on peut le désactiver à sa génération dans le code (register_post_type) en paramètrant public, has_archive et éventuellement rewrite à FALSE.
On peut également fournir un array à rewrite, avec le paramètre feeds à false pour éviter la génération de flux !

Edit : La méthode sale est toujours en dessous au cas où vous n’auriez pas la main sur la création du post type (Plugin mal fichu ou autre).

Un template single vide

Creez simplement un fichier de template du nom de single-[moncustomposttype].php, et ne mettez rien dedans. Le template single.php prendrait le relais dans l’absence de ce dernier, et afficherait votre post_content.

Un Flux RSS désactivé pour les Custom Post Types

Collez simplement le bout de code suivant dans votre fichier functions.php :

// N'active le RSS que pour le post-type post
function dk_rss_disable_feed() {
    global $post;
    if (!is_object($post) || !isset($post->post_type) || !in_array($post->post_type, array('post'))) {
        wp_die(__('No feed available, please visit our <a href="' . get_bloginfo('url') . '">homepage</a>!'));
    }
}
 
add_action('do_feed', 'dk_rss_disable_feed', 1);
add_action('do_feed_rdf', 'dk_rss_disable_feed', 1);
add_action('do_feed_rss', 'dk_rss_disable_feed', 1);
add_action('do_feed_rss2', 'dk_rss_disable_feed', 1);
add_action('do_feed_atom', 'dk_rss_disable_feed', 1);

Basé sur le script de WP-Engineer

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Attention aux Custom Post Types !
Partager cet article sur Twitter

Une des techniques qui accompagnent ma journée est ainsi l’utilisation de Snippets. Typiquement, il s’agit de quelques caractères significatifs, et une touche « Trigger » qui va transformer ces derniers en de belles lignes de codes. Parmi les avantages : On gagne du temps, on évite de faire des erreurs sur des structures complexes (gradients en CSS3) et on évite d’utiliser des fonctions ou outils externes pour générer du code. Text Expander m’apprend ainsi que, sur la semaine dernière, 426 caractères ont été étendus en 25000. Soit un gain de temps de 2h à 40 mots par minutes !

Mon arrière grand père me disait d’ailleurs qu’un bon intégrateur avait la touche « < > » très propre car elle n’est jamais utilisée. (Véridique)

Un snippet doit donc être simple, et représentatif de son contenu. Mais attention au piège : il faut maîtriser les bouts de code produits avant de les transformer en snippets, le but étant de ne pas avoir à les taper, pour mesurer leur impact. C’est pourquoi je déconseille de recopier bêtement la bibliothèque de snippets d’un collègue, en préférant s’en inspirer pour concevoir les siens. Zen Coding, dans sa partie snippets; peut néanmoins être un point de départ pour constituer votre bibliothèque.

Voici quelques snippets parmi mes préférés :

a->tab :

<a href="#">[curseur]</a>

br->tab :

-moz-border-radius : [curseur]px;
-webkit-border-radius : [curseur]px;
-webkit-background-clip: padding-box;
border-radius : [curseur]px;

bg->tab :

background : transparent url(../images/[curseur]) no-repeat top left;

b->tab :

<strong>[curseur]</strong>

inp->tab :

<label for="[fill:id]">[curseur]</label>
<input type="text" name="[fill:id]" id="[fill:id]" />

table->tab :

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

wpq->tab :

<?php 
$args = array(
    'posts_per_page' => 5,
    'paged' => $paged
);
$the_query = new WP_Query($args);
while ($the_query->have_posts()) : $the_query->the_post();
    the_title();
endwhile;
wp_reset_postdata(); 
?>

J’utilise Text Expander pour les centraliser, me permettant de les utiliser sur différents postes de travail (merci DropBox), et sur différents logiciels (oui, même pour rédiger cet article dans l’interface WordPress ). Des gestionnaires de snippets sont souvent inclus dans les IDE.

Et vous, quels sont vos snippets favoris ?

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : La magie des Snippets
Partager cet article sur Twitter