Jeff Chew's Avatar

Jeff Chew

@jeffchew.com.bsky.social

Head of Engineering, Carbon Design System at IBM. Thoughts and ideas are my own.

131 Followers  |  100 Following  |  22 Posts  |  Joined: 09.11.2024  |  2.3284

Latest posts by jeffchew.com on Bluesky

Preview
IBM - United States For more than a century, IBM has been a global technology innovator, leading advances in AI, automation and hybrid cloud solutions that help businesses grow.

Web components worked well for what we were doing 5 years ago. Back then, we had millions of pages on IBM.com while we migrated from an old design system to Carbon. The masthead as a web component helped bring in the masthead globally with gradual migration of pages still on the old design system.

22.03.2025 12:55 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
Jeff Chew on LinkedIn: We're growing the Carbon Design System team at IBM! We have several openโ€ฆ We're growing the Carbon Design System team at IBM! We have several open roles we are looking to fill this year and would love to have the right folks workโ€ฆ

Cross posting from LinkedIn, my team is growing and we're building a new team in Dublin, Ireland! If you or someone you know is interested, hit up the job links!

#hiring

www.linkedin.com/posts/jeffch...

08.02.2025 13:42 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

I'd like an invite, our team is hiring and would be happy to share there too.

31.01.2025 02:24 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Maybe they open sourced VS Code just so they don't have to pay for GitHub Action runners. Oh wait...

31.01.2025 02:05 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Thank you for the shout out!

17.01.2025 00:10 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Preview
Isomorphic Web Components | jakelazaroff.com The lack of server-side rendering in web components has become a sort of folk belief that oft goes unquestioned. I am happy to report that the fears are unfounded.

if lack of a server-side rendering story is whatโ€™s held you back from web components, give them a second look

11.12.2024 14:33 โ€” ๐Ÿ‘ 74    ๐Ÿ” 12    ๐Ÿ’ฌ 9    ๐Ÿ“Œ 5
Preview
Custom Elements Everywhere Making sure frameworks and custom elements can be BFFs ๐Ÿป

Amazing to see it all green!

custom-elements-everywhere.com

07.12.2024 14:52 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

React v19, now with Web Component support!

Creating and managing React wrappers for our clients' design systems has long been a pain in the ass. This is very welcome step in the right direction. bradfrost.com/blog/link/re...

05.12.2024 20:28 โ€” ๐Ÿ‘ 61    ๐Ÿ” 8    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 1

I just noticed today that the Disney+ video player is build with @lit.dev!

03.12.2024 18:14 โ€” ๐Ÿ‘ 46    ๐Ÿ” 5    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

Tis the season!

03.12.2024 16:11 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Incredible read! Thank you for taking the time to write and share this, @infrequently.org !

30.11.2024 02:14 โ€” ๐Ÿ‘ 2    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

One of the best things about Thanksgiving is leftovers. How often do I get to eat a turkey mushroom omelette for breakfast?

29.11.2024 16:00 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

One thing we are super fortunate about is that even Arvind knows about Carbon Design System and the value it brings to IBM. But it took awhile for us to get here!

23.11.2024 13:44 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
Preview
Carbon Design System Carbon is IBMโ€™s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human i...

Our team delivers to hundreds of teams across IBM, and the way we organized ourselves revolves around treating ourselves like a product. We finally put pen to paper and published our POV on our product development lifecycle, and our definition of done.

carbondesignsystem.com/contributing...

23.11.2024 12:49 โ€” ๐Ÿ‘ 3    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Great playback, and excited to hear about your journey with web components! At IBM, we are having our own journey where we as a team are consolidating to just supporting React and Web Components. The other framework flavors are still around, but are supported by the community.

22.11.2024 18:30 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Figma somehow hijacked my calendar!

22.11.2024 15:43 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Love your blog posts! The first one I read is about design system ecosystems where you mentioned Carbon!

22.11.2024 15:07 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

Thanks for the shout-out about Carbon Design System, @scottjehl.com !

#webcomponents

22.11.2024 14:56 โ€” ๐Ÿ‘ 3    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0
// simple-greeting.ts

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import type { PropertyValues } from 'lit';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'Somebody';
  
  // BEFORE
  // updated(changedProperties: Map<string, unknown>) {
  //   if (changedProperties.has('name')) {
  //     // works but any key is valid
  //   }
  // }

  // AFTER
  updated(changedProperties: PropertyValues<this>) {
    if (changedProperties.has('name')) {
      // works and tells you if a key is incorrect!
    }
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

// simple-greeting.ts import {html, css, LitElement} from 'lit'; import {customElement, property} from 'lit/decorators.js'; import type { PropertyValues } from 'lit'; @customElement('simple-greeting') export class SimpleGreeting extends LitElement { @property() name = 'Somebody'; // BEFORE // updated(changedProperties: Map<string, unknown>) { // if (changedProperties.has('name')) { // // works but any key is valid // } // } // AFTER updated(changedProperties: PropertyValues<this>) { if (changedProperties.has('name')) { // works and tells you if a key is incorrect! } } render() { return html`<p>Hello, ${this.name}!</p>`; } }

How did I not know about this in @lit.dev

TL;DR โ€“ you can use `PropertyValues` to get strongly typed maps in lifecycle methods. ๐Ÿคฉ

21.11.2024 15:56 โ€” ๐Ÿ‘ 47    ๐Ÿ” 7    ๐Ÿ’ฌ 2    ๐Ÿ“Œ 0

Very excited for this! I have had my eye on this proposal for awhile as well. We will certainly find practical uses for this at IBM!

21.11.2024 14:46 โ€” ๐Ÿ‘ 1    ๐Ÿ” 1    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Super excited for this one! For our particular use case at IBM, having versioned scoped elements would be useful to us! We're also starting to see local design systems based on web components so then having their own scope would be incredibly useful.

21.11.2024 12:45 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Hi, thank you for putting this starter pack together! I'm on the Carbon Design System from IBM ๐Ÿ˜

21.11.2024 12:36 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 1    ๐Ÿ“Œ 0

What gif pops up when you type your name?

19.11.2024 12:28 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

So in the last month, Trump won the election and Mike Tyson lost to a YouTuber. Anything else on the 2024 bingo card I should prepare for?

16.11.2024 12:45 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0
Meme with side by side pictures of Marco Rubio and RFK, Jr, labeled โ€œMarcoโ€ and โ€œPolio.โ€

Meme with side by side pictures of Marco Rubio and RFK, Jr, labeled โ€œMarcoโ€ and โ€œPolio.โ€

Who made this? Ahahaha

15.11.2024 19:52 โ€” ๐Ÿ‘ 73359    ๐Ÿ” 13890    ๐Ÿ’ฌ 1585    ๐Ÿ“Œ 1067

So...are we now living in the prequel to Idiocracy?

14.11.2024 21:47 โ€” ๐Ÿ‘ 0    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

Hello World!

14.11.2024 02:28 โ€” ๐Ÿ‘ 1    ๐Ÿ” 0    ๐Ÿ’ฌ 0    ๐Ÿ“Œ 0

@jeffchew.com is following 20 prominent accounts