Big ol' list for 1.0 version

[jyoungblood]

That's right, we're breathing some new life into this little library.

I've been wanting to do this for several years, but resources are limited and I have a job and a family and a life. No idea when I'll actually be able to make this happen but I'm putting my list of potential and planned improvements here.

---

• [ ] repackage as ES module

  • rewrite w/ m o d e r n 21st century vanilla js

• [ ] add modal options (like dw.js modal abstractions) **

• [ ] Smoke install from Cdn (unpkg/cdnjs - how to set up?)

  • [ ] publish smoke on npm / jsdelivr?

• [ ] smoke.confirm - { cancel: false } should remove 'cancel' button

  • api evolution - inspo from this html dialog element? https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/

  • i like the concept of the dialog element, but what they describe in the article sounds way too complicated

  • ?? if you're on mobile, option to show a native alert somehow ? https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a

  • html dialog integration? - https://twitter.com/flaviocopes/status/1746134004963651616?

  • or html popover? - https://davidwalsh.name/html-popover-attribute

  • “So much stuff you get for free when using

    for your modals:

    • esc key closes it
    • can blur the background items easily
    • first input field gets autofocus bonus points works great with htmx as we can put a showModal() method in the HTML response 💫

  • ?? dialog element customizations (adding a close button) - https://frontendmasters.com/blog/basic-dialog-usage-and-gotchas-to-watch-for/

• [ ] better (easier) styling options and default style (nicer default theme)

  • make it easier to extend/edit the theme (more thoughtful theme support, as easy as adding a few custom classes, anything can be easily overwritten … it’s a cascade!)

  • maybe do a 'brutalist' version - that has minimal (& inline) styles, no css dependencies but you can extend and make your own theme if you want

  • inspo - modal design considerations - https://css-tricks.com/considerations-styling-modal/

  • inspo - cool style for dialogs - https://shepherdjs.dev/

  • inspo - this is cute https://oncebot.github.io/popbox.js/

  • inspo - a11y - https://github.com/KittyGiraudel/a11y-dialog

  • https://humanwhocodes.com/blog/2013/02/12/making-an-accessible-dialog-box/

  • inspo - cool animations - https://sweetalert.js.org/

  • inspo simple default animations - https://zurb.com/playground/reveal-modal-plugin

  • inspo - all kinds of dialog/alert types - https://ably.com/blog/react-notification-libraries

  • inspo - ebay react modal - https://github.com/eBay/nice-modal-react

• [ ] ?? any current issues we can keep?

  • ??
  • https://github.com/hxgf/smoke.js/issues/53​
  • https://github.com/hxgf/smoke.js/pull/54​
  • https://github.com/hxgf/smoke.js/issues/55​
  • https://github.com/hxgf/smoke.js/pull/56​
  • https://github.com/hxgf/smoke.js/issues/51
  • maybe check through the old issues for things (that have been closed by others) that could be fixed in the new version - https://github.com/hxgf/smoke.js/issues?q=is%3Aissue+is%3Aclosed

• [ ] ?? outline build process? (minify + test, build pipeline for PRs?)

• [ ] refreshed design for docs site (i don’t like the fonts or layout or the photo, but i like the functionality)

  • single-page docs & cool demos, nice intro in readme
  • streamlined structure w/ scratch & tachyons

• [ ] ?? making framework-specific components? (react, vue, svelte, webcomponents, etc)

• [ ] (old) animation support

  • solid base design w/ sensible animation defaults/options
  • (fade, slide, etc)
  • classes you can add to get animations (or js params whatev)

• [ ] (old) optional icons in buttons?

• [ ] (old) change ok/cancel selection w/ arrow/tab keys

• [ ] (old) mods for modal support (photos, videos, iframes, custom html, form container)

  • smoke.html()
  • smoke.photo()
  • smoke.iframe()
  • etc

• [ ] docs - note ALL the options for ALL the methods (make sure it’s complete)

• [ ] (ref for potential new architecture) example "modern" js lib starter - https://advancedweb.hu/modern-javascript-library-starter

  • ?? also - does this concept work with declarative web components structure? (prob not, want to keep it super simple)

• [ ] also want to make an updated demo/docs site, ofc (smoke.js.org)

• [ ] respond to all the open issues (and any relevant closed ones) if there's anything relevant / fixed in the new version.

  • sorry if anyone feels neglected, not trying to hurt anyones feelings 🥺

---

• [ ] need to update the url for smoke.js.org (url update?)

• moved gh hxgf --> jyoungblood

  • need to change the reference for the repo it's pointing to?
  • new stuff still resolves, but...

• https://github.com/jyoungblood/smoke.js.org

• https://js.org/

• https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site#creating-and-committing-a-cname-file

• https://github.com/js-org/js.org/wiki

• https://github.com/js-org/js.org/tree/master