🔗 “Enhance vs. Lit vs. WebC…or, How to Server-Render a Web Component” by @jaredwhite

#WebComponents #WebC

⚓️ https://nicolas-hoizey.com/links/2023/08/25/enhance-vs-lit-vs-webc-or-how-to-server-render-a-web-component/

🔗 “Enhance vs. Lit vs. WebC…or, How to Server-Render a Web Component” by @jaredwhite

#WebComponents #WebC

⚓️ https://nicolas-hoizey.com/links/2023/08/25/enhance-vs-lit-vs-webc-or-how-to-server-render-a-web-component/

All right #WebDev nerds, we got some 🌶️ spicy content on the blog for you today! 🤓

A writeup and code/demos all about server-rendering #WebComponents via #Node in three popular flavors: #Enhance, #Lit, and #WebC!

Also a ton of thoughts about the future of these technologies and how to promote a portable view layer of web applications in an #HTML-first world.

Take a peek and then hop in our Discord to chat more about all these groovy features!

https://www.spicyweb.dev/web-components-ssr-node/

Hi @zachleat, I've been looking at how you include #webc components in zachleat.com, and can't figure out how you use the components directly in md or liquid templates, without embedding them in {% renderTemplate "webc" %}. Where is the trick? :blob_cat_aww:

https://github.com/zachleat/zachleat.com/blob/main/_posts/2023-03-16-eleventy-meetup-eleventy-v2.md?plain=1#L58

My little `classnames` plugin for #Eleventy got a small upgrade — it’s now registered as a filter as well as a shortcode, making it a cinch to build conditional class strings in #WebC ✨

📦 → https://www.npmjs.com/package/@aaashur/eleventy-plugin-classnames

I made another #neovim plugin, this one adds support for #eleventy (#11ty)'s #webc fileformat

https://bennypowers.dev/posts/webc-nvim/

I wrote about my first impression of the new #WebC framework for #11ty and other #staticSiteGenerators

Learn about the advantages of WebC, and consider some of the questions that came up for me while learning to use it for the first time. Are webc and #webComponents the same thing? If not, how do they differ? When would you use WebC? When might you not?

Read about it on my #eleventy-powered, webc-authored site:

https://bennypowers.dev/posts/webc-impressions/

🔗 “3 Methods for Scoped Styles in Web Components That Work Everywhere” by @zachleat

#WebC #webComponents #JavaScript #CSS

⚓️ https://nicolas-hoizey.com/links/2023/04/08/3-methods-for-scoped-styles-in-web-components-that-work-everywhere/

I updated my recipe for formatting dates with #WebC + Luxon to override the `<time>` element, instead of using a custom element:

https://11ty.webc.fun/recipes/easy-date-and-time-formatting/

I think overriding `<time>` makes this recipe much cooler.

/cc @eleventy

#WebC folks!

Is it possible to import a component using a dynamic value? 🤔 Something sort of like this:

```
---
component: my-component
---
<any-tag-name
:webc:import="'./components/' + component + '.webc'"
></any-tag-name>
```

New #WebC recipe is up:

Use a WebC component and Luxon to make it easy to format dates and produce a `<time>` element in your site. The best part is that Luxon is already a dependency of @eleventy.

https://11ty.webc.fun/recipes/easy-date-and-time-formatting/

#webc with #eleventy, next thing to learn.

There are many examples of using webc:type="js" to loop over items in #eleventy #webc, but none of the examples pass along more than simple strings in component properties.

Is it possible to loop over more complex components, and pass in entire objects or collections? I can't figure out how to do it.

@eleventy

Exploring #eleventy and getting ready to write about it, #WebC, and #NetlifyCMS soon, along with my thoughts on the #Netlify #Gatsby acquisition. Drop your #11ty knowledge here in this thread! DM/email/Signal etc all encouraged.

☀️🕊️☁️
🎈🐀💭

@blackgirlbytes just wanted to say that I watched this when it was live and it was great! You are a great relatable interviewer with a lot of contagious enthusiasm. Also even though I have been keeping tabs on the whole #11ty #webc stuff I learned some things. #latertoot

Version 2.0 of #Eleventy is on the home stretch and comes with a lot of great new features! One of them, which is in danger of getting a little sidelined next to #WebC, #Edge and Partial Hydration (#is-land), I'll discuss at the upcoming TheJam.dev 2023: the new #I18n plugin. I will build a small starter project and say a few things about the Internationalization process, the Accept-Language header and #Netlify's redirect rules. Looking forward to it!!

https://cfe.dev/speakers/lene-saile/

Put together a quick #Eleventy + #WebC demo showing NPM-imported components, and blogged about it

(The process is so smooth and simple it hardly merits a demo! 🥰)

→ 🎉 https://ashur-shared-webc-demo.netlify.app/
→ 📝 https://multiline.co/mment/2022/12/importing-external-webc-components

Starting to play with #WebC in #eleventy, and the ability to import shared components installed via NPM is absolutely dynamite 💥

https://www.11ty.dev/docs/languages/webc/#webcimport

Just listened to the #ShopTalkShow episode with @zachleat talking about the current state of #11ty, #WebC and Twitter. It's been a while since I tuned in and it's like catching up with an old friend. Thanks @chriscoyier @davatron5000 ✌️
https://shoptalkshow.com/543/
#WebDev

How do I get the #webc plugin in @eleventy to actually generate a #webcomponent JS file? I feel like I completely misunderstand the concept of the plug-in.

I want to make a some countdown-component. Can someone point me into the right direction?