DEV Community

Enjoy the Vue

Episode 68: Vue ESM Support on CodePen with Chris Coyier and Stephen Shaw

Key Points From This Episode:

  • Introducing Chris and Stephen and the work they do to maintain CodePen.
  • How CodePen works and the many uses it can be put to by developers.
  • The history behind why Chris started CodePen and how it has evolved over the years.
  • Why the CodePen team implemented an editor for Vue single-file components.
  • The hurdles of equipping CodePen to handle not just Vue but other editors too.
  • Challenges of outputting Vue files versus regular Pens and how they were solved.
  • How the method of safeguarding against circular dependency has evolved at CodePen.
  • Thoughts about the potential benefits of putting the script tag at the top of Vue Pens.
  • Perspectives on the different style guides for Vue versus React.
  • Where to find Chris and Steven online and learn more about what they do.

Tweetables:

“I roped in some friends, and we built the first version of CodePen and the whole point was embedding. It wasn't the website itself, it was putting demos elsewhere.” — @chriscoyier [0:11:06]

“When I came in, I was more experienced with Vue, but coming into a React world, and I saw so much of the value of Vue and the way that single file components work, and that's very much a CodePen-y thing.” — @shshaw [0:14:11]

“A lot of this is like, how do we rearchitect CodePen in such a way that you can do things like that and not have it be such an embarrassing amount of technical debt that you'll freaking never do anything again.” — @chriscoyier [0:17:52]

How to Find Chris:

How to Find Stephen:

Links Mentioned in Today’s Episode:

Episode source