External Resources

lists of helpful links (places to build themes, genenrate favicons, etc) all the stuff i need to look up

---

tailwind page builders

• 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/

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/

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

---

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

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

‍

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

‍

supplemental information on things you can do w/ dw (how to build x, taking the concepts further, etc)

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

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

---

??

library research (for dw)

• enterprise boilerplate libs - https://github.com/Blazity/next-enterprise

• 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

---

• resources - (curated) links to helpful docs & libs
  • flyon components - https://flyonui.com/components/
    • flyon theme builder
  • preline docs - https://preline.co/docs/index.html
  • tabler icons - https://icon-sets.iconify.design/tabler/
  • pines
  • misc tw + alpine components
  • 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

‌

resources - list of places to get gfx for favicons (maybe also have a collection of our favs)

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

DW ferc - collection of “vetted” resources/libs, solutions for specific problems

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

---

pines, etc

can we use components like this? - https://www.shadcnblocks.com/

‌

‌

‌

field guide ref

• iconify docs - https://iconify.design/docs/icons/icon-set-basics.html

• field guide - want a section with vetted/recommended (curated) astro libraries to integrate if you’re doing various things

  • this is the “sweet setup” recommended go-tos for doing specific things that the framework doesn’t specifically cover
  • ex, need to add GTM? try this - https://github.com/codiume/orbit/tree/main/packages/astro-gtm
  • cool to have an organized (tagged, easily searchable) directory of all this with descriptions/remarks from me/us about why it’s the best/pragmatic choice
  • see package guide in [[astro packages]]

‌

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

‌

‌

‌

dw guide - want to have a section of resources for theming and templates and high quality components

• ext resources like pengui ui, etc
  • places to find NICE tw components for free

‌

ex, for email dev

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

‌

dw guide - relevant resources from original (latest slime) readme - https://github.com/jyoungblood/darkwave/tree/slime?tab=readme-ov-file#reference-and-resources

---

• 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/

  • ??

    • https://stackoverflow.com/questions/65710987/reusable-alpine-js-components
    • https://github.com/alpinejs/alpine/discussions/1205
    • https://www.markusantonwolf.com/blog/lightweight-state-management-for-alpinejs/

---

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/

---

• alternative 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

• alt colors

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

• tool - css grid layout generator - https://layout.bradwoods.io/

  • Minimal snippets for modern CSS layouts and components - https://smolcss.dev/

• tool - try building a theme w/ bootstrap builder - https://bootstrap.build/app

  • or this? https://themestr.app/

• tool - native font stacks - https://modernfontstacks.com/

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

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

---

• cssgrid is your friend

  • https://twitter.com/iam_chonchol/status/1633731490637807616
  • https://web.dev/one-line-layouts/

• 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;​

---

• 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/

---

??? (may not need these)

• from the html-first guy - “At some point we intend to levearge this to build an HTML First code snippet library.” - https://html-first.com/
• would love to have a collection of “vanilla” snippets for doing various kinds of things w/ just the platform tools
• related - vanilla web components - curated list of awesome framework-agnostic standalone web components - https://github.com/davatron5000/awesome-standalones#element-extensions

it would be cool to have email templates too - https://github.com/mailgun/transactional-email-templates

• like maybe we have the default email templates styled in a generic way (similar to api.o/blu), but then there are some copy/paste html templates that are preconfigured for specific use cases like this

more in-depth / “bulletproof” avatar mgmt - https://obem.be/2023/10/08/avatars.html

general perspective, this is what we believe - keep things simple, use the platform, html first, etc

• https://html-first.com/

theme designer (can we get this to work with bootstrap?

• try out shaper for doing themes - https://shaper.design/project/UNrVpdmSIaqXTFE6_nh46 **

  • ?? can it do bootstrap/tabler? want to use it to make a default dw theme & then send people here to generate one?

• ?? how do we get started? how do we use it in dw projects?

• love this editor style!!!

• https://hihayk.github.io/shaper/

• made by this guy … https://hayk.design/#/

interested in using an asset pipeline? check this out - asset pipeline for php - https://github.com/assetic-php/assetic

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

basics - intro to css selectors - https://fffuel.co/css-selectors

favicon generators - https://favicon.io/ **

this is my fav one

alpine (/tw) components

https://component-party.dev/ - alpine https://js.hyperui.dev/ - alpine https://alpinejs.dev/components - alpine

https://windstatic.com/ - alpine + tw https://devdojo.com/pines - alpine + tw

https://www.hyperui.dev/ - tw

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/

Dw essays similar to https://htmx.org/essays

https://intercoolerjs.org/2016/02/17/api-churn-vs-security.html