@WebC_omponents

WebC is for single file web components. Not exclusive to @eleven_ty. This account is dormant! Follow on: ๐Ÿ˜ Mastodon https://xitter.cf/t.co/iAokaPDvZh

 The world wide web
github.com/11ty/webc
Joined October 2022
  • Tweets57
  • Following6
  • Followers344
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Mike-้บฅ-Mai-v1.618@mikemai2awesome18 Nov 2022
Absolutely love playing with @WebC_omponents! Thanks to @SomeAnticsDevโ€™s Twitch stream, I learned so much. Decided to build some components on my own. See more components in the repo: github.com/mikemai2awesome/wโ€ฆ #designsystems #WebComponents #minimalism
<article webc:root webc:keep> <slot name="signifier"></slot> <div> <slot></slot> </div> </article> <style webc:scoped> :host { display: grid; grid-template-columns: minmax(5ch, max-content) 75%; gap: var(--gutter); align-items: center; margin-block-start: var(--stack); } :host:first-child { margin-block-start: 0; } :host > * { margin: 0; } :host > *:nth-child(odd) { align-self: start; } </style>

ALT <article webc:root webc:keep> <slot name="signifier"></slot> <div> <slot></slot> </div> </article> <style webc:scoped> :host { display: grid; grid-template-columns: minmax(5ch, max-content) 75%; gap: var(--gutter); align-items: center; margin-block-start: var(--stack); } :host:first-child { margin-block-start: 0; } :host > * { margin: 0; } :host > *:nth-child(odd) { align-self: start; } </style>

4
1
14
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Build Awesome (11ty)@eleven_ty18 Nov 2022
New plugin release: Eleventy WebC v0.7.0 with Breaking ๐Ÿšจ Changes 1๏ธโƒฃ Change @โ€‹html="content" to @โ€‹raw="content" in your Eleventy Layout files to avoid double-processing 2๏ธโƒฃ Adds a default `components` glob Check out the release notes for more info: github.com/11ty/eleventy-pluโ€ฆ

Release Eleventy WebC v0.7.0 ยท 11ty/eleventy-plugin-webc

Breaking Changes BREAKING: ๐Ÿšจ You will need to use @raw instead of @html in your Eleventy Layout files to avoid double-processing WebC content. See this comment or on the WebC docs: https://www.11t...

github.com
1
10
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Darrell Wilkins@dwkns15 Nov 2022
Created a WebC VSCode syntax highlighting extension. marketplace.visualstudio.comโ€ฆ Feedback welcome. @WebC_omponents @eleven_ty

WebC - Visual Studio Marketplace

Extension for Visual Studio Code - WebC Syntax highlighting & support

marketplace.visualstudio.com
1
8
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Lit@buildWithLit15 Nov 2022
๐Ÿ“† ICYMI: We're hosting another Twitter Spaces event this week with our very own @techytacos and @justinfagnani and @eleven_tyโ€™s @zachleat to discuss @WebC_omponents, #OpenSource, and more! Save the date and reply to this tweet with q's โ†“ xitter.cf/i/spaces/1MYxNgeYaZLKwโ€ฆ
2
7
1
29
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Lit@buildWithLit11 Nov 2022
๐Ÿ”ฅ Ready for another Twitter Spaces chat with our Lit team? Talk all things @WebC_omponents, #OpenSource, and more with @techytacos, @justinfagnani & @eleven_ty @zachleat. Mark your cals and reply to this thread with your questions! โ†“ xitter.cf/i/spaces/1MYxNgeYaZLKw
6
22
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Build Awesome (11ty)@eleven_ty8 Nov 2022
At @jamstackconf, @seldo reports that the Jamstack Community Survey data reveals: Web Components have arrived ๐Ÿ†
Conference slide on a stage reads: โ€œweb components have arrivedโ€

ALT Conference slide on a stage reads: โ€œweb components have arrivedโ€

1
10
60
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Mux
@MuxHQ7 Nov 2022
Anything else? @zachleat yells โ€œweb componentsโ€ right before walking off stage ๐Ÿงก๐Ÿงก
On stage at Jamstack Conf: Alexandre Chopin, Sara Vieira (host), Ryan Carniato, Fred Schott, Jessica Janiuk, Zach Leatherman

ALT On stage at Jamstack Conf: Alexandre Chopin, Sara Vieira (host), Ryan Carniato, Fred Schott, Jessica Janiuk, Zach Leatherman

3
24
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Lit@buildWithLit3 Nov 2022
๐Ÿ’ฌ โ€œWeb components are part of the web. They are good for the web. We should be rooting for them.โ€ Design system consultant and web designer @brad_frost talks all things #webcomponents in his latest blog โ†“ goo.gle/3Nt2MeA
6
2
24
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Build Awesome (11ty)@eleven_ty2 Nov 2022
This WebC release unlocks the very first official Eleventy WebC component: <syntax-highlight> (and new WebC examples on 11ty.dev/docs/plugins/syntaxโ€ฆ) (Most useful to devs whose bosses *arenโ€™t* asking you to print your source code to paper)
<syntax-highlight webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight"> function myFunction() { return true; } </syntax-highlight>

ALT <syntax-highlight webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight"> function myFunction() { return true; } </syntax-highlight>

WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy@WebC_omponents2 Nov 2022
WebC v0.6.2 ๐Ÿ› ๐ŸŽˆ ๐Ÿ“ฆ Even more terse webc:import from npm ๐Ÿž A bug fix for void elements and render functions Enjoy! github.com/11ty/webc/releaseโ€ฆ

Release WebC v0.6.2: webc:import from npm ยท 11ty/webc

Import directly from npm This example uses @11ty/[email protected].

github.com
1
2
25
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Some Antics@SomeAnticsDev1 Nov 2022
โš ๏ธ Going live in half an hour! I'm super excited to dive into @WebC_omponents with @darth_mall in half an hour! โฌ‡๏ธ Join us here at 2pm Central (or 3pm ET/12pm PT)! twitch.tv/SomeAnticsDev

SomeAnticsDev - Twitch

๐Ÿ‘‹๐Ÿป Howdy, howdy! Welcome to Some Antics, a weekly show where Ben brings on guests from around web development and design to teach something about building great user experiences for the web in a...

twitch.tv
2
8
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Some Antics@SomeAnticsDev31 Oct 2022
Tomorrow, we're diving into WebC, an HTML compiler for #WebComponents. Join us as @darth_mall shows us how we can use WebC to bring a single-file component developer experience to an @eleven_ty project! ๐Ÿ“ xitter.cf/SomeAnticsDev โฐ Tue Nov 1 at 2pm CT ๐Ÿ“… calndr.link/event/cChLZ806xS
Bring Single File Components to Eleventy with WebC, with Evan Sheehan and Ben Myers. Tuesday, November 1 at 2pm Central.

ALT Bring Single File Components to Eleventy with WebC, with Evan Sheehan and Ben Myers. Tuesday, November 1 at 2pm Central.

5
18
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Levi McGranahan@levimcg28 Oct 2022
I got a chance to tinker around with the @eleven_ty WebC plugin yesterday. There's a ton more to dig into, but I decided to write up my notes as a post. 11ty is already great and WebC feels like a huge upgrade. ๐Ÿ˜ levimcg.com/blog/my-notes-onโ€ฆ

My notes on Eleventy WebC components

WebC is a compiler for single file Web Components that brings first-class component model to Eleventy!

levimcg.com
1
4
30
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Some Antics@SomeAnticsDev27 Oct 2022
We're back on Tuesday! If you, like me, having been looking to dive into @WebC_omponents, this one's for you! Join us as @darth_mall shows us how to bring single-file components to @eleven_ty with WebC! ๐Ÿ“ twitch.tv/SomeAnticsDev โฐ Tue Nov 1, 2pm CT ๐Ÿ“… calndr.link/event/cChLZ806xS
Bring Single File Components to Eleventy with WebC, with Evan Sheehan and Ben Myers. Tuesday, November 1 at 2pm Central.

ALT Bring Single File Components to Eleventy with WebC, with Evan Sheehan and Ben Myers. Tuesday, November 1 at 2pm Central.

5
13
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Ted Martin@TedMart5161889326 Oct 2022
Replying to @TedMart51618893 @zachleat @nextjs @eleven_ty
on digestible "chunks" of code which gives them less stress as beginners. 11ty and Webc are really positive for new developers. There is just too much to learn when you start so the freedom to "just" focus on HTML/CSS is a godsend and very helpful for our software shop too.
1
1
1
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Ted Martin@TedMart5161889326 Oct 2022
Replying to @zachleat @nextjs @eleven_ty
We are grateful for your work. We just brought on two new junior dev contractors trying to transition into web development. They are doing impactful work and gaining real experience / confidence by writing HTML / CSS in webc components. It allows them to concentrate...
1
1
1
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
@[email protected] ๐Ÿ’™@brianleroux25 Oct 2022
Replying to @5t3ph @zachleat @WebC_omponents
and super worth noticing "decide based on the use case & context" is not something a compiler can do
1
1
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Build Awesome (11ty)@eleven_ty24 Oct 2022
Have the Eleventy Syntax Highlighter Plugin installed on your WebC project? Syntax highlight in your *.webc files:
<template webc:type="render"> function() { return this.helpers.highlight("html", `<image-compare-nojs @value="50"> <img src="/javaskipped-a.png" alt="JavaSkipped logo left"> <img src="/javaskipped-b.png" alt="JavaSkipped logo right"> </image-compare-nojs>`); } </template>

ALT <template webc:type="render"> function() { return this.helpers.highlight("html", `<image-compare-nojs @value="50"> <img src="/javaskipped-a.png" alt="JavaSkipped logo left"> <img src="/javaskipped-b.png" alt="JavaSkipped logo right"> </image-compare-nojs>`); } </template>

2
6
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Daniel Danielecki@ddanielecki24 Oct 2022
Framework-independent standalone #HTML serializer for generating markup for @Web_Components. WebC by @eleven_ty supports streaming, shadow DOMs, and async. Featured in @tldrnewsletter (tldr.tech/tech/newsletter/20โ€ฆ). github.com/11ty/webc
1
4
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Robin Cussol@RobinCsl23 Oct 2022
my website: robincussol.com/optimize-youโ€ฆ (It has possum pictures too! Mandatory for any blog post about Eleventy, right?) My biggest takeaway: *WebC is like Cloudflare Workers for your HTML markup.* You can intercept any HTML tag and manipulate it as you wish. Powerful stuff.

Optimize your img tags with Eleventy Image and WebC

Learn how to optimize images in Eleventy using the new WebC plugin and Eleventy Image for better performance and responsive image handling.

robincussol.com
1
2
6
WebC ๐Ÿ› ๏ธ๐Ÿ˜ fosstodon.org/@eleventy retweeted
Stephanie Eckles@5t3ph24 Oct 2022
๐Ÿ“ New post on 11ty Rocks! Understanding WebC Features and Concepts Review some @WebC_omponents features that will enable you to move beyond the basics and help you get unstuck, too! 11ty.rocks/posts/understandiโ€ฆ
Understanding WebC Features and Concepts. 15 min. read, posted on: Oct 24, 2022. WebC is an exciting addition to the 11ty ecosystem as it enables first-class components. Putting the pieces together may be a little overwhelming, so letโ€™s review some WebC features to help you be successful!

ALT Understanding WebC Features and Concepts. 15 min. read, posted on: Oct 24, 2022. WebC is an exciting addition to the 11ty ecosystem as it enables first-class components. Putting the pieces together may be a little overwhelming, so letโ€™s review some WebC features to help you be successful!

1
5
28
Load more