# entry

guid: https://thechainedmuse.substack.com/p/new-lyre-podcast-29-poetrys-search
title: New Lyre Podcast #29: Poetry's search for the soul with Daniel Leach
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/new-lyre-podcast-29-poetrys-search
hash: J2/"���:� �=�
content:
<p>What is the soul’s place in the modern world of poetry and culture? We speak with poet Daniel Leach about the changing tides in art and culture, false political dualities in the artistic realm, and the timeless quest for the poetic across the ages.</p><p data-attrs='{"url":"https://thechainedmuse.substack.com/subscribe?","text":"Subscribe now","action":null,"class":null}' data-component-name="ButtonCreateButton" data-sanitized-class="button-wrapper"><a href="https://thechainedmuse.substack.com/subscribe?" data-sanitized-class="button primary"><span>Subscribe now</span></a></p><p><em><strong>Daniel R. Leach</strong> is a poet living in Houston, Texas. He has spent much of his life fighting for the ideals of classical culture and poetry. His volumes of verse, compiling over 20 years of composition are “<a href="http://www.amazon.com/Voices-Wind-Poems-Daniel-Leach/dp/1074204778/ref=sr_1_1?keywords=Daniel+Leach&amp;qid=1561308110&amp;s=books&amp;sr=1-1">Voices on the Wind</a>” and “<a href="https://www.amazon.com/Places-Soul-Goes-Daniel-Leach-ebook/dp/B0995MFQDQ">Places the Soul Goes</a>.”</em></p><div data-attrs='{"url":"https://thechainedmuse.substack.com/subscribe?","text":"Subscribe","language":"en"}' data-component-name="SubscribeWidgetToDOM" data-sanitized-class="subscription-widget-wrap-editor"><div data-sanitized-class="subscription-widget show-subscribe"><div data-sanitized-class="preamble"><p data-sanitized-class="cta-caption"><strong>The Chained Muse is a reader-supported publication. To receive new posts and support our growing poetical enterprise, consider becoming a free or paid subscriber.</strong></p></div><div data-sanitized-class="fake-input-wrapper"><div data-sanitized-class="fake-input"></div><div data-sanitized-class="fake-button"></div></div></div></div><div data-attrs='{"nodeId":"7ea9f1f6-c32e-43ab-bc83-b2a43533e5f9","caption":"In the golden light of the late Spring evening,","size":"lg","isEditorNode":true,"title":"The Flight of the Ibis","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-11-27T02:48:54.441Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc188b096-7cb8-461e-8f1a-8d95fcb9b5dd_800x800.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/the-flight-of-the-ibis","section_name":null,"id":152125604,"type":"newsletter","reaction_count":0,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"119fba59-40c3-4afd-8a80-b2a3d44cd886","caption":"I was a mere sixteen that Summer day","size":"lg","isEditorNode":true,"title":"The Devil at Woodstock","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-07-27T20:10:01.940Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc8d099fd-ba87-4a9d-a958-84d30be5d371_925x539.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/the-devil-at-woodstock-3eb","section_name":null,"id":147076296,"type":"newsletter","reaction_count":11,"comment_count":11,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"4d3ae084-2f2f-46bb-a99a-aa916c01a63f","caption":"Featured in our New Lyre Winter 2024 issue. All paid subscribers get instance access to all New Lyre online content and archives, along with full access to Age of Muses, where we explore the current state of twenty-first century culture, creativity and art.","size":"lg","isEditorNode":true,"title":"Poems Unwritten, Indian Ghost Song &amp; Other Poetry","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-22T07:38:17.259Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F12830add-d587-4df9-834d-6e0dd7366017_600x463.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/poems-unwritten-and-other-poetry","section_name":null,"id":138983760,"type":"newsletter","reaction_count":1,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"5f665d16-714a-4eb7-a622-0a9d9c5d1568","caption":"Click on the cover of any issue to order New Lyre Magazine directly from Amazon. Renaissance Patrons can access our entire six issue archive below.","size":"lg","isEditorNode":true,"title":"New Lyre Magazine Archive","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-26T07:04:27.462Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3eedcab9-43f8-4b3b-875b-f5d890d46417_1920x1050.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/download-entire-new-lyre-pdf-archive-42c","section_name":null,"id":139164328,"type":"newsletter","reaction_count":6,"comment_count":2,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/152046642/4f0800eb1da18d28503ee0dc40f484fd.mp3","type":"audio/mpeg","length":0}]}


guid: https://odysee.com/NowTimeToFinallyLookCriticallyat911:2d9ea81d7caa75ca2d0834430641de23c01671a6
author: ;Eva K Bartlett
link: https://odysee.com/NowTimeToFinallyLookCriticallyat911:2d9ea81d7caa75ca2d0834430641de23c01671a6
hash: �`�j��l�;TX� �
title:
"Now is the time to finally look critically at 9/11. It's the foundation of the current war machine"

content:
<p><img src="https://thumbs.odycdn.com/bb7099ced2ad53010b13e2f6b57a9947.webp" width="480" alt="thumbnail" title="" now is the time to finally look critically at it foundation of current war machine></p>I spoke with Ted Walter, International Center for 9/11 Justice, on why now, 23 years on, speaking about 9/11 is important. <br><br>Excerpt:<br><br>"I would encourage people to look at 9/11 as a possible opportunity to expose the true nature of the national security state, of the war machine. It's about becoming more educated so that it's harder for the powers that be to carry out future deceptions. <br><br>People who dedicated their careers or spend much of their free time battling Western imperialism, battling the war machine, refuse to look at 9/11—which I think is the foundation of the current war machine. At 23 years, I think its time that people who have avoided it in the past, either for career-oriented reasons or because they themselves have fallen prey to the propaganda of the war machine that they are dedicated to taking down. Whatever it may be, now is the time to finally look critically at 9/11. If we don't understand 9/11, we really don't understand the world we live in."<br><br>Related Links:<br><br>https://ic911.org/ten-reasons/<br>on the “Hannibal Directive” <br>https://x.com/Truth_InMedia/status/1810675316261838968<br>https://x.com/DoubleDownNews/status/1832855065092075676 <br>https://x.com/RichardGage_911/status/1843157368479346912<br>https://electronicintifada.net/tags/hannibal-directive<br><br>https://ic911.org/journal/articles/the-instantaneous-free-fall-of-world-trade-center-building-7-and-nists-attempt-to-hide-it/<br><br>23 years later, you owe it to yourself to finally trust your eyes <br>https://x.com/ic911justice/status/1833873999945781520<br><br>Perhaps these first responders can help you see what is actually going on here <br>https://x.com/ic911justice/status/1858595704249446897<br><br>Peace, War and 9/11<br>https://www.imdb.com/title/tt28757454/<br><br>https://www.ae911truth.org/evidence/technical-articles/articles-by-ae911truth/696-how-36-reporters-brought-us-the-twin-towers-explosive-demolition

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/NowTimeToFinallyLookCriticallyat911/2d9ea81d7caa75ca2d0834430641de23c01671a6/583a8b.mp4","type":"video/mp4","length":1134008265}]}


guid: https://thechainedmuse.substack.com/p/new-lyre-podcast-30-the-preservation
title: New Lyre Podcast #30: The Preservation of Fire
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/new-lyre-podcast-30-the-preservation
hash: N���tʢT>;w���
content:
<p>“Tradition is not the worship of ashes, but the preservation of fire”<br>—Gustav Mahler</p><p>In this wide-ranging discussion with poet Michael Yost, we explore the nature of the new burgeoning poetic renaissance in the world of arts and letters. From the timeless nature of classical forms to the comparison of epic poems in both classic and free-verse styles, we delve deep into the relationship between poetics and civilization.</p><p data-attrs='{"url":"https://thechainedmuse.substack.com/p/new-lyre-podcast-30-the-preservation?utm_source=substack&amp;utm_medium=email&amp;utm_content=share&amp;action=share","text":"Share","action":null,"class":null}' data-component-name="ButtonCreateButton" data-sanitized-class="button-wrapper"><a href="https://thechainedmuse.substack.com/p/new-lyre-podcast-30-the-preservation?utm_source=substack&amp;utm_medium=email&amp;utm_content=share&amp;action=share" data-sanitized-class="button primary"><span>Share</span></a></p><p><em><strong>Michael Yost </strong>is a poet and essayist living in rural New Hampshire with his wife and children, as well as an alumnus and the Director of Admissions at Thomas More College of Liberal Arts. He earned his M.F.A. in Creative Writing from the University of St. Thomas in Houston Texas. His essays and poems have been published in places like The University Bookman, Dappled Things, Crisis Magazine, the St. Austin Review, The Brazen Head and Hearth and Field. Follow him on his Substack, <a href="https://poetryofmichaelyost.substack.com/">The Weight of Form</a>.</em></p><div data-attrs='{"url":"https://thechainedmuse.substack.com/subscribe?","text":"Subscribe","language":"en"}' data-component-name="SubscribeWidgetToDOM" data-sanitized-class="subscription-widget-wrap-editor"><div data-sanitized-class="subscription-widget show-subscribe"><div data-sanitized-class="preamble"><p data-sanitized-class="cta-caption"><strong>The Chained Muse is a reader-supported publication. To receive new posts and support our work, consider becoming a free or paid subscriber to our journal.</strong></p></div><div data-sanitized-class="fake-input-wrapper"><div data-sanitized-class="fake-input"></div><div data-sanitized-class="fake-button"></div></div></div></div><div data-sanitized-class="pullquote"><p>New yearly paid subscribers will receive a complimentary hard copy of our journal of arts and letters, New Lyre Magazine (Fall 2024), delivered to the address of your choosing (we’ll contact you for mailing info).</p></div><div data-attrs='{"nodeId":"8b421df6-e454-40ed-ab35-25211cffcb25","caption":"Download or order the latest issue of our print journal, New Lyre Magazine","size":"lg","isEditorNode":true,"title":"Our Fall Magazine Is Published!","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-10-16T21:48:50.444Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3ec8d2a8-38ef-480d-81e4-a5e05d9e6e78_702x915.png","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/our-fall-magazine-is-published","section_name":null,"id":150038311,"type":"newsletter","reaction_count":6,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"b6cbcd2a-c734-43c1-b9b0-56acf91e17d7","caption":"No glass is pure","size":"lg","isEditorNode":true,"title":"The Window","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-06-03T23:15:18.381Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7b5af259-87aa-4f32-8fdb-c7fb90f5b3ac_1280x851.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/the-window","section_name":null,"id":145277099,"type":"newsletter","reaction_count":11,"comment_count":8,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"9a324dc5-b733-48cb-b6e7-39328c7254ec","caption":"Communion","size":"lg","isEditorNode":true,"title":"Communion &amp; Poetry","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-07-22T00:25:27.663Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F195b2f5f-5811-4879-bfc6-44fbefa6fcc8_1024x814.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/communion-and-poetry","section_name":null,"id":146857322,"type":"newsletter","reaction_count":9,"comment_count":15,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"b5f45cab-ea8b-444c-ad1e-47381e86b2d2","caption":"Featured in New Lyre - Winter 2021","size":"lg","isEditorNode":true,"title":"Les Sylphides (Reading)","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-19T23:25:51.359Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff1b495aa-fe42-40c1-91c8-751991b546ed_700x467.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/les-sylphides","section_name":"Poetry Out Loud","id":138626004,"type":"newsletter","reaction_count":0,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":true}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"a124439f-4ea8-4200-b23a-7a3cef1f9b4b","caption":"Published in New Lyre - Winter 2021","size":"lg","isEditorNode":true,"title":"Climbing the Alps: The Vision of Ezra Pound ","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-20T00:14:28.701Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc3be05ba-9b77-4cb1-83d0-cb72e0917b9b_1200x648.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/climbing-the-alps-the-vision-of-ezra","section_name":null,"id":138596133,"type":"newsletter","reaction_count":4,"comment_count":2,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":true}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"id":440277,"name":"Age of Muses","logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6d7947d0-d3a6-4e15-a202-5d7a8a1abef7_982x982.png","base_url":"https://ageofmuses.substack.com","hero_text":"Writings for a new Renaissance","author_name":"David Gosselin","show_subscribe":true,"logo_bg_color":"#ffffff","language":"en"}' data-component-name="EmbeddedPublicationToDOMWithSubscribe" data-sanitized-class="embedded-publication-wrap"><div data-sanitized-class="embedded-publication show-subscribe"><a native="true" href="https://ageofmuses.substack.com/?utm_source=substack&amp;utm_campaign=publication_embed&amp;utm_medium=web" data-sanitized-class="embedded-publication-link-part"><img src="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6d7947d0-d3a6-4e15-a202-5d7a8a1abef7_982x982.png" width="56" height="56" data-sanitized-class="embedded-publication-logo"><span data-sanitized-class="embedded-publication-name">Age of Muses</span><div data-sanitized-class="embedded-publication-hero-text">Writings for a new Renaissance</div><div data-sanitized-class="embedded-publication-author-name">By David Gosselin</div></a></div></div>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/152114313/1897bd820ceb1e3b3bd2199023704740.mp3","type":"audio/mpeg","length":0}]}


guid: https://odysee.com/geopolitical-insights-from-russia-with:aa110c302908b8485e702b38de013dc5e575bc16
title: Geopolitical Insights from Russia with Tim Kirby
author: ;Rising Tide Foundation
link: https://odysee.com/geopolitical-insights-from-russia-with:aa110c302908b8485e702b38de013dc5e575bc16
hash: 4�DŅ�t��q����)
content:
<p><img src="https://thumbnails.lbry.com/1ND2SFWHx0o" width="480" alt="thumbnail" title="Geopolitical Insights from Russia with Tim Kirby"></p>In this RTF presentation, Tim Kirby delivers a geopolitical masterclass with a focus on the war in Ukraine, migration policies to Russia, arctic development, culture, banking, infrastructure and more.<br><br>Watch Tim's short response to accusations of Russia's involvment in the NWO on Rumble:<br>https://rumble.com/v5sruyb-tim-kirbys-response-to-black-pilled-analysts.html<br><br>Follow Tim Kirby's Telegram channel here<br>https://t.me/timkirbyhardcore<br><br>Support the Rising Tide Foundation in the following ways:<br><br>1) Make a donation <br>https://risingtidefoundation.net/support-the-work/<br>2) Subscribe to Matt and Cynthia's Substack<br>matthewehret.substack.com<br>cynthiachung.substack.com<br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br>4) Follow us on Odyssee here: https://odysee.com/@RisingTideFoundation:b<br><br>and follow us on www.risingtidefoundation.net and t.me/risingtidefoundation<br>...<br>https://www.youtube.com/watch?v=1ND2SFWHx0o

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/geopolitical-insights-from-russia-with/aa110c302908b8485e702b38de013dc5e575bc16/a524d9.mp4","type":"video/mp4","length":460171474}]}


guid: 6165d5e4ab2c8b5f79b5d82e:6165f805cc4a70035862ada3:6744cbd9e469052f871a4512
title: We approach state singularity
author: ;Lisa P
link: https://www.rightsprobe.org/read/we-approach-state-singularity-1
hash: i�7�R�K�F�� <
content:
<p data-sanitized-class="">This multimedia presentation is based on an earlier piece by <strong>Professor Bruce Pardy</strong> for <a href="https://brownstone.org/articles/we-approach-state-singularity/">The Brownstone Institute</a>. </p><p data-sanitized-class="">State singularity, argues Prof. Pardy, is the moment when state and society become indistinguishable. At the singularity, all solutions to all problems lie with government in its various forms. More, never less, programs, rules, initiatives and structures are the answer.</p><p data-sanitized-class="">State singularity is the ultimate collectivism. Like black holes, state singularities absorb and crush every other thing. Have we crossed our event horizon?</p><p data-sanitized-class="">Watch the video. Read the transcript below.</p>





















  
  






  <p data-sanitized-class=""><em>Many citizens of the West believe that they live in free societies, or something close. </em></p><p data-sanitized-class=""><em>But as time goes on, public authorities increasingly insist on having a say in everything. <br><br>People cannot build things on their own land without permits. They cannot run businesses without approvals and inspections. They cannot give advice without professional designations. They cannot educate their children outside of state-mandated curricula. They cannot hire employees without triggering a myriad of workplace and tax requirements. They cannot produce and sell milk, cheese, or eggs without a license. They cannot earn money, spend money, or hold property without being taxed, and then taxed again. <br><br>Jeffrey Tucker recently described three layers of omnipotent managerial technocracy. <br><br>The deep state, he suggested, consists of powerful and secretive central government agencies in the security, intelligence, law enforcement, and financial sectors. <br><br>The middle state is a myriad of ubiquitous administrative bodies – agencies, regulators, commissions, departments, municipalities, and many more – run by a permanent bureaucracy. <br><br>The shallow state is a plethora of consumer-facing private or semi-private corporations, including banks, Big Media, and huge commercial retail companies, which governments support, protect, subsidize, and pervert. The three layers work together. <br><br>For instance, in the financial sector, as Tucker illustrates, the deep state’s Federal Reserve pulls the powerful strings, the middle state’s financial and monetary regulators enforce myriad rules and policies, and the shallow state’s “private” titans like BlackRock and Goldman Sachs dominate commercial activity. It’s a system, Tucker writes, “designed to be impenetrable, permanent, and ever more invasive.” <br><br>We are approaching state singularity: the moment when state and society become indistinguishable. <br><br>In physics, a “singularity” is a single point in space-time. Inside black holes, gravity crushes volume to zero and mass density is infinite. In computer science, “technological singularity” is unitary artificial superintelligence. At the singularity, everything becomes one thing. Data points converge. Normal laws do not apply. <br><br>At state singularity, the state becomes society and society is a product of the state. Legal norms and expectations become irrelevant. The state’s mandate is to do as it judges best – since everything and everyone are expressions of its vision. Powers are not separated between the state’s branches – the legislature, the executive, the bureaucracy, and the courts. Instead, they all do whatever they deem necessary. The bureaucracy legislates. Courts develop policy. Legislatures conduct hearings and prosecute cases. Government agencies change policies at will. The rule of law may be acknowledged as important in principle while it is rejected in practice.<br><br>State singularity is the ultimate collectivism. It resembles old-style fascism and communism, but it is neither. Fascist states enforce an idea, often nationalist in sentiment (“The motherland for the superior race”), and recruit private actors, especially corporations, to the cause. Communist regimes champion the working class and outlaw private property (“Workers of the world unite”). Singularity, in contrast, is not propelled by an idea other than singularity itself. To justify its own hegemony, the state champions a variety of other causes. In the modern era, social justice, climate change, transgender rights, feminism, economic reform, and many more have served to extend the state’s reach. Problems are rarely solved, but that is not the reason for taking them up.<br><br>State singularity develops gradually and insidiously. Whereas fascist, communist, and other centralized power regimes often result from deliberate political revolution, in the West omnipotent managerial technocracy has grown, spread, and infiltrated the nooks and crannies of social life without sudden political upheaval. Like a form of institutional Darwinism, public agencies, no matter their formal purpose, seek to persist, expand, and reproduce. <br><br>At the singularity, all solutions to all problems lie with government in its various forms. More, never less, programs, rules, initiatives, and structures are the answer. Like black holes, state singularities absorb and crush every other thing. Corporations serve state interests and participate in managing the economy. Singularities destroy voluntary community organizations by occupying the space and placing obstacles in the way. Both the left and the right seek to harness state power to craft society in their image. <br><br>In a singularity, one cannot propose to eliminate government. Doing so would be contrary to prevailing ideology and vested interests, but more fundamentally, the idea would be incomprehensible.<br><br>And not just to officials. Citizens dissatisfied with the services they receive want more service and better policy. When schools sexualize their children, they demand changes to the curriculum instead of the end of public schools. When monetary policy makes houses expensive, they demand government programs to make them cheap instead of the end of central banks. When government procurement is revealed to be corrupt, they demand accountability mechanisms instead of a smaller government. State singularity is found not just in the structures of government but in the minds of the people. <br><br>Modern states have capacities they have never had before. Technological advances are providing them with the ability to monitor spaces, supervise activities, collect information, and require compliance everywhere all the time. In the collectivist regimes of old, governments knew only what human eyes and ears could tell them. Soviet authorities were tyrannical, but they could not instantaneously monitor your cell phone, bank account, fridge, car, medications, and speech.<br><br>We are not at the singularity yet. But have we crossed the event horizon? At a black hole, the event horizon is the point of no return. Gravity becomes irresistible. No matter or energy, including light, can escape the pull to the singularity at the core of the abyss. <br><br>Our event horizon beckons. We cannot evade it by merely slowing down on the path that we are on. Liberation requires escape velocity in the other direction.</em>  </p>

attributes:
{"enclosures":[{"url":"https://images.squarespace-cdn.com/content/v1/6165d5e4ab2c8b5f79b5d82e/1733170730559-F3Y8UUZU0I6G62TOVFW6/Black+Elegant+Notification+Popup+Quote+Reminder+Twitter+Post+%283%29.png?format=1500w","title":"We approach state singularity","type":"image/png","medium":"image","height":844,"width":1500}]}


guid: https://htmhell.dev/34-a-button-is-not-a-link/
title: #34 a button is not a link
author: ;Manuel Matuzovic
link: https://htmhell.dev/34-a-button-is-not-a-link/
hash: %� ���?�/� �
attributes: {"enclosures":[]}
content:
<div data-sanitized-class="section bad">
<h2 data-sanitized-id="bad-code">Bad code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">onclick</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span><span data-sanitized-class="token value javascript language-javascript">window<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">open</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'https://example.com/other-page'</span><span data-sanitized-class="token punctuation">)</span></span><span data-sanitized-class="token punctuation">"</span></span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Link target description<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-id="issues" data-sanitized-class="section">
<h2 data-sanitized-id="issues-and-how-to-fix-them">Issues and how to fix them</h2>
<ol>
<li>A button opening a link will be unexpected behavior for screen reader users. No matter how it is styled.</li>
<li>Links disguised as buttons won’t show up in the link list of a site in assistive technologies.</li>
<li>Use links for navigation to other pages or sections, and buttons for actions performed on the current page or within the application.</li>
</ol>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="good-code">Good code</h2>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://example.com/other-page<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Link target description<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
</div>
<div data-sanitized-class="section">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code> on MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><code>&lt;button&gt;</code> on MDN</a></li>
<li><a href="https://yatil.net/blog/buttons-vs-links">Buttons vs. Links by Eric Eggert</a></li>
</ul>
</div>


title: The Third Culture Behaviorist Revolution [CP Podcast with Johnny Vedmore]
author: ;Canadian Patriot Press
hash: ��I%?�U�-s%]�i��
guid:
https://odysee.com/the-third-culture-behaviorist-revolution:1db39cdfea56ab483af7258bf846ae480c9bbf7c

content:
<p><img src="https://thumbnails.lbry.com/klIrQkV1kX8" width="480" alt="thumbnail" title="The Third Culture Behaviorist Revolution [CP Podcast with Johnny Vedmore]"></p>In this Canadian Patriot Podcast, Matt chats with Johnny Vedmore about his newest groundbreaking research on the transhumanist/billionaire cut outs shaped by behaviorist social engineers and cybernetics gurus following the program laid out by the Fabian Society and Oxford Rhodes Scholars since the 1960s.<br><br>Read Vedmore's two part series here:<br><br>Part 1: https://newspaste.substack.com/p/blair-and-clinton-the-third-way-dossier<br><br>Part 2: https://newspaste.substack.com/p/musk-and-epstein-the-third-culture<br><br>Listen to the previous Canadian Patriot Podcast with Vedmore on The Intellectual Dark Web and Eric Weinstein:<br>https://matthewehret.substack.com/p/the-ugly-truth-of-eric-weinstein<br><br>Get Science Unshackled here<br>https://matthewehret.substack.com/p/my-new-book-has-now-hit-the-press<br><br>Matt and Cynthia's books:<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>Watch The Hidden Hand Behind UFOs episodes here:<br>https://canadianpatriot.org/2023/11/01/the-hidden-hand-behind-ufos-episode-1-lifting-the-esoteric-veil/<br><br>**********************************************<br><br>1) Make a donation to the Canadian Patriot<br>https://www.patreon.com/canadianpatriot<br>https://canadianpatriot.org/support-us/<br><br>2) Subscribe to Matt and Cynthia's Substack<br>https://matthewehret.substack.com/<br>https://cynthiachung.substack.com/<br><br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>4) Subscribe to our Telegram Channels<br>https://t.me/CanadianPatriotPress<br><br>Since it is likely just a matter of time before this Youtube channel (https://www.youtube.com/@canadianpatriotpress3573) gets suspended again or taken down entirely, check out our alternative platforms:<br><br>On Rumble<br>https://rumble.com/user/MattEhret<br><br>On Bitchute:<br>https://www.bitchute.com/channel/FPD8fbk6o541/<br><br>On Odysee:<br>https://odysee.com/@canadianpatriotpress3573:4<br><br>On Soundcloud:<br>https://soundcloud.com/mattehret<br>...<br>https://www.youtube.com/watch?v=klIrQkV1kX8

link:
https://odysee.com/the-third-culture-behaviorist-revolution:1db39cdfea56ab483af7258bf846ae480c9bbf7c

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/the-third-culture-behaviorist-revolution/1db39cdfea56ab483af7258bf846ae480c9bbf7c/e6a4cc.mp4","type":"video/mp4","length":427813794}]}


title: The Economy of Well being Podcast with Matt Ehret &amp; Cynthia Chung
author: ;Canadian Patriot Press
hash: ��4��1�s8j�.�s�
guid:
https://odysee.com/the-economy-of-well-being-podcast-with-2:a889ceab39bd6c8843f9643b5415bbd360df38b2

content:
<p><img src="https://thumbnails.lbry.com/YoPu4MyLB6o" width="480" alt="thumbnail" title="The Economy of Well being Podcast with Matt Ehret &amp; Cynthia Chung"></p>November 11, 2024<br><br>Mark Anielski, Cynthia Chung and I have a dialogue about how to deal with institutional and structure evil.<br><br>*****<br><br>You can find Mark Anielski’s work at:        <br>https://anielski.com/<br>https://www.youtube.com/@markusanielski<br>*****<br><br>You can find Cynthia Chung’s’s work at:        <br>https://risingtidefoundation.net/<br>https://cynthiachung.substack.com/<br>Watch her Docu-series “Escaping Calypso’s Island” here:<br>https://risingtidefoundation.net/escaping-calypsos-island/<br>*****<br><br>Get Science Unshackled here<br>https://matthewehret.substack.com/p/my-new-book-has-now-hit-the-press<br><br>Matt and Cynthia's books:<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>Watch the Docu-series “The Hidden Hand Behind UFOs” here:<br>https://canadianpatriot.org/2023/11/01/the-hidden-hand-behind-ufos-episode-1-lifting-the-esoteric-veil/<br><br>Support the Canadian Patriot Review in the following ways:<br><br>1) Make a donation to the Canadian Patriot<br>https://www.patreon.com/canadianpatriot<br>https://canadianpatriot.org/support-us/<br><br>2) Subscribe to Matt and Cynthia's Substack<br>https://matthewehret.substack.com/<br>https://cynthiachung.substack.com/<br><br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>4) Subscribe to our Telegram Channels<br>https://t.me/CanadianPatriotPress<br><br>Since it is likely just a matter of time before this Youtube channel (https://www.youtube.com/@canadianpatriotpress3573) gets suspended again or taken down entirely, check out our alternative platforms:<br><br>On Rumble<br>https://rumble.com/user/MattEhret<br><br>On Bitchute:<br>https://www.bitchute.com/channel/FPD8fbk6o541/<br><br>On Odysee:<br>https://odysee.com/@canadianpatriotpress3573:4<br><br>On Soundcloud:<br>https://soundcloud.com/mattehret<br>...<br>https://www.youtube.com/watch?v=YoPu4MyLB6o

link:
https://odysee.com/the-economy-of-well-being-podcast-with-2:a889ceab39bd6c8843f9643b5415bbd360df38b2

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/the-economy-of-well-being-podcast-with-2/a889ceab39bd6c8843f9643b5415bbd360df38b2/fe1a02.mp4","type":"video/mp4","length":290130098}]}


guid: https://odysee.com/ar-live-with-special-guests-matt-ehret:30a0a719aa42c9bc5a70f9b2f5ef511397e2aff3
title: AR Live with Special Guests; Matt Ehret &amp; Jason Dahl
author: ;Canadian Patriot Press
link: https://odysee.com/ar-live-with-special-guests-matt-ehret:30a0a719aa42c9bc5a70f9b2f5ef511397e2aff3
hash: u�E� �#�-4�X�n8�
content:
<p><img src="https://thumbnails.lbry.com/_ef7jTuBo9w" width="480" alt="thumbnail" title="AR Live with Special Guests; Matt Ehret  &amp; Jason Dahl"></p>November 11, 2024<br><br>Jason &amp; I join the host Johnny to discuss our latest installment “The Hidden Hand Behind UFOs Ep. 3: The New Age of the Sorcerers: UFOs, MK Ultra and the Cold War”<br>**********************************************<br>You can find all the links to America Rising Media’s work at:<br>https://allmylinks.com/americarisingmedia<br>**********************************************<br>You can find all the links to Johnny’s work at:<br>https://allmylinks.com/johnnyq<br>**********************************************<br>You can find all the links to Jason’s work at:<br>DAHL HOUSE STUDIOS: https://www.dahlhousestudios.com/<br>New Website: https://superspreaders.space<br>Rumble: https://rumble.com/user/SuperSpreaders<br>Odysee: https://odysee.com/@SuperSpreaders:9<br>Twitter: https://twitter.com/super_spreaders<br><br>**********************************************<br>Get Science Unshackled here<br>https://matthewehret.substack.com/p/my-new-book-has-now-hit-the-press<br><br>Matt and Cynthia's books:<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>Watch The Hidden Hand Behind UFOs  series here:<br>https://canadianpatriot.org/2023/11/01/the-hidden-hand-behind-ufos-episode-1-lifting-the-esoteric-veil/<br><br>Support the Canadian Patriot Review in the following ways:<br><br>1) Make a donation to the Canadian Patriot<br>https://www.patreon.com/canadianpatriot<br>https://canadianpatriot.org/support-us/<br><br>2) Subscribe to Matt and Cynthia's Substack<br>https://matthewehret.substack.com/<br>https://cynthiachung.substack.com/<br><br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>4) Subscribe to our Telegram Channels<br>https://t.me/CanadianPatriotPress<br><br><br>Since it is likely just a matter of time before this Youtube channel (https://www.youtube.com/@canadianpatriotpress3573) gets suspended again or taken down entirely, check out our alternative platforms:<br><br>On Rumble<br>https://rumble.com/user/MattEhret<br><br>On Bitchute:<br>https://www.bitchute.com/channel/FPD8fbk6o541/<br><br>On Soundcloud:<br>https://soundcloud.com/mattehret<br>...<br>https://www.youtube.com/watch?v=_ef7jTuBo9w

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/ar-live-with-special-guests-matt-ehret/30a0a719aa42c9bc5a70f9b2f5ef511397e2aff3/831681.mp4","type":"video/mp4","length":728522719}]}


guid: https://keithschacht.com/2024/Nov/26/nasa-dragonfly-probe-to-saturn-titan-in-2028/#atom-everything
title: NASA's Dragonfly probe to Saturn's Titan in 2028
author: ;Keith Schacht
link: https://keithschacht.com/2024/Nov/26/nasa-dragonfly-probe-to-saturn-titan-in-2028/#atom-everything
hash: �@�,�fL`E�j6
tags: #space
attributes: {"enclosures":[]}
content:
<p>In 2028 NASA is launching a spacecraft to Saturn's moon Titan to study its habitability in a mission named Dragonfly. It will land in 2034. They're sending a drone powered by a radioisotope thermoelectric generator so they can visit a variety of sites. Titan is notable because it's believed to have a similar chemistry to ancient earth. Past probes have measured the contents of the atmosphere and confirmed it contains a mix of hydrocarbons. The surface contains a lot of water ice and scientists believe there is a water ocean in the interior of the moon.</p>
    
        <p>Tags: <a href="https://keithschacht.com/tags/space">space</a></p>


guid: https://keithschacht.com/2024/Nov/26/vampire-game-based-around-ai-voice-suck-up/#atom-everything
title: Vampire game based around AI voice: SUCK UP!
author: ;Keith Schacht
link: https://keithschacht.com/2024/Nov/26/vampire-game-based-around-ai-voice-suck-up/#atom-everything
hash: �=�z� @�,ʈ']
tags: #AI
attributes: {"enclosures":[]}
content:
<p><strong><a href="https://www.youtube.com/watch?v=811JkxLfvoA">Vampire game based around AI voice: SUCK UP!</a></strong></p>
This is one of the best examples I’ve seen of games creatively incorporating LLMs. You are a vampire character, you walk up to houses in a neighborhood and as the player you actually talk aloud to your computer and the NPCs talk back. You have to convince these NPCs to let you into their house.


    <p>Tags: <a href="https://keithschacht.com/tags/AI">AI</a></p>


guid: https://keithschacht.com/2024/Nov/26/rails-web-based-database-admin/#atom-everything
title: Rails web-based database admin
author: ;Keith Schacht
link: https://keithschacht.com/2024/Nov/26/rails-web-based-database-admin/#atom-everything
hash: @�V g��-a�x��"
tags: #Rails
attributes: {"enclosures":[]}
content:
<p><strong><a href="https://github.com/igorkasyanchuk/rails_db">Rails web-based database admin</a></strong></p>
A rails gem that gives you a web-based interface to your database.


    <p>Tags: <a href="https://keithschacht.com/tags/Rails">Rails</a></p>


guid: https://keithschacht.com/2024/Nov/26/rails-activerecord-has-a-sole-method/#atom-everything
title: Rails ActiveRecord has a .sole method
author: ;Keith Schacht
link: https://keithschacht.com/2024/Nov/26/rails-activerecord-has-a-sole-method/#atom-everything
hash: ����w2����6���
tags: #Rails
attributes: {"enclosures":[]}
content:
<p>I just learned about `sole` and `find_sole_by`. They ensure that only a single record is returned and will raise if there is something other than one. It's the equivalent of:

</p><pre>
api_keys = user.api_keys.where(key: key)

if api_keys.length == 1
  api_key = api_keys.first
elsif api_keys.length == 0
  raise "No records found!"
else
  raise "More than one matching record found!"
end
</pre>

    
        <p>Tags: <a href="https://keithschacht.com/tags/Rails">Rails</a></p>


title: pick is the single-value version of pluck in Rails
author: ;Keith Schacht
hash: ʰ ��<�#G` 1�
tags: #Rails
attributes: {"enclosures":[]}
guid:
https://keithschacht.com/2024/Nov/26/pick-is-the-single-value-version-of-pluck-in-rails/#atom-everything

content:
<p>Instead of doing </p><pre>Messages.pluck(:user_id).first</pre> you can do <pre>Messages.pick(:user_id)</pre>
    
        <p>Tags: <a href="https://keithschacht.com/tags/Rails">Rails</a></p>

link:
https://keithschacht.com/2024/Nov/26/pick-is-the-single-value-version-of-pluck-in-rails/#atom-everything


guid: https://odysee.com/like-a-phoenix-the-death-and-rebirth-of:e37b80889efb5b3761043c9c64912f083260b83a
title: Like a Phoenix: The Death and Rebirth of America [A Canadian Patriot Film]
author: ;Canadian Patriot Press
link: https://odysee.com/like-a-phoenix-the-death-and-rebirth-of:e37b80889efb5b3761043c9c64912f083260b83a
hash: �* �8�E�GL$��`J
content:
<p><img src="https://thumbnails.lbry.com/U3EamfkiBTc" width="480" alt="thumbnail" title="Like a Phoenix: The Death and Rebirth of America [A Canadian Patriot Film]"></p>The Intellectual Dark Web isn't what you thought it was. <br><br>With Bret Weinstein's shocking call to "Phoenix the Republic" and Eric Weinstein's role in shaping the global mass migration policies of the United Nations, it is increasingly becoming clear that the American people are being played by the same Tavistock/Jesuit forces that manipulated the 19th century Native American tribes and 20th century Vietnamese to embrace cataclysmic acts of destruction under the Rosicrucian symbolism of "Phoenix operations". <br><br>The following Canadian Patriot Film written and narrated by Cynthia Chung, removes multiple layers of illusion preventing current citizens from understanding the past 150 years of social engineering, weaponized psychology, and psychological warfare premised on the Transhumanist belief that humanity must be made to embrace cataclysms in order for creation to emerge out of destruction. <br><br>The role of the Weinstein brothers within this dark agenda will shock you.<br><br>Support our work and help us make more films by making a donation here:<br>https://canadianpatriot.org/support-us/<br><br>Purchase Cynthia Chung's new book The Shaping of a World Religion VOL 1: 'https://canadianpatriot.org/new-book-the-shaping-of-a-world-religion-vol-1-by-cynthia-chung/<br><br>Subscribe to Cynthia's Substack here:<br>cynthiachung.substack.com<br><br>Subscribe to Matt Ehret's Substack here:<br>matthewehret.substack.com<br><br>Follow Jason Dahl's work here: dahlhousetsudios.com and https://twitter.com/super_spreaders <br><br>Buy other Canadian Patriot books here:<br>https://canadianpatriot.org/untold-history-of-canada-books/<br>...<br>https://www.youtube.com/watch?v=U3EamfkiBTc

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/like-a-phoenix-the-death-and-rebirth-of/e37b80889efb5b3761043c9c64912f083260b83a/1e6036.mp4","type":"video/mp4","length":935170356}]}


hash: ���va�m*�m(H��:�
attributes: {"enclosures":[]}
guid:
/fr/salle-de-nouvelles/pofo-un-comite-senatorial-recommande-vivement-a-affaires-mondiales-canada-de-mieux-gerer-la-commission-des-pecheries-des-grands-lacs-qui-a-ete-sous-financee/

title:
Un comité sénatorial recommande vivement à Affaires mondiales Canada de mieux gérer la Commission des pêcheries des Grands Lacs, qui a été sous-financée

link:
https://sencanada.ca//fr/salle-de-nouvelles/pofo-un-comite-senatorial-recommande-vivement-a-affaires-mondiales-canada-de-mieux-gerer-la-commission-des-pecheries-des-grands-lacs-qui-a-ete-sous-financee/


guid: https://odysee.com/Osmanonceasefire:7b5179b8ee6add650e4e3603c04468e737f0c27c
title: Lebanese journalist Marwa Osman on the ceasefire, Resistance achievements, and more
author: ;Eva K Bartlett
link: https://odysee.com/Osmanonceasefire:7b5179b8ee6add650e4e3603c04468e737f0c27c
hash: M�+��2�� ��@ �
content:
<p><img src="https://thumbs.odycdn.com/934aadab72ab595d1473456b48d546a5.webp" width="480" alt="thumbnail" title="Lebanese journalist Marwa Osman on the ceasefire, Resistance achievements, and more"></p>I spoke last night with courageous Marwa, who had just returned from visiting her village in southern Lebanon. <br><br>If you aren’t familiar with Marwa, I highly recommend following her:<br><br>https://x.com/Marwa__Osman<br><br>https://t.me/Marwa_OsmanLB<br><br>*We were going to do video, but the connection was weak &amp; visual skippy, so I’ve made it audio only.<br><br><br><br>Related Links:<br><br>-nature of missiles being used<br>https://x.com/Marwa__Osman/status/1860157559430115666<br><br>-Statement from the Islamic Resistance Operations Room: The Islamic Resistance Operations Room announces that one of the sensitive military targets struck on November 18, 2024, in the city of Tel Aviv was the residence of the Israeli Air Force Commander, Major General Tomer Bar. The operation, carried out with a swarm of advanced attack drones, achieved its objectives with precision. The incident has been met with strict censorship by the Israeli military authorities.<br>https://x.com/Marwa__Osman/status/1861525266847408366<br><br>Zionist Israeli Occupation soldiers from the Golani Brigade have desecrated a church in the southern Lebanese village of Deirmimas. Ironically, this comes after the mayor of Deirmimas refused to allow Hezbollah resistance to operate in his village to confront such aggressors. Perhaps now he understands the cost of that decision. Only the resistance has proven capable of standing against these vile creatures—ask the people of Maaloula and Sqailabyeh in Syria who protected their churches against ISIS, and they will gladly tell you.<br>https://x.com/Marwa__Osman/status/1861168164245017072<br><br>A group of fellow journalists were exposed to gunfire while covering the return of the residents and the withdrawal, and some of them were injured in the town of Khiam by the enemy army that is still present in the town, and they were transferred to Hasbaya Hospital to receive treatment. Thank God you are safe.<br>https://x.com/BilaRakaba/status/1861753041801662663<br><br>https://english.almayadeen.net/news/politics/iof-strike-killing-al-mayadeen--al-manar-press-crew-possible<br><br>https://ingaza.wordpress.com/2012/04/15/the-khiam-prison-is-now-open/<br><br>https://ingaza.wordpress.com/2024/11/03/a-massacre-within-a-massacre-israel-is-exterminating-palestinians-in-northern-gaza-and-killing-palestinian-journalists-reporting-on-it/<br><br>https://ingaza.wordpress.com/2024/04/28/neglect-abuse-torture-the-west-is-ignoring-the-fate-of-palestinians-stuck-in-israeli-jails/<br><br>https://ingaza.wordpress.com/2024/07/03/ukraines-murder-of-30-russian-journalists-met-with-western-indifferenceor-grotesque-gloating/<br><br>https://ingaza.wordpress.com/2014/10/27/media-black-out-on-arab-journalists-and-civilians-beheaded-in-syria-by-western-backed-terrorists/

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/Osmanonceasefire/7b5179b8ee6add650e4e3603c04468e737f0c27c/3a2334.mp4","type":"video/mp4","length":993830314}]}


guid: https://alexkrainer.substack.com/p/are-they-planning-a-false-flag-event
title: Are they planning a false flag event in London?
author: ;Alex Krainer
link: https://alexkrainer.substack.com/p/are-they-planning-a-false-flag-event
hash: �ßv��yDA��p 
content:
<p>Yesterday, as I was finalizing my new report on Great Britain, an update to my August 26 article "<a href="https://alexkrainer.substack.com/p/the-coming-collapse-of-britain?utm_source=publication-search">The Coming Collapse of Britain</a>," YouTube randomly suggested to me a short video by one <strong>Craig Houston</strong> titled, "<strong><a href="https://www.youtube.com/watch?v=muEL_UR5AmE&amp;t=15s">Why are ALL LONDON webcams offline...?</a></strong><a href="https://www.youtube.com/watch?v=muEL_UR5AmE&amp;t=15s">"</a></p><p>I was nearly floored: Mr. Houston looked through hundreds of Webcams across London and could not find a single one that was live. See for yourself <strong><a href="https://londonwebcam.co.uk/">here</a></strong> and <strong><a href="https://london-webcam.co.uk/">here</a></strong>! That's extremely odd: clearly, <em>someone</em> made the decision to switch them all off - they couldn't all have failed randomly.</p><p>One of the webcams over the Westminster bridge displayed the last image it recorded: it was on 2 September 2024 at 16:51, which at least gives us a clue about when the Heart of Darkness went dark to the world. I posted a comment about this in my <a href="https://trendcompass.substack.com/p/are-they-planning-a-false-flag-attack">TrendCompass report</a> yesterday and one of the readers found a working Webcam at Abbey road. Still, that’s one out of hundreds that are still dark.</p><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbca88ce0-3d83-4320-ba68-94cf5e350d6e_1910x3075.png" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2 is-viewable-img"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbca88ce0-3d83-4320-ba68-94cf5e350d6e_1910x3075.png" width="1456" height="2344" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/bca88ce0-3d83-4320-ba68-94cf5e350d6e_1910x3075.png","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":2344,"width":1456,"resizeWidth":null,"bytes":521413,"alt":null,"title":null,"type":"image/png","href":null,"belowTheFold":false,"topImage":true,"internalRedirect":null,"isProcessing":false}' alt="" fetchpriority="high" data-sanitized-class="sizing-normal"></picture><div data-sanitized-class="image-link-expand"><div data-sanitized-class="pencraft pc-display-flex pc-gap-8 pc-reset"><div data-sanitized-class="pencraft pc-reset icon-container restack-image"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></div><div data-sanitized-class="pencraft pc-reset icon-container view-image"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></div></div></div></div></a></figure></div><p>Why someone would decide to cut all the webcams is a mystery, and an ominous one. Mr. Houston didn't offer any explanations, which is understandable given that he lives in Britain where singing, "kung fu fighting," or silently praying on the sidewalk can get you arrested. But where he declined to tread, I'll venture a guess.</p><h2>They’re planning a false flag event to blame on Russia</h2><p>I think it's the only explanation that makes any sense to my mind: they are planning a false-flag terror attack on London which they'll blame on Russia, so that they can trigger an all-out, whole-of-society mobilization by all of the Western powers against Russia. Now, if this seems far-fetched, there are now several important elements that fit coherently with this scenario, starting with the general geopolitical state of things.</p><p>Western empire and the UK in particular, bet heavily on Ukraine and lost. By now the situation has become as undeniable as it is hopeless. But Western powers aren't showing any inclination to cut and run, like they did from Vietnam in March of 1972 or Afghanistan in August 2021.</p><p>Today, the West is facing the world's largest nuclear power with an established escalatory dominance in the region and a highly motivated, well trained, battle hardened and well equipped force, including with new, devastating conventional weaponry that eclipses anything the West has in its depleted arsenals. In spite of that, they are still escalating. The question is, why?</p><h2>In Ukraine, the whole world’s at stake</h2><p>Ukraine is too important for them and the stakes could not be higher. From the imperial cabal's point of view, the prize, in fact, is the whole world. In his paper, “Democratic Ideals and Reality,” <strong>Sir Halford Mackinder</strong> wrote that, “<em>Who rules East Europe commands the Heartland; who rules the Heartland commands the World-island; who rules the World-island controls the world.</em>”</p><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6e21161f-5d42-4afc-a32c-3fc9617ba0f6_711x401.png" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2 is-viewable-img"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6e21161f-5d42-4afc-a32c-3fc9617ba0f6_711x401.png" width="711" height="401" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/6e21161f-5d42-4afc-a32c-3fc9617ba0f6_711x401.png","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":401,"width":711,"resizeWidth":null,"bytes":390595,"alt":null,"title":null,"type":"image/png","href":null,"belowTheFold":true,"topImage":false,"internalRedirect":null,"isProcessing":false}' alt="" loading="lazy" data-sanitized-class="sizing-normal"></picture><div data-sanitized-class="image-link-expand"><div data-sanitized-class="pencraft pc-display-flex pc-gap-8 pc-reset"><div data-sanitized-class="pencraft pc-reset icon-container restack-image"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></div><div data-sanitized-class="pencraft pc-reset icon-container view-image"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></div></div></div></div></a></figure></div><p>By World-island, Mackinder meant the Eurasian landmass. His theoretical framework remained the foundation of foreign policy for British and American governments to this very day, as we learned as recently as 2018 from <strong>Wes Mitchell</strong>, <strong>President Trump</strong>'s Assistant Secretary of State for European and Eurasian Affairs. In a <a href="https://ee.usembassy.gov/strategy-toward-russia/">briefing to the U.S. Senate Foreign Relations Committee</a>, he made it explicit that the “<em>central aim of the Administration’s foreign policy is to defend US domination of Eurasian landmass as the foremost US national security interest and to prepare the nation for this challenge</em>.”</p><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1669f5be-ce61-4085-97e6-7b6ae54d9c96_603x340.png" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2 is-viewable-img"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1669f5be-ce61-4085-97e6-7b6ae54d9c96_603x340.png" width="603" height="340" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/1669f5be-ce61-4085-97e6-7b6ae54d9c96_603x340.png","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":340,"width":603,"resizeWidth":null,"bytes":135771,"alt":null,"title":null,"type":"image/png","href":null,"belowTheFold":true,"topImage":false,"internalRedirect":null,"isProcessing":false}' alt="" loading="lazy" data-sanitized-class="sizing-normal"></picture><div data-sanitized-class="image-link-expand"><div data-sanitized-class="pencraft pc-display-flex pc-gap-8 pc-reset"><div data-sanitized-class="pencraft pc-reset icon-container restack-image"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></div><div data-sanitized-class="pencraft pc-reset icon-container view-image"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></div></div></div></div></a></figure></div><p>Mitchell also said that the Administration was “<em>working with our close ally the UK to form an international coalition for coordinating efforts in this field</em>.” These views are not just idle musings of academics or entertainment for think tanks. The reality on the ground confirms that this is indeed how the imperial cabal regards the outcome of the battle for Ukraine. From the beginning of the war, a few of their lieutenants voiced the entrenched mindset:</p><ul><li><p>''<em>If we lose in Ukraine, the world order we created 80 years ago will crumble" - </em>then US Chief of Staff <strong><a href="https://www.businessinsider.com/milley-russia-ukraine-war-so-goes-international-order-2022-4">Mark Milley,</a></strong><a href="https://www.businessinsider.com/milley-russia-ukraine-war-so-goes-international-order-2022-4"> April 2022</a></p></li><li><p>“If we lose in Ukraine, we will lose the world for decades. Defeat in Ukraine could be the beginning of the end of the golden age of the West." - <strong>Mateusz Morawiecki</strong>, Poland’s Prime Minister in a TV address, April 2023.</p></li><li><p>“If Ukraine loses, world order will be established by our enemies” - former NATO Secretary General (1999-2003) and member of the House of Lords of the British Parliament <strong>George Robertson</strong> in The Telegraph, Jan. 2024</p></li><li><p>"If Ukraine falls it would be a catastrophe for the West, it would be the end of Western hegemony and we will have no one to blame but ourselves." - <strong>Boris Johnson</strong>, in <a href="https://twitter.com/RothLindberg/status/1780869826002448425">a short video message</a>, April 2024</p></li></ul><p>It is unlikely that the empire's vested interests will quietly accept this "catastrophe." This is why they are escalating provocations against Russia, desperately hoping that the Russians will strike at a NATO member nation, creating the pretext to invoke Article 5 of the NATO Treaty and unleash a unified response where the collective West would confront Russia in a whole-of-society effort and hopefully snatch a victory out of the jaws of defeat.</p><p>Sometimes provocations work and they trigger the intended response. An example was the attack on RMS Lusitania in 1915, and another the Pearl Harbour attack, which galvanized the unwilling Americans to join World War II. The most recent one was the crisis that precipitated the current Ukraine war.</p><h2>Create a helpful wave of national indignation!</h2><p>But there are circumstances when a galvanizing event must be orchestrated to detonate the greater conflict, and the list of known examples through history is very long. Here's just a few cases:</p><ul><li><p><strong>The Manchuria, or "Mukden" Incident. I</strong>n September 1931, Japanese troops set off a small explosion on a train track owned by a Japanese company, then blamed it on China in order to justify the invasion of Manchuria.</p></li><li><p><strong>Attack on Gleiwitz Radio station</strong> in September 1939: the Nazis shelled the station and accused Polish troops for the deed, giving Hitler the pretext to launch the invasion of Poland</p></li><li><p><strong>Shelling of Mainila</strong> in November 1939. Soviets shelled the Russian village of Mainila and blamed the Finns, triggering the USSR attack on Finland</p></li><li><p><strong>Operation Northwoods</strong> in March 1962. The operation was shut down by President <strong>Kennedy</strong>, but the US Joint Chiefs of Staff planned a campaign of terror against civilian targets in Miami in order to "create a helpful wave of national indignation” and lead to a US invasion of Cuba.</p></li><li><p><strong>Gulf of Tonkin Incident</strong> in August 1964. Two US destroyers stationed in the Gulf of Tonkin radioed that they had been targeted by the North Vietnamese forces, triggering US Congress to pass the "Gulf of Tonkin Resolution" and authorize President <strong>Johnson </strong>to go "all in" in Vietnam.</p></li><li><p><strong>"September 11"</strong> terror attacks in 2001. They helped the Bush 43 administration launch their excellent Global War on Terror and radically reduce civil liberties at home</p></li><li><p><strong>Ghouta Chemical attack</strong> in August 2013. Orchestrated by Western proxy force with the help of the British-led and ISIS-staffed White Helmets, a chemical attack on civilians in Ghouta was blamed on <strong>Bashar Al Assad</strong>'s forces. Had the charge stuck, it would have crossed the "red line" for U.S. and NATO intervention in Syria</p></li></ul><p>The examples are very numerous. A new false flag attack, aimed at triggering World War III against Russia wouldn't be unusual in the context of history. If the population is taken by surprise and the people genuinely believe the official narrative about the attacks, this does invariably create the "helpful waves of national indignation," allowing the country's leaders to wrap themselves in the flag, promise justice at whatever cost, and start moving the pieces irreversibly toward the desired military escalation.</p><div data-attrs='{"url":"https://alexkrainer.substack.com/subscribe?","text":"Subscribe","language":"en"}' data-component-name="SubscribeWidgetToDOM" data-sanitized-class="subscription-widget-wrap-editor"><div data-sanitized-class="subscription-widget show-subscribe"><div data-sanitized-class="preamble"><p data-sanitized-class="cta-caption">Alex Krainer's Substack is a reader-supported publication. To receive new posts, consider becoming a free or paid subscriber.</p></div><div data-sanitized-class="fake-input-wrapper"><div data-sanitized-class="fake-input"></div><div data-sanitized-class="fake-button"></div></div></div></div><p>I believe that this is the reason why Western powers are encouraging Ukraine to strike into Russia with their missiles, even though there is almost nothing to be gained. Such escalation only makes them directly involved as belligerents in the conflict. This is why incredibly, the U.S. is suddenly discussing <a href="https://news.antiwar.com/2024/11/22/report-us-and-european-officials-discussed-giving-ukraine-nuclear-weapons/">providing Ukraine with nuclear Weapons</a>. They may hope that Russia will respond impulsively, but they know that Vladimir Putin almost certainly won't take the bait. That's where the false flag comes in, probably in the shape of the detonation of a nuclear weapon in London.</p><p>I can't imagine how this could be done. There should be a very rigorous custody control chain with every warhead warehoused in any Western power. But if such weapons were given to Ukraine, that's where the custody chain would end. From there, nuclear devices could be free to roam and drift back into the Heart of Darkness to serve their false flag purposes, perhaps on special CIA or MI6 flights, or perhaps in ordinary shipping containers.</p><p>Suppose if such a device were detonated from a shipping container on a ship, a train or a truck, some Webcam might catch the event. But if all the Webcams were dark, the news – which will have their stories scripted beforehand – can report that it was a Russian missile, and it would be very unlikely that anybody could ever prove otherwise. If such images ever did surface, they'd almost certainly be few and they could be quickly traced and removed from circulation.</p><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce2a6875-fcfc-4750-ad67-71f987e9869b_711x401.png" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2 is-viewable-img"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce2a6875-fcfc-4750-ad67-71f987e9869b_711x401.png" width="711" height="401" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/ce2a6875-fcfc-4750-ad67-71f987e9869b_711x401.png","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":401,"width":711,"resizeWidth":null,"bytes":428206,"alt":null,"title":null,"type":"image/png","href":null,"belowTheFold":true,"topImage":false,"internalRedirect":null,"isProcessing":false}' alt="" loading="lazy" data-sanitized-class="sizing-normal"></picture><div data-sanitized-class="image-link-expand"><div data-sanitized-class="pencraft pc-display-flex pc-gap-8 pc-reset"><div data-sanitized-class="pencraft pc-reset icon-container restack-image"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></div><div data-sanitized-class="pencraft pc-reset icon-container view-image"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></div></div></div></div></a><figcaption data-sanitized-class="image-caption">That time the actors read out their lines out of sequence, revealing that the news were scripted in advance of events.</figcaption></figure></div><p>Switching off all Webcams in London can’t be a random event. It requires an explanation. Mine is a guess, but if there's a different coherent explanation for why all of London's Webcams went dark in early September, I can't even begin to imagine it.</p><h2>It’s time to be brave…</h2><p>Today is Thanksgiving and it almost pains me to share these dark musings. For one thing, I could be wrong - that much is obvious. And then it's a downer – it’s nothing to be thankful for. But if I happen to be right... The one way false flag events can fail is if the public sees through them.</p><p>False flag planners must ambush the people and shock them from the clear blue skies. A spectacular event like 9/11 will have a powerful impact on people's emotions and in that moment they'll be susceptible to deceptive narratives. That "helpful wave of indignation" will materialize. But if the public is forewarned and expects that a false flag <em>might</em> take place, they might suspect that it was "an inside job," and the attack could blow back into the conspirators' faces. I have therefore decided to take risk of ruining my American readers' long weekend and to also risk embarrassing myself.</p><p>In the thick of the Covid 19 pandemic, <strong>Dr. Mike Yeadon</strong> - one of the true experts who saw through the hoax and did not fear to speak out about it, said that this is the time to be brave. He wasn't saying that we should go out and tackle police officers or charge against tanks with Molotov cocktails. He was talking about taking the risk of being wrong, of embarrassing oneself. It is easier and safer to be silent about all this.</p><p>But we really do need to be brave and speak out like our children's future depends on it. <strong>Alex Jones</strong> famously predicted the 9/11 terror attacks quite clearly on 25 July 2001, but back then, his warning seemed so utterly preposterous that few ventured to share Alex's bombshell. Such reticence is misplaced. If he was wrong, so what? If I'm wrong today, nothing happens. If I'm right however, this information could change history.</p><h2>Happy Thanksgiving</h2><p>I'm not an American citizen, but my children are, so I'll allow myself to do the American thing today and express my profound gratitude for all the subscribers who read these reports. Thank you and Happy Thanksgiving!</p><p data-attrs='{"url":"https://alexkrainer.substack.com/p/are-they-planning-a-false-flag-event?utm_source=substack&amp;utm_medium=email&amp;utm_content=share&amp;action=share","text":"Share","action":null,"class":null}' data-component-name="ButtonCreateButton" data-sanitized-class="button-wrapper"><a href="https://alexkrainer.substack.com/p/are-they-planning-a-false-flag-event?utm_source=substack&amp;utm_medium=email&amp;utm_content=share&amp;action=share" data-sanitized-class="button primary"><span>Share</span></a></p><p><strong><a href="http://linkedin.com/in/alex-sasha-krainer-0b74ab1a">Alex Krainer</a> – <a href="https://twitter.com/NakedHedgie">@NakedHedgie</a></strong> is the creator of <strong><a href="https://isystem-tf.com/">I-System Trend Following</a></strong> and publisher of daily <strong><a href="https://isystem-tf.com/trendcompass/">TrendCompass</a></strong> investor reports which cover over 200 financial and commodities markets. One-month test drive is always free of charge, <strong>no jumping through hoops to cancel</strong>. To start your trial subscription, drop us an email at <a href="mailto:TrendCompass@ISystem-TF.com">TrendCompass@ISystem-TF.com</a></p><blockquote><h4>NEW: Check out <a href="https://trendcompass.substack.com/">TrendCompass on Substack</a>!</h4></blockquote><p>For<strong> <a href="https://isystem-tf.com/solutions/u-s-investors/">US investors</a></strong>, we propose a trend-driven inflation/recession resilient portfolio covering a basket of 30+ financial and commodities markets. Further information is at <a href="https://isystem-tf.com/solutions/u-s-investors/">link</a>.</p>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/152313545/05b80251435144e9009ba3356d550b88.mp3","type":"audio/mpeg","length":0}]}


guid: https://htmhell.dev/adventcalendar/2024/1/
title: A link on a logo in the header, what should the alt-text be?
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/1/
hash: ��*�B���m�'�k
attributes: {"enclosures":[]}
content:
by Rian Rietveld<br><p>It's a common pattern to use a logo in the header as a link to the homepage.<br>
But what should be the alt-text of that image?<br>
"the site name" or "homepage" or "logo" or "IMG_123"? Does it even matter?</p>
<p>Fun fact: the alt text of the image inside a link, will be added to the link text.</p>
<p>The problem with linking a logo is that it serves 2 purposes:</p>
<ul>
<li>a logo, that tells you which site you are visiting;</li>
<li>a link, that leads to the homepage.</li>
</ul>
<p>So add both that info in the alt text. Explain what's on the image and where the link leads to: "Site name logo, to the homepage".</p>
<p><strong>Note</strong>: Start the alt text with the visible text, then the link will be easier to target for people using voice recognition software.</p>
<p>Let's take as example the logo of my home town Leidschendam-Voorburg.</p>
<p>In code (simplified):</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br>  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Leidschendam-Voorburg logo, to the homepage<span data-sanitized-class="token punctuation">"</span></span> </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>logo-lv.svg<span data-sanitized-class="token punctuation">"</span></span> </span><br>  <span data-sanitized-class="token punctuation">/&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Generated HTML:</p>
<a href="https://www.lv.nl/en">
  <img alt="Leidschendam-Voorburg logo, to the homepage" src="https://htmhell.dev/adventcalendar/2024/1/logo-lv.svg" width="300" height="76" loading="lazy">
</a>
<p>VoiceOver in Safari will announce this as:<br>
"Link, image, Leidschendam-Voorburg logo, to the homepage".<br>
<img alt="Screenshot of this VoiceOver output." src="https://htmhell.dev/adventcalendar/2024/1/voice-over.png" width="432" height="133" loading="lazy"></p>
<p>All info is there.</p>
<p>There is an advantage of using the alt text instead of an aria-label solution. When the connection is slow, the alt text will show up before the image does and already informs all users of the site name and link destination. It's quite robust.</p>
<h2 data-sanitized-id="discussion">Discussion</h2>
<h3 data-sanitized-id="do-i-need-the-word-logo?-isnt-that-redundant-like-the-word-image-or-picture?">Do I need the word logo? Isn't that redundant, like the word image or picture?</h3>
<p>Yes, in this case the fact that this is a logo tells important info.</p>
<p>Not only for blind users, but for all screenreader users. If you are visually impaired but not totally blind, you may see the image vaguely. With the addition of the word logo, you also know what the image is.</p>
<p>The site name is required, but the logo gives extra context.</p>
<h3 data-sanitized-id="isnt-this-a-violation-of-253-label-in-name?">Isn't this a violation of <a href="https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1&amp;showtechniques=253#label-in-name">2.5.3 Label in Name</a>?</h3>
<p>No, the visible name is in the alt text, which becomes the accessible name of the link. Adding extra context to the link is common practice.</p>
<p>Compare this with the notorious "Read more" link in a card. A common pattern is to use a sr-only CSS class (or equivalent) with additional text:<br>
<code>&lt;a href="url"&gt;Read more&lt;span class="sr-only"&gt; about cute kitten&lt;/span&gt;&lt;/a&gt;</code> .</p>
<ul>
<li>You see Read more.</li>
<li>You hear Read more about cute kitten.</li>
</ul>
<p>In our case:</p>
<ul>
<li>You see the site name and logo; the visual position tells the link destination.</li>
<li>You hear the site name, the fact it's a logo and the link destination.</li>
</ul>
<p>The whole visible text should be in the accessible name, but extra information, like the meaning of the image and link destination can be added for context. That way the <a href="https://www.w3.org/WAI/WCAG22/quickref/#link-purpose-in-context">purpose of the link</a> is explained.</p>
<h3 data-sanitized-id="why-didnt-you-use-an-aria-label?">Why didn't you use an aria-label?</h3>
<p>Of course there are other and also valid solutions. By using plain simple HTML I want to honor the <a href="https://www.w3.org/TR/using-aria/#rule1">first rule of ARIA</a>:</p>
<blockquote>
<p>If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.</p>
</blockquote>
<p>Happy Holidays!</p>


guid: https://thechainedmuse.substack.com/p/new-lyre-podcast-31-earning-our-chains
title: New Lyre Podcast #31: Earning Our Chains
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/new-lyre-podcast-31-earning-our-chains
hash: � M*�޹���J �Қ
content:
<p>In this latest discussion with poet D.B. Jonas, we explore poetics, craft, the mystery of art and works from his first collection, <em>Tarantula Season and Other Poems.</em></p><p data-attrs='{"url":"https://thechainedmuse.substack.com/subscribe?","text":"Subscribe now","action":null,"class":null}' data-component-name="ButtonCreateButton" data-sanitized-class="button-wrapper"><a href="https://thechainedmuse.substack.com/subscribe?" data-sanitized-class="button primary"><span>Subscribe now</span></a></p><p><em><strong>DB Jonas</strong> is an orchardist living in the Sangre de Cristo mountains of northern New Mexico. His work has appeared widely in journals throughout the US, UK, Europe and Israel. His first collection is titled <a href="https://www.amazon.com/Tarantula-Season-Other-Poems-Jonas/dp/B0CN3WKPRZ/ref=tmm_pap_swatch_0?_encoding=UTF8&amp;dib_tag=se&amp;dib=eyJ2IjoiMSJ9.6wLHhvLH9jnyYYLGK-16rgCHvPvpCqkEwBan2sIlmUmcCiD3rML_5Ser2r-3_1nCimt9fkAOOKerDP2a-q2nHg.bLzH93b_yWUmA50sczpSFKu9GHFccTo0DvzJTKpMyXI&amp;qid=1712761410&amp;sr=1-1">Tarantula Season and Other Poems</a>.</em></p><div data-attrs='{"nodeId":"0be1277e-11fb-4095-b0a8-47fe62357d4e","caption":"Featured in our New Lyre Winter 2024 issue. All paid subscribers get instance access to all New Lyre online content and archives. Individual copies can be purchased at anytime.","size":"lg","isEditorNode":true,"title":"Wolverine, Some Movies Work &amp; Other Poetry","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-22T19:29:20.844Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F51220bbe-ebe6-446c-86aa-12e0a6beb0ea_512x512.webp","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/wolverine-some-movies-work-and-other","section_name":null,"id":138981938,"type":"newsletter","reaction_count":1,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"81eda6b1-e363-4a55-bafa-6d986662b962","caption":"Featured in our New Lyre Winter 2024 issue.","size":"lg","isEditorNode":true,"title":"Some Movies Work","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-22T19:28:17.994Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1a73942c-6ac0-40ee-8d01-3d94b83d37ca_1024x1024.webp","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/some-movies-work","section_name":"Poetry Out Loud","id":139083091,"type":"newsletter","reaction_count":0,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"c5c09b1d-c1a8-41a4-8e37-e62e3a058c80","caption":"These pieces both appear in D.B. Jonas’ collection Tarantula Season and Other Poems","size":"lg","isEditorNode":true,"title":"Angel and Other Poetry","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-04-10T01:51:40.405Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fcb0771a6-a7dd-4401-8d33-b31d6f1cddfd_1280x720.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/angel-and-other-poetry","section_name":null,"id":143436598,"type":"newsletter","reaction_count":2,"comment_count":2,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"c9d8ab18-4d35-4a20-8b82-1a9f0470aeea","caption":"Paid subscribers get instance access to all posts and recordings on The Chained Muse. Renaissance Patrons receive full access to both The Chained Muse and Age of Muses, along with our entire PDF archive. Additionally, Renaissance Patrons receive to complimentary hard copies of our magazine (we’ll contact you for mailing).","size":"lg","isEditorNode":true,"title":"Leaving Babylon &amp; Twilight of the Idols","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-22T08:17:21.985Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F96e391bc-3f58-4239-9248-70959eca61c2_4000x3000.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/leaving-babylon-and-twilight-of-the","section_name":null,"id":138979735,"type":"newsletter","reaction_count":0,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"534055ba-b02e-4f8a-8e1e-bcd6266febc4","caption":"Featured in New Lyre Winter 2024","size":"lg","isEditorNode":true,"title":"Allowing the Poets into the Republic: Revisiting Plato’s War Against Public Opinion","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2023-11-22T07:24:57.001Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdbabac9f-c82d-4bb5-ae47-51d59a817177_800x849.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/allowing-the-poets-into-the-republic","section_name":null,"id":138984972,"type":"newsletter","reaction_count":5,"comment_count":3,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/152418765/2f2eab3a8d9e407d368348a690b2723b.mp3","type":"audio/mpeg","length":0}]}


guid: https://htmhell.dev/adventcalendar/2024/2/
title: Starting off right: Where autofocus shines
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/2/
hash: �냓'��cT�Y܃�,|
attributes: {"enclosures":[]}
content:
by Kilian Valkhof<br><p>Focus is where the user is on your website. It's what makes it possible to navigate your site with the keyboard or other assistive technologies, and it's how a browser knows which form element you're typing in. It's vital to get right if you want to build good websites.</p>
<p>Whenever you're dealing with code that can “steal” focus you have to be aware of how that affects your visitor. So it's not strange that many folks will tell you to leave focus alone, to stay away from <code>tabindex</code> and <code>autofocus</code>.</p>
<p>All of that advice is good advice: you <em>should</em> be careful when moving the focus away from where it would normally be and where the user would expect it to be, or you'll quickly find yourself in a world of accessibility issues.</p>
<p>But if you start off on the right foot, managing focus is a delightful HTML detail that makes your site a joy to use.</p>
<h2 data-sanitized-id="autofocus">Autofocus</h2>
<p>The <code>autofocus</code> attribute can be added to any element to make it <strong>auto</strong>matically <strong>focus</strong>ed on page load, skipping over any other elements that might have been focused before. Any element that can be focusable can also have <code>autofocus</code> applied to it, like buttons, links, and form elements.</p>
<p>As mentioned above, you'll rarely want to use <code>autofocus</code>. Messing with people's focus usually doesn't make them want to use your website more. It will probably make them want to use it less, so don't autofocus your purchase button or search field.</p>
<p>But there's a place where <code>autofocus</code> shines: On single-purpose pages containing forms.</p>
<p>...which is a bit of an obtuse way to say “login pages”, “signup pages”, “password reset pages” and “Two-factor authentication (2FA) pages”, you get the idea.</p>
<h2 data-sanitized-id="adding-autofocus">Adding Autofocus</h2>
<p>Your login page has one purpose: to get the user to log in.</p>
<p>The user has one goal: to log in.</p>
<p>So why not make it as easy as possible for them?</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>form</span> <span data-sanitized-class="token attr-name">method</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>post<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>username<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Username<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>username<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>text<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">autofocus</span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span> <span data-sanitized-class="token attr-name">for</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>password<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>password<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>password<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>password<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Add autofocus to the first field and your visitor can start typing as soon as the page loads. No need to click or tab or search for forms on the page.</p>
<p>If the user uses assistive technology, it will announce the label and the field, and then announce that the field is focused.</p>
<p>Similarly, your password reset page (single field) and signup page (single purpose) will have the same structure and will likewise benefit from having the first field focused.</p>
<p>If your login page is followed by a 2fa page, then that <code>autofocus</code> is <del aria-hidden="true">even more useful</del> <ins>vital</ins>.</p>
<p>Few things are as "throw pc out of the window"-frustrating as frantically typing in that 2fa code as the last few seconds tick away, only to find the field wasn't focused. And now you have to do it all over again.</p>
<p>Argh!</p>
<p>Some things just get to me.</p>
<h3 data-sanitized-id="when-not-to-use-autofocus-on-single-purpose-pages">When not to use autofocus on single-purpose pages</h3>
<p>Even if you have a page with a single purpose, you might not want to add autofocus.</p>
<p>If you have a login form but people can also use social logins (Google, GitHub, and the like) and you don't know which one they'll use don't add an autofocus.</p>
<p>Instead, keep track of what they use to log in. As soon as you know which one they're using you can store that in a cookie (or localStorage) and focus on the field or button they need to interact with the next time they visit.</p>
<h2 data-sanitized-id="conclusion">Conclusion</h2>
<p>So let's get back to the point: <code>autofocus</code> is a great way to make your forms more user-friendly, as long as you use it in the right place.</p>
<p>Are you building a page that has:</p>
<ul>
<li>A single purpose</li>
<li>A single form</li>
<li>No other choices available</li>
</ul>
<p>Then <code>autofocus</code> is your and your visitor's friend.</p>
<p>So go ahead and use it on your login pages, your signup pages, your password reset pages, and your 2fa pages. Your users will thank you for it.</p>


guid: https://odysee.com/tish-talks-with-matt-ehret-unravelling:db510b76f6cefa90fc5721f1d228ce4c9ee4cad8
title: Tish Talks with Matt Ehret : Unravelling the Iran enigma and roots of Russian's war with Ukraine
author: ;Canadian Patriot Press
link: https://odysee.com/tish-talks-with-matt-ehret-unravelling:db510b76f6cefa90fc5721f1d228ce4c9ee4cad8
hash: ���Ԑ%�&�+�o�H
content:
<p><img src="https://thumbnails.lbry.com/kosjcXmoMFY" width="480" alt="thumbnail" title="Tish Talks with Matt Ehret : Unravelling the Iran enigma and roots of Russian's war with Ukraine"></p>November 23, 2024<br>**********************************************<br>You can find more about Tish’s work at:<br>Thrive With Tish: https://www.tishconlin.com/<br>Bitchute: https://www.bitchute.com/channel/GkrHrvSpkU11/<br>Rumble: https://rumble.com/user/ThriveWithTish<br><br>**********************************************<br>Get Science Unshackled here<br>https://matthewehret.substack.com/p/my-new-book-has-now-hit-the-press<br><br>Matt and Cynthia's books:<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>Watch The Hidden Hand Behind UFOs series here:<br>https://canadianpatriot.org/2023/11/01/the-hidden-hand-behind-ufos-episode-1-lifting-the-esoteric-veil/<br><br>Support the Canadian Patriot Review in the following ways:<br><br>1) Make a donation to the Canadian Patriot<br>https://www.patreon.com/canadianpatriot<br>https://canadianpatriot.org/support-us/<br><br>2) Subscribe to Matt and Cynthia's Substack<br>https://matthewehret.substack.com/<br>https://cynthiachung.substack.com/<br><br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>4) Subscribe to our Telegram Channels<br>https://t.me/CanadianPatriotPress<br><br>Since it is likely just a matter of time before this Youtube channel (https://www.youtube.com/@canadianpatriotpress3573) gets suspended again or taken down entirely, check out our alternative platforms:<br><br>On Rumble<br>https://rumble.com/user/MattEhret<br><br>On Bitchute:<br>https://www.bitchute.com/channel/FPD8fbk6o541/<br><br>On Odysee<br>https://odysee.com/@canadianpatriotpress3573:4<br><br>On Soundcloud:<br>https://soundcloud.com/mattehret<br>...<br>https://www.youtube.com/watch?v=kosjcXmoMFY

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/tish-talks-with-matt-ehret-unravelling/db510b76f6cefa90fc5721f1d228ce4c9ee4cad8/84cc17.mp4","type":"video/mp4","length":610976139}]}


guid: https://odysee.com/peace-roundtable-7-introducing-the:fc148197a46c4f0de558431d5ccd696e245fa45b
title: Peace Roundtable 7: Introducing The Academy for International Cooperation
author: ;Rising Tide Foundation
link: https://odysee.com/peace-roundtable-7-introducing-the:fc148197a46c4f0de558431d5ccd696e245fa45b
hash: ���U��r��i��`�
content:
<p><img src="https://thumbnails.lbry.com/z9idbvfzdFA" width="480" alt="thumbnail" title="Peace Roundtable 7: Introducing The Academy for International Cooperation"></p>In this 7th Peace Roundtable, Dr. Edward Lozansky, Dr. John Hipsley and Matt Ehret showcase the new Academy for International Cooperation, which will serve as a sub-project of the Rising Tide Foundation and will provide geopolitical insights into projects needed to bring about a healthy new paradigm for humanity. <br><br>Listen to Ed Lozansky’s recent interview with Todd Wood, who runs the US-Russia Cross Talk in the Washington Times: Euro Bytes-Ed Lozansky Direct From Moscow-Founder, President Of American University In Moscow-WWIII?<br>https://creativedestructionmedia.com/video/2024/11/23/live-sunday-1pm-est-euro-bytes-ed-lozansky-direct-from-moscow-founder-president-of-american-university-in-moscow-wwiii/<br><br>Other articles from Ed Lozansky can be found here:<br>https://www.washingtontimes.com/news/2024/jun/5/how-about-highway-linking-new-york-and-london/<br><br>https://www.washingtontimes.com/news/2024/nov/20/biden-lust-war-russia-ukraine-debacle/<br><br>Support the Rising Tide Foundation in the following ways:<br><br>1) Make a donation <br>https://risingtidefoundation.net/support-the-work/<br>2) Subscribe to Matt and Cynthia's Substack<br>matthewehret.substack.com<br>cynthiachung.substack.com<br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br>4) Follow us on Odyssee here: https://odysee.com/@RisingTideFoundation:b<br><br>and follow us on www.risingtidefoundation.net and t.me/risingtidefoundation<br>...<br>https://www.youtube.com/watch?v=z9idbvfzdFA

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/peace-roundtable-7-introducing-the/fc148197a46c4f0de558431d5ccd696e245fa45b/4e499a.mp4","type":"video/mp4","length":430159498}]}


guid: 6165d5e4ab2c8b5f79b5d82e:6165f805cc4a70035862ada3:674e115c037b5c5f47ba207c
title: Federal research funding reform
author: ;Lisa P
link: https://www.rightsprobe.org/read/federal-research-funding-reform
hash: ��M��@S@����x�!
content:
<p data-sanitized-class=""><span data-sanitized-class="sqsrte-text-color--accent">Professor Bruce Pardy</span> calls for the elimination of federal research funding for universities in his presentation to the <a href="https://www.ourcommons.ca/Committees/en/SRSR/StudyActivity?studyActivityId=12988426" target="_blank">Standing Committee on Science and Research studies</a> (SRSR)—tasked with evaluating whether the criteria used for awarding federal funding on research excellence are still appropriate or whether modifications should be made. </p><p data-sanitized-class="">Prof. Pardy’s [video] presentation is available <a href="https://parlvu.parl.gc.ca/Harmony/en/PowerBrowser/PowerBrowserV2?fk=12998409" target="_blank">via this link</a> at the 17:08:48 mark.</p><p data-sanitized-class=""><span data-sanitized-class="sqsrte-text-color--accent"><em>A transcript of this presentation follows in full:</em></span></p><p data-sanitized-class="">Madam Chair, the members of your committee may be familiar with the Big Bang Theory—not the explosion, the TV sitcom. It’s about four scientist nerds who work at a research university. In one episode they argue with the university president who says to them, “Let me ask you something. What do you think the business of this university is?” “Science?” One of the science nerds replies. “Money!” the president snorts. In Canada, the business of universities isn't just money, it's government money.</p><p data-sanitized-class="">The business of Canadian universities, in large part, is to get their hands on as much government money as they can. They have become chronic welfare recipients like the CBC, dependent on government largesse with no prospect of becoming self-sustaining. These are deep black holes into which gobs of money disappear. </p><p data-sanitized-class="">If you are a young professor today, your university probably doesn't care so much about your work, it cares more about whether you get federal grants. From every grant, universities skim a cool chunk off the top, like 40%. To get the grant, you must pitch research that the granting councils like. Universities have whole departments of administrators dedicated to getting their academics to pitch the research in a way that will please the people holding the purse strings. Federal research money corrupts the intellectual enterprise of universities.</p><p data-sanitized-class="">My academic colleagues and I are among the many, many Canadians feeding at the public trough. The public sector is 40% of this country's economy. That's not sustainable. It's one of the many reasons this country is becoming poor. He who pays the piper calls the tune. Government money always comes with strings; ideological strings, political strings. The way to have politically neutral research is not to have government granting agencies. </p><p data-sanitized-class="">You are studying whether to reform federal research funding; don't reform it. Abolish it. Get rid of it. Universities fall under provincial jurisdiction. Please stop interfering. Please stop taking money from truck drivers and cashiers and giving it to elite institutions. Please stop corrupting the intellectual enterprise. Please stop requiring and funding discrimination against white people, Asian people, and men. Please stop dictating how research is done and by whom. Please get federal money out of the business of Canadian universities.</p><p data-sanitized-class="">Thank you very much.</p><p data-sanitized-class=""><a href="https://parlvu.parl.gc.ca/Harmony/en/PowerBrowser/PowerBrowserV2?fk=12998409" target="_blank">VIEW THE PROCEEDINGS IN FULL HERE</a> [See 17:08:48 for Prof. Pardy, followed by the Q&amp;A]</p><p data-sanitized-class=""><strong>Further Reading</strong></p><p data-sanitized-class=""><a href="https://www.rightsprobe.org/read/at-tmu-medical-school-some-students-are-more-equal-than-others">At TMU Medical School, Some Students Are More Equal Than Others</a></p><p data-sanitized-class=""><a href="https://nationalpost.com/opinion/jordan-peterson-our-rotten-rotting-universities?mc_cid=e9a434652c&amp;mc_eid=UNIQID" target="_blank">Our Rotten, Rotting Universities</a></p><p data-sanitized-class=""><a href="https://www.rightsprobe.org/read/dont-give-campus-censors-more-power-theyll-double-down-on-woke-agenda">Don’t Give Campus Censors More Power — They’ll Double Down on Woke Agenda</a></p>





















  
  



<hr>


  <p data-sanitized-class="">Follow our journey.</p><p data-sanitized-class="">Subscribe to our newsletter: <a href="mailto:rightsprobe@protonmail.com?" target="_blank">rightsprobe@protonmail.com</a></p>

attributes:
{"enclosures":[{"url":"https://images.squarespace-cdn.com/content/v1/6165d5e4ab2c8b5f79b5d82e/1733170850733-TR4TVCLPY7ZM4FJZSEW4/columns-5135499_1280.jpg?format=1500w","title":"Federal research funding reform","type":"image/jpeg","medium":"image","height":812,"width":1280}]}


guid: https://odysee.com/matt-ehret-address-to-uae-verona-summit:d8054a62aecd38d536915659b8eae6ab896028b0
title: Matt Ehret address to UAE Verona Summit: Hopes for a New Paradigm
author: ;Rising Tide Foundation
link: https://odysee.com/matt-ehret-address-to-uae-verona-summit:d8054a62aecd38d536915659b8eae6ab896028b0
hash: '0�>��=�x��
content:
<p><img src="https://thumbnails.lbry.com/RDMTVGdrv9E" width="480" alt="thumbnail" title="Matt Ehret address to UAE Verona Summit: Hopes for a New Paradigm"></p>In this short address to the 17th Verona Eurasian Economic Forum held in the UAE from Dec 5-6, 2024, Matt Ehret delivers his considerations for the world and hopes for an age of cooperation.<br><br>Learn more about the Verona Summit here: https://forumverona.com/ru/<br><br>Support the Rising Tide Foundation in the following ways:<br><br>1) Make a donation <br>https://risingtidefoundation.net/support-the-work/<br>2) Subscribe to Matt and Cynthia's Substack<br>matthewehret.substack.com<br>cynthiachung.substack.com<br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br>4) Follow us on Odyssee here: https://odysee.com/@RisingTideFoundation:b<br><br>and follow us on www.risingtidefoundation.net and t.me/risingtidefoundation<br>...<br>https://www.youtube.com/watch?v=RDMTVGdrv9E

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/matt-ehret-address-to-uae-verona-summit/d8054a62aecd38d536915659b8eae6ab896028b0/034c75.mp4","type":"video/mp4","length":64405010}]}


guid: https://htmhell.dev/adventcalendar/2024/3/
title: Smooth Multi-Page Experiences with Just a Few Lines of CSS
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/3/
hash: ����@�ͻ� cMKy�
attributes: {"enclosures":[]}
content:
by John Allsopp<br><p>A single line of CSS can enable slick multi-page transitions for web applications (and web sites for those who maintain there's a difference), opening up new possibilities for web app architectures, and website experiences. So let’s take a look at <a href="https://www.w3.org/TR/css-view-transitions-1/">View Transitions</a>, why we might want them, and how to get started with just that single line of CSS.</p>
<h2 data-sanitized-id="the-webs-long-legacy-of-native-app-envy">The Web's Long Legacy of Native App Envy</h2>
<p>The launch of the iPhone coincided with (and likely ignited) a resurgence of the web. After years of stagnation under the dominance of Internet Explorer, competition and innovation were rekindled by Safari for Mac and Firefox. The iPhone’s killer feature (hard as it might be to believe now) was the “full Safari” on a mobile device.</p>
<p>The Safari team introduced native CSS features like gradients, rounded corners, web fonts, transitions, animations, and transforms. Slick interactive experiences were now a reality on the web.</p>
<p>Then native iPhone apps arrived—with their smooth, animated state transitions between views, panels and widgets sliding in and out, and satisfying, physics-driven responses to user interactions. The web's traditional multi-page architecture was no match; moving from one page to another was clunky, with screens going blank as new pages loaded over sluggish 3G networks. Rendering engines struggled on 2010-era chips.</p>
<p>The common refrain was that native apps were inherently better than web apps. In terms of UI slickness, it was hard to argue otherwise.</p>
<p>The nadir perhaps came in August 2010, when the then-bible of the technology industry, Wired, proclaimed on its front cover:</p>
<h3 data-sanitized-id="the-web-is-dead-long-live-the-internet">The Web Is Dead. Long Live the Internet</h3>
<blockquote data-sanitized-class="code-label">Two decades after its inception, the World Wide Web has been eclipsed by Skype, Netflix, peer-to-peer, and a quarter-million other apps.</blockquote>
<cite>
<p><a href="https://www.wired.com/2010/08/ff-webrip/">The Web Is Dead. Long Live the Internet</a></p>
</cite>
<p>The problem wasn’t just the lack of engaging transitions. Web apps also lacked access to platform APIs, such as address books, cameras, and Bluetooth—features leveraged by native apps to create viral growth and novel experiences. But the absence of smooth UI transitions certainly didn’t help.</p>
<p>The web survived, but the struggle to match native apps remains. A significant response to this challenge was the Single Page App (SPA) architecture.</p>
<h2 data-sanitized-id="single-page-apps-a-solution-with-costs">Single Page Apps: A Solution with Costs</h2>
<p>SPAs sidestepped the need to download each state as a separate page and the associated clunky transitions by running the entire application in a single page. Now, transitions from one state to the next could be accomplished with CSS transitions and animations. However, SPAs carried their own set of challenges that we still grapple with today.</p>
<p>First, an entire app essentially needed to be downloaded before it could be used. This was acceptable for apps from an app store, but it conflicted with the web’s “instant-on” philosophy. Long load times were particularly detrimental on mobile. This not only presented a UX challenge but also a cost one—mobile data was far from cheap a decade ago, and for many people, it still is expensive. Plus, all that app logic had to be served up potentially many times for every user.</p>
<p>The SPA hydration model (downloading an application shell and then rendering the bulk of the app with JavaScript) put significant burdens on device performance. The web's offline and caching capabilities at the time were poor, often requiring the entire app to be downloaded every time it was used. As we learned over time, SPAs also come with SEO challenges, complex codebases, accessibility issues, and maintenance headaches—all stemming, in part, from trying to emulate the native app experience.</p>
<p>It was not entirely in jest that SPAs have been called a "zero-interest rate phenomenon.”</p>
<h2 data-sanitized-id="a-new-hope-view-transitions">A New Hope: View Transitions</h2>
<p>But now, or very soon, we'll be able to create <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API">multi-page apps with View Transitions</a>. It’s taken well over a decade for the Web platform to respond, but View Transitions, coupled with the experimental <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a>, promise drastically simplified architectures and reduced complexity.</p>
<p>Today, I want to provide a brief overview of what’s coming (and in some cases, already here) and give you the single line of CSS that can add View Transitions to your app or site. As of October 2024, View Transitions are supported in Chrome and Safari’s Technology Preview.</p>
<h2 data-sanitized-id="introducing-view-transitions">Introducing View Transitions</h2>
<p>The View Transition API enables:</p>
<ul>
<li>Animating between DOM states in SPAs.</li>
<li>Animating the navigation between documents in multi-page apps (MPAs). Or "web sites" as we used to call then.</li>
</ul>
<p>Now View Transitions <em>can</em> get complex, as they enable sophisticated animations, but let’s start simply.</p>
<h3 data-sanitized-id="a-simple-page-transition">A Simple Page Transition</h3>
<p><video src="https://htmhell.dev/adventcalendar/2024/3/simple-abrupt.mov" controls="controls" preload="none"></video></p>
<p>Take this classic page transition — quick and clean, thanks to the use of CSS's aspect-ratio and the lazy loading of images. But it’s abrupt. Now, let’s add the magic line of CSS to smooth things out:</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token atrule"><span data-sanitized-class="token rule">@view-transition</span></span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">navigation</span><span data-sanitized-class="token punctuation">:</span> auto<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>Alright, I cheated; it’s three lines. But you could write it as a single line (CSS isn't Python afterall)!</p>
<p><video src="https://htmhell.dev/adventcalendar/2024/3/simple-smooth.mov" controls="controls" preload="none"></video></p>
<p>Here it is in action (as supported in Chrome and Safari Tech Preview). The transition is smoother, less abrupt. No JavaScript, libraries, or dependencies—just lovely progressive enhancement. If you want to see it live, visit <a href="https://conffab.com/">Conffab</a>, where this effect is used for every page transition.</p>
<p>There’s no reason not to add this to any website today. And more and more visitors will experience nicer transitions over time, at almost no cost to you as the technology becomes more widely supported.</p>
<h2 data-sanitized-id="adding-dynamic-transitions">Adding Dynamic Transitions</h2>
<p>We can also make transitions more dynamic with just a bit more CSS.</p>
<p>Here's a before and after video. First, how browsers traditionally rendered page transitions</p>
<p><video src="https://htmhell.dev/adventcalendar/2024/3/complex-abrupt.mov" controls="controls" preload="none"></video></p>
<p>And now how Chrome renders this new transition we'll detail below.</p>
<p><video src="https://htmhell.dev/adventcalendar/2024/3/complex-smoth.mov" controls="controls" preload="none"></video></p>
<p>I hope you'll agree it's a much more engaging effect. So, how do we achieve this?</p>
<p>In our main page, where we have links to individual sessions, we have one end of the transition that looks like these:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>speaker-marco-rogers<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">style</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span><span data-sanitized-class="token value css language-css"><span data-sanitized-class="token property">view-transition-name</span><span data-sanitized-class="token punctuation">:</span> marco-rogers-hero</span><span data-sanitized-class="token punctuation">"</span></span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>speaker-maria-farrell<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">style</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span><span data-sanitized-class="token value css language-css"><span data-sanitized-class="token property">view-transition-name</span><span data-sanitized-class="token punctuation">:</span> maria-farrell-hero</span><span data-sanitized-class="token punctuation">"</span></span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Then in the target pages, we have elements like these:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>session-details<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">style</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span><span data-sanitized-class="token value css language-css"><span data-sanitized-class="token property">view-transition-name</span><span data-sanitized-class="token punctuation">:</span> marco-rogers-hero</span><span data-sanitized-class="token punctuation">"</span></span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>session-details<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">style</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span><span data-sanitized-class="token value css language-css"><span data-sanitized-class="token property">view-transition-name</span><span data-sanitized-class="token punctuation">:</span> maria-farrell-hero</span><span data-sanitized-class="token punctuation">"</span></span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Notice how the two ‘ends’ of the transition have matching <code>view-transition-name</code> values. This tells the browser which DOM elements to transition between.</p>
<p>Inline styles aren’t always ideal, but in this case, it was the easiest solution given the existing codebase. You could alternatively apply the style with CSS, if the endpoints can be uniquely selected on a page (since <code>view-transition-name</code> values must be unique on any given page so the browser knows which elements to create a transition from and to).</p>
<p>Currently, this more complex example may have issues in Safari 18's Tech previews, but I’m confident they’ll be resolved soon. Above all, it’s great to see Safari investing in this feature!</p>
<h2 data-sanitized-id="whats-next?">What's Next?</h2>
<p>First, add the simple one-liner to all your sites for smoother page transitions.</p>
<p>Then, explore adding more specific transitions like in the second example. For generated pages, adding <code>view-transition-name</code> attributes may not present much challenge, and depending on your HTML structure, you could add them with just a bit of CSS.</p>
<p>Now, animation effects can cause difficulties for some users, such as those with vestibular disorders, so we should take our user's preferences about motion into account. Doing that for View Transitions is very straightforward. We add</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token atrule"><span data-sanitized-class="token rule">@media</span> <span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token property">prefers-reduced-motion</span><span data-sanitized-class="token punctuation">:</span> reduce<span data-sanitized-class="token punctuation">)</span></span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token atrule"><span data-sanitized-class="token rule">@view-transition</span></span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">navigation</span><span data-sanitized-class="token punctuation">:</span> none<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>Add this after our original <code>@view-transition</code> rule. Now, if the user's preferences are set to reduced motion, no view transitions will be triggered on page navigation.</p>




<p>Finally, take a deeper look at what else the View Transition API can do—this is just the beginning.</p>


hash: �HjRg���s��u�
attributes: {"enclosures":[]}
guid:
/fr/salle-de-nouvelles/ridr-le-canada-se-soustrait-a-sa-responsabilite-envers-les-millions-de-personnes-deplacees-de-force-dont-le-nombre-ne-cesse-de-croitre/

title:
Le Canada se soustrait à sa responsabilité envers les millions de personnes déplacées de force, dont le nombre ne cesse de croître

link:
https://sencanada.ca//fr/salle-de-nouvelles/ridr-le-canada-se-soustrait-a-sa-responsabilite-envers-les-millions-de-personnes-deplacees-de-force-dont-le-nombre-ne-cesse-de-croitre/


guid: https://htmhell.dev/adventcalendar/2024/4/
title: Control the Viewport Resize Behavior on mobile with `interactive-widget`
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/4/
hash: ����[k�x9) �"
attributes: {"enclosures":[]}
content:
by Bramus<br>
<p><a href="https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/viewport-units.md">Viewports units</a> on mobile have been a problem for a long time. Using <code>100vh</code> is most likely not exactly what you initially expected it to be. To fix this, the CSS Working Group came up with more units over time for you to use. The <a href="https://web.dev/blog/viewport-units">dynamic viewport units</a> got introduced, which include <code>svh</code> and <code>lvh</code> which represent 1% of the small and large viewport height respectively.</p>
<figure data-sanitized-class="u-mb">
  <img src="https://htmhell.dev/adventcalendar/2024/4/viewports-01.jpg" width="4001" height="2550" alt="">
  <figcaption>Two mobile browser visualizations positioned next to each other. One has an element sized to be <code>100svh</code> (left, green) and the other <code>100lvh</code> (right, blue). The blue dashed outline represents the Layout Viewport.</figcaption>
</figure>
<p>While these units are <em>fairly</em> interoperable at the time of writing – there are still some interop issues, mainly related to webviews – there is one big gripe that a lot of people have with it: when the Virtual Keyboard gets shown, these units do not take the presence of that Virtual Keyboard into account. Depending on what you are building, you might want to have these units get resized when the Virtual Keyboard is shown.</p>
<h2 data-sanitized-id="the-default-viewport-resize-behavior">The default viewport resize behavior</h2>
<p>When the Virtual Keyboard gets shown on mobile, it gets laid over the content. As a result, the <a href="https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/visual-viewport.md">Visual Viewport</a> gets resized but the <a href="https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/layout-viewport.md">Layout Viewport</a> - the one that is used to position out <code>position: fixed</code> elements – remains unchanged.</p>
<figure data-sanitized-class="u-mb">
  <img src="https://htmhell.dev/adventcalendar/2024/4/viewports-02.jpg" width="4001" height="2550" alt="">
  <figcaption>Visualization of a mobile browser with the virtual keyboard opened. The elements that have a height of <code>100svh</code> and <code>100lvh</code> are not affected by the virtual keyboard’s presence.</figcaption>
</figure>
<p>Because the Layout Viewport does not change, the Viewport Units also don’t change. The only thing that changes is the size of the Visual Viewport, wich represents only the visual part that you see on screen.</p>
<p><em>Note: Prior to Chrome 108, Chrome on Android used to resize the Layout Viewport when the Virtual Keyboard was shown. To align with MobileSafari, Chrome adjusted its behavior to resize only the Visual Viewport instead. Firefox did the same with the release of Firefox 132.</em></p>
<p>What sometimes also happens is that browsers shift the Layout Viewport upwards (or the Visual Viewport downwards depending on how you look at it) in order to keep the focused input at the center of the screen.</p>
<figure data-sanitized-class="u-mb">
  <img src="https://htmhell.dev/adventcalendar/2024/4/viewports-03.jpg" width="4001" height="2550" alt="">
  <figcaption>Visualization of the Visual Viewport <em>(orange dotted outline)</em> on a page with the Virtual Keyboard shown. On the right, the Layout Viewport <em>(blue dashed outline)</em> got shifted up so that the focused input is centered on the screen.</figcaption>
</figure>
<h2 data-sanitized-id="intermezzo">Intermezzo</h2>
<p>If you want to know all the details about Viewports, <a href="https://www.youtube.com/watch?v=xl9R8aTOW_I">check out this HTTP 203 episode</a>:</p>
<div data-sanitized-class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xl9R8aTOW_I?si=5jEnH9fWKF3im80C" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<p>The relevant part for you to know here is that the size of the <a href="https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/icb.md">Initial Containing Block (ICB)</a> is based on the Layout Viewport – more specifically the Small Layout Viewport – and that the Viewport Units are based on the size of the ICB.</p>
<figure data-sanitized-class="u-mb">
  <img src="https://htmhell.dev/adventcalendar/2024/4/viewports-04.jpg" width="4001" height="2550" alt="">
  <figcaption>Visualization of the Initial Containing Block or ICB for short <em>(red dashed outline)</em>. It’s size is taken from the Small Layout Viewport.</figcaption>
</figure>
<p>If you prefer reading, there are also <a href="https://github.com/web-platform-tests/interop-2022-viewport/blob/main/explainers/README.md">a bunch of explainers</a> for you to review.</p>
<h2 data-sanitized-id="the-interactive-widget-keyword-in-the-viewport-meta-tag">The <code>interactive-widget</code> keyword in the viewport meta tag</h2>
<p>To control the viewport's size and shape there is the viewport meta tag. Most likely you have used the following before:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>viewport<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>width=device-width, initial-scale=1<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span></code></pre>
<p>In the <code>content</code> there are two properties listed, each with their own value:</p>
<ul>
<li><code>width</code>: Sizes the width of the ICB. The value <code>device-width</code> indicates that it should be size in relation to the device’s width.</li>
<li><code>initial-scale</code>: Sets the zoom level when the page is first loaded. It is set to <code>1</code>, which is also the default <em>(in most cases)</em>.</li>
</ul>
<p>Other keywords that you might have used before include <code>height</code>, <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>.</p>
<p>A fairly new keyword that you can use in the viewport meta tag is <code>interactive-widget</code>. It allows you to specify how the various viewports should behave when <em>“interative widgets”</em> such as the Virtual Keyboard get shown.</p>
<ul>
<li><code>resizes-visual</code>: Resize only the Visual Viewport but not the Layout Viewport.</li>
<li><code>resizes-content</code>: Resize both the Visual Viewport and Layout Viewport.</li>
<li><code>overlays-content</code>: Do not resize any viewport. This is similar to using the <a href="http://brm.us/virtual-keyboard">Virtual Keyboard API</a> with <code>overlaysContent</code> set to <code>true</code>.</li>
</ul>
<figure data-sanitized-class="u-mb">
  <img src="https://htmhell.dev/adventcalendar/2024/4/viewports-05.jpg" width="4001" height="2550" alt="">
  <figcaption>The impact of the various values for <code>interactive-widget</code>. The orange dotted box is the Visual Viewport. The blue one is the Layout Viewport. Both resize differently depending on the value of <code>interactive-widget</code>.</figcaption>
</figure>
<p>By setting <code>interactive-widget</code> to <code>resizes-content</code>, you can have the Layout Viewport resize. As a result the ICB will also resize, and therefore the Viewport units will also yield different values.</p>
<figure data-sanitized-class="u-mb">
  <img src="https://htmhell.dev/adventcalendar/2024/4/viewports-06.jpg" width="4001" height="2550" alt="">
  <figcaption>Visualization of the impact of setting <code>interactive-widget</code> to <code>resizes-content</code>. When that’s the case and the Virtual Keyboard is shown, the ICB resizes and the Viewport Units get adjusted.</figcaption>
</figure>
<p><code>interactive-widget</code> is supported in Chrome 108+ and Firefox 132+. If you would like to see this become available in WebKit/Safari, please go give <a href="https://github.com/WebKit/standards-positions/issues/65">https://github.com/WebKit/standards-positions/issues/65</a> a thumbs up.</p>
<h2 data-sanitized-id="summary">Summary</h2>
<p>Use the <code>interactive-widget</code> keyword in the viewport meta tag to control the viewport resize behavior when the Virtual Keyboard gets shown. By default the Visual Viewport resizes. To also have the Layout Viewport resize, set the value of <code>interactive-widget</code> to <code>resizes-content</code>.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>viewport<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>width=device-width, initial-scale=1.0, interactive-widget=resizes-content<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>To not resize any of those viewports, set its value to <code>overlays-content</code>.</p>
<p>The <code>interactive-widget</code> keyword is supported in Chrome 108+ and Firefox 132+.</p>
<h2 data-sanitized-id="further-reading">Further Reading</h2>
<ul>
<li><a href="https://web.dev/blog/viewport-units">The large, small, and dynamic viewport units</a></li>
<li><a href="https://github.com/bramus/viewport-resize-behavior/blob/main/explainer.md">Viewport vs Virtual Keyboard Resize Behavior</a></li>
<li><a href="https://developer.chrome.com/blog/viewport-resize-behavior">Prepare for viewport resize behavior changes coming to Chrome on Android</a></li>
<li><a href="https://www.youtube.com/watch?v=xl9R8aTOW_I">It’s Viewports all the way down | HTTP 203</a></li>
</ul>


guid: CCAL-118scal-2024-12-04
title: Senate Calendars, DAILY - Senate Calendars for December 4, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118scal-2024-12-04
hash: 0�=��Ҫ��뮚L�@
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-04/pdf/CCAL-118scal-2024-12-04.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-04/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-04/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-04.zip">ZIP</a>


guid: CCAL-118hcal-2024-12-04
title: House Calendars, DAILY - House Calendars for December 4, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118hcal-2024-12-04
hash: F��E��x��֘X �R
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-04/pdf/CCAL-118hcal-2024-12-04.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-04/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-04/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-04.zip">ZIP</a>


title: La diminution et la dégradation des sols feront grimper les prix alimentaires : sénateur Black
hash: :�n;� ����/�e
attributes: {"enclosures":[]}
guid:
/fr/sencaplus/opinion/la-diminution-et-la-degradation-des-sols-feront-grimper-les-prix-alimentaires-senateur-black/

link:
https://sencanada.ca//fr/sencaplus/opinion/la-diminution-et-la-degradation-des-sols-feront-grimper-les-prix-alimentaires-senateur-black/


guid: https://htmhell.dev/adventcalendar/2024/5/
title: Forced Colors Mode Futility
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/5/
hash: ` �|xjhtҹ��b��
attributes: {"enclosures":[]}
content:
by Matthias Zöchling<br>
<p>Are you aware of <a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">Forced Colors Mode</a>? If not, there are some <a href="https://htmhell.dev/adventcalendar/2024/5/#resources">resources</a> at the end. If so, did you also know that this accessibility feature can be used as an entry-level debugging tool?</p>
<figure><img src="https://htmhell.dev/adventcalendar/2024/5/htmhell-goes-fcm.webp" alt="Comparing HTMHell.dev: Three screenshots taken in Microsoft Edge browser. Although subtle tweaks could be made, overall the site works really well in Forced Colors Mode.">
<figcaption>From left to right: The HTMHell Advent Calendar 2024 in its intended theme, when viewed in Windows 11 contrast theme “Night Sky”, and “Desert”.</figcaption>
</figure>
<p data-icon="ℹ️" data-sanitized-class="highlight"><strong>Note:</strong> I’ve created a <a href="https://codepen.io/cssence/pen/BaXMNyv">CodePen with all the upcoming examples,</a> so you can follow along.</p>
<h2 data-sanitized-id="premise">Premise</h2>
<p>When the forced colors feature is turned on, colors will be replaced with <a href="https://adrianroselli.com/2021/02/whcm-and-system-colors.html#CSS4">CSS System Colors</a>. Elements like buttons and links get special colors assigned, so wherever improper elements are used, things will fall out of place.</p>
<h2 data-sanitized-id="bad-advice">Bad advice</h2>
<p>Okay, surely there’s a way around this, in true HTMHell.dev spirit‽</p>
<p data-icon="⚠️" data-sanitized-class="highlight"><strong>Warning:</strong> Sarcasm ahead! <em>Don’t try this at home!</em></p>
<p>Let’s use a <code>&lt;div&gt;</code> to create a button, and <code>&lt;u&gt;</code> to create a link. By doing the latter, our links are already underlined, but we avoid this pesky menu on right-click that feels out of place in our carefully crafted user interface.<sup><a href="https://htmhell.dev/adventcalendar/2024/5/#fn-1" role="doc-noteref" aria-label="Footnote #1" data-sanitized-id="ref-fn-1">[1]</a></sup></p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>“Button”<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>u</span> <span data-sanitized-class="token attr-name">data-href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://example.com/very-bad<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>“Link”<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>u</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Thanks to the <code>data-href</code> on the link we know where to go. And yes, this means a little JavaScript will be needed to actually go there. Most likely we anyhow have a Single Page Application, so we’ll stay put.</p>
<p>Now all that is left to be done is style our buttons and add color to our links.<sup><a href="https://htmhell.dev/adventcalendar/2024/5/#fn-2" role="doc-noteref" aria-label="Footnote #2" data-sanitized-id="ref-fn-2">[2]</a></sup></p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.button</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">border</span><span data-sanitized-class="token punctuation">:</span> .125rem solid<span data-sanitized-class="token punctuation">;</span> <span data-sanitized-class="token comment">/* etc. */</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">u</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">light-dark</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token function">oklch</span><span data-sanitized-class="token punctuation">(</span>0.43 0.3 264.05<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token function">oklch</span><span data-sanitized-class="token punctuation">(</span>0.69 0.17 281.16<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>All good? Sadly no, I’m sure the accessibility police will soon be all over the place.</p>
<p>Fine, let’s make our elements interactive. For brevity, I’m not gonna talk about all the JavaScript required, but rest assured to make things accessible we’ll need a metric fuckton of it.<sup><a href="https://htmhell.dev/adventcalendar/2024/5/#fn-3" role="doc-noteref" aria-label="Footnote #3" data-sanitized-id="ref-fn-3">[3]</a></sup></p>
<p>To fix the HTML, I asked artifical “intelligence”, and several prompts later I learned that we need to sprinkle some ARIA roles and tabindexes on top.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">tabindex</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>“Button”<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>u</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>link<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">tabindex</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">data-href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://example.com/bad<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>“Link”<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>u</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>We’re good? Again, no, this is where <strong>Forced Colors Mode</strong> comes in. <a href="https://htmhell.dev/adventcalendar/2022/2/">No amount of ARIA</a> turns our elements into their semantic counterparts. As such, they all will be displayed in plain CanvasText color.</p>
<p>Alright, let’s manually add those colors, but inside a media query, so they won’t leak into our regular theme.</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token atrule"><span data-sanitized-class="token rule">@media</span> <span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token property">forced-colors</span><span data-sanitized-class="token punctuation">:</span> active<span data-sanitized-class="token punctuation">)</span></span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token selector">.button</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> ButtonText<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> ButtonFace<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token selector">u</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> LinkText<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>I was about to ask “Is this it?”, but I just realized we need a database to keep track of all the links that have already been clicked, so we can visually indicate them as <code>.visited</code>, ... — I’m gonna stop myself right there.</p>
<h2 data-sanitized-id="good-advice">Good advice</h2>
<p>Enough of the Sisyphean labor. Let’s do the following instead.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Button<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>https://example.com/good<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Link<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>For styling, all you have to do is inherit the font for buttons, which is what your <a href="https://www.joshwcomeau.com/css/custom-css-reset/#six-inherit-fonts-for-form-controls-7">CSS reset</a> might do anyhow for all form controls.</p>
<p>In Forced Colors Mode, things just work, buttons and links will be shown in proper CSS system colors. <strong>Semantics for the win!</strong><sup><a href="https://htmhell.dev/adventcalendar/2024/5/#fn-4" role="doc-noteref" aria-label="Footnote #4" data-sanitized-id="ref-fn-4">[4]</a></sup></p>
<figure><img src="https://htmhell.dev/adventcalendar/2024/5/a-div-is-not-a-button-even-in-fcm.webp" alt="While we eventually can make our fake elements look like the real deal even in Forced Colors Mode, we should avoid all that work and use proper elements instead.">
<figcaption>The <a href="https://codepen.io/cssence/pen/BaXMNyv">accompanying CodePen</a> in “Night Sky” (top) and “Desert” (bottom) contrast theme.</figcaption>
</figure>
<p>So do we have an entry-level debugging tool? Well, unless someone goes all the way like we did in the last step of our bad example (highly unlikely!), in Forced Colors Mode you don’t need to be a developer to recognize real buttons and links. Unless the theme prevents it: Buttons are yellow and regular text is white in the “Night Sky” theme, but in “Desert” the difference is way too subtle. No need to stick to the defaults tough, you can create your own theme instead.</p>
<h2 data-sanitized-id="full-disclosure">Full disclosure</h2>
<p>I didn’t need to write this article, because common sense exists, right? Then again, there’s a reason why HTMHell.dev exists. (<abbr title="By the way">BTW</abbr>, thanks for having me, it’s been an honor to be part of the <a href="https://htmhell.dev/adventcalendar/2024/">2024 Advent Calendar</a> among all those talented people.)</p>
<p>Initially I wrote something else, but it ended up being too long for a calendar entry. <em>The original article</em> is now <a href="https://cssence.com/2024/forced-colors-mode-strategies/">available on my blog</a>. If you are up for <strong>actual Forced Colors Mode advice,</strong> may I suggest you read it, and then consider joining my movement to make December <q cite="https://cssence.com/2024/forced-colors-mode-strategies/">the least colorful time of the year</q>.</p>
<section aria-labelledby="resources">
<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://polypane.app/blog/forced-colors-explained-a-practical-guide/">Forced colors explained: A practical guide</a>, <span>18min read by Kilian Valkhof</span></li>
<li><a href="https://youtu.be/yYGLEy7CiT0">Forced colors and CSS</a>, <span>16min video by Kevin Powell</span></li>
<li><a href="https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/#styling-the-modal-for-forced-colors-mode">Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties</a>, <span>11min read by Eric W. Bailey</span></li>
<li><a href="https://cssence.com/2024/forced-colors-mode-strategies/">Forced Colors Mode Strategies</a>, <span>14min read by yours truly</span></li>
</ul>
</section>
<section aria-labelledby="fns" data-sanitized-class="section">
<h2 data-sanitized-id="fns">Footnotes</h2>
<ol>
<li data-sanitized-id="fn-1">Some even argue underlined links go against an app-like feel, but let’s not go there. <a href="https://htmhell.dev/adventcalendar/2024/5/#ref-fn-1" role="doc-backlink" aria-label="Back to article">↩︎</a></li>
<li data-sanitized-id="fn-2">Look at those CSS functions our Fancy Pants author uses to add color to a link. <a href="https://htmhell.dev/adventcalendar/2024/5/#ref-fn-2" role="doc-backlink" aria-label="Back to article">↩︎</a></li>
<li data-sanitized-id="fn-3">And it’s very likely that we’ll still fail to do so. <a href="https://htmhell.dev/adventcalendar/2024/5/#ref-fn-3" role="doc-backlink" aria-label="Back to article">↩︎</a></li>
<li data-sanitized-id="fn-4">Mmm 🤤, semantics! If you wanna dig deeper, here’s a <a href="https://codepen.io/cssence/pen/RwXmEYN">CodePen with HTML elements</a> (unstyled, and with CSS system colors for reference) for you to view in Forced Colors Mode. Bonus points if you explore the differences between browers. <a href="https://htmhell.dev/adventcalendar/2024/5/#ref-fn-4" role="doc-backlink" aria-label="Back to article">↩︎</a></li>
</ol>
</section>


guid: CCAL-118hcal-2024-12-05
title: House Calendars, DAILY - House Calendars for December 5, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118hcal-2024-12-05
hash: ���m���[�,�(
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-05/pdf/CCAL-118hcal-2024-12-05.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-05/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-05/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-05.zip">ZIP</a>


guid: CCAL-118scal-2024-12-05
title: Senate Calendars, DAILY - Senate Calendars for December 5, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118scal-2024-12-05
hash: s|�_��!L�� .:�
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-05/pdf/CCAL-118scal-2024-12-05.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-05/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-05/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-05.zip">ZIP</a>


guid: https://odysee.com/breaking-history-ep-73-the-syrian:c20d077820a249af70712959149a536888b4bdd7
author: ;Canadian Patriot Press
link: https://odysee.com/breaking-history-ep-73-the-syrian:c20d077820a249af70712959149a536888b4bdd7
hash: �$� �� &��˚1�
title:
Breaking History Ep 73: The Syrian Conflict – Secrets, Oil, and Power Plays (W/ Col. Towner-Watkins)

content:
<p><img src="https://thumbnails.lbry.com/8E3Yzq6zMQE" width="480" alt="thumbnail" title="Breaking History Ep 73: The Syrian Conflict – Secrets, Oil, and Power Plays (W/ Col. Towner-Watkins)"></p>November 27, 2024<br><br>In Episode #73 of Breaking History, host Gordon is joined by Colonel Towner Watkins for a deep dive into the complex history of Syria and its geopolitical significance. From CIA-backed coups to the $2 trillion push to overthrow Assad, this episode uncovers the hidden dynamics behind one of the most contested regions in the Middle East. Explore the roles of global powers, the significance of natural gas pipelines, and the interplay between historical and modern-day strategies of tension. Packed with insightful analysis and lesser-known facts, this episode is essential for anyone seeking to understand the ongoing turmoil in the Middle East. Tune in and discover how history shapes the present!<br><br>Watch Wednesdays at 12:00 PM ET<br>Episode Archives are located at: https://rumble.com/playlists/UGjyoorl4Q8<br><br>**********************************************<br>Gordon’s Twitter (X) handle is: <br> https://twitter.com/GhostofBPH<br><br>**********************************************<br>You can visit the Colonel’s Corner at:<br>https://rumble.com/c/c-4232602<br>https://substack.com/profile/42258058-the-colonels-corner<br>https://twitter.com/ColonelTowner<br>https://truthsocial.com/ColonelWatkins<br><br>**********************************************<br><br>Get Science Unshackled here<br>https://matthewehret.substack.com/p/my-new-book-has-now-hit-the-press<br><br>Matt and Cynthia's books:<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>Watch The Hidden Hand Behind UFOs episode 1 here:<br>https://canadianpatriot.org/2023/11/01/the-hidden-hand-behind-ufos-episode-1-lifting-the-esoteric-veil/<br><br>Watch The Hidden Hand Behind UFOs episode 2 here:<br>https://canadianpatriot.org/2024/02/27/episode-2-of-the-hidden-hand-behind-ufos-has-been-unleashed-h-g-wells-war-of-the-worlds-and-the-dawn-of-a-new-age/<br><br><br>Support the Canadian Patriot Review in the following ways:<br><br>1) Make a donation to the Canadian Patriot<br>https://www.patreon.com/canadianpatriot<br>https://canadianpatriot.org/support-us/<br><br>2) Subscribe to Matt and Cynthia's Substack<br>https://matthewehret.substack.com/<br>https://cynthiachung.substack.com/<br><br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>4) Subscribe to our Telegram Channels<br>https://t.me/CanadianPatriotPress<br><br>Since it is likely just a matter of time before this Youtube channel (https://www.youtube.com/@canadianpatriotpress3573) gets suspended again or taken down entirely, check out our alternative platforms:<br><br>On Rumble<br>https://rumble.com/user/MattEhret<br><br>On Bitchute:<br>https://www.bitchute.com/channel/FPD8fbk6o541/<br><br>On Soundcloud:<br>https://soundcloud.com/mattehret<br>...<br>https://www.youtube.com/watch?v=8E3Yzq6zMQE

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/breaking-history-ep-73-the-syrian/c20d077820a249af70712959149a536888b4bdd7/68d8a8.mp4","type":"video/mp4","length":392036770}]}


title: Enrayer la crise imminente de la résistance aux antimicrobiens : sénateur Ravalia
hash: �AT��%V_��أ��
attributes: {"enclosures":[]}
guid:
/fr/sencaplus/opinion/enrayer-la-crise-imminente-de-la-resistance-aux-antimicrobiens-senateur-ravalia/

link:
https://sencanada.ca//fr/sencaplus/opinion/enrayer-la-crise-imminente-de-la-resistance-aux-antimicrobiens-senateur-ravalia/


guid: 6165d5e4ab2c8b5f79b5d82e:6165f805cc4a70035862ada3:6750fdc22b8616440f239b2b
title: Protect free speech by getting governments out of the way
author: ;Lisa P
link: https://www.rightsprobe.org/read/gtfbgm0bdqk592s4bqxem7tm34tlyx
hash: �.���*���`��Z��
content:
<p data-sanitized-class=""><span data-sanitized-class="sqsrte-text-color--accent">December 4: </span>Testifying to the Standing Committee on Canadian Heritage on the best way to protect freedom of expression (FOE), <span data-sanitized-class="sqsrte-text-color--accent">Queen's law professor Bruce Pardy</span> urged for the government to cease limiting it. This involves defeating Bill C-63 (Online Harms Act), and repealing C-18 (Online News Act), C-11 (Online Streaming Act), and the gender amendments to the Canadian Human Rights Act in the old C-16. Prof. Pardy’s testimony appears below followed by the transcript in full.</p>





















  
  



<hr>


  <p data-sanitized-class=""><span data-sanitized-class="sqsrte-text-color--accent">Bruce Pardy – Opening Statement – Wednesday, 4 December, 2024</span></p><p data-sanitized-class=""><span data-sanitized-class="sqsrte-text-color--accent">Standing Committee on Canadian Heritage (CHPC) #145</span></p><p data-sanitized-class="">Madam Chair, your committee is studying how the government should protect free speech. This is a strange question for you to be studying, because the answer seems obvious - and also because for years the federal government hasbeen doing the opposite.</p><p data-sanitized-class="">Free speech is a right we hold against governments. Free speech means the right to be free from government limits on speech. If governments did nothing, we would have free speech. Governments protect free speech by getting out of the way.</p><p data-sanitized-class="">Therefore, if you want to protect free speech, stop limiting speech. Defeat bill C-63 (Online Harms Act). Repeal C-18 (Online News Act). Repeal C-11 (Online Streaming Act). Repeal the gender amendments to the Canadian Human Rights Act in the old C-16. And the list goes on. If you want to protect free speech, stop limiting speech.</p><p data-sanitized-class="">As Winston Churchill said, “There is nothing government can give to you that it hasn’t taken from you in the first place.”</p><p data-sanitized-class="">We have free speech because we are free people. Speech is free not only if it is beneficial or in the public good; not only if it serves democracy or helps to discover truth in a marketplace of ideas. You have a right to express your thoughts, whatever they are, for the sole reason that your thoughts are yours.</p><blockquote><p data-sanitized-class="">If you are free, you are allowed to hate other people, and you are allowed to say that you do. If you are free, you are allowed to vilify and detest, to discredit, disrespect and discriminate, to speak falsehoods and spread lies. If you are free. </p></blockquote><p data-sanitized-class="">Of course, free speech is not absolute. What are the limits to be imposed upon speech and still call it free? Other people are free too. That means that you can’t coerce them, threaten them with imminent violence or counsel a crime. You can’t defame, you can’t harass, you can’t defraud, and you can’t release private information that you don’t own. These limits make sense because they protect the liberty of other people, the same liberty that provides you with the right to free speech in the first place. But that’s about as far as it goes, if you want to claim to have free speech.</p><p data-sanitized-class="">So by all means, Madam Chair, protect free speech. Do it by getting the government out of the business of supervising speech.</p>





















  
  



<hr>


  <h4><span data-sanitized-class="sqsrte-text-color--accent">A Deeper Dive</span></h4>





















  
  














































  

    
  
    

      

      
        <figure data-sanitized-class="
              sqs-block-image-figure
              intrinsic
            ">
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/6165d5e4ab2c8b5f79b5d82e/9281f899-176a-4afc-9c89-8ab7a428caa9/Monochrome%2BProfessional%2BFashion%2BCompany%2BProfile%2BPresentation%2B169%2B%281%29.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/6165d5e4ab2c8b5f79b5d82e/9281f899-176a-4afc-9c89-8ab7a428caa9/Monochrome%2BProfessional%2BFashion%2BCompany%2BProfile%2BPresentation%2B169%2B%281%29.jpg?format=1000w" width="1920" height="1080" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  


  





  <p data-sanitized-class="">Prof. Pardy’s address to the committee above, once again, highlights the rise of Canada’s administrative state—a warning bell he sounded throughout the pandemic and continues to voice. During his testimony in March 2023 to the National Citizen’s Inquiry on Canada’s COVID-19 response, Prof. Pardy unlocked key concerns the pandemic had revealed, in particular the expansion of the managerial state into every aspect of modern life. Governments now supervise behaviour and speech, mainstream media propagandizes, public schools and universities indoctrinate, and professional regulators require ideological conformity. The chattering classes demonize the ideas upon which their own civilization is based, including the sovereignty of the individual over the group, freedom of speech, and equality of treatment under the law. Where once we celebrated liberties and achievements, people are now fearful, ashamed, dependent, and obedient.</p><p data-sanitized-class=""><a href="https://rumble.com/v2gpz3s-legal-expert-bruce-pardy-testifies-toronto-day-1-national-citizens-inquiry.html" target="_blank">Circle back to this groundbreaking overview of the administrative state and Prof. Pardy’s testimony to the inquiry here</a>.</p>





















  
  



<hr>


  <p data-sanitized-class="">Follow our journey.</p><p data-sanitized-class="">Subscribe to our newsletter: <a href="mailto:rightsprobe@protonmail.com?" target="_blank">rightsprobe@protonmail.com</a></p>





















  
  






  <p data-sanitized-class=""><br><br></p>

attributes:
{"enclosures":[{"url":"https://images.squarespace-cdn.com/content/v1/6165d5e4ab2c8b5f79b5d82e/1733636109736-82UDUL8AUI0PGU4W2VL9/microphone-2775447_1280.jpg?format=1500w","title":"Protect free speech by getting governments out of the way","type":"image/jpeg","medium":"image","height":853,"width":1280}]}


guid: https://htmhell.dev/adventcalendar/2024/6/
title: aria-labelledby = self
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/6/
hash: ��׍���n�e�31QX
attributes: {"enclosures":[]}
content:
by Weston Thayer<br><p>An accessible name is how UI components are identified to assistive tech. Having a good accessible name is important. If not, negative effects may include screen reader users missing out on vital information, voice control users struggling to interact, and any number of other issues with the assistive technologies that rely on it.</p>
<p>By default, accessible name is computed from an element's own contents. That's part of the <a href="https://www.w3.org/TR/accname-1.1/">spec'd algorithm</a> that browsers implement.</p>
<figure data-sanitized-class="u-mb">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/updates<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  Latest updates</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
  <figcaption>A link with the accessible name "Latest updates".</figcaption>
</figure>
<p>There are many ways to change that behavior. The <code>aria-labelledby</code> attribute is one which can be used to point the algorithm somewhere else in the DOM. Or not.</p>
<figure data-sanitized-class="u-mb">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h2</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>heading<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Latest updates<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/updates<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>heading<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span>…<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
  <figcaption>A link with the accessible name "Latest updates".</figcaption>
</figure>
<p>What happens if <code>aria-labelledby</code> points within?</p>
<h2 data-sanitized-id="purgatory">Purgatory</h2>
<figure data-sanitized-class="u-mb">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/updates<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>contents<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>contents<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Latest updates<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
  <figcaption>A link, still with the accessible name "Latest updates".</figcaption>
</figure>
<h2 data-sanitized-id="testing">Testing</h2>
<p>The above snippet should be equivalent to <code>&lt;a href="/updates"&gt;&lt;span&gt;Latest updates&lt;/span&gt;&lt;/a&gt;</code>. Are there any issues besides being unnecessarily verbose code (and breaking the <a href="https://www.w3.org/TR/using-aria/#rule1">first rule of ARIA</a>)?</p>
<p>Technically, the <a href="https://www.w3.org/TR/wai-aria/#aria-labelledby">WAI-ARIA spec</a> does not limit the DOM location of the element you point to.</p>
<p>I also checked how each major browser computes the element's accessible name via their developer tools (for example, <a href="https://developer.chrome.com/docs/devtools/accessibility/reference#computed">Chrome's DevTools</a>):</p>
<ul>
<li>Chrome (129) ✅</li>
<li>Edge (129) ✅</li>
<li>Firefox (131) ✅</li>
<li>Safari (18.1) ✅</li>
</ul>
<p>I did only test those browsers on macOS, and I didn't test with different assistive technologies. But I trust that if the browser's tools show an accessible name of <code>"Latest updates"</code>, screen readers and voice control will have that value too.</p>
<h2 data-sanitized-id="judgement">Judgement</h2>
<p>As is, I'd feel like I was nitpicking by requesting the unnecessary <code>aria-labelledby</code> to be removed.</p>
<p>But imagine this is in a large codebase with many developers working on it. Consider how easy it would be for someone tasked with adding a notification badge to the link, for example, to miss the implications of <code>aria-labelledby</code>:</p>
<figure data-sanitized-class="u-mb">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/updates<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>contents<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>contents<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Latest updates<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>notification-badge<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>{{ updates.length }}<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
  <figcaption>A link, still with the accessible name "Latest updates".</figcaption>
</figure>
<p>Now the count of updates is <strong>not</strong> part of the link's accessible name. Screen readers will not announce it. macOS Voice Control users will not be able to say "click Latest updates three" (you would need to omit the "three", macOS Voice Control requires you to say the accessible name exactly). <a href="https://support.apple.com/guide/mac-help/view-a-larger-version-text-reading-typing-mchlb203bc78/mac">macOS Hover Text</a> will miss the count as well.</p>
<img alt="The mouse hovering the link with 'Latest updates' in black and underlined, with the number 3 on a red circle to the right. macOS Hover Text's overlay is below with only 'Latest updates' in large type, blue and underlined." src="https://htmhell.dev/adventcalendar/2024/6/hovertext.png" width="872" height="252" loading="lazy">
<p>And it's a failure of <a href="https://www.w3.org/TR/WCAG22/#label-in-name">WCAG SC 2.5.3 Label in Name</a> to boot.</p>
<p>So put this link on a heavenly path and drop the <code>aria-labelledby</code>! Your future self will thank you.</p>
<h2 data-sanitized-id="caveats">Caveats</h2>
<p>There are good reasons to point <code>aria-labelledby</code> within an element. For example, to <a href="https://www.w3.org/TR/wai-aria/#example-27">give an accessible name to a region</a> based off of the heading within it.</p>
<figure data-sanitized-class="u-mb">
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>dialog</span> <span data-sanitized-class="token attr-name">aria-labelledby</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>heading<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span> <span data-sanitized-class="token attr-name">id</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>heading<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Save changes?<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Do you want to save your work?<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span>Cancel<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span>Save<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
  <figcaption>A dialog with the accessible name "Save changes?".</figcaption>
</figure>
<p>I tend to only be wary when the element with <code>aria-labelledby</code> is an interactive control (link, button, etc).</p>


guid: CCAL-118scal-2024-12-09
title: Senate Calendars, DAILY - Senate Calendars for December 9, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118scal-2024-12-09
hash: s���D}��. Ỵ`��
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-09/pdf/CCAL-118scal-2024-12-09.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-09/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-09/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-09.zip">ZIP</a>


guid: CCAL-118hcal-2024-12-06
title: House Calendars, DAILY - House Calendars for December 6, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118hcal-2024-12-06
hash: !�c� 9�b[.;�m�
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-06/pdf/CCAL-118hcal-2024-12-06.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-06/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-06/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-06.zip">ZIP</a>


title: « Tu ne le croiras jamais! » Le sénateur Greene se remémore son parcours au Sénat
hash: �Td�Nj 9A�|:LІ
attributes: {"enclosures":[]}
guid:
/fr/sencaplus/personnalites/tu-ne-le-croiras-jamais-le-senateur-greene-se-rememore-son-parcours-au-senat/

link:
https://sencanada.ca//fr/sencaplus/personnalites/tu-ne-le-croiras-jamais-le-senateur-greene-se-rememore-son-parcours-au-senat/


guid: /fr/salle-de-nouvelles/trcm-vulnerabilite-infrastructures-transport/
link: https://sencanada.ca//fr/salle-de-nouvelles/trcm-vulnerabilite-infrastructures-transport/
hash: ��ټ�?��;����
attributes: {"enclosures":[]}
title:
La vulnérabilité des infrastructures de transport essentielles met en péril des vies et la prospérité, selon un rapport du Sénat


guid: yt:video:I5FkNG94BcQ
title: December 2024 Shareholder Meeting
author: ;Titus Tech Talk
link: https://www.youtube.com/watch?v=I5FkNG94BcQ
hash: t �J�m���hKJd��
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/I5FkNG94BcQ?version=3","title":"December 2024 Shareholder Meeting","description":"Where have I been?.\n\n►► Digital Downloads ➜ https://christitus.com/downloads\n►► Reddit ➜ https://www.reddit.com/r/ChrisTitusTech/\n►► Chris Titus Tech ➜ https://www.youtube.com/@ChrisTitusTech\n►► Twitch ➜ https://www.twitch.tv/christitustech\n►► YouTube Early Access ➜ https://www.youtube.com/channel/UCtYg149E_wUGVmjGz-TgyNA/join","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i2.ytimg.com/vi/I5FkNG94BcQ/hqdefault.jpg"]}]}


guid: https://htmhell.dev/adventcalendar/2024/7/
title: Almost, but not quite, entirely unlike...
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/7/
hash: �(�� �D}���I�
attributes: {"enclosures":[]}
content:
by Léonie Watson<br><blockquote data-sanitized-class="blockquote-no-quotes highlight">Can you give me the HTML for an accessible button please?</blockquote>
<p>It was a simple enough question. Or it would have been, had I been asking another person. As it was, I was asking ChatGPT, and so of course there was nothing simple about it.</p>
<p>For the briefest of moments, I caught myself thinking even ChatGPT couldn't get this wrong. The <code>&lt;button&gt;</code> element is probably the most talked about HTML element in accessibility. Literally all you have to do is use it, give it an accessible name, attach some JavaScript to get it to do something if it isn't part of a form, and you don't even need to think about keyboard accessibility because the browser takes care of all that for you.</p>
<p>Then reality kicked me in the shins and told me to snap out of it, and, as if to prove reality's point, ChatGPT burbled:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">Absolutely! Here’s an accessible button in its simplest form, following best practices to ensure compatibility with screen readers and keyboard navigation.</blockquote>
<p>OK, I thought to myself, that doesn't sound too terrible. I sat up a little straighter and read on as ChatGPT presented me with:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>accessible-button<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Submit form<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Submit</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>I stared at my screen for a while and wondered where it had all gone wrong.</p>
<p>At first glance it looks like a perfectly reasonable bit of HTML. Well, except it isn't just HTML, but we'll come back to that in a minute.</p>
<p>It's clearly supposed to be a button for submitting a form. It says so right there, twice in fact. So why then does it have <code>type="button"</code> and not <code>type="submit"</code>?</p>
<p>When the <code>type</code> attribute has a value of "submit" it causes the browser to submit form data. When the <code>type</code> attribute has a value of "button", it tells the browser to do nothing when the button is pressed - but a bit of JavaScript to listen for the button's events is all that's needed for the button to do something useful when pressed.</p>
<p>I checked my question. No, definitely no mention of a submit button. Not even any mention of what I wanted the button for. "Fine" I thought. I'll ask it what it thinks it's up to:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">Why do I need the type attribute?</blockquote>
<p>Without missing a beat, ChatGPT told me:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">The <code>type</code> attribute in the <code>&lt;button&gt;</code> element is important because it determines how the button behaves, especially in the context of forms. Without specifying the type, the browser applies a default behavior that might not align with your intentions.</blockquote>
<p>It went on:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight"><ol><li><code>type="submit"</code> (default behavior):
<ul>
<li>
<p>If you don’t explicitly set a type, the button defaults to submit. This means that if the button is inside a form, clicking it will submit the form.</p>
</li>
<li>
<p>Use case: When you want the button to submit the form data to the server or trigger a form submission.</p>
</li>
</ul>
</li>
<li><code>type="button"</code>:
<ul>
<li>This type ensures that the button does not submit the form when clicked. Instead, it is just a clickable button that you can use for custom actions (e.g., toggling content, triggering JavaScript functions).</li>
<li>Use case: When you want the button to perform an action other than submitting a form.</li>
</ul>
  </li>
</ol>
[…]
</blockquote>
<p>I set down my teacup and put my face in my hands. <em>“Right”</em> I said, finally looking up and channelling my inner <a href="https://youtu.be/gy7xPCImMXk?t=46">Basil Fawlty</a>:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">So, why did you give me an example of a submit button with a type attribute set to "button"?</blockquote>
<p>There was an almost infinitesimal pause before ChatGPT chirped:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">You're absolutely right to point out the inconsistency! In the example I gave, the button was labelled "Submit" and intended to suggest a submission action, but I set the type="button", which prevents it from submitting the form. This could definitely be confusing since "Submit" usually implies that the button should submit a form.</blockquote>
<p>I closed my eyes and contemplated my life choices.</p>
<p>When I opened them again, nothing much seemed to have changed, so I took a deep breath and in the kind of slow and careful voice that hasn't been heard since <a href="https://www.youtube.com/watch?v=ZXhHFgDRNBQ">Joyce Grenfell in the Nursery School sketch</a>, I asked:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">OK, never mind the type attribute, why did you use the aria-label attribute when the <code>&lt;button&gt;</code> has a perfectly good accessible name already?</blockquote>
<p>I narrowed my eyes as ChatGPT brightly informed me:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">You're absolutely right again! The `aria-label` attribute is not needed when the button already has a clear, visible text label. The visible text content of a <code>&lt;button&gt;</code> element is automatically accessible to screen readers and other assistive technologies, so there's no need for `aria-label` unless you want to provide an alternative or additional description that's not visible.</blockquote>
<p>Suddenly I knew exactly how Arthur Dent felt, dealing with the <a href="https://www.youtube.com/watch?v=eAswvg60FnY">Nutrimatic Drinks Dispenser</a> in The Hitchhiker's Guide to the Galaxy. Just like the cup of tea it dispensed to Arthur, the code provided by ChatGPT was, to paraphrase, almost, but not quite, entirely unlike the HTML for an accessible button.</p>
<p>If ChatGPt hadn't been trained by indiscriminately hoovering up everything on the web, and if humans hadn't spent the last 30 years creating so many inaccessible buttons for it to hoover up in the first place, then the answer it gave me should have gone a little something like this:</p>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">To create an accessible button in HTML (outside of a form), you can use the <code>&lt;button&gt;</code> element like this:</blockquote>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span>Accessible name<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<blockquote data-sanitized-class="blockquote-no-quotes highlight">This element works well with a keyboard: you can focus it using the Tab key and activate it with either the Spacebar or Enter key. When triggered this way, the browser will run any JavaScript tied to the button’s click event. Just make sure to style the button so that its appearance changes when it gets focus, providing clear feedback to users.
<br>
For users relying on screen readers or other assistive technologies, the button element is automatically recognized as a button. Just remember to replace "Accessible name" with a descriptive label that fits your button’s function—such as "Search" or "Play."</blockquote>


guid: CCAL-118hcal-2024-12-09
title: House Calendars, DAILY - House Calendars for December 9, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118hcal-2024-12-09
hash: I5*��e��8�J 'o
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-09/pdf/CCAL-118hcal-2024-12-09.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-09/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-09/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-09.zip">ZIP</a>


guid: https://htmhell.dev/adventcalendar/2024/8/
title: Past HTML, Future HTML?
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/8/
hash: ���O^J\1&c��أ
attributes: {"enclosures":[]}
content:
by Jens Oliver Meiert<br><p>Consider the following HTML document:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">DOCTYPE</span> <span data-sanitized-class="token name">HTML</span> <span data-sanitized-class="token name">PUBLIC</span> <span data-sanitized-class="token string">"-//W3C//DTD HTML 1996-01//EN"</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Author<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>P</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>P</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>H2</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>H2</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>P</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>UL</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>LI</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>LI</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>LI</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>UL</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>P</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token comment">&lt;!-- … --&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>You will notice a few things:</p>
<ul>
<li>The unusual doctype</li>
<li>The inconsistencies in element case (most notably, <code>&lt;p&gt;</code> vs. <code>&lt;P&gt;</code>)</li>
<li>The inconsistencies in omitting optional tags (like dropping <code>&lt;/p&gt;</code> and <code>&lt;/li&gt;</code> end tags, but keeping <code>&lt;/body&gt;</code> and <code>&lt;/html&gt;</code>)</li>
</ul>
<p>Yet in some respects, this document structure is better than the code we find on many modern websites (and that is sites, not even apps).</p>
<p>Why? What’s to like about this kind of code?</p>
<ol>
<li>
<p><em>It’s valid.</em> If you run this and the respective original page’s code through an HTML conformance checker like <a href="https://validator.w3.org/">the W3C markup validator</a>, the code will validate. This is basic <em>professional</em> work <a href="https://meiert.com/en/blog/html-conformance-2024/">that we don’t see often anymore</a>.</p>
</li>
<li>
<p><em>It’s focused.</em> There’s close to no superfluous code. While there’s a little bit more <a href="https://meiert.com/en/blog/optional-html/">optional markup</a> to be removed, as well as perhaps the <code>Author</code> class, one might rather <em>add</em> code, like the style sheet reference that’s conspicuously missing.</p>
</li>
<li>
<p><em>It’s… open-minded.</em> These inconsistencies, they may rub us, and we likely prefer a consistent formatting. But that shouldn’t distract from the fact that the code is valid (which includes uppercase tag names), and that it represents legitimate ways of writing HTML (which in this case means <a href="https://css-tricks.com/write-html-the-html-way-not-the-xhtml-way/">HTML–HTML, and not XHTML–HTML</a>).</p>
</li>
</ol>
<p>So where is this code from? It’s from <a href="https://en.wikipedia.org/wiki/T._V._Raman">T.V. Raman’s</a> documentation on <a href="https://www.w3.org/Style/CSS/Speech/speech.html">style sheets for spoken renderings</a>, published on February 12, <em>1996</em>. The <a href="https://frontenddogma.com/topics/1990s/">1990s</a> and <a href="https://frontenddogma.com/topics/2000s/">2000s</a> are behind us in many areas, and yet in some, they may still be ahead:</p>
<p>We could learn from this code and take it into the future, because XHTML–HTML may have long been dead if it wasn’t kept on eternal life support by frameworks and tools that do not use any of the features that HTML (and that is, don’t mind the repetition, <a href="https://css-tricks.com/write-html-the-html-way-not-the-xhtml-way/#aa-the-html-way-of-writing-html">HTML–HTML</a>) offers us. The future of HTML—it could embrace more of the HTML of the past.</p>


guid: https://thechainedmuse.substack.com/p/new-lyre-podcast-32-enchanting-forms
title: New Lyre Podcast #32: Enchanting Forms with Poet Sarah Ashbach
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/new-lyre-podcast-32-enchanting-forms
hash: ���L,�g�q��&;�
content:
<p>In this latest episode, we talk with the 2024 Frost Farm Poetry Prize winner, Sarah Ashbach. From poetry’s religious enchantment and the gnostic, occult elements in modern verse to teaching poetry to high school students, join us for an enchanting journey with the young and talented Mrs. Ashbach.</p><p data-attrs='{"url":"https://thechainedmuse.substack.com/subscribe?","text":"Subscribe now","action":null,"class":null}' data-component-name="ButtonCreateButton" data-sanitized-class="button-wrapper"><a href="https://thechainedmuse.substack.com/subscribe?" data-sanitized-class="button primary"><span>Subscribe now</span></a></p><div data-sanitized-class="pullquote"><p>Read Sarah’s poem “In the Time of the Latter Rain” below.</p></div><div data-attrs='{"nodeId":"4bf2f099-0a7e-4443-b421-a7ef40feb11f","caption":"Black cows lounge on the hills and gaze toward dusk;","size":"lg","isEditorNode":true,"title":"In the Time of the Latter Rain","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-12-08T01:31:13.397Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F88e892e3-027d-4716-a493-d5b9ff6748a5_1175x703.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/in-the-time-of-the-latter-rain","section_name":null,"id":152776416,"type":"newsletter","reaction_count":0,"comment_count":1,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"9cfff6ec-fdf3-4fbf-b7ac-cb9d267265dc","caption":"Download or order the latest issue of our print journal, New Lyre Magazine","size":"lg","isEditorNode":true,"title":"Our Fall Magazine Is Published!","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-10-16T21:48:50.444Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3ec8d2a8-38ef-480d-81e4-a5e05d9e6e78_702x915.png","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/our-fall-magazine-is-published","section_name":null,"id":150038311,"type":"newsletter","reaction_count":6,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"b0f387b6-ef1c-4664-a22d-d882fd208a40","caption":"Modernism often produces obscure poetry because it denies the existence of absolute truth. Without a fundamental truth to reveal, poetry is relegated to presenting a series of images for the reader to supply the meaning of the text. Hart Crane and the pioneers of modernist poetry achieved this with words alone, but later Cummings and the “concrete” poets, heavily under the influence of cubism and modernist movements in visual art, did so through typographical forms of the poem itself.","size":"lg","isEditorNode":true,"title":"Yeats and the Occult","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-04-26T00:27:38.549Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd560ae46-73ef-4936-8bf2-2582e95c5be8_736x564.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/yeats-and-the-occult","section_name":null,"id":144013623,"type":"newsletter","reaction_count":12,"comment_count":21,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":false}' data-sanitized-class="digest-post-embed"></div>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/152779773/6e4c8af483a9b98bfaf470512c0d7eaf.mp3","type":"audio/mpeg","length":0}]}


guid: https://htmhell.dev/adventcalendar/2024/9/
title: Native HTML light and dark color scheme switching
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/9/
hash: O��*J��y�B�Y�
attributes: {"enclosures":[]}
content:
by Vadim Makeev<br><p>It’s getting dark early in Berlin in the winter. It’s not even close to evening, but my OS and all apps have already switched to dark mode. Well, not all of them, unfortunately. And that’s the thing: dark mode has become a quality-of-life feature for many users, and I often try to avoid using apps or websites that haven’t implemented it, especially in the evening. They literally hurt my eyes!</p>
<p>When it comes to color scheme implementations, they range from rather useless ones that require a page reload to more sensible ones that query the <code>prefers-color-scheme</code> media feature and apply changes in CSS on the fly:</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">body</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> #ffffff<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> #000000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token atrule"><span data-sanitized-class="token rule">@media</span> <span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token property">prefers-color-scheme</span><span data-sanitized-class="token punctuation">:</span> dark<span data-sanitized-class="token punctuation">)</span></span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> #000000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> #ffffff<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<aside>
<p>⭐ I’ll be using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting">native CSS nesting</a> in all demos throughout this article. It works in all modern browsers and makes code a bit more compact, especially when it comes to media queries. But if you’re not familiar with CSS nesting, you can use this handy <a href="https://lightningcss.dev/playground/#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22body%20%7B%5Cn%20%20background-color%3A%20%23000000%3B%5Cn%20%20color%3A%20%23ffffff%3B%5Cn%20%20%5Cn%20%20%40media%20(prefers-color-scheme%3A%20dark)%20%7B%5Cn%20%20%20%20background-color%3A%20%23000000%3B%5Cn%20%20%20%20color%3A%20%23ffffff%3B%5Cn%20%20%7D%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D">Lightning CSS playground</a> to figure out how it looks without nesting.</p>
</aside>
<p>This approach is already a good start. But it only covers the simplest case and doesn’t allow users to choose a different color scheme for this specific website. Just like light color schemes hurt my eyes in the evening, many people are not comfortable with dark schemes or with particular ones that aren’t good for them. So, it’s all about user choice.</p>
<p>Currently, there’s no way to directly override a user’s OS preference if you want to offer a scheme selector on your page. Fortunately, in the CSS Media Queries Level 5 spec, there’s a <a href="https://drafts.csswg.org/mediaqueries-5/#auto-pref%E2%91%A0"><code>PreferenceManager</code> interface</a> that will solve this problem. Meanwhile, the most popular solution these days is to use JavaScript to set an attribute like <code>&lt;html data-scheme="dark"&gt;</code> reflecting the forced scheme and use it in CSS:</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">body</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> #ffffff<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> #000000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token selector">[data-scheme='dark'] &amp;</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> #000000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> #ffffff<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>This approach always seemed hacky to me. However, if you know HTML well enough, there are a few much more convenient native options available.</p>
<h2 data-sanitized-id="setting-the-css-color-scheme">Setting the CSS color-scheme</h2>
<p>If you ever fall into the dark scheme rabbit hole, the first thing you’ll learn is the <code>color-scheme</code> CSS property. It’s essential for setting the scene for everything else. Most importantly, it turns on the browser’s default dark scheme support. Which, unfortunately, browsers can’t enable by default for backward compatibility reasons.</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">:root</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color-scheme</span><span data-sanitized-class="token punctuation">:</span> light dark<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>The <code>light dark</code> value means that we’re choosing to support both light and dark schemes in our code. The property will be inherited down the document tree, and the browser will enable some default styling for built-in primitives when needed. Thank you, browser!</p>
<figure>
<p><img src="https://htmhell.dev/adventcalendar/2024/9/images/color-scheme.png" alt="Two browser windows with the same page: one in the light scheme, the other in the dark scheme. The text on the page says: link is not a button! The link word is a link, the button word is a button. All page elements, including scrollbars, are perfectly aligned with the scheme."></p>
<figcaption>
  Default browser dark styles enabled by the <code>color-scheme: light dark</code> property.
</figcaption>
</figure>
<p>When switching your schemes, it’s important to switch the value of this property, too: set <code>color-scheme: light</code> on the root along with light styles and the other way around for the dark ones. Remember this, it’ll come in handy later.</p>
<p>And somewhere along these lines, you’ll probably read that you can also set this mode right in HTML using the <code>&lt;meta&gt;</code> element. Why would you do that? Oh well, who knows? Maybe you don’t use CSS or whatever. So silly, right?</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>color-scheme<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>light dark<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>It turns out that it’s not just a flag for the browser but a tool you can use to force color schemes using JavaScript! But only if you use the fairly new <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark"><code>light-dark()</code></a> CSS function.</p>
<h2 data-sanitized-id="switching-the-html-color-scheme">Switching the HTML color-scheme</h2>
<p>Remember the earlier example with media queries and <code>‌prefers-color-scheme</code>?</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">body</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> #ffffff<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> #000000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token atrule"><span data-sanitized-class="token rule">@media</span> <span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token property">prefers-color-scheme</span><span data-sanitized-class="token punctuation">:</span> dark<span data-sanitized-class="token punctuation">)</span></span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> #000000<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> #ffffff<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>You can also express the same idea like this:</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">body</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">background-color</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">light-dark</span><span data-sanitized-class="token punctuation">(</span>#ffffff<span data-sanitized-class="token punctuation">,</span> #000000<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">color</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">light-dark</span><span data-sanitized-class="token punctuation">(</span>#000000<span data-sanitized-class="token punctuation">,</span> #ffffff<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<aside>
<p>⭐ By the way, I use <code>--color-back</code> and <code>--color-text</code> variables in my demos. It makes it easier to set colors even in a small demo, let alone a bigger project. But to make things easier to read, I chose to set colors directly in code samples.</p>
</aside>
<p>Here’s the three-position switch I often use. Along with “light” and “dark” options that force a certain scheme, there’s also the “auto” option that gives the control over the color scheme back to the OS, selected by default.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>section</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Color scheme switcher<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">aria-pressed</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">value</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>light<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Light</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">aria-pressed</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">value</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>light dark<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Auto</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>button</span> <span data-sanitized-class="token attr-name">aria-pressed</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>false<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">value</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dark<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Dark</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>button</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>section</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>And to make it all work, a simple script that takes the button’s value and sets it to the <code>&lt;meta name="color-scheme"&gt;</code>:</p>
<pre data-sanitized-class="language-js"><code data-sanitized-class="language-js"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">const</span> colorScheme <span data-sanitized-class="token operator">=</span> document<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelector</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'meta[name=color-scheme]'</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">const</span> switchButtons <span data-sanitized-class="token operator">=</span> document<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelectorAll</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'button'</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">switchButtons<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">forEach</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token parameter">button</span> <span data-sanitized-class="token operator">=&gt;</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  button<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">addEventListener</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'click'</span><span data-sanitized-class="token punctuation">,</span> <span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token operator">=&gt;</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token keyword">const</span> currentButton <span data-sanitized-class="token operator">=</span> button<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    switchButtons<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">forEach</span><span data-sanitized-class="token punctuation">(</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token parameter">button</span> <span data-sanitized-class="token operator">=&gt;</span> button<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">setAttribute</span><span data-sanitized-class="token punctuation">(</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token string">'aria-pressed'</span><span data-sanitized-class="token punctuation">,</span> button <span data-sanitized-class="token operator">===</span> currentButton</span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token punctuation">)</span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    colorScheme<span data-sanitized-class="token punctuation">.</span>content <span data-sanitized-class="token operator">=</span> button<span data-sanitized-class="token punctuation">.</span>value<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span></code></pre>
<p>As you can see, once we set <code>content="dark"</code> the browser switches to the last value in the <code>light-dark()</code> function and the other way around with the <code>light</code> one. This HTML’s <code>color-scheme</code> turned out not so silly after all!</p>
<p>To make it work properly, you’ll need to decide where to store your global <code>color-scheme</code> value, so the script can force it. In this example, I chose to use the HTML one, so I removed the <code>color-scheme</code> property from CSS. But you can also keep it in CSS and force it via JavaScript like so:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span> <span data-sanitized-class="token special-attr"><span data-sanitized-class="token attr-name">style</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span><span data-sanitized-class="token value css language-css"><span data-sanitized-class="token property">color-scheme</span><span data-sanitized-class="token punctuation">:</span> dark</span><span data-sanitized-class="token punctuation">"</span></span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<figure>
  <iframe src="https://htmhell.dev/adventcalendar/2024/9/color-scheme" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" sandbox="allow-scripts allow-same-origin"></iframe>
  <figcaption>
    Meta <code>color-scheme</code> switcher in action.
    <a href="https://htmhell.dev/adventcalendar/2024/9/color-scheme" target="_blank">Open in a new tab</a>
  </figcaption>
</figure>
<aside>
<p>⭐ For a good UX, you’ll also need a way to store user preference somewhere in <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"><code>localStorage</code></a>, so the users won’t have to switch it next time they visit or when opening a new tab. I’m sure you can figure it out on your own!</p>
</aside>
<p>One of the downsides of this approach is the browser support: the <code>light-dark()</code> CSS function has been available in all modern browsers since May 2024, which makes it “newly available” on the <a href="https://web-platform-dx.github.io/web-features/">Baseline</a> scale. It will become “widely available” only around November 2026 or 30 months later. You can transpile it for older browsers using <a href="https://lightningcss.dev/">Lightning CSS</a> or <a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function">PostCSS plugin</a>, but make sure you check the output and test it in an older browser. It might be a bit tricky at times.</p>
<p>As for the other major downside, the <code>light-dark()</code> function accepts only colors for now. Trust me, I tried to use it with other values, and it didn’t work. So, what’s the problem? You might need to change not just colors but images or font properties that work better with the dark scheme.</p>
<p>In this case, there’s another HTML solution for you!</p>
<h2 data-sanitized-id="linking-a-css-scheme">Linking a CSS scheme</h2>
<p>You all know the most common way of linking CSS to a page: it’s a stylesheet linked from a file.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>index.css<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>But did you know that you can also set the <code>media</code> attribute to conditionally load and apply CSS based on user preferences? Sure you can! But first, you’d need to split your files into light and dark styles:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>light.css<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>(prefers-color-scheme: light)<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="token punctuation">&gt;</span></span><br><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>dark.css<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>(prefers-color-scheme: dark)<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="token punctuation">&gt;</span></span></code></pre>
<p>It doesn’t look too convenient this way. A much better approach would be to split your styles into <em>three</em> parts! Yes, I’m serious. Hear me out!</p>
<ol>
<li>The main file, called <code>index.css</code>, will contain all your styles and use CSS variables for anything you need to change depending on a color scheme.</li>
<li>The <code>light.css</code> file will contain only CSS variables with values set to everything that makes sense for the light scheme.</li>
<li>The <code>dark.css</code>, you guessed it, will have everything dark.</li>
</ol>
<p>Remember to set the appropriate <code>color-scheme</code> property values in each color scheme file to help the browser: <code>color-scheme: light</code> and <code>color-scheme: dark</code>, respectfully.</p>
<p>Interestingly enough, the file that doesn’t fit user preferences will still be loaded by the browser but with lower priority. I went into much greater detail about this in my other “<a href="https://pepelsbey.dev/articles/conditionally-adaptive/">Condi­tionally adaptive CSS</a>” article if you’re curious.</p>
<p>So, this three-file CSS architecture now has all the inconveniences and no benefits compared to the previously discussed solution with media queries. What now? Don’t you worry, it was just the first step. Now, to the switching.</p>
<h2 data-sanitized-id="switching-linked-css-schemes">Switching linked CSS schemes</h2>
<p>When you’re linking your much simpler single-file styles, there’s something else you’re <em>implicitly</em> setting: the <code>media</code> attribute. If it’s not <em>explicitly</em> set, it means that you want your styles to apply to all <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types">media types</a>. So, it defaults to <code>all</code>:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>index.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>all<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><a href="https://www.filamentgroup.com/lab/load-css-simpler/">There are techniques</a> using <code>media="print"</code> for lazy-loading CSS, but since we’ve learned that the <code>media</code> attribute can take not only media types but complex media queries, you can negate it as <code>not all</code> and it won’t be applied to any media.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>link</span> <span data-sanitized-class="token attr-name">rel</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>stylesheet<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>index.css<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>not all<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>But why would you need <em>not</em> to load your styles? Now you see where it’s going. We can use it to switch between color schemes and force user preferences.</p>
<p>Let’s take the same three-position switch from the previous example but change the auto button’s value to <code>auto</code> to better match what it does. Our JavaScript function becomes a bit bigger, but the idea stays the same. The only difference this time is that we’re changing the <code>media</code> attribute’s value:</p>
<pre data-sanitized-class="language-js"><code data-sanitized-class="language-js"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">const</span> styleLight <span data-sanitized-class="token operator">=</span> document<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelector</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'link[rel=stylesheet][media*=prefers-color-scheme][media*=light]'</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">const</span> styleDark <span data-sanitized-class="token operator">=</span> document<span data-sanitized-class="token punctuation">.</span><span data-sanitized-class="token function">querySelector</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token string">'link[rel=stylesheet][media*=prefers-color-scheme][media*=dark]'</span><span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token keyword">function</span> <span data-sanitized-class="token function">switchScheme</span><span data-sanitized-class="token punctuation">(</span><span data-sanitized-class="token parameter">scheme</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token keyword">let</span> lightMedia<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token keyword">let</span> darkMedia<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token keyword">if</span> <span data-sanitized-class="token punctuation">(</span>scheme <span data-sanitized-class="token operator">===</span> <span data-sanitized-class="token string">'auto'</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    lightMedia <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token string">'(prefers-color-scheme: light)'</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">    darkMedia <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token string">'(prefers-color-scheme: dark)'</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span> <span data-sanitized-class="token keyword">else</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">    lightMedia <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token punctuation">(</span>scheme <span data-sanitized-class="token operator">===</span> <span data-sanitized-class="token string">'light'</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token operator">?</span> <span data-sanitized-class="token string">'all'</span> <span data-sanitized-class="token operator">:</span> <span data-sanitized-class="token string">'not all'</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">    darkMedia <span data-sanitized-class="token operator">=</span> <span data-sanitized-class="token punctuation">(</span>scheme <span data-sanitized-class="token operator">===</span> <span data-sanitized-class="token string">'dark'</span><span data-sanitized-class="token punctuation">)</span> <span data-sanitized-class="token operator">?</span> <span data-sanitized-class="token string">'all'</span> <span data-sanitized-class="token operator">:</span> <span data-sanitized-class="token string">'not all'</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">  styleLight<span data-sanitized-class="token punctuation">.</span>media <span data-sanitized-class="token operator">=</span> lightMedia<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  styleDark<span data-sanitized-class="token punctuation">.</span>media <span data-sanitized-class="token operator">=</span> darkMedia<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>In short, if we force the dark scheme, the <code>dark.css</code> gets <code>media="all"</code> instead of the <code>prefers-color-scheme</code> and the <code>light.css</code> one gets <code>‌media="not all"</code>, and the other way around for the light scheme. Once the user chooses the “auto” option, we stop forcing and restoring all previous <code>prefers-color-scheme</code> media values.</p>
<figure>
  <iframe src="https://htmhell.dev/adventcalendar/2024/9/link-media" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" sandbox="allow-scripts allow-same-origin"></iframe>
  <figcaption>
    Link <code>media</code> switcher in action.
    <a href="https://htmhell.dev/adventcalendar/2024/9/link-media" target="_blank">Open in a new tab</a>
  </figcaption>
</figure>
<p>Given that scheme files containing only variables are relatively small, and browsers download all CSS files anyway (only the priority differs), the switching happens seamlessly. You can check this method in action <a href="https://pepelsbey.dev/">on my website</a>. And if you happen to use Safari or Vivaldi browsers, you might notice something else changing while you switch the schemes.</p>
<h2 data-sanitized-id="one-more-thing">One more thing</h2>
<p>There’s the <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest/theme_color"><code>theme_color</code></a> key in the web manifest that sets the installed app’s chrome color. You can also set it via HTML and even use the <code>media</code> attribute to apply different theme colors depending on the color scheme:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>theme-color<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">content</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#c1f07c<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>(prefers-color-scheme: light)<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="token punctuation">&gt;</span></span><br><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">name</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>theme-color<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">content</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#9874d3<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token attr-name">media</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>(prefers-color-scheme: dark)<span data-sanitized-class="token punctuation">"</span></span></span><br><span data-sanitized-class="token punctuation">&gt;</span></span></code></pre>
<p>I bet you saw that coming: you can also force the theme color while switching the color scheme using <code>all</code> and <code>not all</code> values via the same script. How cool is that?</p>
<figure>
<p><img src="https://htmhell.dev/adventcalendar/2024/9/images/theme-color.png" alt="Two Safari windows: one in the light scheme, the other in the dark scheme. The light one has a lime top panel, the dark one has a violet top panel."></p>
<figcaption>
  Different top panel colors using the <code>theme-color</code> meta element.
</figcaption>
</figure>
<h2 data-sanitized-id="homework">Homework</h2>
<p>As all of us did, I learned most of what I know from other people’s posts and articles. I want to say a special thank you to Thomas Steiner for his early articles on color scheme switching: <a href="https://web.dev/articles/prefers-color-scheme#dark-mode-but-add-an-opt-out">Prefers-color-scheme: Hello darkness, my old friend</a> and <a href="https://web.dev/articles/color-scheme">Improved dark mode default styling with the color-scheme</a>. Please also have a look at Darin Senneff’s <a href="https://www.darins.page/articles/progressively-enhanced-dark-mode">Progressively-enhanced dark mode</a> and Sara Joy’s <a href="https://css-tricks.com/come-to-the-light-dark-side/">Come to the light-dark() side</a> articles for a different perspective on the matter. And let’s dream about a better future for color scheme switching while reading Bramus’ <a href="https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/">What if you had real control over light mode / dark mode on a per-site basis?</a> article.</p>


guid: /fr/sencaplus/opinion/le-canada-est-un-allie-solide-en-ces-temps-troubles-senateur-dean/
title: Le Canada est un allié solide en ces temps troublés : sénateur Dean
hash: Qԫ�6�,��؏e|���
attributes: {"enclosures":[]}
link:
https://sencanada.ca//fr/sencaplus/opinion/le-canada-est-un-allie-solide-en-ces-temps-troubles-senateur-dean/


guid: https://htmhell.dev/adventcalendar/2024/10/
title: Submit to the Quirks of HTML
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/10/
hash: :WH��ě�Y��4E
attributes: {"enclosures":[]}
content:
by Felix Hessenberger<br><p>It was on a cold February evening. I had been working on a client project, building an order item list—nothing out of the ordinary. To adjust an item’s quantity, the user would open a popup form with a single input field, type a number, and hit enter.</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Quantity</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>number<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Everything worked as intended when suddenly, a new requirement came in: add another input field to also set a bulk quantity. I did what I was told, but to my horror, the form wouldn’t submit anymore with the new field displayed! 😱</p>
<p>I checked the browser console for any JavaScript errors and double-checked my markup, but to no avail. A quick detour to <a href="https://stackoverflow.com/questions/4196681/form-not-submitting-when-pressing-enter">Stack Overflow</a> shed light on the situation: according to the <a href="https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2">HTML 2.0 spec</a>, it's a feature, not a bug:</p>
 <blockquote>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</blockquote>
<p>Some <a href="https://alanflavell.org.uk/www/formquestion.html">Web archeology</a> later, I found myself pretty deep down the rabbit hole about whether a form will submit on enter:</p>
<ul>
<li>Single-line <code>text</code> input: <strong>YES!</strong>, according to the discussion linked above, this was seen “as a convenient way to submit simple queries”.</li>
<li>Other input types: <strong>YES!</strong>, <code>number</code>, <code>email</code>, <code>password</code>, <code>search</code>, <code>tel</code>, and <code>url</code> all are regarded as single-line text inputs; input types not recognized by the browser (e.g. <code>month</code> in Firefox at the time of writing), are treated like single-line text inputs.</li>
<li>One single-line text input together with any other fields that are <em>not</em> a single-line text input: <strong>YES!</strong>, you can add any other form elements including input types like <code>date</code> or <code>color</code>, even a <code>textarea</code>) and the form will still submit on enter (when the focus is on the text field).</li>
<li>A second single-line text input in a <em>different</em> form: <strong>YES!</strong>, it’s not about how many inputs are on the page; each form is considered individually.</li>
<li>More than one single-line text input in the same form: <strong>NO!</strong> of course not! 😅 This is, according to the discussion mentioned above, aimed at “reducing the risk, on a complex form, of prematurely submitting it while trying to fill it in.“.</li>
</ul>
<p><a href="https://codepen.io/felix-scale/pen/qEWEama">Try the above examples on CodePen</a></p>
<p>The reason I didn’t encounter this behavior before seems to be that I’ve never built a form with <em>only</em> one text field; even in a simple chat component, there typically is at least a submit button to send the message. And indeed, adding a submit button magically solves the problem:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Quantity</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>number<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    Bulk quantity</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>number<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>label</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>input</span> <span data-sanitized-class="token attr-name">type</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>submit<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">hidden</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>form</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>To extend on the list above:</p>
<ul>
<li><code>&lt;input type="submit"&gt;</code>: <strong>YES!</strong>, a submit button enables submit on enter in forms with more than one text input.</li>
<li><code>&lt;input type="submit" hidden&gt;</code>/<code>&lt;input type="submit" style="display: none;"&gt;</code>: <strong>YES!</strong>, the button may be hidden (which I did above to preserve the original appearance).</li>
<li><code>&lt;button&gt;</code>: <strong>YES!</strong>, the <code>button</code> element works as well. (<code>type="submit"</code> is the default for buttons within a form.)</li>
<li><code>&lt;button disabled&gt;</code>: <strong>NO!</strong>, disabling the submit input/button also disables submitting on enter.</li>
<li><code>&lt;button type="button"&gt;</code>: <strong>NO!</strong>, it may look the same, but now there is no way to submit the form anymore.</li>
</ul>
<p><a href="https://codepen.io/felix-scale/pen/vEBEWZO">Try the above examples on CodePen</a></p>
<p>All points listed in this article are the same across browsers; interestingly, the behavior of the submit button isn’t defined anywhere in the HTML spec—it was initially just copied from Internet Explorer and Netscape for consistency (like discussed in this 23 year old (and still open) <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=104211">Firefox issue</a>). <em>However</em>, as outlined in <a href="https://jansensan.net/blog/enter-key-should-submit-form-currently-focus">this article</a>, the behavior can effectively be derived from combining the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG</a>’s recommendation that all forms should include a submit button and the HTML spec’s rule that the enter key should submit the form <em>implicitly</em>.</p>
<p>Bonus fact: The default keyboard on Android has a button that looks like an enter key, but it only submits the form when the <em>last text field</em> in the form is focused—otherwise, it moves focus to the next text field. It doesn’t move the focus to any other form inputs.</p>
<p>This is a nice example that even after more than a decade of working with HTML, I still sometimes encounter unexpected quirks that, after a bit of digging, often turn out to be well-thought-out gems (<a href="https://htmhell.dev/adventcalendar/2023/15/">for the most part</a>).</p>


guid: CCAL-118scal-2024-12-10
title: Senate Calendars, DAILY - Senate Calendars for December 10, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118scal-2024-12-10
hash: m �}a�'�g���<o
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-10/pdf/CCAL-118scal-2024-12-10.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-10/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-10/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-10.zip">ZIP</a>


guid: CCAL-118hcal-2024-12-10
title: House Calendars, DAILY - House Calendars for December 10, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118hcal-2024-12-10
hash: s���c��]S����+�q
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-10/pdf/CCAL-118hcal-2024-12-10.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-10/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-10/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-10.zip">ZIP</a>


guid: https://htmhell.dev/adventcalendar/2024/11/
title: Makeshift hot reload
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/11/
hash: v�a๳ ����N
attributes: {"enclosures":[]}
content:
by Evan Hahn<br><p><em>In short: put <code>&lt;meta http-equiv="refresh" content="1"&gt;</code> in your <code>&lt;head&gt;</code> element to refresh your page every second. This is a makeshift "hot reload" for development. It's not perfect, but it can be a quick solution!</em></p>
<p>Hot reloading automatically reloads parts of your page while you're working. Change some HTML and see your work instantly! Tweak some CSS and the results are right there! Gone are the days of repeatedly switching to your browser to refresh, because hot reload takes care of it.</p>
<p>It's called "hot" reloading because it's <em>hot</em>. It's powerful. Everyone loves it.</p>
<p>But here's the problem: hot reload requires fancy build tooling. It's built into tools like Vite, Parcel, and various editor plugins. But what if you aren't using one of these? What if you're writing HTML the way God intended: by editing some damn files on disk? In other words, without a build tool?</p>
<p>Can you still get that hot, hot reloading?</p>
<h2 data-sanitized-id="home-grown-hot-reload">Home-grown hot reload</h2>
<p>You can create a makeshift hot reload by putting this somewhere in your <code>&lt;head&gt;</code> tag:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Reload the whole page every second. --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">http-equiv</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>refresh<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">content</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>1<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>Adding this will make the whole page reload every second.</p>
<p>Now, when you edit some HTML, you'll only have to wait a second before you see your changes. When you tweak your CSS, you'll see the results promptly.</p>
<p>This simulates the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Refresh"><code>Refresh</code> HTTP response header</a>, instructing browsers to reload the page after a certain number of seconds. You can change the duration if it's reloading too often for your taste; I find that 2 seconds is my sweet spot.</p>
<p>When you're all done, you should remove this tag so that the page doesn't reload for your users.</p>
<p>This isn't as powerful as hot reloading, to be sure. This primitive solution has a lot of drawbacks:</p>
<ul>
<li>It's usually slower than real hot reloading.</li>
<li>It can't intelligently swap out parts of your app, and instead brutally reloads the whole page.</li>
<li>It can mess with any state you've set up, such as scroll position.</li>
<li>It also refreshes the browser's developer tools, making them difficult to use.</li>
<li>If you use a screen reader, it's likely that this constant reloading will mess things up.</li>
</ul>
<p>Despite the disadvantages, this solution has one big plus: it's a single line of HTML that doesn't require any additional tooling. This minimal solution can be useful if you just need something simple. And that's hot.</p>


guid: CCAL-118scal-2024-12-11
title: Senate Calendars, DAILY - Senate Calendars for December 11, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118scal-2024-12-11
hash: �Њ��f��iHO��"O
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-11/pdf/CCAL-118scal-2024-12-11.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-11/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-11/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-11.zip">ZIP</a>


guid: CCAL-118hcal-2024-12-11
title: House Calendars, DAILY - House Calendars for December 11, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118hcal-2024-12-11
hash: '�y���K���ʈ�
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-11/pdf/CCAL-118hcal-2024-12-11.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-11/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-11/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-11.zip">ZIP</a>


hash: P�y����d�g����I�
attributes: {"enclosures":[]}
guid:
/fr/sencaplus/comment-pourquoi/le-style-canadien-comment-les-sculpteurs-de-ledifice-du-centre-sont-tombes-sous-le-charme-du-nord/

title:
Le style canadien : Comment les sculpteurs de l’édifice du Centre sont tombés sous le charme du Nord

link:
https://sencanada.ca//fr/sencaplus/comment-pourquoi/le-style-canadien-comment-les-sculpteurs-de-ledifice-du-centre-sont-tombes-sous-le-charme-du-nord/


guid: https://odysee.com/exIsraeliArabJewFreePalestine:c7b75ea97721b6d1b3882d98c3cf6d6d87e708f0
author: ;Eva K Bartlett
link: https://odysee.com/exIsraeliArabJewFreePalestine:c7b75ea97721b6d1b3882d98c3cf6d6d87e708f0
hash: "��{ꯟ/P ��hs
title:
Conversation with Alon Mizrahi (“Anti-establishment, pro-humanity, ex-Israeli, Arab Jew. Free Palestine”)

content:
<p><img src="https://thumbs.odycdn.com/4d1235d87f2e459aa077cf27c3fc72c5.webp" width="480" alt="thumbnail" title="Conversation with Alon Mizrahi (“Anti-establishment, pro-humanity, ex-Israeli, Arab Jew. Free Palestine”)"></p>Alon and I had an informal conversation yesterday which I think listeners will find very informative.<br><br>-His father was born in Palestine, "before the catastrophic, disastrous, establishment of Israel."<br><br>-He became disillusioned with Israel, what it stands for, what is Zionism, and what Western culture and colonialism really are and really stand for.<br><br>-Zionism has become, "the most hated ideology on the planet, only survives by unending US support. When an ideology embraces an insane agenda, it is going to crumble, its unsustainable. Zionism is unsustainable. Israel is now in a situation where it can't survive without US support. Israel and Zionism are fiercely hated the world over."<br><br>-The political opposition to Western colonialism is growing daily.<br><br>-More people questioning the story of Israel: "there is a limit to how much you can mass murder children &amp; cover it up with stories that you're only able to tell because you control the media."<br><br>-Only hope for Syria lies in the decolonization of the middle east from Western forces.<br><br>-"People remember the Iraq war, the assassination of Gaddafi, the chaos that the West unleashed on Africa and on Arab countries over the past generation, what it is doing in Gaza and in Syria.  Western colonialism is reaching the end of its days, humanity is woken up to this. It is in a frenzy now, trying to set fire wherever they can, trying to create a huge war."<br><br>-"The people in Gaza who are being massacred by Israel, most of them are refugees from Palestine, that Israel pushed into Gaza in 1948. Those people who lived in Gaza were being occupied, murdered, and humiliated by people who just came to Israel 10, 20 years ago from Europe and other places, and took their land, took their homes, and then came after them in the refugee camps in Gaza."<br><br>Follow him:<br>https://alonmizrahi.substack.com/about<br>https://x.com/alon_mizrahi<br>https://linktr.ee/AMizrahi<br><br><br>My Related Links:  <br><br>https://opt2007.wordpress.com/category/my-entries-from-occupied-palestine-apr-dec-2007/<br>https://opt2007.wordpress.com/category/bilin/<br>https://ingaza.wordpress.com/2018/06/27/welcome-to-hadar-a-village-under-siege-by-al-qaeda-and-israeli-forces-alike/<br>https://ingaza.wordpress.com/syria/syria-my-published-articles-from-and-on-syria-2014-2022/<br>https://ingaza.wordpress.com/2014/01/01/observations-from-occupied-palestine-in-gaza/<br>https://ingaza.wordpress.com/2008/12/03/updates-and-excerpts/<br>https://ingaza.wordpress.com/2008/11/08/on-board-the-dignity-en-route-to-besieged-gaza/<br>

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/exIsraeliArabJewFreePalestine/c7b75ea97721b6d1b3882d98c3cf6d6d87e708f0/1f8b4e.mp4","type":"video/mp4","length":1132926230}]}


guid: https://htmhell.dev/adventcalendar/2024/12/
title: HTML and CSS I didn't even know about before I started creating content in Japanese
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/12/
hash: �HP��e̲�-2��
attributes: {"enclosures":[]}
content:
by Julia Undeutsch<br><p>Since I started to create content in Japanese, I also wanted to learn about traditional setups, like having Japanese text flow from top to bottom, right to left, like you’d see in newspapers or novels. That's when I discovered CSS properties like <code>writing-mode: vertical-rl</code> and HTML tags like <code>&lt;ruby&gt;</code>, which add <a href="https://en.wikipedia.org/wiki/Furigana">furigana (phonetic guides)</a> over <a href="https://en.wikipedia.org/wiki/Kanji">kanji characters</a>.</p>
<p>Honestly, I’d never used these properties before and almost forgot they even existed! But now that I’ve dived into them, I’ll break down how you can implement them step-by-step to get that traditional Japanese look.</p>

<p>That's the text we'll work with. It means "Example of vertical text. Japanese culture is very rich.":</p>
<div data-sanitized-class="step0">
  <h1>
    縦書(たてが)きのテキストの例(れい)
  </h1>
  <p>
    日本(にほん)の文化(ぶんか)はとても豊(ゆた)かです。
  </p>
</div>
<h2 data-sanitized-id="step-1-setting-up-vertical-text-with-css">Step 1: Setting Up Vertical Text with CSS</h2>
<p>First up, we’ll make the text flow vertically from right to left, top to bottom. The CSS property <code>writing-mode: vertical-rl</code> is perfect for this. It’s how you make Japanese text look like it’s traditionally printed.</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.vertical-text</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">font-size</span><span data-sanitized-class="token punctuation">:</span> 2rem<span data-sanitized-class="token punctuation">;</span> <span data-sanitized-class="token comment">/* Adjust font size as needed */</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">letter-spacing</span><span data-sanitized-class="token punctuation">:</span> 0.2em<span data-sanitized-class="token punctuation">;</span> <span data-sanitized-class="token comment">/* Ensures legibility */</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">line-height</span><span data-sanitized-class="token punctuation">:</span> 1.5<span data-sanitized-class="token punctuation">;</span> <span data-sanitized-class="token comment">/* Adjust line height for spacing */</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">text-orientation</span><span data-sanitized-class="token punctuation">:</span> mixed<span data-sanitized-class="token punctuation">;</span> <span data-sanitized-class="token comment">/* Allow for mixed orientation (e.g., hiragana and kanji) */</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">writing-mode</span><span data-sanitized-class="token punctuation">:</span> vertical-rl<span data-sanitized-class="token punctuation">;</span> <span data-sanitized-class="token comment">/* Set writing mode to vertical, right to left */</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>

<div data-sanitized-class="step1">
  <h1>
    縦書(たてが)きのテキストの例(れい)
  </h1>
  <p>
    日本(にほん)の文化(ぶんか)はとても豊(ゆた)かです。
  </p>
</div>
<p><code>writing-mode: vertical-rl</code>: This property turns the text to vertical, flowing from the top to bottom, starting on the right side of the page.</p>
<p><code>text-orientation: mixed</code>: This keeps kanji and other characters readable. Japanese text often mixes different character types, so mixed is generally the best setting here.</p>
<p><code>font-size</code>, <code>letter-spacing</code> and <code>line-height</code>: Adjust these to make the text readable and nicely spaced.</p>
<h2 data-sanitized-id="step-2-adding-margins-for-better-spacing">Step 2: Adding Margins for Better Spacing</h2>

<p>When working with vertical text, you can add spacing between blocks with <code>margin-block</code>. This CSS property acts like <code>margin-top</code> and <code>margin-bottom</code> for horizontal text, and <code>margin-left</code> and <code>margin-right</code> for vertical text.</p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">ruby rt</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">font-size</span><span data-sanitized-class="token punctuation">:</span> 0.7rem<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token property">margin-block</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span> <span data-sanitized-class="token comment">/* Adds some space between text and ruby text */</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<p>The property comes in very handy when working with multiple languages on your website, because it adjusts spacing based on the flow direction of the text.</p>
<h2 data-sanitized-id="step-3-adding-furigana-with-lessrubygreater">Step 3: Adding Furigana with <code>&lt;ruby&gt;</code></h2>
<p>In Japanese, furigana (small <a href="https://en.wikipedia.org/wiki/Hiragana">hiragana</a> or <a href="https://en.wikipedia.org/wiki/Katakana">katakana</a> text) is often placed above kanji characters to show pronunciation. We can add furigana with the <code>&lt;ruby&gt;</code> and <code>&lt;rt&gt;</code> tags, which are specifically meant for this purpose.</p>
<p>Here’s how to add furigana:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>vertical-text<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>日本<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>にほん<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br>  の<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>文化<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>ぶんか<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span> はとても<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token punctuation">&gt;</span></span>豊<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>ゆた<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span></span><br>  <span data-sanitized-class="token punctuation">&gt;</span></span><br><span data-sanitized-class="highlight-line">  かです。</span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>

<div data-sanitized-class="vertical-text">
  <h1>
    <ruby>縦書<rp>(</rp><rt>たてが</rt><rp>)</rp></ruby>きのテキストの<ruby>例<rp>(</rp><rt>れい</rt><rp>)</rp></ruby>
  </h1>
  <p>
    <ruby>日本<rp>(</rp><rt>にほん</rt><rp>)</rp></ruby>の<ruby>文化<rp>(</rp><rt>ぶんか</rt><rp>)</rp></ruby>はとても<ruby>豊<rp>(</rp><rt>ゆた</rt><rp>)</rp></ruby>かです。
  </p>
</div>
<p><code>&lt;ruby&gt;</code>: Wraps around the kanji characters.</p>
<p><code>&lt;rt&gt;</code>: Contains the furigana, displayed above the kanji.</p>
<p><code>&lt;rp&gt;</code>: Provides fall-back parentheses for browsers that do not support display of ruby annotations.</p>
<h2 data-sanitized-id="step-4-putting-it-all-together">Step 4: Putting It All Together</h2>
<p>Now, let’s combine everything in a full HTML example. This includes vertical text styling, spacing, and furigana for a traditional Japanese feel:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token doctype"><span data-sanitized-class="token punctuation">&lt;!</span><span data-sanitized-class="token doctype-tag">DOCTYPE</span> <span data-sanitized-class="token name">html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span> <span data-sanitized-class="token attr-name">lang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>ja<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>meta</span> <span data-sanitized-class="token attr-name">charset</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>UTF-8<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span>Vertical Japanese Text Example<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>title</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br>    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>style</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token style"><span data-sanitized-class="token language-css"><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token selector">*</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">margin</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token selector">body</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">display</span><span data-sanitized-class="token punctuation">:</span> flex<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">justify-content</span><span data-sanitized-class="token punctuation">:</span> flex-end<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">padding</span><span data-sanitized-class="token punctuation">:</span> 25px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token selector">.vertical-text</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">font-family</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token string">"Noto Sans JP"</span><span data-sanitized-class="token punctuation">,</span> sans-serif<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">font-size</span><span data-sanitized-class="token punctuation">:</span> 1.5rem<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">letter-spacing</span><span data-sanitized-class="token punctuation">:</span> 0.2em<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">line-height</span><span data-sanitized-class="token punctuation">:</span> 1.5<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">text-orientation</span><span data-sanitized-class="token punctuation">:</span> mixed<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">writing-mode</span><span data-sanitized-class="token punctuation">:</span> vertical-rl<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token selector">h1</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">font-size</span><span data-sanitized-class="token punctuation">:</span> 2.5rem<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">margin-block</span><span data-sanitized-class="token punctuation">:</span> 10px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token punctuation">}</span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token selector">ruby rt</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">font-size</span><span data-sanitized-class="token punctuation">:</span> 0.7rem<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token property">margin-block</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token punctuation">}</span></span><br>    </span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>style</span><span data-sanitized-class="token punctuation">&gt;</span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>head</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>div</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>vertical-text<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br>        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>縦書<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>たてが<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>きのテキストの<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token punctuation">&gt;</span></span>例<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>れい<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span></span><br>        <span data-sanitized-class="token punctuation">&gt;</span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>h1</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br>        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>日本<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>にほん<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>の<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token punctuation">&gt;</span></span>文化<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>ぶんか<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span></span><br>        <span data-sanitized-class="token punctuation">&gt;</span></span>はとても<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>豊<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>(<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span>ゆた<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rt</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span>)<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>rp</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ruby</span><span data-sanitized-class="token punctuation">&gt;</span></span>かです。<br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>div</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>body</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>And there you have it! With just a few CSS properties and HTML tags, you can transform your text to reflect a more traditional Japanese reading style.</p>
<p>実験を楽しむ！</p>
<p><em>Enjoy experimenting!</em></p>
<p data-height="300" data-default-tab="html,result" data-slug-hash="poMawje" data-pen-title="Japanese Example" data-user="YuriDevAT" data-sanitized-class="codepen">
  <span>See the Pen <a href="https://codepen.io/YuriDevAT/pen/poMawje">
  Japanese Example</a> by Julia Undeutsch (<a href="https://codepen.io/YuriDevAT">@YuriDevAT</a>)
  on <a href="https://codepen.io/">CodePen</a>.</span>
</p>

<h2 data-sanitized-id="resources">Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation">text-orientation on MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">writing-mode on MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block">margin-block on MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby">ruby on MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp">rp on MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt">rt on MDN</a></li>
</ul>


guid: CCAL-118hcal-2024-12-12
title: House Calendars, DAILY - House Calendars for December 12, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118hcal-2024-12-12
hash: G���RU�#���
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-12/pdf/CCAL-118hcal-2024-12-12.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-12/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118hcal-2024-12-12/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118hcal-2024-12-12.zip">ZIP</a>


guid: /fr/salle-de-nouvelles/appa-cadre-regissant-droits-personne-autochtones/
link: https://sencanada.ca//fr/salle-de-nouvelles/appa-cadre-regissant-droits-personne-autochtones/
hash: L��-�Ư`k�� ?\F
attributes: {"enclosures":[]}
title:
Un organisme de défense des droits de la personne des Autochtones est nécessaire pour combler un vide parmi les organismes canadiens de défense des droits de la personne


guid: CCAL-118scal-2024-12-12
title: Senate Calendars, DAILY - Senate Calendars for December 12, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118scal-2024-12-12
hash: � )�5�$@�ɕ�F
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-12/pdf/CCAL-118scal-2024-12-12.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-12/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-12/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-12.zip">ZIP</a>


guid: https://htmhell.dev/adventcalendar/2024/13/
title: Improving User Experience for Multilingual Web Browsing
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/13/
hash: ��]��&�ɁH�!!
attributes: {"enclosures":[]}
content:
by Anastasiia Batarei<br><p>Today, I’d like to talk about the experience of browsing websites where content is fully or partially in a language different from the user’s native one. This situation is common for users navigating government portals or local service providers in a country where they don't speak the language well, and for international marketplaces, where essential information might appear in unfamiliar language. Or just a user has a different language preference set in their browser because it's convenient for them. In these cases, users often rely on the browser’s auto-translate feature, which many modern browsers offer by default. When you open a page in a different language from your preferred setting, the browser will prompt you to translate it automatically.</p>
<img src="https://htmhell.dev/adventcalendar/2024/13/google-translate-popup.png" width="800" height="161" loading="lazy" alt="Language selection options in Google Translate: Dutch and English.">
<p>Browser auto-translation relies on the lang attribute set on the HTML element:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>html</span> <span data-sanitized-class="token attr-name">lang</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>en<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>html</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>However, automatic translations can sometimes be inaccurate or misleading, especially when it comes to proper and branded names, or technical terms that should remain untranslated.</p>
<p>For example, let’s see what happens when a user’s name, like <em>Joke</em> (a Dutch feminine name pronounced [ˈjoːkə]), is displayed on an English page that is then auto-translated into Dutch:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Original content in English --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Name: Joke<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Translated content in Dutch --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Naam: Grap<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The Dutch word <em>“Grap”</em> means <em>“joke”</em> — a thing said to cause amusement — turning the name into something unintended and causing confusion.</p>
<p>To prevent such misinterpretations, we can use the <code><a href="https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute">translate</a></code> attribute, which indicates whether an element content should or should not be translated. The attribute can appear on any element, and it takes just two values: <code>yes</code> or <code>no</code>. In our case, we need to use the value <code>no</code> to disable automatic translation for specific pieces of content:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Original content in English --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Name: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">translate</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>no<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Joke<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Translated content in Dutch --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Naam: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">translate</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>no<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Joke<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<h2 data-sanitized-id="translation-in-context">Translation in Context</h2>
<p>Translation engines have improved significantly over time and can often understand whether certain content, like email addresses or well-known names (e.g., <em>Pain au chocolat</em>), should be translated or not. However, it's still crucial to manually test your content to avoid unexpected issues. For instance, email addresses that appear as part of a search results page might be wrapped in additional HTML tags, which can cause translation errors. Let’s compare these two examples:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Original content in English --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>E-mail: joke@example.com<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>E-mail: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>joke<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>@example.com<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Translated content in Dutch --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>E-mailadres: joke@example.com<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>E-mailadres: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>grap<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>@voorbeeld.com<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>The issue can be easily avoided by using the <code>translate="no"</code> attribute to ensure that the email address stays untranslated:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Original content in English --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  E-mail: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">translate</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>no<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>joke<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>@example.com<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">&lt;!-- Translated content in Dutch --&gt;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  E-mailadres: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">translate</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>no<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>joke<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>mark</span><span data-sanitized-class="token punctuation">&gt;</span></span>@example.com<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>With this adjustment, the display remains accurate across languages, preventing incorrect translations and enhancing user trust. Misleading translations can create uncertainty and may cause users to double-check information unnecessarily, impacting accessibility, usability, and overall experience. Ideally, users should navigate with confidence, and as developers, we can do this small trick to make their experience smoother.</p>
<h2 data-sanitized-id="non-standardized-approach">Non-standardized approach</h2>
<p>Before the <code>translate</code> attribute was part of the HTML specification, <a href="https://www.w3.org/International/questions/qa-translate-flag#stickyness">translation engines offered similar tools</a>. For example, Google and Microsoft’s translation engines support the class <code>notranslate</code>, which worked similarly:</p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span>Name: <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>notranslate<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Joke<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>p</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p>However, using the <code>translate="no"</code> attribute, which is now part of the HTML specification, is a more robust and reliable approach, ensuring consistency across current and future translation APIs and localization standards.</p>
<p data-sanitized-class="highlight"><strong>Note:</strong> All examples were tested in Chrome Version 129.0.6668.103 (Official Build, x86_64).</p>


guid: CCAL-118scal-2024-12-16
title: Senate Calendars, DAILY - Senate Calendars for December 16, 2024 - 118th Congress, 2nd Session
link: https://www.govinfo.gov/app/details/CCAL-118scal-2024-12-16
hash: ú�3 �}� ���
tags: #Proceedings of Congress and General Congressional Publications
attributes: {"enclosures":[]}
content:
<h2>Content Files</h2>
 <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-16/pdf/CCAL-118scal-2024-12-16.pdf">PDF</a><br>
 
 
 
 
 <h2>Metadata download</h2>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-16/mods.xml">Descriptive Metadata (MODS)</a><br>
 <a href="https://www.govinfo.gov/metadata/pkg/CCAL-118scal-2024-12-16/premis.xml">Preservation Metadata (PREMIS)</a><br>
 <h2>All Content and Metadata files, including granules</h2> <a href="https://www.govinfo.gov/content/pkg/CCAL-118scal-2024-12-16.zip">ZIP</a>


title: A Critique on Adam Smith, and Trump's Tariffs from a LaRouche Perspective
author: ;Canadian Patriot Press
hash: Ƒ�/��-��R�J�J�
guid:
https://odysee.com/a-critique-on-adam-smith%2C-and-trump%27s:a8201312664d08ec94780179eddf5549f0c25573

content:
<p><img src="https://thumbnails.lbry.com/6JKYqlAs8CI" width="480" alt="thumbnail" title="A Critique on Adam Smith, and Trump's Tariffs from a LaRouche Perspective"></p>In this Economics of Well Being Podcast, Matt chats with Mark Anielski about Adam Smith, Alexander Hamilton, the pros and cons of Trump's call for protective tariffs, and the science of physical economy as it was understood by the late Lyndon LaRouche.<br><br>Get Science Unshackled here<br>https://matthewehret.substack.com/p/my-new-book-has-now-hit-the-press<br><br>Matt and Cynthia's books:<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>Watch The Hidden Hand Behind UFOs series here:<br>https://canadianpatriot.org/2023/11/01/the-hidden-hand-behind-ufos-episode-1-lifting-the-esoteric-veil/<br><br>Support the Canadian Patriot Review in the following ways:<br><br>1) Make a donation to the Canadian Patriot<br>https://www.patreon.com/canadianpatriot<br>https://canadianpatriot.org/support-us/<br><br>2) Subscribe to Matt and Cynthia's Substack<br>https://matthewehret.substack.com/<br>https://cynthiachung.substack.com/<br><br>3) Buy some books!<br>https://canadianpatriot.org/untold-history-of-canada-books/<br><br>4) Subscribe to our Telegram Channels<br>https://t.me/CanadianPatriotPress<br><br>Since it is likely just a matter of time before this Youtube channel (https://www.youtube.com/@canadianpatriotpress3573) gets suspended again or taken down entirely, check out our alternative platforms:<br><br>On Rumble<br>https://rumble.com/user/MattEhret<br><br>On Bitchute:<br>https://www.bitchute.com/channel/FPD8fbk6o541/<br><br>On Odysee<br>https://odysee.com/@canadianpatriotpress3573:4<br><br>On Soundcloud:<br>https://soundcloud.com/mattehret<br>...<br>https://www.youtube.com/watch?v=6JKYqlAs8CI

link:
https://odysee.com/a-critique-on-adam-smith%2C-and-trump%27s:a8201312664d08ec94780179eddf5549f0c25573

attributes:
{"enclosures":[{"url":"https://player.odycdn.com/api/v3/streams/free/a-critique-on-adam-smith,-and-trump's/a8201312664d08ec94780179eddf5549f0c25573/7de84c.mp4","type":"video/mp4","length":195984126}]}


guid: /fr/salle-de-nouvelles/rappel-du-senat-en-prevision-des-affaires-dinteret-public-2024-12-13/
title: Rappel du Sénat en prévision des affaires d’intérêt public
hash: R�-[ Jz�lgOu0#�
attributes: {"enclosures":[]}
link:
https://sencanada.ca//fr/salle-de-nouvelles/rappel-du-senat-en-prevision-des-affaires-dinteret-public-2024-12-13/


guid: https://thechainedmuse.substack.com/p/dialogue-with-dana-gioia-being-an
title: Dialogue with Dana Gioia: Being an Artist in a Confused Age
author: ;David Gosselin
link: https://thechainedmuse.substack.com/p/dialogue-with-dana-gioia-being-an
hash: �o/��x�R�R��ZG
content:
<div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2e01a0b-1106-4540-a267-6779c2d8fc8e_699x529.jpeg" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2 is-viewable-img"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fe2e01a0b-1106-4540-a267-6779c2d8fc8e_699x529.jpeg" width="724" height="547.9198855507868" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/e2e01a0b-1106-4540-a267-6779c2d8fc8e_699x529.jpeg","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":529,"width":699,"resizeWidth":724,"bytes":94639,"alt":null,"title":null,"type":"image/jpeg","href":null,"belowTheFold":false,"topImage":true,"internalRedirect":null,"isProcessing":false}' alt="" fetchpriority="high" data-sanitized-class="sizing-normal"></picture><div data-sanitized-class="image-link-expand"><div data-sanitized-class="pencraft pc-display-flex pc-gap-8 pc-reset"><div data-sanitized-class="pencraft pc-reset icon-container restack-image"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></div><div data-sanitized-class="pencraft pc-reset icon-container view-image"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" x2="14" y1="3" y2="10"></line><line x1="3" x2="10" y1="21" y2="14"></line></div></div></div></div></a></figure></div><p>In this latest episode, we explore the question of being an artist in a confused age with critic, translator, former Poet Laureate of California and former Chairman of the National Endowment for the Arts (NEA), Dana Gioia. From Plato to pop songs, Greek theatre to Italian opera, and archaic magic to modern enchantment, we cover a wide range of subjects.</p><p data-attrs='{"url":"https://thechainedmuse.substack.com/subscribe?","text":"Subscribe now","action":null,"class":null}' data-component-name="ButtonCreateButton" data-sanitized-class="button-wrapper"><a href="https://thechainedmuse.substack.com/subscribe?" data-sanitized-class="button primary"><span>Subscribe now</span></a></p><p><em><strong><a href="https://poets.org/poet/dana-gioia">Dana Gioia</a></strong> was born in Hawthorne, California, on December 24, 1950. He received a BA from Stanford University. Before returning to Stanford to earn an MBA, he completed an MA in comparative literature at Harvard University, where he studied with the poets <a href="https://poets.org/poetsorg/poet/elizabeth-bishop">Elizabeth Bishop</a> and <a href="https://poets.org/poet/robert-fitzgerald">Robert Fitzgerald</a>. In 1977, Gioia moved to New York to begin a career in business. For fifteen years Gioia worked as a businessman, eventually becoming a vice president of General Foods. In 1992, after publishing his first book of poetry, Daily Horoscope (Graywolf Press), in 1986, he left business to become a full-time writer.</em></p><p data-attrs='{"url":"https://thechainedmuse.substack.com/p/dialogue-with-dana-gioia-being-an?utm_source=substack&amp;utm_medium=email&amp;utm_content=share&amp;action=share","text":"Share","action":null,"class":null}' data-component-name="ButtonCreateButton" data-sanitized-class="button-wrapper"><a href="https://thechainedmuse.substack.com/p/dialogue-with-dana-gioia-being-an?utm_source=substack&amp;utm_medium=email&amp;utm_content=share&amp;action=share" data-sanitized-class="button primary"><span>Share</span></a></p><div data-sanitized-class="pullquote"><p>Check out Dana’s latest book, <em><a href="https://www.amazon.ca/Poetry-as-Enchantment-Other-Essays/dp/1589881958">Poetry as Enchantment and Other Essays</a></em>, along with some of his other classics below.</p></div><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://www.amazon.com/Poetry-as-Enchantment-Other-Essays/dp/1589881958" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6a69b738-fafb-47ec-8452-d84487ce5d22_1750x2800.jpeg" width="408" height="652.9120879120879" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/6a69b738-fafb-47ec-8452-d84487ce5d22_1750x2800.jpeg","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":2330,"width":1456,"resizeWidth":408,"bytes":null,"alt":null,"title":null,"type":null,"href":"https://www.amazon.com/Poetry-as-Enchantment-Other-Essays/dp/1589881958","belowTheFold":false,"topImage":false,"internalRedirect":null,"isProcessing":false}' alt="" data-sanitized-class="sizing-normal"></picture><div></div></div></a><figcaption data-sanitized-class="image-caption">Click on cover to order from Amazon</figcaption></figure></div><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://www.amazon.ca/Studying-Miss-Bishop-Memoirs-Writers/dp/1589881516" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F90151557-e8c2-4122-a37a-f25f6fdcfd0e_1000x1600.webp" width="412" height="659.2" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/90151557-e8c2-4122-a37a-f25f6fdcfd0e_1000x1600.webp","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":1600,"width":1000,"resizeWidth":412,"bytes":264664,"alt":null,"title":null,"type":"image/webp","href":"https://www.amazon.ca/Studying-Miss-Bishop-Memoirs-Writers/dp/1589881516","belowTheFold":false,"topImage":false,"internalRedirect":null,"isProcessing":false}' alt="" data-sanitized-class="sizing-normal"></picture><div></div></div></a><figcaption data-sanitized-class="image-caption">Click on cover to order from Amazon</figcaption></figure></div><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://www.amazon.ca/99-Poems-Selected-Dana-Gioia/dp/1555977715" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3ff1912e-ac55-451a-8e03-6550b0918386_1575x2560.jpeg" width="416" height="676.2857142857143" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/3ff1912e-ac55-451a-8e03-6550b0918386_1575x2560.jpeg","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":2367,"width":1456,"resizeWidth":416,"bytes":null,"alt":"99 Poems: New &amp; Selected: Gioia, Dana: 9781555977719: Books - Amazon.ca","title":null,"type":null,"href":"https://www.amazon.ca/99-Poems-Selected-Dana-Gioia/dp/1555977715","belowTheFold":false,"topImage":false,"internalRedirect":null,"isProcessing":false}' alt="99 Poems: New &amp; Selected: Gioia, Dana: 9781555977719: Books - Amazon.ca" title="99 Poems: New &amp; Selected: Gioia, Dana: 9781555977719: Books - Amazon.ca" data-sanitized-class="sizing-normal"></picture><div></div></div></a><figcaption data-sanitized-class="image-caption">Click on cover to order from Amazon</figcaption></figure></div><div data-sanitized-class="captioned-image-container"><figure><a target="_blank" href="https://www.amazon.ca/Seneca-Madness-Hercules/dp/195131963X" data-component-name="Image2ToDOM" data-sanitized-class="image-link image2"><div data-sanitized-class="image2-inset"><picture><source type="image/webp"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2590ea5f-b3f8-4f9a-80bf-3dc52559bce3_667x1000.jpeg" width="404" height="605.6971514242879" data-attrs='{"src":"https://substack-post-media.s3.amazonaws.com/public/images/2590ea5f-b3f8-4f9a-80bf-3dc52559bce3_667x1000.jpeg","srcNoWatermark":null,"fullscreen":null,"imageSize":null,"height":1000,"width":667,"resizeWidth":404,"bytes":null,"alt":"Seneca: The Madness of Hercules : Seneca, Gioia, Dana, Gioia, Dana:  Amazon.ca: Books","title":null,"type":null,"href":"https://www.amazon.ca/Seneca-Madness-Hercules/dp/195131963X","belowTheFold":true,"topImage":false,"internalRedirect":null,"isProcessing":false}' alt="Seneca: The Madness of Hercules : Seneca, Gioia, Dana, Gioia, Dana:  Amazon.ca: Books" title="Seneca: The Madness of Hercules : Seneca, Gioia, Dana, Gioia, Dana:  Amazon.ca: Books" loading="lazy" data-sanitized-class="sizing-normal"></picture><div></div></div></a><figcaption data-sanitized-class="image-caption">Click on cover to order from Amazon</figcaption></figure></div><div data-attrs='{"nodeId":"dcf44d75-fd31-4c45-a7e1-fcb7c2483b7f","caption":"So strange to hear that song again tonight","size":"lg","isEditorNode":true,"title":"Cruising with the Beach Boys","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-06-06T19:10:09.461Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0711a8be-345b-4435-a93e-42f36e604e4f_599x600.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/cruising-with-the-beach-boys","section_name":null,"id":145385537,"type":"newsletter","reaction_count":10,"comment_count":8,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":true}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"82db548b-72b1-47ca-a59e-742f739922b0","caption":"Blessed is the road that keeps us homeless.","size":"lg","isEditorNode":true,"title":"Prayer at Solstice","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-12-21T05:31:42.155Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fda94d89b-346d-420a-8376-4edccc7b0832_1280x853.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/prayer-at-solstice","section_name":null,"id":153441799,"type":"newsletter","reaction_count":7,"comment_count":1,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":true}' data-sanitized-class="digest-post-embed"></div><div data-attrs='{"nodeId":"d307232c-a204-4c1b-bc5c-51529ac38209","caption":"Paid subscribers can now instantly access and download the entire six issue PDF archive at the bottom of this post.","size":"lg","isEditorNode":true,"title":"Read New Lyre Magazine","publishedBylines":[{"id":24724354,"name":"David Gosselin","bio":"Writer, researcher and poet","photo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F36885c4d-379b-4612-bbd0-8e8c252f0c08_1024x739.jpeg","is_guest":false,"bestseller_tier":null}],"post_date":"2024-12-12T07:16:00.000Z","cover_image":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e8ab7df-8250-4e24-a940-b801cd71a81b_1456x549.jpeg","cover_image_alt":null,"canonical_url":"https://thechainedmuse.substack.com/p/new-lyre-issue-i-spring-2021","section_name":null,"id":139974728,"type":"newsletter","reaction_count":5,"comment_count":0,"publication_name":"The Chained Muse","publication_logo_url":"https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7194a7c4-9213-47d6-b401-eb1cfad94cf9_800x800.png","belowTheFold":true}' data-sanitized-class="digest-post-embed"></div>

attributes:
{"enclosures":[{"url":"https://api.substack.com/feed/podcast/152981117/d8abda0327e2e5e6403cd55dfee63039.mp3","type":"audio/mpeg","length":0}]}


guid: yt:video:lo963NziNVY
title: The After Effects Marker Trick Nobody Talks About!
author: ;ukramedia
link: https://www.youtube.com/watch?v=lo963NziNVY
hash: ��u��� ���(�C<�
attributes:
{"enclosures":[{"url":"https://www.youtube.com/v/lo963NziNVY?version=3","title":"The After Effects Marker Trick Nobody Talks About!","description":"In this tutorial, you'll learn how to control multiple elements across After Effects compositions using a single marker. You'll see how to set up markers to manage text, colors, and other properties efficiently with expressions. This technique simplifies updating multiple items at once, saving time on complex projects like sports templates for Fox Sports. By automating changes with markers, you can streamline your workflow and avoid repetitive manual adjustments across compositions.","type":"application/x-shockwave-flash","height":390,"width":640,"thumbnails":["https://i1.ytimg.com/vi/lo963NziNVY/hqdefault.jpg"]}]}


guid: https://htmhell.dev/adventcalendar/2024/14/
title: Page by Page: How Pagination Makes the Web Accessible
author: ;Manuel Matuzovic
link: https://htmhell.dev/adventcalendar/2024/14/
hash: ��Ls�*o~�;*��3
attributes: {"enclosures":[]}
content:
by Kristin Rohleder<br><p>Imagine you’re reading a book that seems perfect for cozy winter evenings. But as soon as you turn the page, you suddenly find yourself somewhere else, rather than on the next page of the story. Now, you have to painstakingly search through the book to find where the story continues — as if someone had bound the pages in the wrong order.<br>
Would you keep reading? Or recommend the book to others?</p>
<p>For about <a href="https://www.who.int/news-room/fact-sheets/detail/disability-and-health#:~:text=Key%20facts,1%20in%206%20of%20us.">16% of the world’s population</a> (roughly the population of China), the web often feels like a maze. People who rely on assistive technologies experience the web like a poorly bound book, one they must tediously navigate page by page rather than simply moving to the next relevant section.</p>
<p>Another example: imagine you're searching on Google and find the answer on page 2. However, to get there, you first need to enter the <a href="https://en.wikipedia.org/wiki/Konami_Code">Konami Code</a> to unlock the link. Such obscured navigation elements are, unfortunately, a daily reality for many web users.<br>
On some websites, pagination links are hidden behind inaccessible images without labels, or they use faulty ARIA attributes that make navigation difficult for screenreader users.</p>
<p>While an accessible pagination doesn't make the entire web accessible, it does ensure that everyone, whether reading a book or browsing the web, can seamlessly turn from page to page and easily find the next part of the story.</p>
<h2 data-sanitized-id="pagination-i">Pagination I</h2>
<p>Let’s start with a simple example — a pagination that’s perfect for smaller blog pages or product overviews with a limited number of items.</p>
<p><img src="https://htmhell.dev/adventcalendar/2024/14/paginationI.jpg" alt="A pagination with a previous button, 5 numbered buttons, and a next button. Illustration."></p>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>More Christmas cookie recipes<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>link<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-disabled</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>true<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Previous<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-current</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>page<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>1<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/2/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>2<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/3/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>3<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/4/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>4<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/5/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>5<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    </span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/2/<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Next, Page 2<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Next<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><strong>Clear Page Structure</strong></p>
<ul>
<li>The <code>&lt;nav&gt;</code> element with a descriptive <code>aria-label</code> provides orientation for screenreader users and makes the <a href="https://www.htmhell.dev/tips/landmarks/">page structure</a> immediately recognizable.</li>
<li>If <code>&lt;nav&gt;</code> cannot be used, the root element of the pagination can be assigned <code>role="navigation"</code> to ensure assistive technologies interpret the navigation correctly.</li>
<li>Distinct <code>aria-label</code>s (e.g. "Pagination of product listings" or "More cookie recipes") help differentiate between navigation areas and provide additional context for the links.</li>
</ul>
<p><strong>Using</strong> <code>&lt;ul&gt;</code> <strong>or</strong> <code>&lt;ol&gt;</code> <strong>for Flexibility</strong></p>
<ul>
<li>A list can improve the user experience for screenreader users. However, screenreaders interpret <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> differently, which can lead to confusion depending on the context:
<ul>
<li>With a <code>&lt;ul&gt;</code> element, a link to the second page might be read as "Bullet, Link, 2," signaling that the pages are considered equal and no strict order is implied.</li>
<li>With an <code>&lt;ol&gt;</code> element, the same link might be read as "3, Link, 2," because the position within the list (in this case, the third <code>&lt;li&gt;</code> element) is also announced. This can be confusing when the announced number doesn’t match the actual page number in the link, such as in paginations that begin with additional links like “Previous.”</li>
</ul>
</li>
<li>For small, sequential navigation, such as a multi-page news article, an <code>&lt;ol&gt;</code> is a good choice. Here, the announced order matches the page structure, helping assistive technologies convey the context. For non-linear content, where order doesn’t matter—like pages with multiple Christmas cookie recipes—a <code>&lt;ul&gt;</code> can be the better option.</li>
</ul>
<p><strong>Proper Deactivation</strong></p>
<ul>
<li>A <a href="https://www.scottohara.me/blog/2021/05/28/disabled-links.html">disabled link</a>, such as “Previous” to the first page, should not have an <code>href</code> attribute. Since the <code>disabled</code> attribute only applies to form controls like <code>&lt;button&gt;</code>, <code>aria-disabled="true"</code> is used instead.</li>
<li>Additionally, the <code>role="link"</code> attribute should be added to explicitly define the element’s role as a link. An <code>&lt;a&gt;</code> element without an <code>href</code> attribute does not have a specific default role and is treated inconsistently by assistive technologies. The combination of <code>aria-disabled="true"</code> and <code>role="link"</code> ensures that the <a href="https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria">link is correctly perceived as disabled</a> without being mistakenly interpreted as “clickable.”</li>
<li>Alternatively, a <code>&lt;span&gt;</code> element can replace the link, e.g. <code>&lt;span&gt;Previous&lt;/span&gt;</code>. This method is considered a best practice because it simplifies the code and minimizes the use of ARIA attributes. This aligns with the principle that native HTML elements and semantic structures should be preferred to improve code maintainability and clarity. Both approaches are valid as long as they are implemented correctly.</li>
</ul>
<p><strong>Intuitive Navigation</strong></p>
<ul>
<li>The <code>aria-current="page"</code> attribute indicates which page is currently open. Screenreaders interpret this as “Current page, Link, 1” or similar. This helps users quickly orient themselves and easily identify which page they are on.</li>
</ul>
<p><strong>Clear Link Descriptions</strong></p>
<ul>
<li>A visible link text such as “2” for the second page is sufficient for assistive technologies and their users to interpret the link correctly. However, if an additional <code>aria-label="Page 2"</code> were added, the link would be announced by screenreaders as “Page 2”.</li>
<li>Sighted users relying on voice control might attempt to activate the link by saying “2” because they see that number. The voice control software, would not find the link because the link name (accessible name) does not match the visible text. To avoid this, the visible text should always be identical to the accessible name.</li>
<li>Furthermore, the <code>aria-label</code> of the surrounding <code>&lt;nav&gt;</code> element (e.g. <code>aria-label="More pages of product listings"</code>) already provides the necessary context that the links are for pagination.</li>
<li>An exception can be made if the visible link text is integrated at the beginning of the <code>aria-label</code>, such as <code>aria-label="next, page 2"</code>. Here, “next” comes first to describe the function of the link, while “page 2” provides additional context. This structure is helpful as it emphasizes where the link leads.</li>
</ul>
<h2 data-sanitized-id="pagination-ii">Pagination II</h2>
<p>Let’s look at a pagination that’s particularly suited for blog pages with many entries or product listing pages with extensive products. This advanced pagination allows users to skip multiple pages in the display while maintaining a clear structure.</p>
<p>This pagination builds on the principles of the simple pagination. The same recommendations for using <code>&lt;nav&gt;</code>, <code>&lt;ul&gt;</code>, <code>aria-label</code>, <code>aria-current</code>, and <code>aria-disabled</code> apply here as well.</p>
<p><img src="https://htmhell.dev/adventcalendar/2024/14/paginationII.jpg" alt="A pagination with a button with two chevrons pointing left, a button with one chevrons pointing left, followed by an ellipsis, 3 numbered buttons (7,8, and 9), another ellipsis, and finally a button with two chevrons pointing right, a button with one chevrons pointing right. Illustration."></p>
<pre data-sanitized-class="language-css"><code data-sanitized-class="language-css"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token comment">/* styles for elements that are only relevant for screenreader users */</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token selector">.sr-only</span> <span data-sanitized-class="token punctuation">{</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">position</span><span data-sanitized-class="token punctuation">:</span> absolute<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">width</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">height</span><span data-sanitized-class="token punctuation">:</span> 1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">padding</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">margin</span><span data-sanitized-class="token punctuation">:</span> -1px<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">overflow</span><span data-sanitized-class="token punctuation">:</span> hidden<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">clip</span><span data-sanitized-class="token punctuation">:</span> <span data-sanitized-class="token function">rect</span><span data-sanitized-class="token punctuation">(</span>0<span data-sanitized-class="token punctuation">,</span> 0<span data-sanitized-class="token punctuation">,</span> 0<span data-sanitized-class="token punctuation">,</span> 0<span data-sanitized-class="token punctuation">)</span><span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">white-space</span><span data-sanitized-class="token punctuation">:</span> nowrap<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line">	<span data-sanitized-class="token property">border-width</span><span data-sanitized-class="token punctuation">:</span> 0<span data-sanitized-class="token punctuation">;</span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token punctuation">}</span></span></code></pre>
<pre data-sanitized-class="language-html"><code data-sanitized-class="language-html"><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>nav</span> <span data-sanitized-class="token attr-name">aria-label</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>More Christmas cookie recipes<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/1/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>First Page<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>presentation<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>16<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>16<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 24 24<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M14 18l-6-6 6-6L12.59 4 6.59 10 12.59 16 14 18z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M20 18l-6-6 6-6L18.59 4 12.59 10 18.59 16 20 18z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/7/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>previous-page-icon.png<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Previous Page, Page 7<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span>...<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>skipping pages 1 to 6<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/7/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>7<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>#<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">aria-current</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>page<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>8<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/9/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>9<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span>...<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>skipping pages 10 to 12<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/9/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>img</span> <span data-sanitized-class="token attr-name">src</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>next-page-icon.png<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">alt</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>Next Page, Page 9<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>a</span> <span data-sanitized-class="token attr-name">href</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>/12/<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>span</span> <span data-sanitized-class="token attr-name">class</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>sr-only<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span>Last Page, Page 12<span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>span</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>svg</span> <span data-sanitized-class="token attr-name">role</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>presentation<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">xmlns</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>http://www.w3.org/2000/svg<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">width</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>16<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">height</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>16<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token attr-name">viewBox</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>0 0 24 24<span data-sanitized-class="token punctuation">"</span></span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M10 6l6 6-6 6 1.41 1.41L18.41 12 11.41 4.59 10 6z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">          <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;</span>path</span> <span data-sanitized-class="token attr-name">d</span><span data-sanitized-class="token attr-value"><span data-sanitized-class="token punctuation attr-equals">=</span><span data-sanitized-class="token punctuation">"</span>M4 6l6 6-6 6 1.41 1.41L12.41 12 5.41 4.59 4 6z<span data-sanitized-class="token punctuation">"</span></span> <span data-sanitized-class="token punctuation">/&gt;</span></span></span><br><span data-sanitized-class="highlight-line">        <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>svg</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">      <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>a</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">    <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>li</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line">  <span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>ul</span><span data-sanitized-class="token punctuation">&gt;</span></span></span><br><span data-sanitized-class="highlight-line"><span data-sanitized-class="token tag"><span data-sanitized-class="token tag"><span data-sanitized-class="token punctuation">&lt;/</span>nav</span><span data-sanitized-class="token punctuation">&gt;</span></span></span></code></pre>
<p><strong>Using SVGs</strong></p>
<ul>
<li>Icons should always have descriptive text to make their function clear for screenreader users. Instead of describing the SVG itself (e.g. “Double arrow pointing left”), the purpose should be communicated (e.g. “First page”).</li>
<li>Using a <code>&lt;span&gt;</code> element with the <a href="https://webaim.org/techniques/css/invisiblecontent/">screenreader-only class .sr-only</a> can be a practical approach. This class hides the text visually for sighted users but makes it accessible to screenreaders. In certain cases, it may have an advantage over using an <code>aria-label</code> on the <code>&lt;a&gt;</code> element because screenreaders read the text with the correct language and pronunciation preferences.
<ul>
<li>Tested Behavior: When using NVDA (Version 2024.4) with Chrome (Version 130) and German as the language preference, English text in an <code>aria-label</code> was read with a German voice and pronunciation. However, when the text was provided via the <code>.sr-only</code> class, it was read correctly with an English voice. This behavior also has been documented in <a href="https://github.com/nvaccess/nvda/issues/16285">NVDA GitHub Issue #16285</a>.</li>
<li>With VoiceOver on macOS, no difference between the two methods was observed.</li>
<li>Note: This has not been tested with JAWS or other screenreaders and may vary depending on the browser and screenreader combination.</li>
</ul>
</li>
<li>The <code>role="presentation"</code> attribute should be added to SVG elements to prevent some screenreaders from announcing them as standalone elements (e.g. “Link, Image, First page”). This ensures they are interpreted as purely decorative and not announced (e.g. “Link, first page”).</li>
</ul>
<p><strong>Using Images</strong></p>
<ul>
<li>When an <code>&lt;img&gt;</code> element is the only child of a link, the text of the <code>alt</code> attribute is automatically read by screenreaders as the link text. Therefore, the <code>alt</code> attribute should include a descriptive text that clearly conveys the function of the link (e.g. <code>alt="Next Page, Page 9"</code>). This method is a best practice as it is natively supported by screenreaders and requires no additional effort.</li>
<li>If it is not possible to modify the <code>alt</code> attribute of the image due to technical constraints, an <code>aria-label</code> on the <code>&lt;a&gt;</code> element can be used instead to describe the function of the link. However, this solution should only be applied in exceptional cases.</li>
</ul>
<p><strong>Skipping Multiple Pages</strong></p>
<ul>
<li>In reading mode, screenreaders typically do not announce ellipses (“...”) used to indicate skipped pages. Instead, the list item is often read as an empty bullet, which can confuse users as it does not explain why no additional information is provided at that point.</li>
<li>To ensure that skipping pages is clearly communicated, an explanatory text such as “skipping pages 10 to 12” should be added using the <a href="https://webaim.org/techniques/css/invisiblecontent/">screenreader-only class .sr-only</a>. This text will be read by screenreaders but remain invisible to sighted users. An <code>aria-label</code> is not a suitable alternative here, as it cannot be applied to generic elements like <code>&lt;span&gt;</code> or <code>&lt;div&gt;</code>.</li>
<li>This approach is particularly helpful when page skipping occurs in the middle of pagination, as it provides screenreader users with context and prevents confusion about why navigation jumps from one page (e.g. page 2) to another (e.g. page 7). The additional context improves orientation and reduces potential misunderstandings.</li>
</ul>
<h2 data-sanitized-id="the-final-chapter">The final chapter</h2>
<p>Accessible pagination is more than just a design detail—it provides orientation, simplifies navigation, and greatly improves the user experience, especially for those relying on assistive technologies.</p>
<p>The semantic HTML elements and ARIA attributes presented here create an accessible structure that remains easy to use across all devices, from desktop to smartphone.</p>
<p>Accessible pagination ensures that all users can navigate the web without "getting lost as if reading a book with pages bound out of order."  This makes the web not only more inclusive but also more accessible for everyone looking to find content efficiently and directly.</p>
<h2 data-sanitized-id="testing-and-validation">Testing and validation</h2>
<p>To ensure the proposed solutions deliver on their promise, I conducted tests in different environments:</p>
<ul>
<li>HTML Validation: The code was tested using the <a href="https://validator.w3.org/nu/">W3C HTML Validator</a> with no errors or warnings found.</li>
<li>Tested on <a href="https://assistivlabs.com/">AssistivLabs</a>, a platform for remote testing of assistive technologies:
<ul>
<li>Screenreader: NVDA (Version 2024.4)</li>
<li>Browser: Chrome (Version 130)</li>
</ul>
</li>
<li>Tested on a real device:
<ul>
<li>Operating System: macOS 15.1.1</li>
<li>Screenreader: VoiceOver</li>
<li>Browsers: Chrome (Version 131) and Firefox (Version 133)</li>
</ul>
</li>
</ul>
<p>However, additional testing with other screenreader and browser combinations is recommended to ensure compatibility across a wider range of devices and tools.</p>


