CodePen Radio

There are lots of types of dragging that can happen on websites. While they are all click (or tap), hold down, move, and let go, they are all quite a bit different. For instance:

• Drag files/folders onto the browser window and drop them. The likely use case there is uploading.
• Drag an element on the screen to another (valid) area of the screen. The likely use case is dragging cards from one column to another
• Drag the position of an element. The likely use case is dividers between different areas.

There are native APIs for dragging stuff on the web, and it's nice to use them when you can as that means not relying on potentially hefty JavaScript libraries. And yet, the native APIS are fairly limited, and the JavaScript libraries that exist for this stuff are pretty darn nice.

We use Filestack for file uploading. There are lots of incentives there, like them staying on top of the latest and greatest in browser tech around this stuff rather than us having to. Back when we switched to this, we got mobile uploading support overnight, for example. For drag-elements-to-other-areas we use react-beautiful-dnd, which is a pretty darn nice library for that, especially since we're using React anyway. Interestingly, as robust as react-beautiful-dnd is, it doesn't really support position-dragging at all. Just not what it's built for. So for that, we've gone back to the trenches to write our own componentry, which is a delicate balance of JavaScript event-powered and CSS behind it that supports the changes.

Time Jumps Sponsor: WordPress.com

WordPress.com is easily the fastest way to spin up a great-looking WordPress site. Not to mention performant and secure, as your site will be hosted on the great WordPress cloud, and they make those things their concern, not yours. You might think you'd have to give up a lot of control and customizability when you use a fully hosted and managed WordPress service (as opposed to hosting yourself), but that's actually not true. If you're on the Business Plan or higher, you can install plugins, SFTP into the server, and even have direct database access like any other host.

Cassie Evans is our special guest this week! Cassie is a front-end developer with a special talent and passion for animation and SVG, as evidenced in part by her amazing work on CodePen. She's recently became part of the team over at Greensock, a very popular JavaScript-powered animation framework.

We got to talk specifically about the Greensock 3.8 release and an SVG workshop she's got ready to that she does with the gang at Pland.

Time Jumps Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

We've got Steve Gardner on this week! We get into all sorts of nitty gritty detail on the ol' Christmas Cannon, a Pen of pure joy. Steve has some absolute classics that show off the web at it's very best, like the Airplanes Pen. Can't beat Steve's cleverness and execution.

Time Jumps Sponsor: Netlify

Quirrel Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functions on a time-based schedule? Now you can without even leaving your repo.

I got to speak to Jon Kantner! Jon is an incredibly prolific creator, and I believe has the most appearances in the CodePen Spark of any creator. Like so many other creators I've talked to Jon also shares what he knows in a variety of ways, like writing (see his personal site, or articles he wrote when I ran CSS-Tricks). We got to chat about some of his iconic Pens, his work, and some past fascinations like Tweet-sized code experiments. Follow him on Twitter here.

Time Jumps

One thing that's been keeping us very busy at CodePen is moving our main API. We decided on GraphQL long ago and it's served us pretty well. We originally built it in Ruby on Rails alongside a lot of the rest of our app. But while Rails served us well, we've been moving off of it. We like our React architecture and we're better served leaning into that, with frameworks like Next, than staying on Rails. We proved out this combination of technologies for ourselves, building a whole set of admin tools with it. Now we're ready to keep that train going as we build out more of CodePen with the same stack. But removing Rails means moving off of our Rails-based GraphQL implementation. This means re-writing that API in Go, another bit of tech we've had a lot of luck with.

Turns out that re-writing an API is more time-consuming than writing it to begin with, especially as we need to run them side-by-side and behave identically. No refactoring allowed! Unless of course we want to refactor it on both sides and take even more time.

Dee joined me this week in talking about all this. It's a huge job! But we've been doing well at it, building our own tooling, doing lots of testing, and ultimately proving that it works by releasing it in small areas on the production site. It's all working out how we hoped it would: fast, cheap, and easier to reason about.

Time Jumps Sponsor: Equinix Metal’s Startup Partner Program

Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global.

Visit metal.equinix.com/startups to take your startup to the next level.