sketchpunk

Shopify Open Source Alternatives

General Idea

Find & Pick an opensource project that provides same or similar features to shopify. Learn the method of how to self host which ever solution is picked. Be it regular web hosting or some sort of docker hosting.

Some of these projects also provide a hosting service. They just setup a server with the project preconfigured & ready for use. At that point you are on your own on how use the web app, they will only handle the hosting side of things. This might be a good option as long as its a good hosting service.

sketchpunk

// let [clips, aSkel, aGrp] = await loadAnimations( `${url}/anim/source-animation.glb` );
// let aHelper              = new THREE.SkeletonHelper( aSkel.bones[0] );
// App.scene.add( aGrp || aSkel.bones[0], aHelper );

// const mixer = new THREE.AnimationMixer( new THREE.Object3D() );
// const action = this.mixer.clipAction( clips[0], aSkel.bones[0] );
// action.play();

async function loadAnimations( url ){
    const tf            = await new GLTFLoader().loadAsync( url );

sketchpunk

GIST

• Search, user:@me searchTerm

sketchpunk

// new HotKeys().reg( 'ctrl+s', e=>console.log( 'woot' ) );

export default class HotKeys{
    items = [];

    constructor(){ window.addEventListener( 'keydown', this.onKeyDown ); }
    dispose(){ window.removeEventListener( 'keydown', this.onKeyDown ); }

    reg( str, fn ){
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

sketchpunk

import * as THREE from 'three';

export default class SkyGradientMaterial extends THREE.RawShaderMaterial {
  static createBox(scl = 1): THREE.Mesh {
    const geo = new THREE.BoxGeometry(2, 2, 2);
    const mesh = new THREE.Mesh(geo, new SkyGradientMaterial());
    mesh.scale.setScalar(scl);
    return mesh;
  }

sketchpunk

function downloadText(fName: string, txt: string) {
  const blob = new Blob([txt], { type: 'text/plain;charset=utf-8;' });
  const url = window.URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.download = fName;
  link.target = '_blank';
  // link.click();
  link.dispatchEvent(new MouseEvent('click'));

sketchpunk

import * as THREE from 'three';

class CustomMaterial extends THREE.RawShaderMaterial {
  constructor( props={} ){
    super();

    // Merge custom props with default options
    const opts = Object.assign(
      {
        offset : [ 0, 1, 0 ],

sketchpunk

// Clone an event then dispatch it to an HTML Element
function dispatchClonedEvent( e: Event, elm:HTMLElement ){
  if( e.type.startsWith( 'pointer' ) ){
      const evt = e as PointerEvent;
      elm.dispatchEvent( new PointerEvent( evt.type, {
        bubbles     : evt.bubbles,
        cancelable  : evt.cancelable,
        clientX     : evt.clientX,
        clientY     : evt.clientY,
        button      : evt.button,

sketchpunk

export const noaaRamp = [
  { color: "#ffffff", elevation: 8000 },
  { color: "#E0D7D0", elevation: 4000 },
  { color: "#CDB99C", elevation: 2000 },
  { color: "#BA9468", elevation: 1000 },
  { color: "#9B7E43", elevation: 500 },
  { color: "#75752D", elevation: 250 },
  { color: "#456C18", elevation: 50 },
  { color: "#175515", elevation: 10 },
  { color: "#004023", elevation: 0.1 },

sketchpunk

{
    "editor.tokenColorCustomizations": {
        "comments": "#606060"
    }
    
    // Disable copilot
    "github.copilot.enable": {
        "*": false,
        "plaintext": false,
        "markdown": false,