generatedata.com
▻http://www.generatedata.com/?lang=fr#t2
Un outil open source écrit en JavaScript, PHP et MySQL qui permet de générer rapidement de gros volumes de données personnalisées dans une variété de formats pour une utilisation dans les logiciels de tests, bases de données...
Syncope
▻http://nowodzinski.pl/syncope
Super efficace pour définir des réglages typos de base (taille, interlettrage, longueur de ligne), permet aussi de caler un rythme vertical régulier entre titre, inters et paragraphes. Moins complexe que d’autres outils mais c’est aussi bien.
Syncope is a WYSIWYG tool that helps web designers and developers chose the optimal vertical rhythm of the typography for their web pages.
Basically, it’s a set of tools which adjust the rhythm and output the styles in a preferred, production–friendly format. It is also a lot of fun to play with! In fact, if it weren’t for that, this tool wouldn’t have seen the light of day.
a11y-outline
▻https://addons.mozilla.org/fr/firefox/addon/a11y-outline
Une extension #Firefox qui remplace « Headings map », que j’utilisais beaucoup mais qui n’est plus compatible avec Quantum.
On peut afficher simplement les landmarks #aria et les niveaux de titres <Hx> d’une page, ça semble parfait à première vue.
PS : touche ESC pour fermer la popup
Allez, plus qu’une extension pour vérifier/gérer les contrastes, genre ▻http://contrast-finder.tanaguru.com et j’aurai à peu près retrouvé mes fonctionnalités de webdev sur Firefox 60 (nightly).
Ce script à mettre en bookmarklet semble pas mal du tout :
▻https://khan.github.io/tota11y
et porté sous forme de webextension :
▻https://addons.mozilla.org/fr/firefox/addon/tota11y-accessibility-toolkit
devtools-highlighter
▻https://addons.mozilla.org/en-US/firefox/addon/devtools-highlighter
Find and highlight elements on the page with this DevTools panel, using CSS styles and selectors.
Un nouvel outil dans les devtools de #Firefox
#idée_pour_spip, à intégrer dans le thème/framework CSS des choses disponibles dans l’admin
Lozad.js | lozad.js
▻https://apoorv.pro/lozad.js
Yet another Lazy Loading JavaScript library, why?
Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.
Making this more efficient and performant is what #intersectionobserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
Saying Goodbye to Firebug ★ Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug
The story of Firefox and Firebug is synonymous with the rise of the web.
So long Firebug, and thanx for all the fish :)
Essential Image Optimization
►https://images.guide
We should all be automating our image compression.
In 2017, image optimization should be automated. It’s easy to forget, best practices change, and content that doesn’t go through a build pipeline can easily slip. To automate: Use imagemin or libvips for your build process. Many alternatives exist.
GitHub - imagemin/imagemin : Tense, nervous, minifying images ?
▻https://github.com/imagemin/imagemin
Utilitaire pour compresser les images web (jpg, png, gif) et les fichiers SVG. Disponible en ligne de commande, GUI, module Gulp
#image #gulp #node #compression #optimisation #webdev
Tanaguru Contrast-Finder
▻http://contrast-finder.tanaguru.com/result.html?foreground=%2300C0BD&background=%23FFFFFF&algo
un outil en ligne pour ajuster les combinaisons de couleurs texte/fond afin d’avoir un contraste suffisant pour passer les tests d’accessibilité
Bien ! Dans ma première version de ma nouvelle interface, le contraste était insuffisant, mais je ne l’ai su que parce qu’une lectrice a commencé par dire qu’elle ne me lisait plus. Et parce que je lui ai demandé pourquoi, alors, seulement, elle m’a parlé de ses problèmes de vue et de mon problème de contraste.
la nouvelle version (par les concepteurs de Contrast-Finder),
avec une nouvelle URL :
►https://app.contrast-finder.org/?lang=fr
pour contribuer c’est par ici :
►https://github.com/Asqatasun/Contrast-Finder
pour l’histoire du projet #ContrastFinder :
►https://contrast-finder.org/#contrast-finder-history
CSS Peeper – L’analyse de CSS, pépère.
▻http://feedproxy.google.com/~r/KorbensBlog-UpgradeYourMind/~3/ucEQDh_63TM/css-peeper-lanalyse-de-css-pepere.html
Si vous êtes sous Chrome et que vous trouvez que l’inspecteur de code pour analyser les styles d’un site web, n’est pas très pratique à utiliser, voici CSS Peeper, une extension qui va vous changer la vie. Grâce à CSS Peeper, plus besoin de partir en expédition dans les feuilles de style, il suffit de cliquer sur l’icône et de déplacer votre souris sur l’élément de la page qui vous intéresse, pour en obtenir tous les détails techniques. Styles appliqués, couleurs et même les assets, c’est-à-dire les éléments (dans ce cas, des images) qui sont appelés sur la page.
Vraiment génial par exemple pour récupérer une image appelée par une CSS sans être obligé de gratter. Un outil indispensable pour les intégrateurs, designers et autres bidouilleurs de code en manque d’inspiration
A télécharger ici. Source Cet (...)
CSS pépère ouais.
Bon, c’est joli mais je vois pas trop l’utilité réelle.
Mmmh je ne comprends pas, c’est un peu mieux présenté peut-être mais je ne vois pas ce que ça fait de plus que l’inspecteur de Firefox ou Chromium qui ont DEJA une fonction pour pointer n’importe quel élément de la page à la souris sans avoir à fouiller le HTML.
@supports will change your life
►http://www.lottejackson.com/learning/supports-will-change-your-life
Ok, ça ressemble à un appat à clic mais, effectivement, quand on fait du #css, @support ça change la vie.. — Permalink
ParisWeb
▻https://pixelastic.github.io/parisweb
présentation de l’ensemble des conférence de parisweb (10 ans d’archives) avec un moteur de filtrage efficace
#paris_web #conférence #webdev #recherche #filtre
Storage Inspector - Firefox Developer Tools | MDN
▻https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:
– Cache Storage (new in Firefox 47) - any DOM caches created using the Cache API.
– Cookies - All the cookies created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.
– Local Storage - All local storage items created by the page or any iframes inside the page.
– Session Storage - All session storage items created by the page or any iframes inside the page.
– IndexedDB - All IndexedDB databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.
For the time being, the Storage Inspector only gives you a read-only view of storage. But we’re working to let you edit storage contents in future releases.
#cookie #storage #local_storage #inspector #webdev #firebug #firefox_devtools #mdn
Comment valider une adresse email en #php
▻https://3v4l.org/hPqam
Il y a beaucoup de sites qui refusent des emails parfaitement valides parce qu’ils trouvent qu’il y a des caractères bizarres, ou bêtement qu’il y a un TLD inconnu (voire pas de TLD)
Pourtant valider une adresse email en PHP ça se fait en une ligne, sans regex, avec une fonction native du langage.(Permalink)
Alignements de formulaires parfaits. - Jack in the flexbox
▻http://jackintheflexbox.tumblr.com/post/137471794934/alignements-de-formulaires-parfaits-la
« La flexibilité du module Flexbox est particulièrement efficace au sein des éléments de formulaires. »
C’est tellement beau.
À partir de Edge côté Microsoft par contre…(Permalink)
Les serveurs #smtp pour l’e-mailing | Arobase.org
▻http://www.arobase.org/emailing/services-smtp.htm
mandrillapp étant désormais payant (pour les nouveaux utilisateurs), une sélection de prestataires proposant un #service SMTP au moins partiellement gratuit
Parution de #firefox 41 - LinuxFr.org
▻http://linuxfr.org/news/parution-de-firefox-41
Sympa cette petit nouvelle fonctionnalité qui permet d’ouvrir le code source dans un onglet plutôt que dans une nouvelle page. Pour ce faire, dans about:config changer la valeur de browser.newtab.url de false à true.(Permalink)
Plugins #jquery de ►http://www.liberation.fr
▻http://s1.libe.com/newsite/js/libs/plugins.js
- Avoid console errors - 1.0 - ▻https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js
- jQuery Easing - 1.3 - ▻http://gsgd.co.uk/sandbox/jquery/easing
- jQuery Color - 2.1.2 - ▻https://github.com/jquery/jquery-color
- jQuery Background-Position Animations - ▻http://stackoverflow.com/a/12493380/1113376
- jQuery Mousewheel - 3.1.12 - ▻https://github.com/brandonaaron/jquery-mousewheel
- jQuery scrollbarWidth - 0.2 - ▻http://benalman.com/projects/jquery-misc-plugins
- jQuery Transform2d.js - 07/05/12 - ▻https://github.com/louisremi/jquery.transform.js
- jQuery.ScrollTo - 1.4.13 - ▻http://flesler.blogspot.fr/2007/10/jqueryscrollto.html
- imagesLoaded - 3.1.8 - ▻https://github.com/desandro/imagesloaded (includes EventEmitter 4.2.6 & eventie 1.0.4)
- qTip2 - 2.2.1 tips viewport svg - ▻http://qtip2.com
- Lazy Load - 1.9.3 - ▻http://www.appelsiini.net/projects/lazyload
- Raphaël - 2.1.2 - ►http://raphaeljs.com
- raphael-svg-import-classic - v0.2.1 - ▻https://github.com/crccheck/raphael-svg-import-classic
- jQuery UI - 1.11.1 - ▻http://jqueryui.com
- jQuery UI Touch Punch - 0.2.3 - ▻https://github.com/furf/jquery-ui-touch-punch
- jQuery Mobile Events - 21/06/14 - ▻https://github.com/benmajor/jQuery-Mobile-Events
- jQuery Cycle2 - 2.1.5 - ►http://jquery.malsup.com/cycle2
- History.js for jQuery - 1.8b2 - ▻https://github.com/browserstate/history.js
- konami.js - 1.4.2 - ▻https://github.com/snaptortoise/konami-js
- moment.js - 2.5.1 - ▻http://momentjs.com
- Misc
- Stellar.js - v0.6.2 - ▻http://markdalgleish.com/projects/stellar.js
- jSlider.js - ▻https://github.com/Jorand/jSlider
- animText v0.2 - Didjo / Datagif ▻http://www.datagif.fr
- svg4everybody v1.0.0 - github.com/jonathantneal/svg4everybody
/
#upup - The #offline First Library
▻https://www.talater.com/upup
UpUp est une bibliothèque #javascript légère, en ajoutant des fonctionnalités offline aux pages web. Grâce à des #service_workers, le navigateur va mettre en cache les données et assets spécifiées par UpUp pour les réafficher en cas de déconnexion et d’appel de la page. Propose un tuto pour la prise en main et une doc pour l’API de la lib.
Je n’ai pas encore migré sur HTTPS (vivement ►https://letsencrypt.org ), donc pas encore pris le temps de tester les Services Workers.
J’ai commencé à virer AppCache là où j’en avais mis, par contre… ;-)
Si je comprends bien ▻https://davidwalsh.name/dont-wait-serviceworker-adding-offline-support-oneline
Il faut aussi prévoir de compléter pour la moitié des navigateurs qui ne gèrent pas le serviceworker avec autre chose, ▻https://pouchdb.com/learn.html ?
Oui et non, ce sont deux choses différentes. SW sert essentiellement à cacher des resources ; Pouch sert de base de données synchronisée et offline. C’est plus pour mettre du JSON que tu peux synchroniser avec Couch super facilement.
Les browsers qui n’ont pas SW, eh ben ils n’ont pas d’offline. C’est pas grave.
C’est forcément génant d’une façon ou d’une autre d’utiliser un navigateur désuet. Mais ça, on n’y peut pas grand chose.
Bubbler - #css Speech Bubble Generator - i like pixels 3
▻http://www.ilikepixels.co.uk/drop/bubbler
"A simple CSS speech bubble generator to create speech bubbles using a single element and :before and :after CSS rules."(Permalink)
React.js Introduction For People Who Know Just Enough #jquery To Get By
▻http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-ge
Une très bonne introduction à #reactjs pour celleux qui savent juste se débrouiller avec jQuery.(Permalink)
Accessible Footnotes with CSS
►http://www.sitepoint.com/accessible-footnotes-css
The problem with footnotes on the web is that they can be a pain to maintain. If you happen to work on the same document often, changing the order of sections, adding references along the way, it might be tedious to have to re-number all existing footnotes. For example, if you have 3 existing references to footnotes in a document, and you want to add another one, but on a piece of content that occurs before all the others, you have to re-number them all. Not great…
#css #aria #webdev #web #interfaces
Je continue à trouver les footnotes particulièrement inadaptées au web.
J’ai bidouillé un peu de JS pour les ramasser et les réinsérer dans le flux du texte, pour pouvoir les transformer en « sidenotes » ou en « infocards », mais :
– ça pose des soucis de rendu et d’accessibilité
– j’ai vraiment l’impression de faire du bidouillage. La solution propre serait d’intervenir au niveau du générateur de HTML, plutôt que sur la sortie finale.
Mon essai (pas sec) ici : ▻https://github.com/0gust1/md-vanilla-sidenotes
Il faudrait maintenant que je regarde pour implémenter tant que possible les bonne pratiques exposées dans le billet linké (et finir un truc un peu propre/isolé niveau JS).
fun fact : j’ai tout codé avec vim (pour voir) : j’en ai un peu bavé ^^
@0gust1 je ne sais pas si tu connais ce script :
Il pourrait être intéressant d’y intégrer les recommandations citées ici si elles n’y sont pas.
Je l’ai passé en plugin SPIP dernièrement :
Merci @b_b !
Je vais regarder ce que ça fait (beaucoup (trop ?) de choses visiblement). Par contre la dépendance à jQuery me chiffonne un peu. Beaucoup de plugins jQuery pourraient s’en passer.
Ce qui est intéressant c’est justement de sortir de la logique de notes de “bas de page”, tout en gardant la possibilité d’annoter un texte/document.
La note permet d’alléger la rédaction du texte en en sortant des références ou des éléments complémentaires, et de hiérarchiser le contenu (le propos et le contexte ou les références).
Par contre, comme @0gust1 la dépendance à JQuery me chagrine aussi un peu...
bigfoot
Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript.
