Bookmarks

  • Belle trouvaille

    Bookmarked Who knows? by Jeremy Keith.

    Had you heard of these bits of CSS? Me too/neither!

    https://adactio.com/journal/21007

    Je viens de découvrir à mon tour la propriété text-emphasis et le sélecteur ::file-selector-button dont parle Jeremy. Je pense que je vais pouvoir utiliser ce dernier sélecteur dans mon projet actuel.


  • Les interrupteurs « on/off » arrivent nativement !

    Les interrupteurs « on/off » arrivent nativement !

    Le truc que je préfère avec la sortie de Safari 17.4 ? L’attribut switch sur les <input type="checkbox"> !

    On aura plus besoin de gérer l’accessibilité et les styles bien relous à mettre en place sur les cases à cocher qu’on veut afficher comme des interrupteurs pour faire « comme sur iPhone, parce que c’est trop beau ! ».

    Bonne nouvelle donc, hâte de voir les autres navigateur l’implémenter


  • Optimisez vos publications WordPress avec Post Kinds!

    Je viens de tomber sur cet article de Chris Aldrich dans lequel il explique comment accélérer le processus de publication grâce au plugin WordPress Post Kinds et ses URLs du style http://example.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url


  • Communication

    Likes A holy communion by Dave Rupert.

    Je trouve que Dave Rupert a une façon unique de voir le monde qui l’entour et ses réflexions sont toujours très justes avec une certaine dose de poésie ou d’humour. J’aime beaucoup lire son blog !


  • Les composants Web pour les nuls

    En parcourant mon Feedbin ce midi je suis tombé par hasard sur un article d’Eric Meyer concernant les composants Web et grâce à lui j’ai compris comment ils fonctionnent et tout me parait un peu moins flou maintenant.

    Si comme moi vous n’aviez pas encore pu saisir leur intérêt, je vous conseille vivement d’aller le lire ! J’espère pouvoir appliquer ça dans un futur projet au boulot et me faire les dents dessus 🙂

    Je n’ai rien d’autre à ajouter. Juste, lisez le.


  • Rappel !

    Most of the agencies I gigged for didn’t even use source control, you deployed by uploading the folder to the server via FTP!

    C’est tellement ça ! Pour ma part, je n’ai commencé à utiliser Git qu’aux alentours de 2017, quand j’étais encore chez Ibakus Europe et que nous avions décidé de réécrire les applications en Symfony. Avant ça c’était Filezilla ou Transmit et on essayait de ne pas travailler sur les mêmes fichiers en même temps 😅. La lecture de ce billet m’a mis un petit coup de vieux, l’auteure ayant sensiblement le même âge que moi, mais c’est un très bon rappel.


  • Garder des URLs pour plus tard

    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.


  • Flexbox Patterns – éléments d’interfaces avec flexbox

    Bookmarked Flexbox Patterns.

    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

    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.


  • Une navigation 3D en CSS et jQuery

    Les éléments  de navigation sont essentiels lorsqu’on conçoit un site Internet, que ce soit pour la navigation entre les différentes pages d’un site, ou simplement se déplacer vers différentes sections d’une même page. Claudia Romano propose un concept de navigation responsive simple mais avec beaucoup de caractère. Idéal pour la navigation d’un site type portfolio.


  • Ajuster text-color en fonction de background avec Sass

    Dans un article de The Sass Way, Sebastian Ekström nous montre comment, avec Sass, garantir la meilleure lisibilité possible à vos textes pour une couleur de fond donnée.

    Pour cela, il écrit une fonction Sass qui retournera une couleur différente en fonction de la couleur qui lui sera passée en paramètre. Cette fonction vérifie tout simplement le taux de luminosité de la couleur qu’elle reçoit et retourne une couleur contrastée en conséquence. Si sa luminosité est supérieure à 50%, la fonction retournera une couleur sombre, sinon une couleur claire.

    Lisez son article sur The Sass Way, pour voir comment il fait ça.  Sa solution est toute simple mais efficace.


  • Parsley.js – Validez vos formulaires en JavaScript. Simplement.

    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 !