We all love CodePen for its immediacy and were overjoyed when we heard the team had implemented a brand-new editor for Vue single-file components! Today Chris Coyier and Stephen Shaw from CodePen join us to talk about what it was like building this amazing feature into the platform. Our conversation begins with Chris giving a brief introduction to CodePen before getting into why he decided to start building it, and how it seemed like the logical next step to his CSS-Tricks blog. We talk about the many use cases of this hybrid between a code editor and a social network and each of us weighs in on how we like to use it in our development process. Of course, CodePen will become even more valuable to us now that it has a Vue editor and we take a deep dive with Chris and Steven into what it involved getting this feature off the ground. In our exploration, we come to see that the ease with which CodePen can demo projects on the fly requires a lot of work on the back end! Vue files can't be processed in the same ways as regular Pens and Stephen speaks to the challenge of getting the interface to support them so that the experience for the developer could be as close to plug and play as possible. So be sure to listen in today and try out the new Vue features on CodePen when you are done!
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 (https://twitter.com/chriscoyier?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) [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 (https://twitter.com/shshaw?lang=en) [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 (https://twitter.com/chriscoyier?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) [0:17:52]
How to Find Chris:
chriscoyier.net (https://chriscoyier.net)
How to Find Stephen:
Twitter (https://twitter.com/shshaw)
GitHub (https://github.com/shshaw)
keyframers (https://youtube.com/keyframers)
Links Mentioned in Today’s Episode:
CodePen (https://codepen.io)
CSS-Tricks (https://css-tricks.com)
JSFiddle (https://jsfiddle.net)
JS Bin (https://jsbin.com)
Calls (https://www.apple.com/tv-pr/originals/calls) , Apple TV+
Waffles + Mochi (https://www.netflix.com/title/81035680), Netflix
The Last Man on Earth, Fox (2015 TV Show, Hulu) (https://www.hulu.com/series/the-last-man-on-earth-ebb4d292-6d2c-4b93-98e6-b03406954151)
Ted Lasso (https://tv.apple.com/show/umc.cmc.vtoh0mn0xn7t3c643xqonfzy?itscg=MC_20000&itsct=atvp_brand_omd&mttn3pid=Google%20AdWords&mttnagencyid=a5e&mttncc=US&mttnsiteid=143238&mttnsubad=OUS2019863_1-469980364686-c&mttnsubkw=106182847425__rdMG7cVq_&mttnsubplmnt=), AppleTV+
Derek (https://www.netflix.com/title/70258489), Netflix
Samsung Galaxy Buds Live (https://www.samsung.com/us/mobile-audio/galaxy-buds-live)
Among Us (https://innersloth.com/gameAmongUs.php) (iOS, Android, Nintendo Switch, PC)
Let’s Watch Star Trek Next Generation episode guide (http://www.letswatchstartrek.com/tng-episode-guide/)
