WCC Refresh

[Auhseh]

Hi guys,

Starting a discussion on a refresh for the WCC page.
Main aim is to position WCC for 2025 and beyond.

What are the most important info/features/capabilities we want to show that can get users from ‘Curious’ to actually ‘Trying it out’ and ‘Sold on it’

[thescientist13]

Thanks for starting this!

Here are a couple high level ideas I can think of

1) No Custom DSL

I think overall for WCC, at least when used by itself, would be to highlight the predictability of following web standards without trying to invent a custom DSL on top of it (a la WebC), but also open to adopting / supporting Community Protocols from the Web Components Community Group

It's mostly intended to be used as an implementation detail for Greenwood but having it standalone also provides others to build on top of it, even if just for the DOM / SSR / AST parsing. That said, we do feature WCC prominently on the Greenwood home page, I even promote it as such on the jamstack.org website

which leads into my next point...

2) Better JSX Support

One thing I definitely would like to work on next is improving the JSX support / ergonomics. As we do feature Web Components prominently on the Greenwood home page, I would love to add a tab demonstrating an example using JSX. Our JSX implementation simply compiles down to a standard custom element definition, a la Stencil.

Something like we demonstrate in the WCC docs where you can opt-in via a render function in your CE definition and we map and auto-track all your CE properties to attributes.

export default class Counter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }

  connectedCallback() {
    this.render(); // this is required
  }

  increment() {
    this.count += 1;
    this.render();
  }

  render() {
    const { count } = this;

    return (
      <div>
        <button onclick={this.count -= 1}> -</button>
        <span>You have clicked <span class="red">{count}</span> times</span>
        <button onclick={this.increment}> +</button>
      </div>
    );
  }
}

customElements.define('wcc-counter', Counter);

I think JSX is a great templating language and declaratively authoring your UI is such a nice DX. The JSX support in WCC can be enabled through simply adding a Greenwood plugin.

However, as demonstrated above, sometime you do need interactivity, not just static HTML, which leads to my next point...

Signals + JSX

Building off the JSX support, I think implementing the reactivity system around the TC39 Signals proposal, (re) popularized by SolidJS, and now adopted into many frontend frameworks like Svelte, Angular, and Lit. This way, they interoperate with any other Signals based libraries / state management solutions. I think this combo would make a killer sample to put on the Greenwood home page. 🤩

---

That said, I don't intend for WCC to become a full on frontend library, mostly trying to keep a nice minimal WC SSR system with "good enough" reactivity support, but if you want something more powerful, then I have no problems if you opt to using something like Lit (ideally with Greenwood, hah! 😅 )

Website

I would also definitely be open to giving the website a bit of a refresh, too, especially if I can supercharge WCC a bit more in that JSX / Signals department, which I'm hoping to give myself a little time for this fall. Nothing super fancy, but some polish around colors, typography, copy text, etc would be nice. ✨

[Auhseh]

Some polish on the WCC site
https://www.figma.com/design/TmPoVJjcdGxSHCXMPIYR9Y/WCC-Refresh?node-id=0-1&t=gb2tlmbthC6EyfUk-1

[thescientist13]

This looks great!

Here are some thoughts

Logo

So, I think I'm really starting to dig this new logo actually. I know I pushed back a bit during our initial call, but I think would still like to try and take this new version as a foundation, and try to incorporate any of the existing elements, like the the angle brackets < > and the cogs somehow from the current logo?

It would be great to think of what 1:1 aspect ratio version of this logo for favicons / avatars / profile images / etc could be. The current one definitely not work well within those kind of constraints.

My guess is we would have to come up with an alternate version just for those kind of scenarios, maybe just the W, or the W with the inverted C cogs layered on top?

Banner

Really love this, I don't think there's much I would change design wise, though personally I would probably want to refresh the copy here; probably losing the experimental label and getting rid of the emoji. If you have any thoughts here, would definitely be open to thoughts / suggestions.

Key Features

I definitely like the design intent here, though it does leave a decent amount of empty space on desktop, and goes on very long on mobile. I'm sure we can tighten it up a bit?

• Maybe we get rid of the categorizations, so it's just one box? This would help remove a lot of the extra space on desktop.
• On mobile, maybe we hide the description, and just have it show up as a tooltip on hover? Although I guess that would only work for desktop web. Maybe it's just a matter of tightening up the top / bottom margins between each little feature box; I think that would help a bit. Combined with the new ordering (see the end of my comment) this being at the end would OK since all the most critical content has already been scrolled through at that point, even if it's a little bit long.

Thoughts?

How It Works

Other than the syntax highlighting, which I call out below, this section looks good!

Docs / Examples

This looks good!

I will probably try and see if there are other syntax highlighting themes that might work well with this new design. Maybe Coy? There are some other themes that may be worth considering, if you have any thoughts. 👍

---

Not that it matters too much for the designs, but I think I might want to keep the "How It Works" section more to the top, since one clear signal I want to promote with WCC is that it just uses the standard Web Components spec. No custom base components or APIs. (though the JSX extension would support a more Lit / React API)

To me this is meant to be a strong differentiator for those who are user's of Web Components, since a lot of other solutions are trying to "wrap" the Web Components APIs.

My initial hunch is to go in this order down the page:

1. Banner
2. Capability Boxes (extracted from Key Features)
3. How It Works
4. Key Features

[Auhseh]

Thanks for the elaborate feedback!

Re: the logo,
I think we might have to pick 1 essential element to get a simple/uncrowded logo. Played with the cogs.

The “W” will work perfectly for a thumbnail/1:1 ratio instance

On the “Key Features”, I agree with putting it at the end of the page especially on mobile, I think we can leave the descriptions; adds a bit of context, you never really know who sees it.

The Syntax highlighting here is mainly reference, as you’d still be the one to choose when you’re implementing, so long as it goes with our established design language.

Tweaked the design with your feedback…

[thescientist13]

Thanks, the revisions look good, will review with the team and see what they think

I think we might have to pick 1 essential element to get a simple/uncrowded logo. Played with the cogs.

yeah, I like the newer version! Would also be good to see if what that version would look like with < and > wrapping it like in the current logo. Would be good to see all these options in the Figma design to have some options to consider.

[Auhseh]

Alright, just added it

[thescientist13]

New website is up at its new domain! 🥳
https://wcc.dev/

Thanks for all the help!