External Resources

Some things we’ve found helpful in the development process.

Tailwind Resources

Tailwind Pagebuilers

• https://devdojo.com/tails
• https://tailwind.build/
• ?? https://versoly.com/tailwind-page-builder
• ?? https://www.loopple.com/low-code-builder/tailwind
• ?? https://www.subframe.com/ (react 🤮)
• https://windframe.dev/
• dw resources - tw + alpine components - https://oxbowui.com/

Tailwind Misc

• also, hot tip: https://usewindy.com/
  • “simply hover over any element on any website and instantly see the Tailwind CSS classes. ”
  • it converts any css on any website to the tailwind equivalent, which you can paste into your code
• TW colors! - https://tailwindcss.com/docs/colors
  • OMG tw color generator - https://kigen.design/color
• TW gradient generator - https://www.creative-tim.com/twcomponents/gradient-generator

Components

Tailwind components

• https://www.penguinui.com/
• https://devdojo.com/pines - alpine + tw
• https://www.hyperui.dev/ - tw
• https://component-party.dev/ - alpine
• https://js.hyperui.dev/ - alpine
• https://alpinejs.dev/components - alpine
• https://windstatic.com/ - alpine + tw
• https://www.wickedblocks.dev/

Misc components

• component inspo - https://www.goodcomponents.io/

• components & design systems inspo - https://component.gallery/design-systems/

• untitled ui - https://www.untitledui.com/react/components

  • not specific to our stack, and we’re not using them by default
  • but there’s no reason why you can’t

• https://react-aria.adobe.com/ - Craft world-class accessible components with custom styles.

• sacred ui? cool if you’re into the monospace look - https://www.sacred.computer/ / https://github.com/internet-development/www-sacred

• dw components - you could use shoelace - https://shoelace.style/components/carousel

• related - vanilla web components - curated list of awesome framework-agnostic standalone web components - https://github.com/davatron5000/awesome-standalones#element-extensions

Shadcn

• shadcn - tailwind colors in every format - https://ui.shadcn.com/colors

• https://www.shadcnblocks.com/

• ?? shadcn/create - “npx shadcn create.” - https://x.com/shadcn/status/1999530406744293593

• https://ui.shadcn.com/docs/installation/astro

• 🙄 https://www.youtube.com/watch?v=oZ2z5RVcCSs

• https://astro.build/themes/details/astro-shadcn-ui-template/

• https://github.com/AREA44/astro-shadcn-ui-template

• https://astro.build/themes/details/astro-shadcn-ui-template/

• https://www.reddit.com/r/astrojs/comments/1gdx9qy/install_shadcnui_with_astrojs_perfect_for_ai_astro/

• https://astro-tips.dev/tips/shadcn/

• want to effortlessly pull in stuff like this, for example - https://animateicons.vercel.app/

• check the astro shadcn starter - https://astro.build/themes/details/astro-x-shadcn-minimal-theme/

• shad blocks & templates - https://shadcnstudio.com/

• ?? shad directories/registries? - https://ui.shadcn.com/docs/directory

• shad customizer - https://ui.shadcn.com/create

• https://tweakcn.com/

• shad blocks - https://www.shadcnui-blocks.com/

• https://ui.shadcn.com/docs/theming

• https://shoogle.dev/

• https://reui.io/

• 10 Tools to Make Your Shadcn Apps Beautiful ✨ https://www.youtube.com/watch?v=udfFLIx_ITc

• maps for shadcn themes - https://mapcn.vercel.app/

  • https://x.com/sainianmol16/status/2006783001494171790
  • https://mapcn.vercel.app/docs/routes

• https://shadcnstudio.com/blog

• https://www.shadcnblocks.com/blocks **

• https://blocks.so/

• https://www.shadcn.io/

• https://github.com/birobirobiro/awesome-shadcn-ui **

• https://shadcn.batchtool.com/

• https://magicui.design/ - fancy components on top of shad

Color Tools

• color & font tools - https://www.colorsandfonts.com/

• open color is a nice collection of colors - https://yeun.github.io/open-color/

• css colors - http://davidbau.com/colors/

• InclusiveColors accessible palette creator - https://www.inclusivecolors.com/

• radix https://www.radix-ui.com/colors

  • https://www.radix-ui.com/themes/docs/theme/color
  • https://radix-colors-tailwind-config.vercel.app/
  • https://www.colorsandfonts.com/color-systems/radix-dark-color-system

Font Tools

• modern system font stacks - https://modernfontstacks.com/ **

Icons

• or radix icons https://icons.radix-ui.com/
• or react icons? - https://react-icons.github.io/react-icons/ (search every icon set, can we just use the svgs?)
• carefully designed icons - https://www.mingcute.com/
• hero icons - https://heroicons.com/
• largest collection of icon sets - https://www.streamlinehq.com/icons/streamline-regular
• Beautiful & consistent icon toolkit made by the community. - Open-source project and a fork of Feather Icons. - https://lucide.dev/
• or font awesome fuck it - https://cdnjs.com/libraries/font-awesome

Misc Dev Resources

• https://html-first.com/resources

• https://unsuckjs.com/

• resources for learning - cool evil tutorials & examples of what NOT to do https://htmhell.dev/

• if you’re missing anything basic, check out stdlib - https://stdlib.io/

• blank.gif replacement - https://www.phpied.com/minimum-viable-no-image-image-src/

• Minimal SVG Favicon - SVG fav icon https://www.phpied.com/minimal-svg-favicon/

• CHECK THIS SHIT - SVG doodles - https://svgdoodles.com/ ***

• csv uploader dropzone libs for applications - https://hellocsv.github.io/HelloCSV

• bunny compression / image manipulation api - https://docs.bunny.net/docs/stream-image-processing

• A growing collection of vanilla JavaScript code snippets, helper functions, polyfills, plugins, and learning resources. - https://github.com/cferdinandi/vanilla-js-toolkit

• The Vanilla JavaScript Toolkit - https://gomakethings.com/the-vanilla-javascript-toolkit/

• copy/paste shapes - https://shapes.framer.website/

• tagging solution for vanilla js - https://github.com/jcubic/tagger

• zero to pwa … you can do this w/ dw - https://blog.logrocket.com/building-a-progressive-web-app-pwa-no-react-no-angular-no-vue-aefdded3b5e

  • PWAs in app stores? - https://web.dev/pwas-in-app-stores/
  • packaging w/ pwa builder? - https://www.pwabuilder.com/

• web glossary - https://webglossary.info/

  • new to the web? best of luck to you…
  • helpful resource to share terms with the uninitiated (people you’re working with)

• Minimum Viable Secure Product is a minimalistic security checklist for B2B software and business process outsourcing suppliers. - https://mvsp.dev/mvsp.en/

• good general perspective - keep things simple, use the platform, html first, etc - https://html-first.com/

CSS

• cssgrid is your friend
  • https://twitter.com/iam_chonchol/status/1633731490637807616
  • https://web.dev/one-line-layouts/
• tool - css grid layout generator - https://layout.bradwoods.io/
  • Minimal snippets for modern CSS layouts and components - https://smolcss.dev/
• basics - intro to css selectors - https://fffuel.co/css-selectors

Astro

• debug your head - https://github.com/felixicaza/astro-capo?tab=readme-ov-file

  • helps you find performance issues in script loading

• ?? (general web dev, astro tips) - check out the bag of tricks - https://events-3bg.pages.dev/

• ?? FOUC fix for view transitions - https://events-3bg.pages.dev/jotter/tips/flash-of-unstyled-content-during-view-transition/

• cool lib - page load progress (compatible w/ astro view transitions) - https://github.com/byronogis/astro-nprogress

• placeholders w/ astro - https://github.com/matheusbronca/astro-awaited - skeleton screens / placeholders ***

• misc toolkit - https://www.npmjs.com/package/astro-toolkit

• cmd palette - https://github.com/pauchiner/astro-command-palette

• astro remote - https://github.com/natemoo-re/astro-remote

• asset mgmt components - https://www.npmjs.com/package/@terrahq/astro-core

• Beasties is a plugin that inlines your app’s critical CSS and lazy-loads the rest. - https://github.com/PlayForm/Inline

• Server-side rendering of Astro components in non-Astro environments like Vitest or Node.js - https://github.com/igorskyflyer/npm-astro-render-component

• https://github.com/SofiDevO/astro-dynamic-header

  • https://base-astro-psi.vercel.app/fullscreen-demo

• need to add GTM? try this - https://github.com/codiume/orbit/tree/main/packages/astro-gtm

?? Alpinejs components / ref **

• https://alpinejs.dev/components
• https://www.alpinetoolbox.com/
• https://js.hyperui.dev/
• https://github.com/markmead/alpinejs-component
• https://www.wittyprogramming.dev/articles/cross-component-communication-pattern-in-alpinejs/
• https://spruce.ryangjchandler.co.uk/
• https://alpinejs.codewithhugo.com/?type=components
• https://livewiredemos.com/components
• examples - https://snyk.io/advisor/npm-package/alpinejs/example
• components using alpine - https://www.tetraframework.com/

Email Templates

• cerberus templates - https://www.cerberusemail.com/templates
• template inspo - https://mailboard.com/
• builder playground - https://www.usewaypoint.com/open-source/emailbuilderjs
• imailgun templates - https://github.com/mailgun/transactional-email-templates

??

• list of places to get gfx for favicons (maybe also have a collection of our favs)
  • favicon generators - https://favicon.io/ **
• resources for theming and templates and high quality components
• ?? relevant resources from original (latest slime) readme - https://github.com/jyoungblood/darkwave/tree/slime?tab=readme-ov-file#reference-and-resources
• FE - if you want equal height floated divs, use flex + flex-wrap — (link to tw flexbox)
  • also if you do a flexbox sticky footer, the flex element needs to be ie11 compliant w/ min height
    • the flex element needs to have flex: 1 0 auto;​
• Dw dev workflow checklist Guide that walks you through all the phases of building an app w dw From concept / wireframes to qa & deployment Stuff that’s not particularly covered by fw, but helpful ideas to consider during development