• This is important
  • Installation
    • Development
    • Build
  • Workflow
  • Checklist
  • Resources
    • UI
      • Components
      • Libraries
  • FAQ
    • Troubleshooting

• Node Version Manager [2]

Further information in FAQ

nvm install && nvm use
npm ci  # Installs from package-lock.json only

npm run clean # Removes inter alia .cache/
npm start # Refers to `npm run develop`

npm run clean
npm run build
npm run serve

Follow the checklist below!

Read the following requirements carefully and do visit the links in it to fully understand our goals!
Also don't miss the resources below to get some extra help.

This is Gatsby version 3.

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need.

Choc UI are prebuilt Chakra UI components that are commonly used in web applications.

Twin blends the magic of Tailwind with the flexibility of css-in-js:
twin-gatsby-emotion (list of supported plugins)

• React hooks and function components are more declarative
• Always use the power of gatsby-image and gatsby-background-image [2]
• Fetch data and assets with built-in GraphQL because of all the outstanding benefits
• Link the pages efficiently with Gatsby link component
• A basic layout component (share across multiple pages) is already at hand
• CSS Grid Layout is efficient for the overall layout. Fine-tuning within the grid areas can be done by Flexbox as well (both available in tailwindcss)
• Use the given SEO component (and extend if needed) for happy search engine crawlers
• All (!) static assets like fonts or SVG library etc. are self-hosted
• Prettier.io is used with ESLint

This is the checklist and order that your work goes through, if one point fails you will get a revision. There is no point in delivering work which doesn't pass the following criteria:

• Test on all available resolution presets of Chrome and Firefox Dev Tools, please also try Safari as many people use it
  • latest version of Chrome, Firefox, Safari
  • Private incognito mode with no extensions
• Lighthouse
  • Goal: Are all circles GREEN? Mobile and Desktop.

• Tailwind CSS - awesomelist:
  • ...
  • Migration
    • Windy - browser ext. to transform html elements to tw components
    • Transform css to tw classes
  • Colour
    • https://grayscale.design/
    • https://adevade.github.io/color-scheme-generator/
    • https://github.com/javisperez/tailwindcolorshades
    • ...
  • Animation
    • https://github.com/vikrantyadav611/tail-animista
    • ...
• Tips and tricks
  • JavaScript to Know for React
  • 5 Tips to Help You Avoid React Hooks Pitfalls
  • The dangers of DRY, the web of WET, the awesomeness of AHA.
• Performance
  • Gatsby
• Compatibility
  • Polyfill.io

To be continued...

• Awesome React Components

• Comparision and statistics

Caution:
The following systems use different CSS-in-JS libraries and approaches:

• Tailwind CSS specific
  • https://headlessui.dev/
    • https://tailwindui.com/
  • https://chakra-ui.com/
    • https://choc-ui.tech/
  • https://treact.owaiskhan.me/
    • https://owaiskhan.me/post/using-treact-components-custom-react-app
  • https://github.com/creativetimofficial/tailwind-starter-kit
• https://ant.design/
• https://material-ui.com/
• https://blueprintjs.com/
• https://baseweb.design/
• https://rebassjs.org/

• Do I commit the package-lock.json file created by npm?
• Why does npm install rewrite package-lock.json?

nvm use
npm run clean
rm -rf node_modules/
npm ci