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?

  • ??
  • Global destroy method #53​
  • Destroy all modals #54​
  • typescript definition file #55​
  • On destroy: remove the "box" DOM element #56​
  • DOM is overwhelmed by residual .smoke-base elements #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