361: Forks in a New Tab

If you Command (Mac) or Control (PC) click the Fork button, it will open the newly forked Pen in a new tab in your browser. That’s new behavior. Before, it would open the fork in the same tab, no matter how you click. That was unfortunate, as Cassie called out:

v smol petition for the ‘fork’ button to open in a new tab (or have the option to) on @CodePen

I’m sometimes uncertain if I’ve actually forked one of my demos or if I’m just deleting huge chunks of important stuff from the pre-forking pen.@shshaw

— Cassie Evans (@cassiecodes) March 10, 2022

Why didn’t it work like this before? Well, that’s what Shaw and I get into in this podcast. It’s a smidge complicated. The root of it is that that Fork button isn’t a hyperlink. It’s a button handled by JavaScript because of the nature of how it works (a fork might have data that only the client knows about: unsaved code changes). But Shaw found a way to make it work anyway, by essentially passing the metaKey information through all the forking process until that moment we had an opportunity to open that new tab.

Time Jumps

00:32 What was the request?

03:37 Being careful with target=”_blank”

05:14 The whole forking process

07:16 A form for example

08:41 How forks work on a pen

10:47 How did you pass the data?

13:41 It’s behaving like a link

15:29 Sponsor: Notion

17:18 A few issues

20:14 People forking instead of saving

Sponsor: Notion

Notion is an incredible organizational tool. Individuals can get a ton out of it, but I find the most benefit in making it a home base for teams. It can replace so many separate tools (documents, meeting notes, todos, kanbans, calendars, etc) that it really becomes the hub of doing work, and everything stays far more organized than disparate tools ever could.

The post 361: Forks in a New Tab appeared first on CodePen Blog.

Leave a Reply

Your email address will not be published.