<p class="wp-block-paragraph">Shaw and Chris talk about how the keyboard shortcut situation is challenging, but in the best shape it's ever been in for our 2.0 editor. Between the operating system, browser, CodeMirror, and Emmet, the space is fairly crowded, but we've got enough room to offer lots of useful stuff. The commands are more findable than ever with our new Command system and the Omnibar. </p>



<h2 class="wp-block-heading">Time Jumps</h2>





<p class="wp-block-paragraph"></p>

<description>&lt;p class="wp-block-paragraph"&gt;Shaw and Chris talk about how the keyboard shortcut situation is challenging, but in the best shape it's ever been in for our 2.0 editor. Between the operating system, browser, CodeMirror, and Emmet, the space is fairly crowded, but we've got enough room to offer lots of useful stuff. The commands are more findable than ever with our new Command system and the Omnibar. &lt;/p&gt;



&lt;h2 class="wp-block-heading"&gt;Time Jumps&lt;/h2&gt;





&lt;p class="wp-block-paragraph"&gt;&lt;/p&gt;</description>

Shaw and Chris talk about how the keyboard shortcut situation is challenging, but in the best shape its ever been in for our 2.0 editor. Between the operating system, browser, CodeMirror, and Emmet, the space is fairly crowded, but weve got enough room t

Shaw and Chris talk about how the keyboard shortcut situation is challenging, but in the best shape it's ever been in for our 2.0 editor. Between the operating system, browser, CodeMirror, and Emmet, the space is fairly crowded, but we've got enough room to offer lots of useful stuff. The commands are more findable than ever with our new Command system and the Omnibar. 



Time Jumps

CodePen Radio

430: The Wild World of Keyboard Shortcuts in Web Apps

<p class="wp-block-paragraph">We've had realtime features on CodePen for ages. Back when it was pretty damn hard. Our Collab Mode is an obvious one, where users can code together. (This "just works" in the 2.0 editor, it's not called anything special.) That and Professor Mode used to have realtime chat (until we pulled it because very few people used it). We went through iterations of this including our own implementations and using services like PubNub. </p>



<p class="wp-block-paragraph">Code collaboration in realtime is particularly difficult. We used FirePad/FireBase for a while for this, and honestly that was a nice abstraction. Increasing the difficulty though, we need to layer on additional needs like syncing settings, presence, and just arbitrary message delivery (e.g. "a new build is ready!"). We used Ably for much of this for quite a while.</p>



<p class="wp-block-paragraph">These days, our whole realtime system integrates with our caching layer, goes over the network using standard web sockets to our beefy Go servers, and is integrated with CRDTs/<a href="https://yjs.dev/">Y.js</a> to keep everybody looking at the same thing. Plenty of open source software at work, but no more third-party services. This means lower operating costs and a simpler architecture. The cost is that problems are, well, our problems.</p>



<h2 class="wp-block-heading">Time Jumps</h2>





<p class="wp-block-paragraph"></p>

<description>&lt;p class="wp-block-paragraph"&gt;We've had realtime features on CodePen for ages. Back when it was pretty damn hard. Our Collab Mode is an obvious one, where users can code together. (This "just works" in the 2.0 editor, it's not called anything special.) That and Professor Mode used to have realtime chat (until we pulled it because very few people used it). We went through iterations of this including our own implementations and using services like PubNub. &lt;/p&gt;



&lt;p class="wp-block-paragraph"&gt;Code collaboration in realtime is particularly difficult. We used FirePad/FireBase for a while for this, and honestly that was a nice abstraction. Increasing the difficulty though, we need to layer on additional needs like syncing settings, presence, and just arbitrary message delivery (e.g. "a new build is ready!"). We used Ably for much of this for quite a while.&lt;/p&gt;



&lt;p class="wp-block-paragraph"&gt;These days, our whole realtime system integrates with our caching layer, goes over the network using standard web sockets to our beefy Go servers, and is integrated with CRDTs/&lt;a href="https://yjs.dev/"&gt;Y.js&lt;/a&gt; to keep everybody looking at the same thing. Plenty of open source software at work, but no more third-party services. This means lower operating costs and a simpler architecture. The cost is that problems are, well, our problems.&lt;/p&gt;



&lt;h2 class="wp-block-heading"&gt;Time Jumps&lt;/h2&gt;





&lt;p class="wp-block-paragraph"&gt;&lt;/p&gt;</description>

Weve had realtime features on CodePen for ages. Back when it was pretty damn hard. Our Collab Mode is an obvious one, where users can code together. (This just works in the 2.0 editor, its not called anything special.) That and Professor Mode used to hav

We've had realtime features on CodePen for ages. Back when it was pretty damn hard. Our Collab Mode is an obvious one, where users can code together. (This "just works" in the 2.0 editor, it's not called anything special.) That and Professor Mode used to have realtime chat (until we pulled it because very few people used it). We went through iterations of this including our own implementations and using services like PubNub. 



Code collaboration in realtime is particularly difficult. We used FirePad/FireBase for a while for this, and honestly that was a nice abstraction. Increasing the difficulty though, we need to layer on additional needs like syncing settings, presence, and just arbitrary message delivery (e.g. "a new build is ready!"). We used Ably for much of this for quite a while.



These days, our whole realtime system integrates with our caching layer, goes over the network using standard web sockets to our beefy Go servers, and is integrated with CRDTs/Y.js to keep everybody looking at the same thing. Plenty of open source software at work, but no more third-party services. This means lower operating costs and a simpler architecture. The cost is that problems are, well, our problems.



Time Jumps

429: Why CodePen Rebuilt Its Realtime Service

<p class="wp-block-paragraph">Rachel and Chris on the show this week to discuss a series of big changes over the last, say, six months or so with our billing system. We've essentially re-written this thing several times, and obviously this is the best time. Having three plans, two payment providers, teams, and fifteen years of history is a lot to manage. </p>



<p class="wp-block-paragraph">An important aspect of the journey was getting the billing information into a single table in our database, and relying more on dynamic calls out to the payment providers when needed rather than trying to keep too much data in sync. </p>



<p class="wp-block-paragraph">Of course we wanted to clean up the codebase and get payment APIs ported over to our latest system, but the biggest need this was all satisfying was UX. We wanted a proper pricing page, better pages for people to manage their billing, and really easy upgrade modals inside our 2.0 editor.</p>



<p class="wp-block-paragraph">The good news is, it all worked.</p>



<h2 class="wp-block-heading">Time Jumps</h2>





<p class="wp-block-paragraph"></p>

<description>&lt;p class="wp-block-paragraph"&gt;Rachel and Chris on the show this week to discuss a series of big changes over the last, say, six months or so with our billing system. We've essentially re-written this thing several times, and obviously this is the best time. Having three plans, two payment providers, teams, and fifteen years of history is a lot to manage. &lt;/p&gt;



&lt;p class="wp-block-paragraph"&gt;An important aspect of the journey was getting the billing information into a single table in our database, and relying more on dynamic calls out to the payment providers when needed rather than trying to keep too much data in sync. &lt;/p&gt;



&lt;p class="wp-block-paragraph"&gt;Of course we wanted to clean up the codebase and get payment APIs ported over to our latest system, but the biggest need this was all satisfying was UX. We wanted a proper pricing page, better pages for people to manage their billing, and really easy upgrade modals inside our 2.0 editor.&lt;/p&gt;



&lt;p class="wp-block-paragraph"&gt;The good news is, it all worked.&lt;/p&gt;



&lt;h2 class="wp-block-heading"&gt;Time Jumps&lt;/h2&gt;





&lt;p class="wp-block-paragraph"&gt;&lt;/p&gt;</description>

Rachel and Chris on the show this week to discuss a series of big changes over the last, say, six months or so with our billing system. Weve essentially re-written this thing several times, and obviously this is the best time. Having three plans, two pay

Rachel and Chris on the show this week to discuss a series of big changes over the last, say, six months or so with our billing system. We've essentially re-written this thing several times, and obviously this is the best time. Having three plans, two payment providers, teams, and fifteen years of history is a lot to manage. 



An important aspect of the journey was getting the billing information into a single table in our database, and relying more on dynamic calls out to the payment providers when needed rather than trying to keep too much data in sync. 



Of course we wanted to clean up the codebase and get payment APIs ported over to our latest system, but the biggest need this was all satisfying was UX. We wanted a proper pricing page, better pages for people to manage their billing, and really easy upgrade modals inside our 2.0 editor.



The good news is, it all worked.



Time Jumps

428: Improving The Entire Billing System (is Very Worth It)

<p class="wp-block-paragraph">Having that first response from the server to users browsers be, ya know, full of good, useful, renderable HTML is certainly better than an empty &lt;div id="app"&gt;. You can feel it and see it in the filmstrip view of the site loading. Not to mention you need it for at least things like &lt;meta&gt; tags if you want your URLs to "unfurl" properly on social sites. </p>



<p class="wp-block-paragraph">Stephen and Chris jump on the podcast to discuss this journey for us as it relates to Next.js. We got it "for free" for our Ruby on Rails pages, but as we're slowly changing frameworks over the years, we've got new challenges, and some gray-hair inducing bugs.</p>



<p class="wp-block-paragraph">We started on Next.js' "page router" and made changes to our Apollo Cache setup to support SSR. Then, over time, moved to the "app router" and did lots more work getting ready getting the most complex page on our site, the 2.0 editor, completely SSRd. That meant getting rid of using things like localStorage for anything view related and fighting bugs related to React somehow mounting itself to the wrong root. </p>



<h2 class="wp-block-heading">Time Jumps</h2>





<p class="wp-block-paragraph"></p>

<description>&lt;p class="wp-block-paragraph"&gt;Having that first response from the server to users browsers be, ya know, full of good, useful, renderable HTML is certainly better than an empty &amp;lt;div id="app"&amp;gt;. You can feel it and see it in the filmstrip view of the site loading. Not to mention you need it for at least things like &amp;lt;meta&amp;gt; tags if you want your URLs to "unfurl" properly on social sites. &lt;/p&gt;



&lt;p class="wp-block-paragraph"&gt;Stephen and Chris jump on the podcast to discuss this journey for us as it relates to Next.js. We got it "for free" for our Ruby on Rails pages, but as we're slowly changing frameworks over the years, we've got new challenges, and some gray-hair inducing bugs.&lt;/p&gt;



&lt;p class="wp-block-paragraph"&gt;We started on Next.js' "page router" and made changes to our Apollo Cache setup to support SSR. Then, over time, moved to the "app router" and did lots more work getting ready getting the most complex page on our site, the 2.0 editor, completely SSRd. That meant getting rid of using things like localStorage for anything view related and fighting bugs related to React somehow mounting itself to the wrong root. &lt;/p&gt;



&lt;h2 class="wp-block-heading"&gt;Time Jumps&lt;/h2&gt;





&lt;p class="wp-block-paragraph"&gt;&lt;/p&gt;</description>

Having that first response from the server to users browsers be, ya know, full of good, useful, renderable HTML is certainly better than an empty &lt;div id=app&gt;. You can feel it and see it in the filmstrip view of the site loading. Not to mention you

Having that first response from the server to users browsers be, ya know, full of good, useful, renderable HTML is certainly better than an empty &lt;div id="app"&gt;. You can feel it and see it in the filmstrip view of the site loading. Not to mention you need it for at least things like &lt;meta&gt; tags if you want your URLs to "unfurl" properly on social sites. 



Stephen and Chris jump on the podcast to discuss this journey for us as it relates to Next.js. We got it "for free" for our Ruby on Rails pages, but as we're slowly changing frameworks over the years, we've got new challenges, and some gray-hair inducing bugs.



We started on Next.js' "page router" and made changes to our Apollo Cache setup to support SSR. Then, over time, moved to the "app router" and did lots more work getting ready getting the most complex page on our site, the 2.0 editor, completely SSRd. That meant getting rid of using things like localStorage for anything view related and fighting bugs related to React somehow mounting itself to the wrong root. 



Time Jumps

427: Next.js and The Journey of SSR

<p class="wp-block-paragraph">Stephen and Chris chat about how the 2.0 editor (well, the compiler really) understands and supports <a href="https://browsersl.ist/">Browserslist</a>, a config format that lives in your package.json file that multiple blocks can understand and make browser support decisions against. </p>



<h2 class="wp-block-heading">Jump Links</h2>





<p class="wp-block-paragraph"></p>

<description>&lt;p class="wp-block-paragraph"&gt;Stephen and Chris chat about how the 2.0 editor (well, the compiler really) understands and supports &lt;a href="https://browsersl.ist/"&gt;Browserslist&lt;/a&gt;, a config format that lives in your package.json file that multiple blocks can understand and make browser support decisions against. &lt;/p&gt;



&lt;h2 class="wp-block-heading"&gt;Jump Links&lt;/h2&gt;





&lt;p class="wp-block-paragraph"&gt;&lt;/p&gt;</description>

Stephen and Chris chat about how the 2.0 editor (well, the compiler really) understands and supports Browserslist, a config format that lives in your package.json file that multiple blocks can understand and make browser support decisions against. 



Ju

Stephen and Chris chat about how the 2.0 editor (well, the compiler really) understands and supports Browserslist, a config format that lives in your package.json file that multiple blocks can understand and make browser support decisions against. 



Jump Links

426: Browserslist in CodePen 2.0

The CodePen team talk about the ins and outs of running a web software business.

CodePen Radio

Details

Recent Episodes