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-edgeUtiliser 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.comUne 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/ttf2woff2Un 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.htmlLe 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.htmlCSS : 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#t2Un 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/syncopeSuper 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-outlineUne 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-highlighterFind 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.jsYet 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-firebugThe 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.guideWe 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/imageminUtilitaire 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&algoun 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=frpour contribuer c’est par ici :
►https://github.com/Asqatasun/Contrast-Finderpour 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.htmlSi 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-lifeOk, ç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_InspectorThe 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/hPqamIl 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.htmmandrillapp é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-41Sympa 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)
-
