365: Klare

Klare is moving on from design at CodePen to design at GitHub. Huge congrats Klare! If you didn’t know Klare was our one and only dedicated designer here at CodePen and left a massive mark here in the design and UX of CodePen, the app, as well as internally in our organization practices. I’m talking with Klare here just a few days before her last day to reflect on her years here.

Time Jumps

00:25 Klare’s announcement

01:40 What are some of your work highlights?

04:01 Accessing your work

05:26 Following social feeds on CodePen

08:00 Designing at CodePen

11:27 Leaving behind a design system

14:06 Making incremental changes

16:08 Sidebar nav for an app

18:02 Homepage updates

21:26 Using a common language for code design system

25:35 Documentation and project management

29:08 New job description

The post 365: Klare appeared first on CodePen Blog.

Flatlogic Admin Templates banner

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.

Flatlogic Admin Templates banner