Daily Weekly Monthly

Monthly Shaarli

All links of one month in a single page.

February, 2018

Stunning hover effects with CSS variables – Prototypr

Des effets hover très stylés grâce aux variables CSS et un peu de Javascript (pour récupérer la position de la souris).

PHP Live Regex

Un outil pour tester les différentes fonctions utilisant les regex de PHP.

Wallhalla - A wallpaper search engine

Un agrégateur de fonds d'écran de très bonne qualité. Il utilise notamment Wallhaven (le successeur de Wallbase), et quelques autres.

L'url wallbase.cc redirige d'ailleurs vers ce nouveau site. Peut-être des anciens de Wallbase.

Cette recherche renvoie notamment quelques très beaux résultats :)

[Solved] ERR_NETWORK_CHANGED Chrome Error Windows 10 - Driver Easy

J'avais un souci avec mon dongle Wifi USB qui nécessitait de le désactiver et de le réactiver à chaque démarrage de Windows.

La solution 1 de l'article semble avoir résolu le souci.

Design Patterns on CodePen

Des tonnes de ressources pour styliser vos composants.

Fork Awesome, a fork of the iconic font and CSS toolkit

Un fork de Font Awesome par des gens qui ne sont pas totalement en accord avec la direction prise par ce dernier dans sa version 5.

Maps | F-Droid - Free and Open Source Android App Repository

La version open-source de l'application Maps.me qui permet de visualiser et stocker les cartes OpenStreetMap. Et la navigation routière est de la partie.

A tester mais il n'y a pas l'air d'avoir trop de différences et l'application originale est très bonne.

How To Create A Responsive Table

La manière la plus simple de rendre un tableau responsive.

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>
html - Can't scroll to top of flex item that is overflowing container - Stack Overflow

Attention quand vous faites une modale centrée horizontalement et verticalement avec Flexbox. Si le contenu de la modale est plus grand que le container, le centrage va tronquer le contenu.

L'astuce est d'appliquer ce CSS sur les flex items :

.your-flex-items {
  margin-top: auto;
  margin-bottom: auto;
}

En principe, un simple margin: auto devrait fonctionner mais ça a causé des bugs avec IE chez moi. D'ailleurs pour que ça fonctionne correctement avec IE (voir les commentaires en dessous du post), il faut appliquer align-items: flex-start au lieu de center sur le container.

GPS Visualizer: Convert GPS files to plain text or GPX

Un outil qui transforme une URL Google Maps en fichier GPX.

The A11Y Project

Tout ce qu'il faut savoir sur l'accessibilité.

Href Tools - Free online web tools

Quelques outils:

  • HTML compressor
  • CSS compressor
  • JS compressor
  • Image to Base64
  • Unzip
  • CSV to JSON
  • JSON to CSV
  • OCR: Image to text
  • Image compressor
Using Media Queries For Responsive Design In 2018 — Smashing Magazine

Les Media Queries ne sont plus la seule solution pour rendre un site responsive. Flexbox et Grid intègrent déjà pas mal d'options dans ce sens.

The Log File Navigator

Un outil pour naviguer dans les logs. On peut même faire des requêtes SQL pour rechercher des infos précises.

pure JS WiFi QR Code Generator

Un générateur de QR Code pour réseau Wifi. Il vous suffit ensuite de le scanner depuis un téléphone pour être automatiquement connecté.

Du coup, évitez de le laisser traîner n'importe où ;)

SVG can do THAT?! by sdrasner

Un exemple de ce qu'on peut faire dans un navigateur web avec le format SVG.

Bon il faut un poil de créativité mais c'est assez impressionnant.

Omni Calculator

Une calculatrice pour plein de trucs.

VENoM Stack: Docker setup for local development – James Audretsch – Medium

Un environnement de développement pour Vue, Express Node MongoDB avec Docker.

How not to Vue – Anton Kosykh – Medium

Quelques choses à ne pas faire avec VueJS.

Dark patterns with the HTML 5.2 <dialog> tag and Chrome for fun and profit

Des soucis à venir avec le nouvelle élément HTML <dialog>.

Redesigning Laravel.io – Refactoring UI – Medium

L'histoire d'un redesign léger du site laravel.io fait récemment.

C'est vraiment passionnant ! C'est fou de voir comme le simple fait de se poser quelques questions simples petit améliorer les choses.

2017 Hard Drive Failure Rate Comparison

Des stats sur le taux de panne de quelques disques durs de 2017.

Les estimations de projets IT | CommitStrip

C'est tellement ça :)

usmanhalalit/pixie: Database query builder for PHP, framework agnostic, lightweight and expressive.

Une lib d'abstraction de base de données. C'est une alternative à FluentPDO.

mailcheck/mailcheck: Reduce misspelled email addresses in your web apps.

Une librairie Javascript qui suggère la bonne orthographe d'une adresse email lorsqu'elle détecte une erreur potentielle.

GitHub - adolfintel/speedtest: Self-hosted HTML5 Speedtest

Un speedtest auto-hébergeable.

Démo ici: http://speedtest.fdossena.com/

Using Webpack 2 + HMR in Laravel Development – dotdev

Utiliser Webpack et PHP en parallèle.

Installer un serveur Firefox Sync - Themimitoof.fr

Installer son propre serveur Firefox Sync pour bénéficier de la synchronisation de la navigation tout en gardant le contrôle des données qui vont avec.

Merci Mozilla !

Glossier’s Mobile Navigation – Glossier – Medium

Le menu hamburger n'est pas toujours la bonne solution.

git - Change commit author at one specific commit - Stack Overflow

Changer les informations sur l'auteur d'un commit à l'aide de git rebase.