#html

#bento/slides showcase — bento/slides
▻https://bento.page/slides

— Permalink

#presentation #powerpoint #slides #html

The end of #responsive #images - Piccalilli
▻https://piccalil.li/blog/the-end-of-responsive-images

Responsive images aren’t a problem. picture isn’t a problem; srcset isn’t even the problem.

We both know what the problem is...The sizes dilemma

Fully automatic responsive images. Supply the browser with a list of candidates using srcset, bolt on sizes="auto", and let the browser do the rest.

the string “auto” at the start of a sizes attribute, any browser with support for it will say “figure it out myself; got it,” ditch the rest of the sizes attribute, and move on — browsers without support will throw the meaningless-to-them auto value out and continue on to the rest of attribute as usual. That means you can start using this right now, at absolutely zero cost and with no more overhead than typing auto, at the start of a sizes attribute

An image likely to appear in the user’s viewport when a page first loads is a situation where you wouldn’t want to use loading="lazy" (again, sizes="auto" will only work with lazyloaded images), but these images are the exceptions, not the default.

Every other image — all those images scattered throughout columns and grids and sidebars and “cards” and smatterings of little round user avatars that the web is really made out of? loading="lazy" sizes="auto". Job done. Congratulations.

#css

The Basics of #Anchor_Positioning
▻https://ishadeed.com/article/anchor-positioning

In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier.

▻https://ishadeed.com/_astro/anchor-02.Dm6tIZ3X_NKU2n.webp

#css

A Few Things About the Anchor Element’s #href You Might Not Have Known | CSS-Tricks
▻https://css-tricks.com/a-few-things-about-the-anchor-elements-href-you-might-not-have-known

<a href="#"> <!-- Scrolls to the top of a document -->
<a href=""> <!-- Reloads the current page, preserving the search string but removing the hash string (if present). -->
<a href="."> <!-- Reloads the current page, removing both the search and hash strings -->
<a href="?"> <!-- Reloads the current page, removing both the search and hash strings (keeps `?`) -->
<a href="data:"> <!-- Link to data URLs, like text fragments -->
<a href="video.mp4#t=10,20">  <!-- Links to specific parts of a media file -->

#html

Getting Creative With #Images in Long-Form #Content | CSS-Tricks
►https://css-tricks.com/getting-creative-with-images-in-long-form-content

- Text width or full-bleed
– Using a modular grid for multiple images
– #CSS Shapes and expressive possibilities
– Integrating captions into a design
– The power of whitespace

HTML Is Actually a Programming Language. Fight Me | WIRED
▻https://www.wired.com/story/html-is-actually-a-programming-language-fight-me

https://media.wired.com/photos/6776e50ecc4784f2a400d766/191:100/w_1280,c_limit/MR+008%20HTML.jpg

In fact, HTML is the most significant computing language ever developed. Underestimate it at your peril.

Image of html knitting the globe on an old school computer
ILLUSTRATION: SAMUEL TOMSON

Are you a coder? Please take our new survey (it’s short and fun) about how you use AI at work.

HTML is deceptive. It looks easy. And easy HTML is easy. With a few tags you can write your name on a webpage, make it bigger or smaller, add “is awesome” in bold or italics, and even—for those of us who came of age in better times—make it blink or scroll across the screen.

Because HTML looks easy and lacks features like formal conditional logic and Turing-completeness, it’s often dismissed as not a programming language. “That’s not real code; it’s just markup” is a common refrain. Now, I’m no stranger to the austere beauty of the command line, from automating scripts to training machine-learning models. But underestimating HTML is a mistake.

HTML is the most significant computing language, programming or otherwise, ever developed. Every other programming language has to grapple with how HTML has redefined computing over the past 30-plus years. So many “pure” programming languages automate the production of more and more HTML.

When haters deny HTML’s status as a programming language, they’re showing they don’t understand what a language really is. Language is not instructing an interlocutor what to do in a way that leaves no room for other interpretations; it is better and richer than that. Like human language, HTML is conversational. It is remarkably adept at adapting to context. It can take a different shape on any machine, from a desktop browser or an e-reader screen to a mobile app or a screen reader for the blind (so long as that device is built to present hypertext).

HTML is somehow simultaneously paper and the printing press for the electronic age. It’s both how we write and what we read. It’s the most democratic computer language and the most global. It’s the medium we use to connect with each other and publish to the world. It makes perfect sense that it was developed to serve as a library—an archive, a directory, a set of connections—for all digital knowledge.

Like many readers my age, I encountered HTML in 1994, during those heady days when Netscape’s browser brought the web to much more of the world. In my case, the internet was available on just a few machines at my high school—I didn’t have a computer at home, let alone dial-up—but I quickly made myself an amateur expert in navigating the strange new space that Tim Berners-Lee and his colleagues had brought into being.

An older friend showed me how he built his own homepage, complete with animated “under construction” GIFs, an interactive Magic 8-Ball, and a handful of bandwidth-devouring photos. Since I didn’t have an email address, he set up a text entry field on his site where I could send him messages, with stern instructions that the textbox was “only for TIM.” He’d post his own responses directly on the website, so I (and theoretically anyone) could read them when I next got access to a machine. This is what passed for information security for two low-risk targets in those days.

The idea that you could build something fun for your friends, but potentially anyone in the world could discover it, was intoxicating. So was the language itself. Most raw HTML then was easy for humans, even newcomers, to understand. You didn’t need a primer in formal logic to grasp that most tags needed to be opened and closed (like parentheses in a math statement or ordinary sentence) to function as intended. And you didn’t need to be a mischief-minded teenager to see the possibilities in what happened when HTML “broke.”

To learn any programming language is to learn how to debug it. But a malformed command in Python usually returns an error message that keeps the code from running, not something that fails brilliantly yet monstrously, outpacing its creators’ intentions. With HTML, we are all Doctor Frankenstein.

One of my favorite websites of all time is the Embroidery Troubleshooting Guide. These days it’s available only via the Internet Archive, unless (like me) you have a local copy. At the top, it looks like a typical, if somewhat old-fashioned, small-business website. But when you glance down, you immediately notice something strange about it. The text, all center-aligned in alternating red and blue Arial, gradually gets bigger and bigger, with phrases forced to wrap lines or reach the edge mid-word, filling up the screen like Alice trying to squeeze through smaller and smaller doors in Wonderland.

When you view the source code (have any other programs made it so easy to view source like a website?), you’ll quickly discover what’s gone wrong. Each line of centered text begins with <h2> or <h3> header tags that never close. Each header tag—which only establishes a relative size, not an absolute one, part of the semantic richness of the web’s flexible grammar—builds on the last, creating progressively larger nesting dolls. The tag designed for defining textual hierarchy runs amok, creating chaos. The fact that the words themselves are about how and why threads can break makes it poetry.

On its own, the Embroidery Troubleshooting Guide would be a clever enough piece of found conceptual art. But by viewing the source, downloading the file, and replacing the instructions for troubleshooting common sewing problems with any text you like, you can make that artwork your own. I like to put in my favorite poetry, decontextualizing it and forcing myself to read it with new eyes.

“Broken” sites like these upend the great achievement of semantic HTML. As it developed, semantic HTML increasingly separated structure from presentation: Instead of <i> tags, which strictly specify that a text be presented in italics, we use <em> tags to identify emphasis (or <cite> tags for titles of books or movies, etc.). These elements can then be presented as italics on a computer screen but be read with a different intonation by a screen reader. The Embroidery Troubleshooting Guide hijacks a semantic tag and makes it present something unexpected. The same building blocks that allow a single website to be displayed responsively on a tiny phone or enormous television screen can make a website fundamentally undisplayable. This is delightful.

I appreciate the utility of content management systems and complex sites that generate HTML dynamically, but there’s a joy in building sites out of simple HTML files you can edit by hand. I still edit my own website this way, tidying it up so I can see every tag, section, and paragraph break. I even love editing my own ebooks, turning PDFs into nicely formatted HTML-based EPUB files that never get published to anyone: my own private library of self-contained websites. During the height of the pandemic, editing these files and their style sheets by hand was a balm.

Ultimately, even as HTML has become the province of professionals, it cannot be gatekept. This is what makes so many programmers so anxious about the web, and sometimes pathetically desperate to maintain the all-too-real walls they’ve erected between software engineers and web developers. But people who write HTML know that hierarchies were made to be blown up. All it takes is a tag that doesn’t close where you’d expect it to.

What other programmers might say dismissively is something HTML lovers embrace: Anyone can do it. Whether we’re using complex frameworks or very simple tools, HTML’s promise is that we can build, make, code, and do anything we want.

#HTML #Proud_to_be_a_web_developper

Free #HTML #Templates Download - HTML Codex
▻https://htmlcodex.com/template

167+ Free HTML Website Templates. All of our templates are built using the latest web technologies including HTML5, CSS3, and Bootstrap framework

Ça peut toujours servir...

#Important_meta_tags for seo with example
▻https://itcodestuff.com/important-meta-tags-for-seo-with-example

Hello Guys, Important #meta_tags for SEO (Search Engine Optimization) is an essential part of any website’s success. One of the fundamental aspects of SEO ... Read more

#HTML #Bootstrap #meta_tags_for_seo

#HTML Tutorial : A Beginner’s Guide to HTML
▻https://itcodestuff.com/html-tutorial-a-beginners-guide-to-html

Hello Guys, HTML (Hypertext Markup Language) is the foundation of the web. It is a markup language used to structure content on the internet. In ... Read more

#HTML_tags #HTML_Tutorial

Responsive #HTML #Email_Template with #Table_List
▻https://itcodestuff.com/responsive-html-email-template-with-table-list

Hello Guys, Email marketing is a powerful tool for businesses to reach their audience effectively. However, designing and coding responsive HTML email templates can be ... Read more

The untold history of web development:
▻https://functional.cafe/@juliobiason/111613996060167180

The untold history of web development:

1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites

(by @fireship_dev on Birdsite)

Get the bookmarklet that will check your HTML against the #ARIA in HTML specification, it will tell you whether you are using ARIA as intended

▻https://thepaciellogroup.github.io/WAI-ARIA-Usage/WAI-ARIA_usage.html

Je ne sais pas ce que ça vaut...

Via ▻https://mastodon.social/@SteveFaulkner/110339033446419542

#HTML #WebDev #accessibilité

Lighthouse overview - Chrome Developers
▻https://developer.chrome.com/docs/lighthouse/overview

Est-ce que vous avez une opinion à propos de cet outil ?

Je me contente toujours de validator.w3.org et de Lynx (en plus de Firefox, Chrome et Safari sous des OS divers) pour tester mes sites. C’est déjá assez coûteux quand tu fabriques du code propre (validator) et des pages facilement accessibles (des textes bien structurés, pas de menus interminables en haut de page, des alt/titre pour les images et vidéos, des liens parlants etc.). Avec l’inspecteur de code de Firefox et les autres outils (SPIP) je me sens à l’aise, alors quel argument est-ce qu’il y a pour ajouter Lighthouse à ma boîte d’outils (dans ungoogled Chromium ) ?

Je m’en fous du nombre de visiteurs répertoriés car je ne travaille plus du tout pour les commerciaux, et toute la magie noire SEO ne m’intéresse plus que pour m’amuser.

Merci pour vos idées.

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
Lighthouse logo

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

You can also use Lighthouse CI to prevent regressions on your sites.

#web #www #html #css #javascript #SPIP

Savez-vous que #NVDA ne lit pas bien les chiffres romains ? Dans mon article + sketchnote, je vous explique comment résoudre le souci, pour peu que vous puissiez modifier le #HTML 😉

#CSS #sketchnote #a11y #accessibilite #article #blog #SketchCode

▻https://sketchnote-style.netlify.app/sketchcode/nvda-et-les-chiffres-romains

Performance #web : l’intégrateur, ce héros

J’ai envie de pousser un concept absolument nouveau : l’amélioration progressive (ah pardon on me dit que ça date de 2003). Au minimum c’est la clé d’un premier affichage éclair car on peut se passer de #JavaScript quelques secondes.
Puis abordons le gros sujet des images : comment les charger rapidement, sans toucher aux fichiers eux-même ? Il y a eu quelques nouveautés ces deux dernières années, mais on va voir que même sur des choses que l’on peut croire acquises comme le lazy loading, il y a quelques pièges qui peuvent être contre-productifs.
Enfin terminons avec un petit résumé sur les polices : elles tapent dans l’œil mais il faut en garder le contrôle si l’on veut un bon CLS (une des métriques Google dont on va reparler).

Article intéressant sur les optimisations au moment de l’#intégration web. Ça parle (un peu) performance mais surtout #UX, #ergonomie, #HTML, #CSS, #javascript...

▻https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros

https://media.24joursdeweb.fr/2021/12/no-preload-all-network.png

Home | The Component Gallery
▻https://component.gallery

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of #interface #components based on examples from the world of #design_systems

tgalopin/html-sanitizer : Sanitize untrustworthy HTML user input
▻https://github.com/tgalopin/html-sanitizer

Un remplaçant potentiel pour la lib « safehtml » embarquée dans SPIP (plugin-dist ▻https://git.spip.net/spip/safehtml) qui commence à poser des problèmes de compatibilité avec les usages du HTML 5 (entre autre les attributs data-truc)

Voir aussi le plugin HTML-purifier : ▻https://git.spip.net/spip-contrib-extensions/htmlpurifier
et la discussion en cours sur le sujet : ▻https://git.spip.net/spip/spip/issues/3926

#SPIP #safehtml #HTML-sanitizer #HTML-purifier

Those #HTML #Attributes You Never Use — Smashing Magazine
▻https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use

With no value, the download attribute forces the linked page to be downloaded. Alternatively, you can provide a value which the browser uses as the suggested file name for the downloaded resource.

<a href="/example.pdf" download="my-download.pdf">Download File</a>

...

The disabled attribute for the <fieldset> element, to easily disable multiple form elements simultaneously;

Ha ben tiens...

Je crois que c’est mon plus beau #shameless_autopromo : on vient d’effectuer avec Mosquito la mise en ligne des Très Riches Heures du Duc de Berry, qualifié de « Joconde des manuscrits », 206 feuillets réalisés au cours du XVe siècle, conservé au château de Chantilly :
►https://les-tres-riches-heures.chateaudechantilly.fr

https://les-tres-riches-heures.chateaudechantilly.fr/squelettes-responsive/imgs/duc-berry-1024.jpg

Initialement nous avions réalisé une table tactile installée dans la bibiothèque du château. Table que j’avais évidemment codée en #HTML5, et motorisée par #SPIP. Comme le résultat a beaucoup plu, on nous a dans un deuxième temps demandé de réaliser une version « Web » responsive. (Ça a été une gageure, à la fois côté technique et ergonomique.)

Le principe a consisté à présenter le manuscrit sous forme de « livre » dont les pages se tournent de manière fluide, mais le contenu de chaque page devant être une image en « méga-zoom », et dotée de points d’intérêt (hotspots) donnant des explications supplémentaires. Évidemment les scripts de « tourne-pages » ne sont pas conçus pour faire ce genre de chose, et afficher des centaines d’images « méga-zooms » interactives n’est pas non plus totalement anodin, si on veut que l’ensemble reste fluide. Mais au final, ça fonctionne bien…

Une autre caractéristique, plus technique, était que je voulais pouvoir gérer intégralement les contenus et les images dans SPIP, notamment sans devoir fabriquer « manuellement » les tuiles des images méga-zoom (qui existent en version « une page » et en version « double-page ») sur l’ordinateur. Là les images méga-zooms sont fabriquées automatiquement sur le serveur, depuis #SPIP et les hotspots sont directement définis dans mon interface. Ce qui permet de lier directement la gestion des hotspots et les tuiles méga-zooms, sans risque de travailler sur des versions différentes des images.

Et de manière désormais habituelle sur mes contenus de ce genre : c’est instantanément multilingue (on change de langue à l’endroit même où l’on se trouve, sans rechargement de contenus).

C’est donc un travail dont je suis particulièrement content, ce n’était pas gagné d’avance d’arriver à une interface fluide et responsive, une gestion des contenus relativement simple (tout se passe dans une interface SPIP), à partir d’une interface initialement conçue pour un grand écran de taille fixe, entièrement tactile, avec derrière un PC avec un SSD ultra-rapide et une carte graphique de compétition (un des rares avantages de développer sur Mac : au moins je n’ai pas une carte graphique de compétition, ça oblige à optimiser un peu le truc…).

Et évidemment, c’est gratifiant d’avoir travaillé sur la mise en ligne d’un des plus beaux chef-d’œuvre du monde.

En juin 2021, nous avons livré avec Mosquito une table interactive pour présenter le Concorde au musée de l’Air et de l’Espace du Bourget.

▻https://vimeo.com/512931837

L’interface principale est une vue 3D en temps réel, que l’on peut manipuler, du Concorde. Le rendu est aussi réaliste que possible. Des hotspots dans l’espace permettent de déclencher des compléments d’information, avec animations 3D precalculées.

Évidemment c’est du #HTML5 motorisé par #SPIP. C’est le premier projet que j’ai réalisé entièrement en 3D avec A-Frame, et beaucoup de réglages et d’essais pour trouver les bons formats de fichier et les bons réglages d’éclairages pour obtenir un rendu satisfaisant du Concorde.

#shameless_autopromo

Je suis très en retard sur mes #shameless_autopromo…

En mai 2021, avec Mosquito, on a livré une table interactive présentant la collection de maquettes du XIXe siècle de l’Amiral Pâris, au musée de la Marine de Port-Louis, en face de Lorient :

▻https://vimeo.com/552374272

Évidemment c’est du #HTML5 sous #SPIP. L’originalité ici, c’est que l’interface principale de consultation est en 3D sous A-Frame.

Comme le résultat a bien plu, le musée nous a demandé de réaliser une déclinaison pour le Web :
▻https://musee-marine-multimedia.fr/paris

C’est la même base que la table tactile, mais avec un jeu de squelettes adaptés pour être responsive (même si le smartphone n’est pas forcément le support idéal).

2022 s’annonce plutôt bien du côté du #CSS ! 🥳🥳🥳

Quelqu’un a déjà testé les color-function() ?
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--color-functions

Quand ce sera bien opérationnel, ça me facilitera beaucoup les choses avec la personnalisation qu’on propose à nos clients.

J’espère aussi que les #viewport units mettront fin aux soucis #Safari sur #smartphone ☺
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--viewport-units

Vous avez repéré quoi en particulier ?

#integration #integrationWeb #ui #HTML #responsive #variables

Le #no-code, nouveau sésame pour les non-initiés à la #programmation  ?

Le mouvement no-code est devenu en trois ans une vraie alternative à la programmation. Des solutions comme #Bubble, #Webflow, #Airtable, #Glide permettent de créer un #site_web ou une #appli_mobile sans pour autant être un développeur confirmé.

En gros,

Cette nouvelle méthode va aider à décharger ces ingénieurs de l’écriture de codes à faible valeur ajoutée, une tâche qu’ils considèrent comme ingrate et qu’ils ont tendance à saboter.

▻https://usbeketrica.com/fr/article/le-no-code-nouveau-sesame-pour-les-non-inities-a-la-programmation

donc ils créent des outils à « forte valeur » ajoutée pour que les utilisateurs et utilisatrices finales sabotent eux-même leur code, c’est ça ? Car j’ai du mal à croire que des applis #wysiwyg produisent un code aussi propre qu’un être humain qualifié. Sans parler de l’accompagnement.

Bref, c’est encore une fois sur le marché lowcost que ça tire vers le bas...

https://usbeketrica.com/uploads/media/1200x628/09/84429-code.jpg

#développement #webdev (no-)#html #no_code

Paged.js — About Paged.js
▻https://www.pagedjs.org/about

Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!

Une librairie javascript pour paginer le HTML pour générer du PDF « joli »

– le repo Gitlab : ▻https://gitlab.pagedmedia.org/tools/pagedjs
– la documentation : ▻https://www.pagedjs.org/documentation
– les spécifications CSS « Paged Media Module Level 3 » supportées : ▻https://www.pagedjs.org/documentation/cheatsheet
– une étude de cas complète pour la création/mise en page d’un livre : ►https://polylogue.org/apres-la-page-la-double-page
– rendu testable sur ►https://printcss.live

#Pagedjs #pagination #générateur_PDF #PDF #javascript

PrintCSS.live - The PrintCSS Playground
►https://printcss.live

Une interface de comparaison du rendu des différentes librairies de génération de PDF à partir de HTML

#PDF #comparateur #générateur_PDF