External Resources

🚜

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

NEW PLAN: put the resources in a different section (not part of the docs)

cool styled page and nicely organized directory
kinda like a blog or something, but it’s an organized directory w/ comments
- table layout would be good…it’s just links, titles, & comments…maybe tags too

tailwind page builders

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/

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

dw resources - tw + alpine components - https://oxbowui.com/

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

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

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

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

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

dw resources

(general web dev, astro tips) - check out the bag of tricks FOUC fix for view transitions - https://events-3bg.pages.dev/jotter/tips/flash-of-unstyled-content-during-view-transition/

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

helpful astro packages

debug your head - https://github.com/felixicaza/astro-capo?tab=readme-ov-file
- helps you find performance issues in script loading

cool ASTRO integrations

cool lib - page load progress (compatible w/ astro view transitions) - https://github.com/byronogis/astro-nprogress
(more in my astro.build.md docs)

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

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

InclusiveColors accessible palette creator - https://www.inclusivecolors.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 - 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 **

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