mastodon.ie

Harris LapiroffEarlier this week I posted about rough edges I encountered using WebC. I wanted to follow up with specific technical details from the ones I documented in the process of converting my website to it.<a href="https://chromamine.com/2025/07/webc-quirks/" rel="nofollow noopener" translate="no" target="_blank">https://chromamine.com/2025/07/webc-quirks/</a><a href="https://social.coop/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a> <a href="https://social.coop/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> <a href="https://social.coop/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#IndieWeb</a> <a href="https://social.coop/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a>

Harris LapiroffI’ve rewritten my <a href="https://social.coop/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> blog’s templates in <a href="https://social.coop/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>. I've written up the things I've found that I like—and don't like—about it.<a href="https://chromamine.com/2025/07/switching-to-webc/" rel="nofollow noopener" translate="no" target="_blank">https://chromamine.com/2025/07/switching-to-webc/</a><a href="https://social.coop/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://social.coop/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#IndieWeb</a>

ShnizmuffiN<a href="https://toots.inbutts.lol/tags/introduction" class="mention hashtag" rel="nofollow noopener" target="_blank">#introduction</a>I make websites. Sometimes I toot about it. <a href="https://toots.inbutts.lol/tags/eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#eleventy</a> <a href="https://toots.inbutts.lol/tags/webc" class="mention hashtag" rel="nofollow noopener" target="_blank">#webc</a> <a href="https://toots.inbutts.lol/tags/php" class="mention hashtag" rel="nofollow noopener" target="_blank">#php</a> <a href="https://toots.inbutts.lol/tags/statamic" class="mention hashtag" rel="nofollow noopener" target="_blank">#statamic</a> <a href="https://toots.inbutts.lol/tags/laravel" class="mention hashtag" rel="nofollow noopener" target="_blank">#laravel</a> <a href="https://toots.inbutts.lol/tags/tailwindcss" class="mention hashtag" rel="nofollow noopener" target="_blank">#tailwindcss</a> <a href="https://toots.inbutts.lol/tags/alpinejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#alpinejs</a> uhhh whatever <a href="https://toots.inbutts.lol/tags/sql" class="mention hashtag" rel="nofollow noopener" target="_blank">#sql</a> and I guess <a href="https://toots.inbutts.lol/tags/nginx" class="mention hashtag" rel="nofollow noopener" target="_blank">#nginx</a> <a href="https://toots.inbutts.lol/tags/docker" class="mention hashtag" rel="nofollow noopener" target="_blank">#docker</a> and all that crap all the way down. <a href="https://toots.inbutts.lol/tags/fullstack" class="mention hashtag" rel="nofollow noopener" target="_blank">#fullstack</a>I play RPGs with friends. Sometimes I toot about it. <a href="https://toots.inbutts.lol/tags/ttrpg" class="mention hashtag" rel="nofollow noopener" target="_blank">#ttrpg</a> <a href="https://toots.inbutts.lol/tags/dnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#dnd</a> <a href="https://toots.inbutts.lol/tags/pathfinder" class="mention hashtag" rel="nofollow noopener" target="_blank">#pathfinder</a> <a href="https://toots.inbutts.lol/tags/5e" class="mention hashtag" rel="nofollow noopener" target="_blank">#5e</a> <a href="https://toots.inbutts.lol/tags/pf2e" class="mention hashtag" rel="nofollow noopener" target="_blank">#pf2e</a> I am my group's sysadmin. Sometimes I toot about it. <a href="https://toots.inbutts.lol/tags/selfhosted" class="mention hashtag" rel="nofollow noopener" target="_blank">#selfhosted</a> <a href="https://toots.inbutts.lol/tags/plex" class="mention hashtag" rel="nofollow noopener" target="_blank">#plex</a> <a href="https://toots.inbutts.lol/tags/lemmy" class="mention hashtag" rel="nofollow noopener" target="_blank">#lemmy</a> <a href="https://toots.inbutts.lol/tags/mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#mastodon</a> <a href="https://toots.inbutts.lol/tags/pihole" class="mention hashtag" rel="nofollow noopener" target="_blank">#pihole</a> and throw some darts at <a href="https://selfh.st" rel="nofollow noopener" translate="no" target="_blank">https://selfh.st</a> and you catch the rest.Hot takes, bad jokes, etc.

ShnizmuffiNI just launched <a href="https://catalog.muralarts.org" rel="nofollow noopener" translate="no" target="_blank">https://catalog.muralarts.org</a> for Mural Arts Philadelphia. (Design by <a href="https://CooperGraphicDesign.com" rel="nofollow noopener" translate="no" target="_blank">https://CooperGraphicDesign.com</a>.)Built with <a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a>'s <a href="https://toots.inbutts.lol/tags/eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#eleventy</a>, <a href="https://toots.inbutts.lol/tags/webc" class="mention hashtag" rel="nofollow noopener" target="_blank">#webc</a>, and a bastardized version of the `eleventy-image` plugin that makes optimized CSS background images. I call it back-breaker.Rendering very many AVIF images suuuuuucked on my potato PC, but it was absolutely necessary for such an image heavy design.

Harris LapiroffI really want to like <a href="https://social.coop/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a> for <a href="https://social.coop/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a>—there’s a lot of things I do like about it, both conceptually and in practice!—but I keep running into a lot of frustrating moments that are either limitations or bugs. The documentation is pretty underspecified so it’s not always clear to me which they are.

Ollie BoermansOh man, just figured out what I was doing wrong `:<a href="https://mastodon.social/@text" class="u-url mention" rel="nofollow noopener" target="_blank">@text</a>="exif. Flash"` was _never_ going to work. I spent much too long looking at the data.Fortunately `<a href="https://mastodon.social/@text" class="u-url mention" rel="nofollow noopener" target="_blank">@text</a>="exif. Flash"` totally does! 🤦‍♂️<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a> I’m guessing `:<a href="https://mastodon.social/@text" class="u-url mention" rel="nofollow noopener" target="_blank">@text</a>` doesn’t mean `<a href="https://mastodon.social/@text" class="u-url mention" rel="nofollow noopener" target="_blank">@text</a>` so we can still `:<a href="https://mastodon.social/@text" class="u-url mention" rel="nofollow noopener" target="_blank">@text</a>="'hello'"`?<a href="https://mastodon.social/tags/webc" class="mention hashtag" rel="nofollow noopener" target="_blank">#webc</a>

Pelle Wessman<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a> What's the state of <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a> would you say? It's a bit hard to say by looking at the repo alone, where no commits or release can be seen in the last 1.5 years: <a href="https://github.com/11ty/webc" rel="nofollow noopener" translate="no" target="_blank">https://github.com/11ty/webc</a>I see that the <a href="https://mastodon.social/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> WebC base has seen updates recently and I noticed you mentioned it to <a href="https://mastodon.social/@brad_frost" class="u-url mention" rel="nofollow noopener" target="_blank">@brad_frost</a> the other day <a href="https://fediverse.zachleat.com/@zachleat/113319126440275811" rel="nofollow noopener" translate="no" target="_blank">https://fediverse.zachleat.com/@zachleat/113319126440275811</a>Maybe do what <a href="https://mastodon.social/@ada" class="u-url mention" rel="nofollow noopener" target="_blank">@ada</a> did to her web component helper and do a commit to update the README with current state? <a href="https://github.com/AdaRoseCannon/html-element-plus/commit/9e6d4e5ad0966f205302a804f096aaf14c15e15c" rel="nofollow noopener" translate="no" target="_blank">https://github.com/AdaRoseCannon/html-element-plus/commit/9e6d4e5ad0966f205302a804f096aaf14c15e15c</a>

Fynn Ellie BeckerI finally finished the blog post I started 3 months ago about rebuilding my website with WebC and going all minimal design.<a href="https://fynn.be/blog/website-rebuilt-webc/" rel="nofollow noopener" translate="no" target="_blank">https://fynn.be/blog/website-rebuilt-webc/</a><a href="https://mastodon.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a> <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>

Jasper<a href="https://mastsocial.de/@luke" class="u-url mention" rel="nofollow noopener" target="_blank">@luke</a> I only got into <a href="https://mastodon.social/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> recently and read the <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a> docs first, since it felt like the most modern iteration on templating: <a href="https://www.11ty.dev/docs/languages/webc/" rel="nofollow noopener" translate="no" target="_blank">https://www.11ty.dev/docs/languages/webc/</a>I combined it with <a href="https://mastodon.social/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#TailwindCSS</a>, wrote some glue code, and am quite happy at the moment.

Ricky de Laveagademo @ <a href="https://webcbed.netlify.app" rel="nofollow noopener" translate="no" target="_blank">https://webcbed.netlify.app</a> <a href="https://mastodon.social/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> <a href="https://mastodon.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a> <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>

Fynn Ellie BeckerI was thinking wrong about this. The VS Code feature we want are not symbols but definitions. Fortunately, definitions are not too hard to implement.So, the newest extension version comes with support for “Go to Definition” and “Peek Definition”.The readme also got an upgrade with feature screenshots.Next up on the to do list would be “Go to References” and “Peek References”. Another cool feature, somewhat related to definitions.<a href="https://github.com/mvsde/vscode-webc" rel="nofollow noopener" translate="no" target="_blank">https://github.com/mvsde/vscode-webc</a><a href="https://mastodon.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a> <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>

Fynn Ellie BeckerIt might not look amazing yet, but the prove of concept for Ctrl + clickable WebC component tags is here.This currently uses VS Code’s document links, which are relatively straightforward to implement, but technically not the correct way to do symbol linking.So, when I have more time, I’ll dig into the symbol API for extensions, which conveniently lacks any useful documentation / example implementations whatsoever.<a href="https://github.com/mvsde/vscode-webc/releases/tag/v0.2.0" rel="nofollow noopener" translate="no" target="_blank">https://github.com/mvsde/vscode-webc/releases/tag/v0.2.0</a><a href="https://mastodon.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a> <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>

Fynn Ellie BeckerSo… I got side-tracked while writing a blog post about the WebC migration of my <a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener" target="_blank">@eleventy</a> powered website and long story short, I created a VS Code extension for WebC instead 😅It’s super basic for now, providing just the `.webc` to HTML file association and suggestions for WebC-specific HTML attributes including links on hover to the documentation.I have more plans though, for example linking tags to their respective files so you can Ctrl+Click.<a href="https://marketplace.visualstudio.com/items?itemName=fynn.vscode-webc" rel="nofollow noopener" translate="no" target="_blank">https://marketplace.visualstudio.com/items?itemName=fynn.vscode-webc</a><a href="https://mastodon.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a> <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>

Fynn Ellie BeckerFinally merged and published the WebC rework and light redesign of my website.I’m by no means a designer (anymore) so I kept things basic and pushed myself to hit that deploy button already after weeks and weeks of being uncertain about it 😅The site now runs on <a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener" target="_blank">@eleventy</a> v3 and is fully migrated to ESM, no CommonJS anymore.<a href="https://fynn.be" rel="nofollow noopener" translate="no" target="_blank">https://fynn.be</a><a href="https://mastodon.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a> <a href="https://mastodon.social/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>

Lene SaileI have just released version 3.0 of Eleventy Excellent, now fully on ESM and with many other changes, including my attempts to learn more about WebC and web components. Contributions very welcome! 💚 <a href="https://eleventy-excellent.netlify.app/blog/eleventy-excellent-30/" rel="nofollow noopener" translate="no" target="_blank">https://eleventy-excellent.netlify.app/blog/eleventy-excellent-30/</a><a href="https://front-end.social/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> <a href="https://front-end.social/tags/webc" class="mention hashtag" rel="nofollow noopener" target="_blank">#webc</a>

Ricky de Laveaga<a href="https://thoresson.social/@anders" class="u-url mention" rel="nofollow noopener" target="_blank">@anders</a> <a href="https://social.lol/@nfd" class="u-url mention" rel="nofollow noopener" target="_blank">@nfd</a> <a href="https://front-end.social/@lene" class="u-url mention" rel="nofollow noopener" target="_blank">@lene</a> <a href="https://mastodon.social/@belldotbz" class="u-url mention" rel="nofollow noopener" target="_blank">@belldotbz</a> also not trying to open a whole nother can of worms on you…but <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a> is a cool way to get first class web components/custom element support including with eleventy-image <a href="https://www.11ty.dev/docs/languages/webc/#official-webc-components" rel="nofollow noopener" translate="no" target="_blank">https://www.11ty.dev/docs/languages/webc/#official-webc-components</a> That is how I am handling images in the upcoming eleventeen release. There is a WebC starter here with basic setup <a href="https://github.com/11ty/eleventy-base-webc" rel="nofollow noopener" translate="no" target="_blank">https://github.com/11ty/eleventy-base-webc</a> that was featured in the latest <a href="https://mastodon.social/tags/11tyBundle" class="mention hashtag" rel="nofollow noopener" target="_blank">#11tyBundle</a> <a href="https://11tybundle.dev/blog/11ty-bundle-35/" rel="nofollow noopener" translate="no" target="_blank">https://11tybundle.dev/blog/11ty-bundle-35/</a>

Ricky de Laveaga<a href="https://indieweb.social/@bobmonsour" class="u-url mention" rel="nofollow noopener" target="_blank">@bobmonsour</a> hardly, more like a typo, but I am a proud <a href="https://mastodon.social/tags/11tyBundle" class="mention hashtag" rel="nofollow noopener" target="_blank">#11tyBundle</a> + <a href="https://mastodon.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a> Fan Club Charter Member 🪪

Lene SaileI would like to share some thoughts about working with <a href="https://front-end.social/tags/WebC" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebC</a>. For some time now I have been using it on a component basis in <a href="https://front-end.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a> sites that otherwise depend primarily on Nunjucks or Liquid. The "non-traditional WebC usage" (<a href="https://www.11ty.dev/docs/languages/webc/#non-traditional-webc-usage" rel="nofollow noopener" translate="no" target="_blank">https://www.11ty.dev/docs/languages/webc/#non-traditional-webc-usage</a>). For components without major complexity, this is something that works well for me. However, I have also tried to rely entirely on WebC, which, as I understand it, is the intended approach.

Andy BondFinally finished the rewrite of my personal website! This time its (almost) entirely WebC!<a href="https://andy.bond" rel="nofollow noopener" translate="no" target="_blank">https://andy.bond</a>I simplified my site a lot - largely after being inspired by <a href="https://social.lol/@cory" class="u-url mention" rel="nofollow noopener" target="_blank">@cory</a> and his "Now" page. Previously I was rendering a page for every book, show, movie, that I tracked - and it was too much to manage!Maybe now I will actually write something every once in a while since I will hopefully be done with large overhauls :)<a href="https://mastodon.social/tags/11ty" class="mention hashtag" rel="nofollow noopener" target="_blank">#11ty</a> <a href="https://mastodon.social/tags/eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#eleventy</a> <a href="https://mastodon.social/tags/webc" class="mention hashtag" rel="nofollow noopener" target="_blank">#webc</a>

Chris ColemanI've got a cool <a href="https://mastodon.social/tags/eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#eleventy</a> site in the works. Well, the actual end result will not be that interesting, but it's going to be a fun one to build.I've got a hopelessly out-of-date Drupal site with broken deployments that I'd rather not fix, so I wrote some fairly simple scrapers to grab most of the content and directly generate new <a href="https://mastodon.social/tags/markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#markdown</a> files.It's all going to be built with <a href="https://mastodon.social/tags/webc" class="mention hashtag" rel="nofollow noopener" target="_blank">#webc</a> and a few <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>.

Recent searches

Search options

Administered by:

Server stats:

#webc