254: Design Tools

Show Description Klare and Chris talk about the design tools used at CodePen, and why we landed on the apps that we did. Time Jumps 01:06 We use Figma! 02:33 What about Invision? 07:57 Our flow typically is… 16:31 Sponsor: WordPress 18:04 What is auto layout? 27:41 What about time?

Continue reading

HTMLHint

Along with our recent release of using Prettier for code formatting, we’ve also now upgraded our HTML linter to use HTMLHint instead of html-inspector. Interestingly, they have about the same number of stars on GitHub, but html-inspector is archived and no longer maintained while HTMLHint is actively maintained. You use

Continue reading

Prettier

Prettier has become the predominant code formatting tool used by web designers and developers. It has a nice set of defaults that work great for CSS, JavaScript, and even HTML (and most of the preprocessor we support, like SCSS). We’ve long offered one-click access to formatting, and now those are

Continue reading

In-App Tips

You might see modals like this from time to time when you log in and visit the homepage. It’s a little in-app feature education, if you will. It’s marketing too, in a sense, as sometimes we’re using it to tell you about PRO features. We podcasted about that just recently:

Continue reading

253: Copy

Show Description Klare and Marie are talking copy — marketing copy, documentation copy, micro-copy, and all the other kinds of copy that you might have on an app like CodePen. Time Jumps 00:41 Redesign of the Pen settings panel 07:08 Updating documentation 13:01 Marketing copy 21:07 Sponsor: CloudBees Rollout 22:25

Continue reading

Three New Coding Fonts

It just so happens that in my regular internet perusing lately, I came across three different new-ish fonts, all designed (at least somewhat) for coding. They are all open-source, so I figured we should make them available in CodePen! You can always access your personal Editor Settings in the Settings

Continue reading