Mise à jour de maintenance : sortie de SPIP 4.2.12
Cette nouvelle version apporte quelques améliorations et corrections de bugs.
#spip
Mise à jour de maintenance : sortie de SPIP 4.2.12
Cette nouvelle version apporte quelques améliorations et corrections de bugs.
#spip
Learn #JavaScript | web.dev
▻https://web.dev/learn/javascript
An in-depth course on the basics of JavaScript.
#documentation pour revoir les bases
F-Shape Pattern And How Users Read — Smashing Magazine
▻https://www.smashingmagazine.com/2024/04/f-shape-pattern-how-users-read
length is not the problem — lack of rhythm is.
– Users spend 80% of time viewing the left half of a page.
– They read horizontally, then skip to content below.
– Scanning is often inefficient as users miss large chunks of content and skip key details.
– Good formatting reduces the impact of F-scanning.
– Add heading and subheadings for structured scanning.
– Show keywords and key points early in your headings to improve scanning.
– For engagement, alternate sizes, spacing, patterns.
– For landing pages, alternate points of interest.
– Visually group small chunks of related content.
– Keep headers floating in large, complex data tables.
– Add useful visuals to give users points to anchor to.
– Horizontal attention leans left: favor top/left navigation
Musical #OSM
▻https://musical-osm.netlify.app
Une application web qui propose des visualisations audiovisuelles des dernières modifications apportées à #OpenStreetMap. Pour chaque modification OSM effectuée, une note de musique aléatoire est jouée.
#map
Fol Naïs | ni
Les gens de Ni envoient toujours du bois !
▻https://niiii.bandcamp.com/album/fol-na-s
#son
CSS :has() Interactive Guide
▻https://ishadeed.com/article/css-has-guide
On peut faire des trucs sympas avec :has()
, exemples :
With CSS :has(), we can replicate the logical operators like ”&&” and ”||“
/* OR */
.shelf:has(.bookPurple, .bookYellow) {
outline: dashed 2px deeppink;
}
/* AND */
.shelf:has(.bookPurple):has(.bookYellow) {
outline: dashed 2px deeppink;
}
In this example, I want to show an additional visual clue if the page has an alert.
.main:has(.alert) .header {
box-shadow:
inset 0 2px 0 0 red,
0 3px 10px 0 rgba(#000, 0.1);
background-color: #fff4f4;
}
Et plein d’autres trucs comme “Quantity queries with CSS :has” , “We can select an element if it’s followed by another.”, “For example, if the user selects “other”, we want to show input to let them fill in more info.” qui pourrait être utile à saisies de #SPIP et son afficher_si
, etc.
Alors j’aime beucoup :has
. Mais j’y vais tout de même mollo : on se retrouve rapidement avec des CSS avec une structure imbitable. Surtout si en plus on utilise des CSS imbriqués (puisque la logique du :has
contredit la stricte lecture descendante des CSS imbriqués).
Pour l’aspect rapidement illisible, ça vient aussi du fait qu’on utilise :has
pour faire des choses qu’on ne peut pas faire autrement. Et par exemple sur un truc que je fais en ce moment, je me retrouve à faire des choses comme ceci :
#timeline:not(:has(li:nth-child(6))) li:nth-child(1)::before { … }
:has
, j’essaie de rester plus simple.How to make older #Android devices work with #Letsencrypt ROOT certificate - Server support blog
▻https://server-support.co/apple/software/how-to-make-older-android-devices-work-with-letsencrypt-root-certific
The most impacting technical event of the Internet was the expiration of the Letsencrypt DST Root certificate which brought a lot of grief to technical support people and owners of declared obsolete devices. Here is the lists of compatible and incompatible devices provided by Letsencrypt.
There is a way to make some of incompatible devices work, by manually installing ISRG Root X1 Letsencrypt certificate.
Ref ▻https://letsencrypt.org/2023/07/10/cross-sign-expiration
If you use Android 7.0 or earlier, you may need to take action to ensure you can still access websites secured by Let’s Encrypt certificates. We recommend installing and using Firefox Mobile, which uses its own trust store instead of the Android OS trust store, and therefore trusts ISRG Root X1.
Et hop, mon vieux bouzin de récup accède de nouveau aux sites dont le SSL est porté par LE :)
WebAIM: Screen Reader User Survey 10 Results
▻https://webaim.org/projects/screenreadersurvey10
In December 2023 and January 2024, WebAIM surveyed preferences of #screen_reader users. We received 1539 valid responses. This was a follow-up to 9 previous surveys that were conducted between January 2009 and June 2021.
In order, the most problematic items are:
– CAPTCHA - images presenting text used to verify that you are a human user
– Interactive elements like menus, tabs, and dialogs do not behave as expected
– Links or buttons that do not make sense
– Screens or parts of screens that change unexpectedly
– Lack of keyboard accessibility
– Images with missing or improper descriptions (alt text)
– Complex or difficult forms
– Missing or improper headings
– Too many links or navigation items
– Complex data tables
– Inaccessible or missing search functionality
– Lack of “skip to main content” or “skip navigation” links
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 :)
Mise à jour de maintenance : sortie de SPIP 4.2.10
Cette nouvelle version apporte quelques améliorations et corrections de bugs.
#spip
How To #Center a Div
▻https://www.joshwcomeau.com/css/center-a-div
Before we wrap up, let’s summarize what we’ve learned by building a sort of decision tree, so that we can figure out when to use which method.
– If we want to horizontally center a single element without disturbing any of its siblings, we can use the Flow layout auto margin strategy.
If we have a piece of floating UI, like a modal or a banner, we can center it using Positioned layout and auto margins.
– If we want to center a stack of elements one on top of the other, we can use CSS Grid.
– If we want to center text, we can use text-align. This can be used in conjunction with any of the additional methods.
Finally, in most other situations, we can use Flexbox. It’s the most versatile method; it can be used to center one or multiple children, horizontally and/or vertically, whether they’re contained or overflowing.
#css
Scan My Email - Spam test de configuration domaine
►https://scanmy.email
Cet outil est destiné à vérifier la bonne configuration de votre domaine expéditeur email, et de votre serveur email (MTA). Son utilisation est gratuite, avec une utilisation raisonnable.
Alternative à ►https://www.mail-tester.com référencée par @biggrizzly ici ▻https://seenthis.net/messages/1041516#message1041561
Mise à jour de maintenance : sortie de SPIP 4.2.9
Cette nouvelle version apporte quelques améliorations et corrections de bugs.
#spip
Les meilleures applications libres et éthiques pour Android en 2024 - Alternatives numériques
▻https://alternatives-numeriques.fr/les-meilleures-applications-libres-et-ethiques-pour-android-
Cet article est une production collective. Suite à mon appel à propositions sur Mastodon, 45 internautes ont généreusement partagé leurs meilleures applications libres et éthiques. Merci à elles et eux.
Initialement, je pensais lister dans cet article les meilleures applications pour les smartphones en général, sous iOS (environ 15% de part de marché) et Android (environ 85% de part de marché)1. Sauf qu’absolument tou⋅te⋅s mes répondant⋅e⋅s m’ont proposé des applications Android. Sans doute le résultat d’un léger biais méthodologique, puisque l’appel à propositions a été envoyé sur Mastodon. Mea culpa pour ça. Mais en réalité, l’OS mobile d’Apple est tellement fermé qu’y proposer des applications libres (et souvent gratuites) est devenu largement impossible. Les libristes et alternuméristes se sont donc logiquement détourné des iPhones, ces prisons dorées de poche.
Dont acte. Cet article sera donc finalement un top des applications libres et éthiques… pour Android !
The Complex But Awesome CSS border-image Property
▻https://www.smashingmagazine.com/2024/01/css-border-image-property
Did you know border-image property was such a powerful — and flexible — CSS property? Despite the challenge it takes to understand the syntax, there are ways to keep the code clean and simple. Plus, there is often more than one “right” way to get the same result. It’s a complicated and robust CSS feature.
via la-grange.net
plein de trucs sympa, merci !
Very complex indeed ^^
Mais des trucs bien sympas cf :
Our first experiment is to add a gradient overlay above an existing background. This is a fairly common pattern to improve the legibility of text by increasing the contrast between the text color and the background color.
.overlay {
border-image: fill 0 linear-gradient(#0003,#000);
}
Our next example is a common design pattern where we want the background of an element to extend to the screen’s full width. We often refer to this as a “break-out” background because the element typically needs to break outside the constrained width of its parent container in order to stretch across the full screen.
.full-background {
border-image: conic-gradient(pink 0 0) fill 0//0 100vw;
}
Pour référence, c’est la personne qui partage ses tips sur ▻https://seenthis.net/messages/1001462
@seenthis, ça faisait 10 mois que je n’avais pas fait le ménage dans les comptes à spam, voici la liste de ceux supprimés aujourd’hui :
pinkyar23 elsneraustralias coreexponent elitefinancials atomstack bridge_philanthropic_consulting eden_morgan elsner_store jayan12 gayathris fashionclubbeauty tirupatihelps gsspandana thebeautynihi harlothub00 newdigitalinf111 gloriamorris pinkiyr87 lasya robin22 dragon_support orian afireindustries blogswebsite6 imageredefined timehousestore ojolit embroidery_digitizing turkey_visa fmoviess simco_catering valuecareclinic movies fixice jackson_smith hapini tomkel scotbeauty scotbeauty7 swift_attire ritesh_patil eric38 sisca_lisangi tanish7 no2bounce robert_klen meraqui_apartments manik52 firmsfinder cherryteam gneesteel monica78 wesley jerome18 freshliance wellaliments eye_site_vision_center smithloe kevinb38 john_david1 detheauocai rahul_sudeep leniurlaub devsort theglobalhues ricepuritytestscore olverolson eguidezhan devsort wikiclic tobeanybody quentinlondres anna06 beststockbroker nationhive williamcron marc34
Merci pour le grand ménage :-)
@odilon je n’ai aucun mérite, sauf celui d’avoir pris du temps pour le faire :)
Clavicule « Full of Joy » | A Tant Rêver Du Roi Records
Bouge la tête ! Tombé là dessus dernièrement en écoutant l’incontournable Fréquence Mutine de Brest’même.
▻https://atantreverduroi.bandcamp.com/album/clavicule-full-of-joy
#son
Mise à jour de maintenance et sécurité : sortie de SPIP 4.2.8, SPIP 4.1.15
Ces nouvelles versions corrigent certains bugs et une petite faille de sécurité de type XSS. Un grand merci à Daniel Barros pour le signalement.
▻https://blog.spip.net/888 & ▻https://blog.spip.net/889
#spip
samdark/php-fpm_tuner: A script to tune #PHP-FPM
▻https://github.com/samdark/php-fpm_tuner
Simple script that helps tuning PHP-FPM.
php php-fpm-tuner.php
pm.max_children = 11
start_servers = 3
min_spare_servers = 3
max_spare_servers = 8
The script calculates pm #max_children based on available free memory and memory used for each worker (it is either determined from currently running workers or php.ini memory limit).#start_servers #min_spare_servers, and #max_spare_servers are taking both memory limits and CPU cores available into account.
En lien avec ►https://seenthis.net/messages/955121
Mise à jour de maintenance et sécurité : sortie de SPIP 4.2.7, SPIP 4.1.13
Ces nouvelles versions corrigent certains bugs et une petite faille de sécurité de type XSS.
Feelantropicoco | Akersborg
« catchy avant-garde hardcore », un peu trop catchy mais bien efficace :)
▻https://akersborg.bandcamp.com/album/feelantropicoco
#son
Visual Studio Code - is there a #Compare feature like that plugin for Notepad ++? - Stack Overflow
▻https://stackoverflow.com/questions/30139597/visual-studio-code-is-there-a-compare-feature-like-that-plugin-for-no
Here is my favorite way, which I think is a little less tedious than the “Select for Compare, then Compare With...” steps.
1) Open the starting file
2) Open the Command Palette (F1 or Ctrl + Shift + P)
3) Type Compare Active File and select Compare Active File With...
4) Select the new file to compare with. You can either select a recent file from the dropdown list, or click any file in the Explorer panel.
Note: This works with any arbitrary files, even ones that are not in the project dir. You can even just create 2 new Untitled files and copy/paste text in there too.
An Interactive Guide to #CSS #Grid
▻https://www.joshwcomeau.com/css/interactive-guide-to-grid
In this tutorial, I’m going to share the biggest lightbulb moments I’ve had in my own journey with CSS Grid. You’ll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it.
To break things down even further:
– justify — deals with columns.
– align — deals with rows.
– content — deals with the grid structure.
– items — deals with the DOM nodes within the grid structure.