masto.ai is one of the many independent Mastodon servers you can use to participate in the fediverse.
A general Mastodon server for all languages.

Administered by:

Server stats:

2.1K
active users

#html

50 posts43 participants1 post today
Rafael<p>Prismic.io has published a collection of lists for many types of css/javascript/svg driven animations to enhance your web apps' user experience. Each example includes real-world use cases and clear code examples in the appropriate languages.</p><p>The collection includes:</p><p>1. Text Animations<br>2. Hover Effects<br>3. Button Animations<br>4. Background Effects, and<br>5. Image Effects</p><p>"CSS Animation Collection: 150+ Examples &amp; Code"</p><p><a href="https://prismic.io/guides/css-animations" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">prismic.io/guides/css-animatio</span><span class="invisible">ns</span></a></p><p><a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>programming</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://mastodon.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svg</span></a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a></p>
CSS Basics<p>Create an <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> dialog when you click an image: "So, I worked some HTML &lt;dialog&gt; magic and set it up so that as I add images to a post, you can click on them and see them a bit bigger in a pop up!" <a href="https://cassidoo.co/post/html-dialog-on-image-click/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">cassidoo.co/post/html-dialog-o</span><span class="invisible">n-image-click/</span></a></p>
Reilly Spitzfaden (they/them)<p>I love looking at people's website source code, especially when I stumble across cool things like this:</p><p>view-source:<a href="https://www.write-on.org/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">write-on.org/</span><span class="invisible"></span></a></p><p><a href="https://hachyderm.io/tags/ASCII" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ASCII</span></a> <a href="https://hachyderm.io/tags/ASCIIArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ASCIIArt</span></a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
CSS by T. Afif :verified:<p>If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work!</p><p>Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month.</p><p><a href="https://css-tip.com/advertise/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-tip.com/advertise/</span><span class="invisible"></span></a></p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
Aral Balkan<p>New Kitten release</p><p>• Fix: messages that are promises are properly awaited before being sent.</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>Kitten automatically and transparently handles asynchronous content in your templates for you so you don’t have to worry about it. One place where this wasn’t working properly is if you addressed `this.component` to stream a custom update of your component manually instead of calling the `this.update()` method of Kitten component instances.</p><p>e.g.,</p><p>```js<br>export default class AdminPage extends kitten.Page {<br> // …<br> onSelectedPost (data) {<br> this.send(kitten.html`&lt;${this.component} postId='${data.selectedPost.postId}' /&gt;`)<br> }<br>}<br>```</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>news</span></a> <a href="https://mastodon.ar.al/tags/updates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>updates</span></a> <a href="https://mastodon.ar.al/tags/promises" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>promises</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techniques</span></a><br>Never lose a z-index battle again · How to set the highest possible z-index in CSS <a href="https://ilo.im/163b5p" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/163b5p</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/CssCalc" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssCalc</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Adarr (bien vener ouais)<p><a href="https://mamot.fr/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mamot.fr/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mamot.fr/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a><br>Purée, je m'arrache les cheveux qu'il me reste avec ces histoires de contrôle du clavier qui doit s'ouvrir au focus de mes inputs.<br>Rien ne fonctionne plus depuis quelques années.<br>Avant on mettait type="number" et hop, c'était nickel.<br>Bah maintenant non. Sur PC ça tourne mais sur android ça fait n'imp avec les décimales et ça fait péter les mises à jour externes de l'input avec React. Le top du top.</p><p>Et vive la standardisation du web... LOL</p><p>Je suis FURAX</p>
HubSite 365<p>💥 Create Stunning PDFs in Power Automate — No Premium Needed! 🆓</p><p>✨ Custom columns with CSS<br>🖌️ Unique styles for each table<br>🖼️ Branded images &amp; layouts<br>🛠️ Troubleshoot HTML/CSS with ease<br>🔓 No premium license required!</p><p>▶︎ <a href="https://www.hubsite365.com/en-ww/citizen-developer/?id=314cd0eb-3419-f011-998a-6045bdf57e1e&amp;topic=8daf8386-bb75-ea11-a811-000d3a210788&amp;theater=true" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">hubsite365.com/en-ww/citizen-d</span><span class="invisible">eveloper/?id=314cd0eb-3419-f011-998a-6045bdf57e1e&amp;topic=8daf8386-bb75-ea11-a811-000d3a210788&amp;theater=true</span></a></p><p>🚀 Power Automate allows PDF creation without premium access. Explore cost-effective and flexible solutions powered by HTML and CSS integration in Power Automate. Achieve high-quality PDFs customizing every detail by managing your flows intuitively. Embrace no premium capabilities today! 🌟</p><p><a href="https://techhub.social/tags/PowerAutomate" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PowerAutomate</span></a> <a href="https://techhub.social/tags/PDFTemplates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PDFTemplates</span></a> <a href="https://techhub.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://techhub.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://techhub.social/tags/AutomationTools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AutomationTools</span></a></p>
CSS by T. Afif :verified:<p>I have made a small interactive demo to better see how flex-wrap affects the alignment and also see the difference between align-content and align-items.</p><p>Demo: <a href="https://codepen.io/t_afif/full/EaxBevN" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/t_afif/full/EaxBevN</span><span class="invisible"></span></a> via <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span> </p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
ApisNecros<p>A favorite hobby of mine has become collecting outdated, preferably chintzy, tech books. My most recent is the MS-DOS 6.2 guide.</p><p><a href="https://ioc.exchange/tags/perl" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>perl</span></a> <a href="https://ioc.exchange/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a> <a href="https://ioc.exchange/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://ioc.exchange/tags/msdos" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>msdos</span></a> <a href="https://ioc.exchange/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>programming</span></a></p>
Sebastian<p><a href="https://berlin.social/tags/TIL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TIL</span></a>: Vielleicht bin ich ja der letzte der davon erfahren hat, aber <a href="https://berlin.social/tags/mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>mastodon</span></a> hat auch <a href="https://berlin.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> Meta Tag(s) für die author Darstellung.</p><p><a href="https://blog.joinmastodon.org/2024/07/highlighting-journalism-on-mastodon/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">blog.joinmastodon.org/2024/07/</span><span class="invisible">highlighting-journalism-on-mastodon/</span></a></p>
Jelle Haandrikman<p>Pro development tip. Don't comment out the PHP code byt using HTML commenting. </p><p>&lt;!-- <br>&lt;?php phpinfo(); ?&gt;<br>--&gt; </p><p>Outputs everything cleanly commenting out. <a href="https://mas.to/tags/security" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>security</span></a> <a href="https://mas.to/tags/oops" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>oops</span></a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mas.to/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>php</span></a></p><p>This works better.<br>&lt;?php # phpinfo(); ?&gt;</p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techniques</span></a><br>How to open and close HTML dialogs · You’ll use a little JS today but none in the future <a href="https://ilo.im/163b4u" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/163b4u</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Dialogs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Dialogs</span></a> <a href="https://mastodon.social/tags/Modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Modals</span></a> <a href="https://mastodon.social/tags/Invokers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Invokers</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
CSS by T. Afif :verified:<p>Do you know the flex-wrap property? It allows flex items to wrap but it has another "secret" behavior not related to wrapping.</p><p>Many are not aware of this hidden functionality but it is never too late to learn about it!</p><p><a href="https://css-tip.com/flex-wrap/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-tip.com/flex-wrap/</span><span class="invisible"></span></a></p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techniques</span></a><br>Multi-step logins with password manager support · The problem with email-first logins and how to solve it <a href="https://ilo.im/163at0" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/163at0</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Logins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Logins</span></a> <a href="https://mastodon.social/tags/Forms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Forms</span></a> <a href="https://mastodon.social/tags/Passwords" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Passwords</span></a> <a href="https://mastodon.social/tags/PasswordManagers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PasswordManagers</span></a> <a href="https://mastodon.social/tags/SSO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SSO</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/Usability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Usability</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
SELFHTML e.V.<p>SELFHTML wird 30! Das wollen wir feiern!</p><p>Am Samstag, den 24.05.2025 gibt es …<br>12:00 Unconference mit Beiträgen zu RWD, Screenreadern und mehr<br>17:00 Stadtrundgang Stadt.Wand.Kunst <br>19:00 Abendessen</p><p><a href="https://forum.selfhtml.org/self/2025/apr/11/self-treffen-2025-unconference/1819538#m1819538" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">forum.selfhtml.org/self/2025/a</span><span class="invisible">pr/11/self-treffen-2025-unconference/1819538#m1819538</span></a></p><p><a href="https://bildung.social/tags/mannheim" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>mannheim</span></a> <a href="https://bildung.social/tags/rheinneckar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>rheinneckar</span></a> <a href="https://bildung.social/tags/fedilLZ" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fedilLZ</span></a> <a href="https://bildung.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://bildung.social/tags/barrierefreiheit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>barrierefreiheit</span></a></p>
i686-powered lia<p>My nerdy special-interest-having ass wishes there was <a href="https://mastodon.gamedev.place/tags/Fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Fediverse</span></a> software that lets you, no, actually *requires* you to use semantic markup for your posts. I want my &lt;abbr&gt;s and my &lt;dfn&gt;s and even all the <a href="https://mastodon.gamedev.place/tags/Schema" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Schema</span></a> <a href="https://mastodon.gamedev.place/tags/microformats" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>microformats</span></a>!</p><p>I wanna add semantic info to literally everything on the whole wide web and I am not afraid.</p><p>The only depressing thought in the back of my head is that no software will ever do anything cool with all that information...</p><p><a href="https://mastodon.gamedev.place/tags/SemanticWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SemanticWeb</span></a> <a href="https://mastodon.gamedev.place/tags/SemanticHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SemanticHTML</span></a> <a href="https://mastodon.gamedev.place/tags/SchemaOrg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SchemaOrg</span></a> <a href="https://mastodon.gamedev.place/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
Aleahim<p>I got tired of manually updating my CV across different formats, especially PDF.</p><p>So I built CVBuilder, a Swift package that keeps everything in code—typed, versioned, and exportable as Markdown, HTML (via Ignite), or plain text.</p><p>Here's more info about it:<br><a href="https://aleahim.com/cvbuilder/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">aleahim.com/cvbuilder/</span><span class="invisible"></span></a></p><p>And a GitHub repo:<br><a href="https://github.com/mihaelamj/cvbuilder" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">github.com/mihaelamj/cvbuilder</span><span class="invisible"></span></a></p><p><a href="https://mastodon.social/tags/Swift" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Swift</span></a> <a href="https://mastodon.social/tags/SwiftPackage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SwiftPackage</span></a> <a href="https://mastodon.social/tags/CV" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CV</span></a> <a href="https://mastodon.social/tags/Markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Markdown</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenSource</span></a> <a href="https://mastodon.social/tags/iOSDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>iOSDev</span></a></p>
YongZS永值生’s new account<p>旋宮圖 Hsüan Kung Diagram<br><a href="https://yongzs1218.github.io/hsuan-kung/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">yongzs1218.github.io/hsuan-kun</span><span class="invisible">g/</span></a><br>在AI的指導下,我用JavaScript、CSS和HTML架設了一份網頁版「旋宮圖」。該圖可用於旋宮犯調實踐,之調、爲調轉換等場景。</p><p>Under the guidance of AI, I developed a web-based “Hsüan Kung Diagram” using JavaScript, CSS, and HTML. This diagram is designed for Hsüan²-kung (Xuán-gōng, 旋宮) and Fan⁴-tiao⁴ (Fàn-diào, 犯調) practices, including scenes such as Chih-tiao⁴ (Zhī-diào, 之調) and Wei²-tiao⁴ (Wéi-diào, 爲調) transformations. 旋宮 and 犯調 are traditional Chinese modulation or transposition concepts, 之調 and 爲調 are traditional Chinese key notation systems.</p><p>AIの指導のもと、私はJavaScript、CSS、HTMLを用いてウェブ版「旋宮図(せんきゅうず)」を構築しました。この図は、旋宮犯調(せんきゅうはんちょう)の実践や、之調(しちょう)・爲調(いちょう)の変換などのシナリオに活用できます。</p><p>Dưới sự hướng dẫn của AI, tôi đã xây dựng một ”Đồ Huyền Cung (圖旋宮)“ phiên bản web bằng JavaScript, CSS và HTML. Bản đồ này có thể ứng dụng trong thực hành chuyển điệu Huyền Cung <del> Phạm Điệu (旋宮 </del> 犯調), cũng như chuyển đổi giữa hệ thống Chi Điệu (之調) và Vi Điệu (爲調)./𨑜事向引𧵑AI,碎㐌𡏦𥩯“圖旋宮”翻版web憑JavaScript,CSS吧HTML。版圖尼固體應用𥪝轉調 旋宮-犯調,拱如轉𢷮𡧲系統之調吧爲調。</p><p>AI의 지도 아래, 저는 JavaScript, CSS, HTML을 사용하여 웹 버전 「선궁도(旋宮圖)」를 구축했습니다. 이 도표는 선궁 범조(旋宮 犯調) 실습 및 지조(之調)·위조(爲調) 변환 시나리오에 활용될 수 있습니다./AI의 指導 아래, 저는 JavaScript, CSS, HTML을 사용하여 웹 版 「旋宮圖(선궁도)」를 構築했습니다. 이 圖表는 旋宮 犯調(선궁 범조) 實習 및 之調(지조)·爲調(위조) 轉換 시나리오에 活用될 수 있습니다.</p><p><a href="https://mastodon.ktachibana.party/tags/chinese" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>chinese</span></a> <a href="https://mastodon.ktachibana.party/tags/chinesemusic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>chinesemusic</span></a> <a href="https://mastodon.ktachibana.party/tags/musictheory" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>musictheory</span></a> <a href="https://mastodon.ktachibana.party/tags/china" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>china</span></a> <a href="https://mastodon.ktachibana.party/tags/music" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>music</span></a> <a href="https://mastodon.ktachibana.party/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ktachibana.party/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://mastodon.ktachibana.party/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mastodon.ktachibana.party/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.ktachibana.party/tags/webpage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webpage</span></a> <a href="https://mastodon.ktachibana.party/tags/%E9%9F%B3%E6%A8%82" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>音樂</span></a> <a href="https://mastodon.ktachibana.party/tags/%E4%B8%AD%E8%8F%AF" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>中華</span></a> <a href="https://mastodon.ktachibana.party/tags/%E5%9C%8B%E6%A8%82" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>國樂</span></a> <a href="https://mastodon.ktachibana.party/tags/%E5%8D%8E%E4%B9%90" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>华乐</span></a> <a href="https://mastodon.ktachibana.party/tags/%E6%B0%91%E6%A8%82" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>民樂</span></a> <a href="https://mastodon.ktachibana.party/tags/%E4%B8%AD%E6%A8%82" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>中樂</span></a> <a href="https://mastodon.ktachibana.party/tags/%E4%B8%AD%E5%9C%8B" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>中國</span></a> <a href="https://mastodon.ktachibana.party/tags/%E6%A8%82%E7%90%86" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>樂理</span></a> <a href="https://mastodon.ktachibana.party/tags/%E7%B6%B2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>網</span></a> <a href="https://mastodon.ktachibana.party/tags/%E4%B8%AD%E8%8F%AF%E9%9F%B3%E6%A5%BD" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>中華音楽</span></a> <a href="https://mastodon.ktachibana.party/tags/%E9%9F%B3%E6%A5%BD" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>音楽</span></a> <a href="https://mastodon.ktachibana.party/tags/%E8%8F%AF%E6%A5%BD" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>華楽</span></a> <a href="https://mastodon.ktachibana.party/tags/%E9%9F%B3%E6%A5%BD%E7%90%86%E8%AB%96" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>音楽理論</span></a> <a href="https://mastodon.ktachibana.party/tags/%E3%82%A6%E3%82%A7%E3%83%96" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ウェブ</span></a> <a href="https://mastodon.ktachibana.party/tags/trungquoc" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>trungquoc</span></a> <a href="https://mastodon.ktachibana.party/tags/amnhac" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>amnhac</span></a> <a href="https://mastodon.ktachibana.party/tags/lythuyetamnhac" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>lythuyetamnhac</span></a> <a href="https://mastodon.ktachibana.party/tags/%EC%9D%8C%EC%95%85" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>음악</span></a> <a href="https://mastodon.ktachibana.party/tags/%EC%A4%91%EA%B5%AD" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>중국</span></a> <a href="https://mastodon.ktachibana.party/tags/%EC%9D%8C%EC%95%85%EC%9D%B4%EB%A1%A0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>음악이론</span></a></p>
Terence Eden<p>One last question before I collapse from exhaustion.</p><p>Is this conformant with the HTML spec?<br>That is, will browsers correctly sniff the MIME type parameters?</p><p>&lt;video&gt;<br> &lt;source src=movie.webm type="video/webm; codecs=&amp;quot;vp8, vorbis&amp;quot;"&gt;<br>&lt;/video&gt;</p><p>Spec: <a href="https://mimesniff.spec.whatwg.org/#parameters" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mimesniff.spec.whatwg.org/#par</span><span class="invisible">ameters</span></a></p><p><a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>