Let’s make a #floating #button sign up form pattern - Piccalilli
▻https://piccalil.li/blog/lets-make-a-floating-button-sign-up-form-pattern
Let’s make a #floating #button sign up form pattern - Piccalilli
▻https://piccalil.li/blog/lets-make-a-floating-button-sign-up-form-pattern
SRWieZ/thumbhash : Thumbhash implementation in #PHP
▻https://github.com/SRWieZ/thumbhash
▻https://evanw.github.io/thumbhash
Thumbhash PHP is a PHP library for generating unique, human-readable identifiers from #image files. It is inspired by Evan Wallace’s Thumbhash algorithm and provides a PHP implementation of the algorithm.
Thumbhash is a very compact representation of a #placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother #loading experience. It’s similar to #BlurHash but with some advantages
Merci ! C’est cool pour protéger ses images qu’on ne veut partager qu’avec les visiteurs connectés et pour plein d’autres utilisations.
Est-ce qu’on aura un filtre (facile) ou plugin #SPIP ?!?
Est-ce qu’on aura un filtre (facile) ou plugin #SPIP ?!?
huhu, ça se pourrait si quelqu’un le faisait, perso c’est pas dans ma todo :)
Lorem Picsum
▻https://picsum.photos
Lorem Ipsum... but for #photos
Get a grayscale image by appending ?grayscale to the end of the url.
Get a blurred image by appending ?blur to the end of the url.
Images from Unsplash
Don’t Use The Placeholder Attribute
▻https://www.smashingmagazine.com/2018/06/placeholder-attribute
“The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Let’s clarify why you need to stop using it.”
The p element placed between the label and input elements acts as a replacement for a placeholder attribute.
Cool, c’est ce que propose #SPIP dans sa nomenclature depuis longtemps...
By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience. aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
On pourrait suivre ce conseil pour améliorer la chose dans le plugin saisies.
Quand je fait un proto, rapide j’utilise une petite lib js, qui me génère les placeholder, on colle une class sur le container et ça rempli, avec des contenus.
Mais pas pour les backgrounds ^^, une petite mixin en scss pour ce genre de cas.
Donc ça pioche dans des photos de chez unsplash classées par theme dans une map. On peut quand on bosse sur un projet choisir au moins des visuels en rapport.
l’avantage c’est que le random est appelé a chaque appel de la mixin, donc si on a plusieurs images sur la page ce ne sont pas les mêmes (e qui n’est pas le cas avec les autres placeholders en js…).
▻https://www.sassmeister.com/gist/0344deebfb7fb9493af410ed8c0ce1c7
▻https://jmperezperez.com/svg-placeholders
Un inventaire des techniques utilisant #SVG pour rendre le chargement différé d’images plus satisfaisant perceptuellement.
Avec liens vers divers outils pour pré-traiter les images.
Très sympa !
▻https://res.cloudinary.com/jmperez/video/upload/dpr_auto,f_auto,q_auto,c_scale/v1509278615/silhouette-lazy-loading_evq9xq.mp4
@tetue Par quoi remplacer une image durant son chargement.
Augmenter la pertinence du parcours visuel rapide par l’internaute d’une page web en cours de chargement ?
Et sur le plan esthétique, ça peut parfois être assez réussi, je trouve.
Potrace en PHP :
▻https://github.com/nystudio107/craft3-imageoptimize/blob/master/src/lib/Potracio.php
(et je découvre Craft CMS du coup qui a pas l’air mal du tout)
En fait le dépôt avec la lib à jour pour PHP, pas dans craft :
►https://github.com/Otamay/potracio
#Placeholders in Form Fields Are Harmful
▻http://www.nngroup.com/articles/form-design-placeholders
Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments.
Un #placeholder ne remplace pas un #label – HTeuMeuLeu
▻http://www.hteumeuleu.fr/un-placeholder-ne-remplace-pas-un-label
« Un placeholder ne remplace pas un label. Voilà. C’est tout. Je n’ai rien d’autre à ajouter. C’est une déclaration évidente. » Tags : placeholder label accessibilité #UX #ergonomie
#Placeholder #images from #flickr - flickholdr.com
►http://flickholdr.com
Get placeholders related to the site you are developing, by pulling images from flickr based on #tags
Sur ce coup, je crois me souvenir que Nicolas avait déjà référencé, sur TW je crois, la découpe automatique de petits chats.
@fil oui, oui, je suis déjà @arno, c’est son seen qui m’a conduit à celui-ci, j’aurais dû l’indiquer en via (tiens, comment on met des italiques dans nos seens ?
@seenthis effectivement, j’avais dû retweeter sur les p’tits #chats, je préfère largement l’option #Flickr, même si les résultats sont parfois étranges avec les #tags...
@seenthis OK, j’ai modifié mon message...
J’étais parti sur l’idée que c’était le nom devant vos commentaires qu’il fallait utiliser.
Ce serait pas mal de simplifier en mettant systématiquement en avant l’identifiant de l’utilisateur, puis éventuellement son nom ensuite, non ?
Je réitère d’ailleurs une question posée il y a quelque temps, pourquoi suis-je identifié par « @nhoizey » mais mon URL contient « nicolas-hoizey » ?
Le connaissant (ou plutôt les en vérité) il changera une demi-douzaine de fois d’ici demain.
A quick and simple service for getting pictures of #kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you’ll get a #placeholder.