#webdev

«Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
▻https://css-tricks.com/next-gen-css-container

« […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.

Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.

No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »

#webdev #layout

En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.

Si vous avez des exemples et des outils à ajouter, je suis preneur.

______________________________________

LES EXEMPLES

▻http://www.framescollection.com/tunnelrats.html
Peu de technique, mais une narration forte illustrée et rythmée graphiquement

▻http://www.framescollection.com/manly.html
essentiellement graphique mais peu adaptable sur mobile

▻https://projects.lukehaas.me/scrollify/examples/apple
principalement des animations visuelles et peu de texte

▻https://projects.lukehaas.me/scrollify/examples/layered-scrolling
joue principalement sur les fonds (image ou vidéos) et peu de texte

►http://computer-grrrls.gaite-lyrique.net
joue principalement sur le rythme des blocs de contenu

▻https://brest1937.kubweb.media/episode/heritage
alterne animations et contenus textes/vidéos

▻https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
très simple, repose sur l’image

▻https://www.liberation.fr/apps/2019/02/paris-populaire
moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus

►https://fabre.montpellier3m.fr/Correspondance d’@arno
pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)

▻https://www.bloomberg.com/graphics/2015-auto-sales
haut niveau, avec animation de #SVG et tout

▻https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
idem, gros niveau, The Guardian quoi

►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)

______________________________________

LES OUTILS

How to implement #scrollytelling with six different libraries partagé par @fil
►https://pudding.cool/process/how-to-implement-scrollytelling

Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
►https://github.com/russellgoldenberg/scrollama

Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
▻https://projects.lukehaas.me/scrollify

ScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
▻https://sjwilliams.github.io/scrollstory

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
►https://maxwellito.github.io/vivus

graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
▻https://github.com/1wheel/graph-scroll

enter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
▻https://github.com/russellgoldenberg/enter-view

Projects | Knight Lab partagé par @klaus
▻https://seenthis.net/messages/792645

revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
►https://revealjs.com

______________________________________
TAGS SUR SEENTHIS

#art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms

#webdev #spip_recette

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

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_

#windows #webdev #microsoft_edge

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

#vieprivée #webdev

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

#convertisseur #font #TTF #Woff2 #webdev #outil #nodeJS

#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

https://stk.cousumain.info/modele_newsletter_zcm.jpg

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.

#spip_recette #webdev #integrationweb

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

#CSS #grid #flexbox #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...

#outil #webdev #données #générateur #generetedata

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.

https://framapic.org/KNGrfxOTC7PQ/WXRLI0GzU95y.jpg

#typographie #webdev

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.

#accessibilité #webdev

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).

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

#webdev #css

Cache-cache #css – La vie en #ffoodd
▻http://www.ffoodd.fr/cache-cache-css
#webdev #masquer #hidden #focus #a11y

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.

#webdev #images #lazy_load #performance

Saying Goodbye to Firebug ★ Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug

https://hacks.mozilla.org/files/2017/10/firebug-large.png

The story of Firefox and Firebug is synonymous with the rise of the web.

So long Firebug, and thanx for all the fish :)

#mozilla #firebug #webdev

Essential Image Optimization
►https://images.guide

https://images.guide/images/logo-banner.jpg

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.

#web #webdev #best_practice

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é

#accessibilité #RGAA #outil #webdev #contraste

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

http://korben.info/wp-content/uploads/2017/04/capture-decran-2017-04-14-14-37-03-650x715.jpg

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 (...)

@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

#informatique #webdev

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)

#webdev

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)

#webdev

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

#newsletter #webdev