Relatable Code

Share this post

How to quickly get document your project and an easy way to add animations

relatablecode.substack.com

How to quickly get document your project and an easy way to add animations

Let's check out Docusaurus (a great documenting product) and useAnimations a simple but effective micro-animation library

Diego Ballesteros
Sep 13, 2022
Share this post

How to quickly get document your project and an easy way to add animations

relatablecode.substack.com

🗞 News

Twitter avatar for @docusaurus
Docusaurus 2.0 @docusaurus
🎉 Announcing Docusaurus 2.0 - by @MetaOpenSource 🥳 Build a top-notch documentation site in no time! ✒️ Focus on your content: just write Markdown files 💪 Full-featured, extensible 🎨 Truly customizable ⚛️ Interactive doc, React/MDX 🧵 👇 docusaurus.io/blog/2022/08/0…
Image
7:05 AM ∙ Aug 1, 2022
978Likes239Retweets

Have you ever thought about how to document a library or codebase? Previously, I would default just to adding some helpful comments or relying on the component library for mid-sized projects.

But a huge chunk of the time this isn’t enough 😥, especially for custom libraries you share with others

Thanks for reading Relatable Code! Subscribe for free to receive new posts and support my work.

Docusaurus helps out as it is a very robust documenting library. But what is it?

Docusaurus is a static site generator that helps you ship beautiful documentation websites in no time.

You’ve probably seen a few Docusarus-powered docs already:

Prettier

Source: https://docusaurus.io/blog/2022/08/01/announcing-docusaurus-2.0

It relies on MDX for creating the pages. Essentially it is just creating markdown files with your docs and Docusaurus takes care of the rest.

Twitter avatar for @useAnimations
useAnimations @useAnimations
Do you need to switch video, image or other content? No problem, we now have animated chevrons for you! #microinteraction #microanimation #uxdesign #uiux #design #app
9:34 AM ∙ Aug 30, 2022

Yet another niche issue but one that can definitely be annoying. Sometimes you just want some micro-animations for icons.

For example, I want a box to have an animated check to alert the user that an action has been completed.

Worry no longer as useAnimations covers this exact use case!

Check out their page to see everything that is available:

https://useanimations.com/

📦 More interesting Articles

⚛ React

  • Why React Re-Renders

  • Understanding useMemo and useCallback

  • ReacType Version 13.0

🔧 Other

  • Building an aircraft radar system in JavaScript

  • Understanding Dependency Injection

  • Visualizing the JavaScript Event loop

  • Building an @mention autocomplete feature

  • Creating a timeline component

Thanks for reading Relatable Code! Subscribe for free to receive new posts and support my work.

Share this post

How to quickly get document your project and an easy way to add animations

relatablecode.substack.com
Comments
TopNew

No posts

Ready for more?

© 2023 Diego Ballesteros
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing