Animations de liens en CSS

Quelques tests d'animation de liens grâce au pseudo-élément :after et aux transitions CSS.

Pour commencer, voici notre structure HTML :

<div class="bloc">
    <a href="#" class="top">Top</a>
    <a href="#" class="right">Right</a>
    <a href="#">Bottom</a>
    <a href="#" class="left">Left</a>
</div>

Et notre CSS :

.bloc {
  font: 16px/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
}
.bloc a {
  position: relative;
  display: block;
  background: #f0f0f0;
  padding: 10px 0;
  margin: 20px 0;
  text-align: center;
  color: #444;
  text-decoration: none;
  overflow: hidden;
}
.bloc a:after {
  content: "";
  width: 100%;
  height: 5px;
  background: violet;
  position: absolute;
  bottom: 0;
  left: -100%;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.bloc a:hover:after,
.bloc a:active:after {
  left: 0;
}
.bloc a.top:after {
  top: 0;
}
.bloc a.left:after {
  width: 5px;
  height: 100%;
  top: -100%;
  left: 0;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.bloc a.left:hover:after,
.bloc a.left:active:after {
  top: 0;
}
.bloc a.right:after {
  width: 5px;
  height: 100%;
  top: -100%;
  right: 0;
  left: auto;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.bloc a.right:hover:after,
.bloc a.right:active:after {
  top: 0;
}

Et voici le résultat :

See the Pen Link animations by lddz (@ledodz) on CodePen.

OS X : Afficher les fichiers et dossiers cachés dans le Finder avec Terminal

Voici une petite astuce bien pratique qui vous permettra d'afficher les fichiers cachés présents sur votre Mac dans le Finder.

Avertissement : Les fichiers cachés sont généralement utilisés pour enregistrer des données de configuration, ils peuvent contenir des données sensibles, il faut donc les manipuler avec beaucoup de prudence.

Si vous êtes développeur ou bidouilleur, vous pouvez avoir besoin d'afficher, voire même de modifier ces fichiers, voici donc la manipulation à effectuer pour les afficher.

- Lancer Terminal

- Taper la ligne de commande ci-dessous :

defaults write com.apple.finder AppleShowAllFiles YES

- Il faut alors quitter et relancer le Finder afin que les changements prennent effet, voici la ligne de commande à utiliser :

killall Finder

Les fichiers et dossiers cachés présents sur votre Mac sont à présent visibles dans le Finder.

Une fois que vous aurez fini de bidouiller, vous voudrez sûrement masquer à nouveau ces fichiers.

- Voici la ligne de commande qui vous permettra de les masquer à nouveau :

defaults write com.apple.finder AppleShowAllFiles NO

- Ne pas oublier de relancer le Finder :

killall Finder

WordPress : Filtrer les commentaires en amont pour éviter le spam

Si vous utilisez les commentaires sur votre site tournant sous WordPress, vous avez sûrement déjà été confronté aux commentaires indésirables.
Ces commentaires sont la plupart du temps envoyés par des robots nous ventant la qualité de leurs pilules amaigrissantes ou revigorantes, de leurs sacs à mains ou autres montres de grandes marques... bref, ces commentaires n'ont rien à faire sur votre site !

Voici un petit bout de code PHP à placer dans le fichier functions.php de votre thème qui va "pré-filtrer" les commentaires postés sur votre site afin de vérifier si il s'agit ou non d'un spam.

Les spammeurs utilisent souvent une URL comme nom d'utilisateur. Le petit bout de code ci-dessous va vérifier la longueur du nom d'utilisateur afin de vérifier s'il s'agit d'une potentielle URL. Si c'est le cas, le commentaire sera classé automatiquement dans les spams.

Voici le le code à intégrer :

add_filter( 'pre_comment_approved', 'am_check_spam_comment', 99, 2 );
function am_check_spam_comment( $approved, $commentdata ) {
    return ( strlen( $commentdata['comment_author'] ) > 75 ) ? 'spam' : $approved;
}

Dans l'exemple ci-dessus, on vérifie si le nom d'utilisateur dépasse les 75 caractères, si c'est le cas, direction les spams.
Vous pouvez, bien évidemment, modifier ce code afin de filtrer les commentaires selon un nombre de caractères différent.

Ce code est inspiré par la fonction de norcross, qui se base sur la longueur de l'URL fournie par l'auteur du commentaire : https://gist.github.com/norcross/5468979

Il ne s'agit pas là d'une solution miracle, mais cela peut constituer une aide bien appréciable.