Helvede

0 posts0 participants0 posts today

Aral Balkan👆 Sorry, life got in the way; just deployed this but I haven’t had a chance to document it properly yet. I’ll make a proper announcement when I do.Also, you can now use the `delete` attribute on a DOM node/Kitten component you’re streaming back from the server to have it removed from the DOM on the client. It’s syntactic sugar for hx-swap-oob='delete' in htmx.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#icons</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a>

Aral BalkanNew Kitten update• 🥳 Kitten HTML templates and kitten.Component render functions can now be async.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.The kitten.Component version also has a refresh button that streams a different three to the page.For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/async" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#async</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/templates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#templates</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/generators" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#generators</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Frontend DogmaHow WebAssembly Components Can Replace JavaScript Sdks, by @sachamorard.bsky.social (@edgee_cloud@x.com):<a href="https://www.edgee.cloud/blog/posts/wasm-component-is-the-new-sdk" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.edgee.cloud/blog/posts/wasm-component-is-the-new-sdk</a><a href="https://mas.to/tags/webassembly" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webassembly</a> <a href="https://mas.to/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mas.to/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a>

The Chaotic Good 🏳️‍⚧️🏳️‍🌈🖖"<a href="https://lgbtqia.space/tags/Tariffs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tariffs</a> won't affect consumers"Suuuuure they won't, <a href="https://lgbtqia.space/tags/OranutanDon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OranutanDon</a>. My latest order of <a href="https://lgbtqia.space/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> would disagree.

Aral Balkan(Nope, because, of course, the actual reference doesn’t exist at the loader stage.) Oh, well, I’m going to try and make it so that you’ll at least be able to connect child components in the markup itself so you don’t have to remember to do it in some other place. That should, at least, be doable.<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/connectedComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#connectedComponents</a>

Aral Balkan🎉 You can now use components and fragments in your Markdown pages in Kitten.Following on from yesterday’s Markdown pages feature, you can now import components and fragments and use them in your Markdown pages to add dynamic functionality (similar to how it works in mdx but without using JSX).(The “SCARY” text in the screencast is being randomly animated by a component.)Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/Markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Markdown</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/fragments" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fragments</a> <a href="https://mastodon.ar.al/tags/mdx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mdx</a>

Aral BalkanNew Video – Kitten features introduced this week: • Interactive Shell (REPL) • Multi-page Settings • Backup and restore (data portability)With examples that cover components and Kitten’s built-in JavaScript database (JSDB).<a href="https://ar.al/2024/05/23/new-kitten-features-interactive-shell-repl-multi-page-settings-and-backup-and-restore-data-portability/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ar.al/2024/05/23/new-kitten-features-interactive-shell-repl-multi-page-settings-and-backup-and-restore-data-portability/</a>:kitten:💕 <a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/database" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#database</a> <a href="https://mastodon.ar.al/tags/JSDB" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JSDB</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/settings" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#settings</a> <a href="https://mastodon.ar.al/tags/dataPortability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dataPortability</a> <a href="https://mastodon.ar.al/tags/REPL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#REPL</a>

Aral BalkanYou can now create HTML and CSS fragments in Kitten.This introduces two new file extensions (.fragment.html and .fragment.css) and you can import these fragments into your pages and into other components and fragments as if they were JavaScript modules*.HTML fragments also support slots.Example:<a href="https://codeberg.org/kitten/app/src/branch/main/examples/html-and-css-fragments" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/kitten/app/src/branch/main/examples/html-and-css-fragments</a>*Thanks to Kitten’s behind-the-scenes use of a custom ES Module Loader.<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.ar.al/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/fragments" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fragments</a> <a href="https://mastodon.ar.al/tags/slots" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#slots</a>

Michel MarianiUnicopedia Sinica is a developer-oriented set of <a href="https://mastodon.social/tags/Unicode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Unicode</a> utilities related to ideographs, wrapped into one single app, built with <a href="https://mastodon.social/tags/Electron" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Electron</a>.Repository: 🔗 <a href="https://codeberg.org/tonton-pixel/unicopedia-sinica" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/tonton-pixel/unicopedia-sinica</a><a href="https://mastodon.social/tags/characters" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#characters</a> <a href="https://mastodon.social/tags/chinese" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#chinese</a> <a href="https://mastodon.social/tags/cjk" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cjk</a> <a href="https://mastodon.social/tags/cjkrelated" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cjkrelated</a> <a href="https://mastodon.social/tags/cjkv" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cjkv</a> <a href="https://mastodon.social/tags/codecharts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codecharts</a> <a href="https://mastodon.social/tags/codepoints" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codepoints</a> <a href="https://mastodon.social/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.social/tags/confusables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#confusables</a> <a href="https://mastodon.social/tags/desktopapplication" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#desktopapplication</a> <a href="https://mastodon.social/tags/electronjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#electronjs</a> <a href="https://mastodon.social/tags/glyphs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#glyphs</a> <a href="https://mastodon.social/tags/ideographs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ideographs</a> <a href="https://mastodon.social/tags/ideographicdescriptionsequences" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ideographicdescriptionsequences</a> <a href="https://mastodon.social/tags/ids" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ids</a> <a href="https://mastodon.social/tags/japanese" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#japanese</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/kangxi" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#kangxi</a> <a href="https://mastodon.social/tags/kangxiradicals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#kangxiradicals</a> <a href="https://mastodon.social/tags/korean" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#korean</a> <a href="https://mastodon.social/tags/localfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#localfonts</a> <a href="https://mastodon.social/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> <a href="https://mastodon.social/tags/strokes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#strokes</a> <a href="https://mastodon.social/tags/tangut" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tangut</a> <a href="https://mastodon.social/tags/unicode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#unicode</a> <a href="https://mastodon.social/tags/unicopedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#unicopedia</a> <a href="https://mastodon.social/tags/unihan" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#unihan</a> <a href="https://mastodon.social/tags/vietnamese" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vietnamese</a>

Karsten SchmidtNew <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> releases & example: This week's releases included updates to <a href="https://thi.ng/system" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/system</a>, a minimal and declarative way to compose an app from multiple components, build their dependency graph and manage their lifecycle (async start/stop) in the correct (topological) order. The computed graph (DAG) can then also be serialized to GraphViz format for visualization/debugging/documentation purposes with a single line of code (see readme)...Even though I've been using this system in dozens of projects, it occurred to me there wasn't any example project yet demonstrating this approach, so I finally fixed that:<a href="https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus</a>The demo is purposefully minimal and the source code is (hopefully) much more interesting than the result. In addition to showing how the app components are defined, this example also shows another powerful pattern I've been using in my own tools:Using <a href="https://thi.ng/atom" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/atom</a> as central app state and <a href="https://thi.ng/rstream" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/rstream</a> pubsub as central event bus, to both of which various system components can attach topic based subscriptions (aka event and/or change handlers). Since each of these reactive subscriptions are normal rstream subs, they can all be forming graphs of child subs and be filtered/transformed and synchronized via hundreds of composable operators in the <a href="https://thi.ng/rstream" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/rstream</a> and <a href="https://thi.ng/transducers" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/transducers</a> packages — and — these rstream values can also be directly embedded in <a href="https://thi.ng/rdom" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/rdom</a> created reactive UI components/elements/attributes. Some of these techniques are shown in this new example as well... Hope it's helpful to some of you!<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ThingNews" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingNews</a> <a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HowToThing</a> <a href="https://mastodon.thi.ng/tags/Graph" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Graph</a> <a href="https://mastodon.thi.ng/tags/Components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Components</a> <a href="https://mastodon.thi.ng/tags/Lifecycle" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Lifecycle</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/PubSub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PubSub</a> <a href="https://mastodon.thi.ng/tags/GraphViz" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GraphViz</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a>

Penpot :penpot:You'll be able to swap components easily in Penpot very soon! This and other major enhancements of Penpot components will enable to speed up the maintenance of your design systems. Stay tuned for Penpot 2.0!<a href="https://fosstodon.org/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> <a href="https://fosstodon.org/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://fosstodon.org/tags/developer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#developer</a> <a href="https://fosstodon.org/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a>

Tabletop Games Blog (they)Some games are accused of capitalising on the attraction of gimmicks when they are actually an integral part without which the game wouldn't function. In this article, I want to look at this more closely. <a href="https://tabletopgamesblog.com/2024/01/02/stop-toying-with-me-when-gimmicks-in-board-games-have-a-purpose-topic-discussion/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tabletopgamesblog.com/2024/01/02/stop-toying-with-me-when-gimmicks-in-board-games-have-a-purpose-topic-discussion/</a> <a href="https://tabletop.social/tags/boardgames" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#boardgames</a> <a href="https://tabletop.social/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://tabletop.social/tags/gimmicks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gimmicks</a> <a href="https://tabletop.social/tags/opinions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opinions</a>

Tabletop Games Blog (they)Hi, it’s Joe Slack here. Oliver was kind enough to let me share my thoughts as a game designer and indie publisher on why table presence matters for board games. <a href="https://tabletopgamesblog.com/2023/10/24/why-table-presence-matters-for-board-games-topic-discussion/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tabletopgamesblog.com/2023/10/24/why-table-presence-matters-for-board-games-topic-discussion/</a> (Photo by Alex Haney on Unsplash) <a href="https://tabletop.social/tags/TablePresence" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TablePresence</a> <a href="https://tabletop.social/tags/boardgames" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#boardgames</a> <a href="https://tabletop.social/tags/TopicDiscussion" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TopicDiscussion</a> <a href="https://tabletop.social/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a>

Aral Balkan:kitten: Just merged an improved slots implementation to main and you can now pass CSS class lists to components. 🎉 Read more:Slots: <a href="https://codeberg.org/kitten/app#slots" rel="nofollow noopener noreferrer" target="_blank">https://codeberg.org/kitten/app#slots</a>Layout components: <a href="https://codeberg.org/kitten/app#layout-components" rel="nofollow noopener noreferrer" target="_blank">https://codeberg.org/kitten/app#layout-components</a>Passing CSS class lists to components: <a href="https://codeberg.org/kitten/app#layout-components" rel="nofollow noopener noreferrer" target="_blank">https://codeberg.org/kitten/app#layout-components</a>Named slots: <a href="https://codeberg.org/kitten/app#layout-components" rel="nofollow noopener noreferrer" target="_blank">https://codeberg.org/kitten/app#layout-components</a>Sample project: <a href="https://codeberg.org/kitten/app/src/branch/main/examples/layout" rel="nofollow noopener noreferrer" target="_blank">https://codeberg.org/kitten/app/src/branch/main/examples/layout</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/templating" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#templating</a> <a href="https://mastodon.ar.al/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.ar.al/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.ar.al/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a>

Morten🧵 1/3: What’s the difference between a carousel, a swiper and a slider? The terms are used interchangeably, but I would argue, there’s a semantic difference.<a href="https://mstdn.dk/tags/Carousels" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Carousels</a> are circular. They start over once you reach the last item.<a href="https://mstdn.dk/tags/Swipers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Swipers</a> are linear. You can swipe back and forth, but once you reach the last item, you can’t swipe any further.<a href="https://mstdn.dk/tags/Sliders" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Sliders</a> are input elements (e.g. volume controls), and thus entirely diffenret <a href="https://mstdn.dk/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UI</a> <a href="https://mstdn.dk/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mstdn.dk/tags/ux" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ux</a> <a href="https://mstdn.dk/tags/uidesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#uidesign</a> <a href="https://mstdn.dk/tags/namingconventions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#namingconventions</a>

Grandalf 𝘸𝘪𝘵𝘩 𝘢𝘯 𝘙<a href="https://mastodon.au/tags/Introduction" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Introduction</a> (I guess).Old.40 years in <a href="https://mastodon.au/tags/IT" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IT</a>, from <a href="https://mastodon.au/tags/soldering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#soldering</a> <a href="https://mastodon.au/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> onto <a href="https://mastodon.au/tags/breadboards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#breadboards</a> to <a href="https://mastodon.au/tags/managing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#managing</a> <a href="https://mastodon.au/tags/multi" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#multi</a>-national <a href="https://mastodon.au/tags/systems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#systems</a>. Was fun, then it got boring.20 years (started late) as a <a href="https://mastodon.au/tags/volunteer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#volunteer</a> <a href="https://mastodon.au/tags/firefighter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#firefighter</a>, from newbie to Group Officer and <a href="https://mastodon.au/tags/educator" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#educator</a> of <a href="https://mastodon.au/tags/firefighters" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#firefighters</a> and the public. Loved it!15 years of working <a href="https://mastodon.au/tags/sound" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#sound</a> and <a href="https://mastodon.au/tags/lights" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lights</a> for the <a href="https://mastodon.au/tags/stage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#stage</a>, from <a href="https://mastodon.au/tags/musicals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#musicals</a> to <a href="https://mastodon.au/tags/groups" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#groups</a>. Loved that, too.<a href="https://mastodon.au/tags/Pyrrhonist" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pyrrhonist</a> - I’m an <a href="https://mastodon.au/tags/unbeliever" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#unbeliever</a>. In anything. I only trust <a href="https://mastodon.au/tags/sources" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#sources</a> that have <a href="https://mastodon.au/tags/evidence" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#evidence</a>.

betsystreeter 🦥 🐄 🦇 🐧 🐙couple more vintage goodies, soon I'll compile these into a posterI should mention anyone who even considers scraping my stuff into enn eff tees or any other misuse gets a burning and incurable crusty itchy rash in their butt crack forever I do not make the rules 😁 <a href="https://mastodon.art/tags/vintage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vintage</a> <a href="https://mastodon.art/tags/stereo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#stereo</a> <a href="https://mastodon.art/tags/mattel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mattel</a> <a href="https://mastodon.art/tags/football" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#football</a> <a href="https://mastodon.art/tags/analog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#analog</a> <a href="https://mastodon.art/tags/equipment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#equipment</a> <a href="https://mastodon.art/tags/technology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#technology</a> <a href="https://mastodon.art/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.art/tags/drawing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#drawing</a> <a href="https://mastodon.art/tags/painting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#painting</a> <a href="https://mastodon.art/tags/illustration" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#illustration</a> <a href="https://mastodon.art/tags/original" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#original</a> <a href="https://mastodon.art/tags/mastoart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mastoart</a> <a href="https://mastodon.art/tags/fediart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fediart</a> <a href="https://mastodon.art/tags/creativetoots" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#creativetoots</a> <a href="https://mastodon.art/tags/retro" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#retro</a> <a href="https://mastodon.art/tags/retrogaming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#retrogaming</a>

Andreas Sander<a href="https://toot.cafe/tags/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#React</a> devs: How do you test simple conditions and UI interactions (e.g. toggle being opened/closed) for your <a href="https://toot.cafe/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a>? Any tips or hints?

Recent searches

Search options

Administered by:

Server stats:

#components