Emmet — the essential toolkit for web-developers
►https://emmet.io
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
Découvert via cette vidéo :
▻https://www.youtube.com/watch?v=EhRPdUv1ZrA
Emmet — the essential toolkit for web-developers
►https://emmet.io
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
Découvert via cette vidéo :
▻https://www.youtube.com/watch?v=EhRPdUv1ZrA
Grace à #vscodium, on peut passer plus de temps à apprendre les raccourcis qu’à coder :)
Pour info, il y a des snippets pour #spip : ▻https://git.spip.net/spip-contrib-outils/snippets-vscodium
Roh ! Je ne connaissais pas « lorem » ou « lorem5 » ... un indipensable :)
Accéder à l’ancienne version de MicrosoftEdge | Microsoft Docs
▻https://docs.microsoft.com/fr-fr/DeployEdge/microsoft-edge-sysupdate-access-old-edge
Utiliser les 2 versions du navigateur Microsoft Edge (Legacy et Chromium) sur un même ordi. _modification de la stratégie de groupe à faire avant d’installer la nouvelle version_
hCaptcha - Stop more bots. Start getting paid.
▻https://www.hcaptcha.com
Une alternative intéressante à reCaptcha. Do you use a captcha to keep out bots? hCaptcha protects user privacy, rewards websites, and helps companies get their data labeled. Help build a better web. — Permalien
nfroidure/ttf2woff2 : Convert ttf files to woff2.
▻https://github.com/nfroidure/ttf2woff2
Un convertisseur de polices TTF vers Woff2 en nodeJS
Alternativement un outil en ligne : ▻https://www.aconvert.com/fr/image/ttf-to-woff2
#SPIP : un modèle pour mettre en forme le contenu des newsletters
Un besoin qui remonte régulièrement quand on envoie des newsletter avec SPIP et le trio magique Newsletter/Mailsubscriber/Mailshot, c’est la possibilité de mettre en forme le contenu pour le rendre plus dynamique. Bien sûr, et c’est là que se cache le pot de pus, ça doit fonctionner sur toutes les plateformes et avec tous les logiciels, webmails compris.
Principe
J’ai donc utilisé l’astuce lue je ne sais plus où (de @rastapopoulos je crois ?) de passer par des sélections éditoriales (►https://contrib.spip.net/Selections-editoriales) pour afficher le contenu dans les newsletters.
Il suffit donc de faire un modèle simple qui affiche ces sélections et le tour est joué.
Pour ça, j’ai regardé ce qui se faisait chez Mailjet et le principe est d’avoir un template qui affiche de base tout en une colonne et, via des Media Queries, gérer les mises en forme plus complexes (ligne, 2 colonnes, etc...). Ça semble malin car les cas où on doit afficher le contenu en 1 colonne, c’est sur smartphone et ces applis sont les moins aptes à gérer Media Queries.
–---
EDIT 16/04/20 : C’est désormais un plugin indépendant sur la forge SPIP
►https://git.spip.net/spip-contrib-extensions/newsletters_modeles
–---
Il y a donc 2 fichiers
La feuille de styles insérée dans le modèle de la newsletter :
▻https://gitlab.com/jmoupah/zcm/blob/master/css/newsletter_rwd.css.html
le modèle
▻https://gitlab.com/jmoupah/zcm/blob/master/modeles/selection_newsletter.html
Le modèle
Affichage pleine largeur <selection_newsletterX>
Affichage par ligne <selection_newsletterX|affichage=ligne>
Modèle par colonne <selection_newsletterX|affichage=colonne>
Le résultat
D’après mes 1ers tests, ça semble fonctionner sur pas mal de configs (Thuberbird, Yahoo/GMail/Zimbra webmail, GMail sur Android). Étonnamment ^^, MS Outlook n’affiche pas bien les 2 colonnes. N’ayant pas cette usine à gaz, je n’ai pas encore pu creuser. Et je n’ai pas encore pu tester sur Mail de MacOS non plus.
Donc voilà, si qq1 veut tester et faire des retours, je prends.
Hello,
Je n’arrive pas à faire fonctionner le modèle. Si je sélectionne squelettes/newsletters/selection_newsletter.html j’ai une page blanche en previsu et lors d’un test d’envoi j’ai « Une erreur est survenue lors de la génération de la newsletter. »
J’ai testé avec <selection_newsletter13> dans le texte de la newsletter. Il y a 2 articles (publiés) dans la sélection.
Est-ce que squelettes/newsletter_rwd.css.html est au bon endroit ? Je comprends pas comment cette css est appelée, mais bon, ça c’est moi.
Pas sûr de bien comprendre la question :)
Il faut insérer <selection_newsletter13> dans le texte de la newsletter et prévisualiser la newsletter de façon classique.
Et il faut ranger le squelette newsletter_rwd.css.html dans ton dossier css par ex et ajouter <INCLURE{fond=css/newsletter_rwd.css} /> dans les styles de ta newsletter.
Pour info, c’est désormais un plugin indépendant sur la forge SPIP : ►https://git.spip.net/spip-contrib-extensions/newsletters_modeles
Et c’est prêt à tester désormais : ►https://git.spip.net/spip-contrib-extensions/newsletters_modeles
Vous trouverez les infos et mode d’emploi dans le readme.
N’hésitez pas à tester et faire des retours sur la liste spip-dev ou dans les tickets git.
Et désormais dispo via SVP et ▻https://plugins.spip.net/newsletters_modeles.html
Encore plus prêt à être testé !
Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
►https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout
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)