Ce matin je suis tombé sur ce post de Chris Coyier dans lequel il explique sa manière de garder l’URL d’une page Web pour plus tard.

Il catégorise ses liens dans trois catégories : court terme, moyen terme et long terme et n’utilise jamais les favoris du navigateur pour garder une URL.

What do I not do?

• Bookmarks. A lot of browsers offer them and saving URLs is kind of the point of them. I just never got into that habit in any browser.
• Open tabs. Of course I have some open tabs, and those are pretty immediate forms of link saving, but I’m pretty quick to close them and don’t think of them as links I’m saving for later.

Chris Coyier

J’ai trouvé son approche très intéressante même si je ne comprend pas bien pourquoi utiliser les favoris du navigateur soit si dérangeant pour lui. Personnellement c’est la méthode que j’utilise.

Après, c’est vrai que je ne peut pas accéder à mes favoris depuis mon iPhone, parce que j’utilise Firefox sur mon ordinateur et Safari sur mon iPhone, mais ça n’est pas si dérangeant. Peut-être que je m’inspirerai de sa méthode si mes besoins changent un jour.

Utiliser les Flexbox CSS pour le design d’interfaces utilisateurs est devenu de plus en plus courant , d’une part parce que réaliser des mises en pages complexes est beaucoup moins casse-tête en utilisant les Flexbox CSS qu’en utilisant la vieille technique des boîtes flottantes (float: left, float: right) et bénéficie d’un meilleur support des navigateurs Web actuels. Pourquoi s’en privé !

Flexbox Patterns de CJ Cenizal présente à travers différents exemples d’interfaces utilisateurs, les nouvelles propriétés CSS liées à Flexbox et comment les utiliser .

List.js est une petite libraire Javascript qui permet d’ajouter très rapidement et simplement des fonctionnalités de tri, de filtrage et de recherche à une liste HTML existante, sans en altérer le code.

Voilà comment la librairie fonctionne :

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>
</div>
<script src="http://listjs.com/no-cdn/list.js"></script>

Ensuite un simple appel à la fonction List() et le tour est joué

var options = {
  valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);

See the Pen zpuKF by Jonny Strömberg (@javve) on CodePen.

Je faisais ma veille tranquillement ce matin, quand je suis tombé sur Parsley.js, totalement par hasard. Parsely.js est un petit plugin JavaScript qui permet de laisser un peu de côté ce qu’on adore détester : la validation de formulaire côté client. L’intérêt du plugin réside dans le fait qu’il ne nécessite aucune ligne de JavaScript, tout se passe au sein du code HTML5 grâce à l’attribut data-*. Enjoy !

Aujourd’hui, je suis tombé sur Instafeed.js, un plugin JavaScript permettant d’afficher des flux de photos Instagram n’importe où.

L’intérêt de ce plugin réside dans le fait que l’on peu récupérer des flux de photos selon un tag particulier, un lieu, un utilisateur ou simplement les photos les plus populaires.

Du coup, je me suis empressé de le mettre en place ici sur mon blog.

Cela fait un bout de temps que j’ai ce petit lien dans mes cartons : une ressource qui répertorie les différentes façon d’écrire un caractère spécial au format ISO pour l’inclure dans nos CSS et notamment  avec la propriété content, mais aussi en hexadécimal, etc. Une ressource incontournable donc. Merci Chris Coyier.

Vous cherchez des icônes minimalistes pour vos interfaces utilisateur ? Alors le site iconmonstr.com est fait pour vous ! En plus de proposer plus de 600 icônes de qualité, celles-ci sont disponibles au format PNG, mais aussi et surtout au format SVG ! Le must pour vos interfaces adaptées aux écrans hautes densité !

Avec l’arrivée des écrans haute densité comme les écrans Retina, il devient urgent d’adapter nos webdesigns à ce type d’écran. Loris Grillet vous présente quelques technique afin de préparer vos icônes et autres éléments d’interface à l’arrivée de ces types d’écran.