Foundations — Material Design 3
▻https://m3.material.io/foundations
▻https://lh3.googleusercontent.com/C9KqgxN2aTltNrGEwzmREBeXI2SG0nBXV9MV5v65ewqgsPhpjUiFPW7FX-lq5
Foundations inform the basis of any great user interface, from accessibility standards to essential patterns for layout and interaction.
Zoom, zoom, and zoom | OddBird
▻https://www.oddbird.net/2024/07/09/zoomies
I’m working on an article about fluid typography, and relative units. But instead, I fell down this rabbit hole – or a cleverly-disguised trap? – trying to understand ‘zoom’ in the browser (not Zoom™️ the software). Since I couldn’t find any up-to-date articles on the subject, I thought I should write one.
#CSS #Grid #Generator
▻https://cssgridgenerator.io
CSS grid generator is a tool that helps developers create custom CSS grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size.
Accessibility at Penn State | Beware Light Weight Fonts
▻https://accessibility.psu.edu/2021/10/beware-light-weight-fonts
As with cursive, extra bold, condensed and script fonts, light fonts may be best suited for headlines or short passages. When a light weight font is used for long passages in body text, the lightness of the characters may be difficult for many readers to clearly see because the ultra thin strokes can cause the letters to blend in with the background (Mandy Michael 2019).
Nouveautés dans les éléments HTML natifs | Tout ce qui bouge
▻https://toutcequibouge.net/blog/2024/04/nouveautes-dans-les-elements-html-natifs
Si vous consultez la liste des éléments, à moins d’être expert vous pouvez être à peu près sûr d’en découvrir un certain nombre. (les plus intrigants pour moi ? <ruby> et kbd).
Si on étend la liste à tous les éléments proposés pour ajout à la norme HTML, elle sera bien plus longue. Et cela soulève des débat passionnants : quel pattern mérite d’être un élément à part entière, ou juste un attribut d’un élément existant, ou juste un Composant Web fourni par une bibliothèque ?
Plus fondamentalement la question : quel sont les mots de base du langage qu’est le web ? Est-ce qu’un toaster est suffisamment commun et standardisé pour mériter un élément ? et un bloc de spoiler ? Comme tout langage, il faut partir des usages réels ; le groupe de travail OpenUI a d’ailleurs fait un travail impressionnant de recensement en ce sens. Mais il faut aussi ajouter une dose de prescription : y a-t-il vraiment besoin d’ajouter une mauvaise idée telle qu’un accordéon exclusif sous prétexte qu’on peut trouver quelques occurrences ? <spoiler> Pour moi, non </spoiler>.
Bref, voici un tour d’horizon, dans la lignée de mon précédent article orienté CSS.
Oh là là, on peut attaquer le style des bullets et des chiffres des listes avec le pseudo-élément ::marker !
▻https://www.youtube.com/watch?v=svhnI9sKUDI
Bon support (88% selon caniuse), et ça devrait très bien se dégrader.
Oh là là, c’est super-trop-cool parce que c’est super-trop simple : ici des « metaballs » qui fusionnent et se séparent, façon amibes, directement en CSS :
▻https://codepen.io/mirajm212/pen/Iivdj
Et c’est vraiment très con : les éléments sont rendus flous par un filtre CSS, ce qui provoque la fusion des formes quand elles se rapprochent, et l’élément englobant rend tout extrêmement net avec un filtre de contraste.
Ah purée il faut que je trouve une interface dans laquelle utiliser ce genre de truc, c’est trop cool.
T’as vu le code, comme il est élégant !
#web_design
Oui, c’est tout simple. Et le fait que les animations soient gérées en CSS, c’est toujours chic :-) (on peut de plus en plus faire des choses très animées et sympa, optimisées du feu de dieu, sans utiliser Javascript, perso j’adore ça).
En revanche, la limite c’est que c’est conçu pour un fond uni, parce que l’étape de renforcement des contrastes se fait avec un fond. Installer ça par-dessus un autre élément de page (par exemple une image), c’est pas trop fait pour.
Pour l’instant, la seule façon de placer ça par dessus un autre élément, ce serait de jouer avec les mix-blend-mode (et donc leurs limites).
#SVG Generators — Smashing Magazine
▻https://www.smashingmagazine.com/2021/03/svg-generators
let’s look at SVG generators — for everything from shapes and backgrounds to SVG path visualizers and SVG → JSX generators.
Pas mal de ressources : backgrounds, code snippets, compression, cropping tools, data visualization, doodle patterns, editors, favicon, filters color matrix mixer, geometric shapes, icon transitions, JPG/PNG → SVG, path visualizers, polygons, repeating patterns, squircicles, section dividers, SVG assets manager, SVG → JSX, SVGs → SVG sprites, text warping, waves, woodworking patterns
Dans les recoins de la double page (Paged.js à la maison, saison 2) | Polylogue
►https://polylogue.org/apres-la-page-la-double-page
XML est très intéressant, mais s’articule avec des outils d’écriture (traitement de texte, notamment). Or on ne peut faire abstraction de l’aspiration à sortir des traitements de texte, de la multiplication d’outils alternatifs. Inspiré par le html et aussi par les langages de balisage léger, comme Markdown (qui permet de constituer une structure simple de html standard sans avoir à subir visuellement le code, et a été créé pour faciliter l’écriture, ce qu’on appelle le flow, d’un blogueur), je me suis demandé si on ne pourrait pas utiliser le flux html + css pour faire le livre, mais également, pour proposer des modalités d’écriture et d’inclusion de l’auteur et du designer dans un processus éditorial.
Il ne s’agit pas d’automatiser la mise en page, c’est un point sur lequel j’insiste, car les flux html + css ont tendance à faire fantasmer certains éditeurs qui se disent qu’ils vont pouvoir automatiser d’avantage, voire se passer de compositeur. À eux je souhaite bonne chance, surtout s’ils sont un minimum exigeants sur la qualité de composition. Non, c’est une autre manière de composer, tout comme markdown offre une autre manière d’écrire que Word, l’idée restant de fournir au compositeur une palette suffisamment complète pour lui permettre de bien travailler. Les gens, leurs savoir-faire ont toute leur place, et il s’agit plutôt de leur proposer une palette alternative suffisamment complète pour qu’ils et elles puissent s’exprimer.
#intégration #web #livre #print #CSS #HTML #composition #édition #PAO #paged.js (je me souviens jamais des tags que je mets pour la PAO en mode web CSS, ya plusieurs seens là dessus déjà)
Je suis comme toi : #Web_design ?
J’avais bien mis tous les bons, manquait juste #impression :)
Cf :
►https://seenthis.net/messages/742687
►https://seenthis.net/messages/734575
Troll hunter - Le Monolecte
▻https://blog.monolecte.fr/2021/02/14/troll-hunter
▻https://blog.monolecte.fr/wp-content/uploads/2021/02/eliandstevePT.webp
Sur internet, il n’y a personne et en même temps, il y a tout le monde. Tu peux éclater la gueule de quelqu’un à grands coups d’insultes ou de rhétorique tordue, tu peux harceler ou invisibiliser, tu peux démolir systématiquement une personne, son œuvre, sa pensée, sa vie, comme ça, bien tranquille derrière ton clavier, sans aucune espèce de conscience, sans ne jamais être exposé aux conséquences. Tu peux décharger ta frustration, ta colère, ta haine, ton trop-plein de merditude, sans l’impact sourd du gnon dans la bidoche, sans les cris qui pètent le tympan, sans le sang et les ratiches qui te sautent à la gueule. Tu peux boxer sans te niquer les jointures et sans risquer de te faire éclater la tronche ou réajuster le portrait.
Sauf que ce n’est pas aussi simple que ça.
Tiens, j’ai essayé un format .webp, ça affiche moyen…
@seenthis, on peut rendre le format d’#image #webp affichable ici ? Je teste pour la première fois. Les gens du #web_design, des avis sur ce format ?
De mon côté, je travaille énormément avec le format WebP, mais uniquement comme alternative (automatisée) au Jpeg ou au PNG. Je ne fabrique jamais moi-même une image WebP depuis un logiciel sur ma machine, et je n’installe jamais une telle image WebP dans le CMS ou sur un site Web.
En revanche, je configure mon CMS (en l’occurence SPIP avec mon plugin image_responsive) pour fabriquer automatiquement la version WebP à partir de la version Jpeg, et créer le code HTML qui permet de présenter les deux versions au navigateur. De cette façon les navigateurs compatibles chargent la version WebP (plus légère) et sinon c’est la JPEG qui est utilisée.
Selon CanIuse, 92% des visiteurs seraient capables d’afficher Webp. C’est bien, mais c’est pas parfait. Mais la principale difficulté ici, c’est que si ton navigateur n’affiche pas WebP, et que ton code ne propose pas la version Jpeg, alors rien ne s’affiche (alors que dans les principes du HTML, on s’arrange pour que quelque chose s’affiche, même si c’est pas aussi joli qu’avec un navigateur dernier cri). Donc il vaut mieux laisser ton CMS fabriquer et diffuser l’image dans les deux formats, pour être certaine que ça s’affiche partout.
@monolecte on a un ticket à ce sujet par ici ►https://github.com/seenthis/seenthis_squelettes/issues/13 et SPIP 3.3 prendra en charge le webp nativement cf ▻https://git.spip.net/spip/spip/commit/57914b92f9ca756c13bfe488a0e59eb2de0e6884
Mais il faudra attendre qu’on travaille à la migration de seenthis en 3.3 :)
Pour revenir au vrai sujet de ce seen, j’ai regardé hier soir les 5 épisodes de ce documentaire :
▻https://www.france.tv/documentaires/societe/trolls/2156419-episode-1.html
via @val_k
Interessante cette série @james je viens juste de la visionner.
L’omniprésence masculine me frappe en premier, le fait que leur cible privilégié soit les féministe. Dès le début il y a foule de paradoxe :
– le fait qu’ils prétendent troller pour donner une lecon aux autres, faire de la pédagogie
– le fait de dire qu’ils ont une éthique du troll et que leur troll est sérieux
– le fait de dire qu’ils sont là uniquement pour rigolé mais ont besoin de justice tout en dénonçant les justiciers et réclamer la justice quand leur troll leur retombe dessus (surtout sur la gosse et l’épouse du troll en fait)
– le fait de dénoncé les gens qui se prennent pour ce qu’ils ne sont pas - tout en se prenant pour sèneque dans son jardin...
– le besoin de se divertir en mettant une ambiance de merde et rendre les autres fous
– le fait de dire qu’ils ne vendent rien tout en vendant des videos, bouquins, expos, œuvres et gagnant de la notoriété ;
– les exemple de personnes à troller énumérés ; mon gosse, ma femme, mon lapin et « je pisserai exprès sur moi pour toller les infirmières en ephad » ...
à un moment il est question d’absence d’empathie - les trolls se revendique de ne pas en avoir et disent pouvoir etre un bon prof tout en ayant zero empathie...
– le fait d’en vouloir à ceux qui ont de la notoriété en utilisant le troll, tout en utilisant le troll sois même ...
– le fait de détruire la carrière de femmes journalistes, d’artistes pour le lol
et tout ca on ne peu rien en dire car ces paradoxes sont du troll en soi, tout ce qui est dit par ces trolls peut etre dénié en disant que c’était du troll.
La seul chose qui reste c’est le masculinisme, le surplomb, les dominants qui trompe l’ennuie en utilisant les autres et l’absence d’empathie.
Tout est vanité...
J’ai pas donné mon avis, mais ça m’a sidéré...
Things You Can Do With #CSS Today — Smashing Magazine
▻https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today
The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. In this article, we’ll look into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties.
Inclusively Hiding & Styling Checkboxes and Radio Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
▻https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons
Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image — SVG, of course, being the more flexible, powerful, and accessible replacement. But an SVG image is, at the end of the day, just an image, so while it can visually replace a checkbox, it doesn’t really substitute for it — the user still needs a checkbox to interact with. So, when we attempt to hide the checkbox we want to style, we need to make sure that the checkbox remains accessible and interactive.
Priority Guides : A Content-First Alternative to Wireframes – A List Apart
►https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
Une manière de commencer l’ergonomie uniquement sur une liste de contenus ordonnés, hiérarchisés. On se focalise sur la hiérarchie du contenu, sans préjuger du placement (je ne parle même pas des styles mais bien même pas du placement, layout, maquettes filaires). En plus c’est directement mobile-first, puisque juste en une longue colonne.
Du coup, en allant même plus loin que ce que montre l’article, cela peut se faire uniquement en texte amélioré (markdown par ex), et donc dans un pad commun à plusieurs. Cela permet de valider avec les propriétaires du site/clients le « qu’est-ce qu’on décide de mettre dans chaque page », sans du tout passer des heures à discuter de l’affichage.
The best Icon Tool - Orion Icon Library
►https://orioniconlibrary.com
Read it when someone looks down at your Web site, saying “you should pay a designer”:
“A website’s materials aren’t #HTML tags, #CSS, or #JavaScript code. Rather, they are its content and the context in which it’s consumed”
And
“By default, a website that uses HTML as intended and has no custom styling will be readable on all screens and devices. Only the act of design can make the content less readable” (for those who keep repeating “responsive” without understanding it)
bitmanic/font-feature-settings : font-feature-settings() is a Sass mixin for enabling OpenType features via CSS.
▻https://github.com/bitmanic/font-feature-settings
(je le met ici pour conserver cette liste des font-feature-setting bien complète #typo #web_design)
Ces features, ce sont les features Opentype, que tu trouvera dans toutes les bonnes docs Opentype. Mais effectivement, la petite liste est pratique.
En revanche, attention : les créateurs de police n’ont rigoureusement aucune obligation d’intégrer telle ou telle feature dans leur police. Du coup, ce n’est pas parce que tu actives une feature que ça va faire quoi que ce soit : il faut aussi (surtout ?) qu’elle soit présente dans la police.
Par exemple, si tu décides d’activer « onum » (chiffres oldstyle), si la police n’a pas cette feature, ça ne fera rigoureusement rien. La difficulté, c’est donc qu’il faut que tu saches, pour la police que tu es en train d’utiliser, quels sont les features dont elle dispose (et encore : tu ne sais pas forcément ce que fait cette feature spécifique – par exemple si tu actives les ligatures spécifiques « dlig », si tu n’as pas la doc de la police, tu risques de ne même pas savoir quelles sont les ligatures qui ont été implémentées pour cette police-là).
Readability: the Optimal Line Length
▻https://baymard.com/blog/line-length-readability
Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility.
The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. So what’s the downsides of violating this range?
Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text.
Too narrow – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).
It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).
In order to avoid the drawbacks of too long and too short lines, but still energize your readers and keep them engaged, we suggest keeping your text within the range of 50-75 characters per line.
Grid Garden - un jeu pour apprendre les #grid #CSS
▻http://cssgridgarden.com
The New Wave of Indian Type - Library - Google Design
▻https://design.google/library/new-wave-indian-type-design
As mobile access grows and more people around the world start using the internet—a billion people are expected to come online over the next few years in emerging markets alone—it’s also necessary to elevate the quality and range of digital typefaces available in different writing systems. This challenge is especially striking in India, a country that recognizes 23 official languages, but counted almost 1600 (including dialects) in their last census. Some of these languages and their scripts have descended from ancient Brahmi, others are based in Arabic, while the ongoing use of English, a language that’s reach and influence has grown considerably since India’s independence from Britain in 1947, means that Latin letters are also a common sight.
(…)
Keeping pace with the subcontinent’s linguistic diversity is challenging enough in print, but the relatively small number of digital fonts available for Indic languages reveals a striking disparity. Even the most widely used Indian script, Devanagari, has far fewer typographic options compared to the superabundance of Latin fonts. Some scripts like Bengali, Tamil, Urdu, and Tibetan have even fewer fonts available. But the balance is beginning to shift as a cohort of Indian type designers develop new digital fonts, and the movement is still growing in part because many of these designers release their designs with open source licenses. The code is then readily available for others to experiment and develop their own contributions, improving the quality and variety of typography across India’s many writing systems.
30 Seconds of #CSS
►https://atomiks.github.io/30-seconds-of-css
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
Your Interactive Makes Me Sick - Features - Source : An OpenNews project
▻https://source.opennews.org/articles/motion-sick
Now picture this: A journalist has published a piece of work you’re interested in. Ooh, the teaser sounds good! You click over to the page and WHOOSH some sort of video moves unbidden behind the header. You scroll a bit and WHOA two different pieces of the page move with your scrolling. A graph animates! A wolf howls in the distance! You’re starting to get a bit overwhelmed, and maybe a touch nauseated. I don’t know what you’d do at this point, but I’m gonna close the page.
Modern CSS Explained For Dinosaurs – Actualize – Medium
▻https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
In order to deal with the inherent complexity of #CSS, all sorts of different best practices have been established. The problem is that there isn’t any strong consensus on which best practices are in fact the best, and many of them seem to completely contradict each other. If you’re trying to learn CSS for the first time, this can be disorienting to say the least.
The goal of this article is to provide a historical context of how CSS approaches and tooling have evolved to what they are today in #2018. By understanding this history, it will be easier to understand each approach and how to use them to your benefit. Let’s get started!
Bah je vois pas pourquoi, on vois justement les nettes améliorations au fil du temps (et de plus en plus rapidement tant mieux), comme d’ailleurs pour n’importe quel autre langage où de nouveaux concepts apparaissent (ya qu’à voir JS, le concept de promise, etc)
Depuis 2009, jamais eu le temps de me former, donc j’en suis au stade : voilà c’est complexe.
Mets toi au moins à flexbox qui est vraiment reconnu partout. C’est le minimum. Mais grid est génial et ce sera bientôt ok aussi (à chaque fois les nouveaux trucs sont bien reconnus sur tous les navigateurs récents, mais ce qu’il faut attendre c’est que les vieux navigateurs descendent sous 1%).
yep, je ferais cela là prochaines fois que j’ai l’occasion de me pencher sur ce genre de pb.
Ceci dit, même si les flexbox et grid permettent des trucs super, ça ajoute clairement un cran d’abstration qui rend l’abord des css en général bien plus ardu comme le dit @mariejulien ▻https://twitter.com/mariejulien/status/962978499819655169
Un débat classique que je crois avoir déjà vu « récemment » dans Spip… Le truc relou, me semble-t-il, c’est quand c’est utilisé à mauvais escient pour faire des choses très simples pour lesquelles c’est absolument inutile ; et vu que ce n’est pas un code très lisible, dans ce cas ça ajoute de la complexité pour rien du tout…
Does CSS Grid Replace Flexbox? | CSS-Tricks
▻https://css-tricks.com/css-grid-replace-flexbox
No. Well. Mostly No.
#Grid is much newer than #Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.
To put a point on it:
Grid can do things Flexbox can’t do.
Flexbox can do things Grid can’t do.
They can work together: a grid item can be a flexbox container. A flex item can be a grid container.
Commoditisation of UI – Hacker Noon
▻https://hackernoon.com/commoditisation-of-ui-36a5abbeb3c0
First, unique and good design alone does not lead to a successful product. In the post-iPhone world good #UI is not a differentiation point, but a cheap commodity, a de-facto standard. In the early days of the new era, there were innovative products that managed to beat incumbents just by having a great design (e.g. Slack had the same core tech as Hipchat, but 10x better design). Good design is a new baseline now (even Android has good design these days).