Keeping track of Sass snippets, HTML layouts, etc.

[travisricks]

Hi Kitty,

I was wondering if you have any advice on keeping track of frontend code snippets. Would you recommend something like Storybook or Fractal?

Ideally, I'd like to be able to save Sass snippets (mixins, code blocks), HTML layouts and maybe some JS snippets in one place. I was thinking of just using a repository, but it'd be nice to visualize all of the elements somehow.

Thanks in Advance!

ps (The Sass book was very helpful. Thank you!)

[KittyGiraudel]

Hello Travis!

I’ve used many tools over the years, such as CodePen, SassMeister, GitHub Gists and CodeSandbox. They’re all good for different reasons. GitHub Gists is not an editor per se, just a storage system really, while CodePen and CodeSandbox are unopinionated frontend environments. I used to use CodePen as a bit of a library of snippets, which I held rather organized for a while, but eventually I kind of dropped it.

I think the best way would be your own website in the form of a blog or a snippets section. That’s what Joshua Comeau does for instance, and I started doing something similar for quick snippets I want to remember but don’t warrant a whole blog post. The has the advantage of learning in the open and giving you a digital presence as well, which can be valuable.

Otherwise as you said a repository is also a good idea, because you can organize it the way you want, and it really is focused on code, so that’s pretty neat. I guess ultimately a site/blog also does that though.

I’m glad the Sass book helped! Thank you for sharing. 😊

[travisricks]

Thanks, Kitty.

I think you're right that figuring out a way to manage it on my own site would have many benefits. I'll give that a try. Thanks!