Voici comment afficher du contenu (texte, HTML, JS, CSS ou tout autre contenu) dans un bloc DIV, après un délai que vous aurez préalablement défini, le tout en JavaScript.

C’est écrit en JavaScript pur (vanilla JavaScript), c’est-à-dire sans librairies supplémentaires, et donc compatible avec tous les navigateurs. On utilise innerHTML pour faire apparaître la div après le délai imparti.

Exemple de contenu affiché après un délai

Le texte suivant apparaît 7 secondes après le chargement de la page :

Le code : afficher le contenu d’une DIV après un délai

Voici le style CSS à placer dans l’entête de la page (HEAD) :

Et voici le contenu à placer dans le corps de la page (BODY):

Fonctionnement du script

Voici comment fonctionne le script : on recherche le bloc DIV qui possède l’identifiant #exemple_div et on lui injecte le contenu de la variable delayed_text après le délai en secondes défini dans la variable time.

Ne pas oublier d’échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.

Simple et efficace.

Web/Tech

Bash : rechercher une chaîne dans des fichiers de manière récursive avec Grep

Par Matt 16 juillet 2015

Voici une petite technique utile pour rechercher la présence d’une chaine de texte dans le contenu des fichiers d’un répertoire.

Sous linux, j’utilise très fréquemment la commande grep.

La syntaxe de grep

La syntaxe de grep est toute simple puisqu’elle consiste à définir des options de recherche, suivies des mot-clés à chercher, et enfin du répertoire de travail.

Voilà ce que cela nous donne :

grep [option] "text string to search" directory-path

Grep en action

Sur le serveur, on se place dans le répertoire de travail pour y lancer cette commande :

grep --color --include=\*.{php,js,css} -rnwe "recherche" .

Voici le détail des arguments :

--color : pour activer la colorisation des résultats
--include=\*.{php,js,css} : les extensions de fichiers à cibler
-r : de manière récursive
-n : avec les numéros de ligne
-w : mots complets de la recherche (recherche stricte)
-e : active la regex sur les extensions de fichiers

Note : le terme à recherche doit être entre guillemets et il faut bien ajouter le point (.) final ou alors explicitement donner le chemin complet du répertoire de travail.

Grep et les expressions régulières

Il est également possible d’utiliser des expressions régulières avec Grep :

grep --color -HnR "add_[a-zA-Z].*_page.*, [0-9]*," /home/public_html/wp-content/plugins/

Très utile pour rapidement trouver une fonction devenue obsolète ou un bout de code utilisé dans plusieurs fichiers.

WordPress

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter

Par Matt 15 janvier 2015

Jusqu’à très récemment, il m’était tout à fait possible d’avoir des caractères accentués dans des blocs de texte sous WordPress en utilisant le plugin Crayon Syntax Highlighter pour coloriser le code.

Or depuis quelques temps tous les blocs en lang="text" ne permettent plus d’afficher les accents : je me retrouve avec des mots tronqués comme si le texte n’était pas encodé en UTF-8.

Problème : des caractères non-Unicode

Voici ce que donne la phrase “j’ai mangé une tarte à la crème à Noël” avec une colorisation par défaut avec Crayon Syntax Highlighter :

J'ai mangé une tarte à la crème à Noël.

Gloups! C’est totalement illisible, les accents deviennent un caractère mal encodé et certaines lettres adjacentes sont littéralement supprimées. Pas glop.

Solution : créer un alias

La solution que je propose est plus une rustine d’appoint qu’une véritable solution.

Je pense que le problème réside dans l’expression régulière des langages du plugin : certains langages (shell par exemple) n’acceptent pas les accents alors que d’autres (HTML par exemple) oui.

Je me suis rendu compte en changeant la langue du bloc que le langage batch affichait correctement les accents.

Comme je n’allais pas éditer tous mes articles pour changer le langage des blocs texte que j’ai utilisé jusqu’à maintenant, j’ai opté pour la création d’un alias.

Web/Tech

Linux : résoudre l’erreur de montage/démontage de disque dur “Error unmounting: umount exited with exit code 1: helper failed with: umount: only root can unmount”

Par Matt 30 août 2014

Sur mon ordinateur, surnommé The Reaper, j’ai plusieurs disques dur : mon disque principal est un disque formaté en EXT4, entièrement dédié à Linux.

Les deux autres disques durs sont formatés en NTFS car ils datent du temps où j’avais Windows dessus.

Le problème : un disque en lecture seule

L’autre jour, Cécile cherche à sauvegarder ses fichiers sur son disque externe, qui ne semble pas être détecté. Je lui propose alors le mien et le branche sur ma machine pour voir s’il reste de la place dessus. Je le monte et là je m’aperçois qu’il est en mode lecture seule (aka read-only ou r-o) : impossible de copier le moindre fichier dessus alors qu’avant c’était bien possible.

Après de multiples recherches, essais, installations de paquets divers et variés, la situation a un peu changé : mes 2 disques internes se montent maintenant automatiquement au démarrage du système (ce que je ne veux absolument pas) et lorsque je veux les démonter, j’obtiens le fameux message d’erreur “Error unmounting: umount exited with exit code 1: helper failed with: umount: only root can unmount” qui me dit en substance que seul l’utilisateur root peut monter ou démonter le disque.

Bref, je tombe de Charybde en Scylla. Voici comment régler la situation une bonne fois pour toute, disques internes et externes à la fois.

1. On liste les disques du système avec :

df

2. On démonte les disques en question (sda chez moi) :

sudo umount /dev/sda1

3. On installe le paquet ntfs-config :

sudo apt-get install ntfs-config

4. On lance ntfs-config depuis Applications > Outils Système > Outil de configuration NTFS ou depuis le terminal avec :

gksudo ntfs-config

5. On active l’écriture des disques internes et externes :

6. On édite le fichier de configuration /etc/fstab :

sudo nano /etc/fstab

et on retire les lignes qui correspondent aux disques durs dont on ne veut pas le montage automatique. Vous pouvez commenter les lignes pour plus de sécurité.

7. Voilà, vous devriez être en mesure d’accéder à vos disques durs normalement.

Conclusion

J’ai beaucoup joué avec les options avancées de ntfs-config mais je ne suis pas sûr d’en maîtriser toutes les subtilités.

J’ai retrouvé un accès complet à mes disques en montage/démontage/lecture/écriture en éditant le fichier /etc/fstab et en supprimant les lignes relatives aux disques incriminés. Et depuis tout va bien.

Mister B.

Améliorer ses graphiques avec le minimalisme

Par Matt 11 décembre 2013

Aujourd’hui, j’ai trouvé cette petite animation qui explique comment créer des graphiques plus attirants et plus lisibles :

Il est donc utile de retirer le fond, les étiquettes et légendes redondantes, les bordures, le nombre de couleurs, les effets spéciaux et la mise en gras.

Il faut adoucir les étiquettes en mettant du gris au lieu du noir et adoucir voire supprimer les lignes.

Et enfin, ne garder que les étiquettes ou titres qui ont le plus d’impact pour la compréhension du graphique. Tout ce qui est superflu doit disparaître pour plus de lisibilité et de compréhension.

Bienvenue dans l’ère du minimalisme !

Web/Tech

PHP : résoudre l’erreur “Creating default object from empty value”

Par Matt 28 mai 2013

Suite à la mise à jour de PHP, mon fichier d’erreurs du site a commencé à afficher le message suivant :

PHP Warning: Creating default object from empty value in /wp-content/themes/skyminds/functions.php on line 1213

La ligne en question correspond à :

$posts[0]->comment_status = 'closed';

Le problème réside dans le fait que $posts n’est pas explicitement défini et comme les versions récentes de PHP tournent maintenant avec le mode E-STRICT par défaut, on obtient une erreur. Il existe deux solutions – soit mettre :

$posts = new stdClass();

s’il sagit d’un objet, soit mettre :

$posts = array();

s’il s’agit d’une associative array, juste avant la ligne de code incriminée. Dans mon cas, l’array() est la bonne solution.

Web/Tech

PHP : résoudre l’erreur “assigning the return value of new by reference is deprecated”

Par Matt 01 novembre 2012

Si, lors d’une journée de débuggage PHP, vous tombez sur l’erreur suivante :

Deprecated: Assigning the return value of new by reference is deprecated in  on line 12

pas de panique, c’est extrêmement simple à résoudre. Vous avez probablement une ligne dans ce goût-là :

$data =& new Structured_Info();

Or, depuis PHP5, le passage par réference est systématique sur new, donc il suffit d’enlever le ‘&’ et d’écrire :

$data = new Structured_Info();

Tout simplement.

Web/Tech

Linux : vider un fichier de son contenu avec la commande truncate

Par Matt 24 octobre 2012

De temps en temps, il peut être utile de pouvoir effacer le contenu d’un fichier qui prend de l’embonpoint, comme un fichier de log par exemple.

Dans ce cas, vous pouvez lancer la commande truncate sous linux dans un terminal :

truncate -s 0 /home/skyminds/error.log

L’argument -s 0 signifie que l’on réduit sa taille (size) à zéro. Simple et efficace !

Web/Tech

Ubuntu : installer la dernière version de Firefox

Par Matt 29 septembre 2012

Sur ma machine principale, j’utilise principalement Firefox parce que j’y ai mes habitudes : passwords, bookmarks, extensions. Or, je tourne sous 10.10 parce que j’aime bien Gnome et que je ne veux pas passer à Unity. Bref, je suis resté en 10.10 et en 10.10, on a le droit qu’à Firefox 12 !

Voici donc comment mettre Firefox à jour sur une “vieille” Ubuntu.

Etape 1 : vérification du fichier /etc/apt/sources.list

On commence par vérifier que le fichier /etc/apt/sources.list ne contient pas d’entrées obsolètes ni de sources externes pour l’installation de firefox (genre mozilla-daily-builds etc) :

sudo nano /etc/apt/sources.list

Etape 2 : ajout du dépôt firefox-aurora

Nous allons y ajouter le dépôt firefox-aurora :

deb http://ppa.launchpad.net/ubuntu-mozilla-daily/firefox-aurora/ubuntu/ lucid main 
deb-src http://ppa.launchpad.net/ubuntu-mozilla-daily/firefox-aurora/ubuntu/ lucid main

Web/Tech

Firefox : récupérer les mots de passe enregistrés avec Xmarks

Par Matt 22 février 2012

J’ai récemment installé Linux Mint Debian Edition sur mon laptop. L’OS est beau, stable, on trouve facilement ses marques lorsqu’on vient d’Ubuntu et il n’y a pas des mises à jour à faire tous les jours.

Sous Firefox, j’ai l’habitude de synchroniser mes marque-pages et mots de passe avec l’extension Xmarks. Cela me permet d’avoir tout le temps mes favoris et de ne pas avoir à me souvenir de 43 743 différents mots de passe.

Le problème : impossible de rapatrier les mots de passe depuis le serveur Xmarks

Lorsque l’on installe une version récente d’Xmarks, on peut rapatrier les marque-pages mais l’option pour rapatrier les mots de passe n’est plus disponible.

Xmarks a été racheté par LastPass il y a 2 ans et ils tentent de refourguer la gestion des mots de passe à l’extension LastPass. Je préfère n’installer qu’une seule extension (qui a fait ses preuves) plutôt que de devoir en réinstaller une autre.

La solution : la feinte

En fait l’option de rapatriement des mots de passe est juste cachée dans Xmarks dorénavant : ceux qui l’utilisent depuis longtemps la voient toujours, les petits nouveaux (ou qui viennent de l’installer) ne la voient pas par défaut pour les décourager de l’utiliser.

Web/Tech

CSS : forcer le retour à la ligne du code pre en CSS3, sous Mozilla, Opera et IE

Par Matt 09 avril 2010

Je me suis rendu compte en rédigeant mes articles sur l’installation du serveur dédié que le code bash, lorsqu’il était un peu long, n’allait pas à la ligne automatiquement.

Il était écrit d’une seule ligne dans son conteneur, forçant une barre de navigation horizontale bien disgracieuse… Heureusement, cela est maintenant une chose du passé.

Le code est affiché sur le site avec la balise pre, qui permet l’affichage d’un texte pré-formaté.

Or la particularité de cette balise est qu’elle désactive le retour à la ligne. Voici une astuce en CSS pour contre-carrer cet effet indésirable.

/* Forcer le retour à la ligne de la balise PRE - skyminds.net */		
pre {
   white-space: pre-wrap;             /* CSS3 */
}

Web/Tech

Firefox : tester automatiquement les liens rapidshare, megaupload, filefactory, netload avec GreaseMonkey

Par Matt 21 octobre 2009

Aujourd’hui, je vous livre une petite astuce pour tester automatiquement les liens rapidshare.com, megaupload.com, netload.in et filefactory.com (ainsi que megarotic.com et megaporn.com au passage mais bon cela ne concerne pas la majorité des gens ça si ?) qui se trouvent sur les pages que vous êtes amenés à visiter.

Tout ce dont vous avez besoin, c’est de Firefox, l’extension GreaseMonkey, un simple script GreaseMonkey et 3 minutes de votre temps.