Resources

Baserow

• Essential Baserow Functions

Hono

• https://hono.dev/docs/guides/jsx-dom
• https://fiberplane.com/blog/client-side-guide/

Rich Components and Easy Forms with Tailwind

• https://ui.indie-starter.dev/

Cloudflare

• class to interact with KV (I think the constructor is wrong though): https://github.com/cloudflare/templates/blob/main/to-do-list-kv-template/app/to-do-manager.ts

Coding Help

• Guru Base

SEO on Docusaurus

• https://johnnyreilly.com/how-i-ruined-my-seo

React Galleries

• https://photoswipe.com/
• react-image-gallery - https://github.com/xiaolin/react-image-gallery (I've been using this)

Shopping Cart

https://www.youtube.com/watch?v=90PgFUPIybY - Javascript Projects - Shopping Cart - Coding Addict - https://github.com/AnishLohiya/Shopping-Cart

Forms

https://css-tricks.com/how-to-create-multi-step-forms-with-vanilla-javascript-and-css/

Javascript

• private classes (plus great intro to classes in general): https://www.sitepoint.com/javascript-private-class-fields/ also see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties

LIT

(owned by Google) -https://lit.dev/docs/

Stencil

Stencil is used by CommerceLayer dropinjs

• https://stenciljs.com/
• https://github.com/commercelayer/drop-in.js/tree/main
• https://dyte.io/blog/web-components-using-stencil/
• https://blog.logrocket.com/building-reusable-web-components-with-stencil-js/

Vanjs

• https://vanjs.org/

Solidjs

Use Solid start: https://start.solidjs.com/ like nextjs for solidjs

Spectrum Web Components

https://opensource.adobe.com/spectrum-web-components/index.html (have drawer??)

More Tools

• https://github.com/biati-digital/glightbox
• https://cartzilla-html.createx.studio/index.html
• https://listjs.com/

EJS

• https://fasternode.io/#testimonials
• https://blog.logrocket.com/how-to-use-ejs-template-node-js-application/

Hyvor Blogs

• Gallery. Use photo swipe and use the script below in the body and the css in the head on a post and the sample in the end in an HTML part of the post.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5.3.7/dist/photoswipe.css">
  

  <script type='module'>
         import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.js';
         const lightbox = new PhotoSwipeLightbox({
           gallery: '#my-gallery',
           children: 'a',
           pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe.esm.js')
         });
         lightbox.init();
      </script>

  <div id="app">
         <div class="pswp-gallery" id="my-gallery">
            <a
               href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg"
               data-pswp-width="1875"
               data-pswp-height="2500"
               target="_blank"
               >
            <img
               src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-200.jpg"
               alt=""
               />
            </a>
            <a
               href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
               data-pswp-width="1669"
               data-pswp-height="2500"
               target="_blank"
               >
            <img
               src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg"
               alt=""
               />
            </a>
            <a
               href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
               data-pswp-width="2500"
               data-pswp-height="1666"
               target="_blank"
               >
            <img
               src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg"
               alt=""
               />
            </a>
         </div>
      </div>