Spreadshirt Uploader

💻 Code-Einblicke

Ein Blick unter die Haube — so ist das Projekt technisch umgesetzt:

Canvas-Grafik-Generator für Design-PNGs

function generateBirthdayImage(name) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    canvas.width = 2000;
    canvas.height = 2000;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const text = `Geburtstagskind ${name}`;
    let fontSize = 120;
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    let textWidth = ctx.measureText(text).width;
    while (textWidth > canvas.width * 0.9 && fontSize > 40) {
      fontSize -= 10;
      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
      textWidth = ctx.measureText(text).width;
    }
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 10;
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
    canvas.toBlob((blob) => resolve(blob), 'image/png');
  });
}

Drag & Drop Simulation mit DataTransfer API

const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
const rect = dropTarget.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;

const dragEnterEvent = new DragEvent('dragenter', {
  bubbles: true, cancelable: true,
  dataTransfer: dataTransfer,
  clientX: centerX, clientY: centerY
});
dropTarget.dispatchEvent(dragEnterEvent);

const dropEvent = new DragEvent('drop', {
  bubbles: true, cancelable: true,
  dataTransfer: dataTransfer,
  clientX: centerX, clientY: centerY
});
dropTarget.dispatchEvent(dropEvent);

Vue.js Integration mit __vue__ Discovery

const vueElements = document.querySelectorAll('[data-v-]');
for (const el of vueElements) {
  if (el.__vue__) {
    const methods = el.__vue__.$options.methods;
    const handlers = ['handleFileChange', 'onFileChange',
                      'uploadFile', 'handleUpload'];
    for (const h of handlers) {
      if (methods[h]) {
        methods[h].call(el.__vue__, fileInput);
        break;
      }
    }
  }
}

CSV-Parsing mit Duplikat-Erkennung

function parseCSV(text) {
  const lines = text.split(/\r?\n/);
  return lines
    .map(line => line.trim())
    .filter(line =>
      line.length > 0 &&
      !line.startsWith('#'))
    .filter((line, index, self) =>
      self.indexOf(line) === index);
}

💰 Business Value

Firefox Extension zur Automatisierung von Spreadshirt-Uploads. CSV-basierte Massenverarbeitung mit Canvas API und Drag & Drop Simulation.

⚙️ Funktionsweise

Die Kern-Mechanik des Projekts im Überblick.

💻 Technische Umsetzung

Das Projekt nutzt moderne Technologien und bewährte Open-Source-Tools für maximale Effizienz und Wartbarkeit.

🚀 Gebaut mit Vibecoding

🎯 Strategische Erkenntnisse

Jedes Projekt liefert wertvolle Einsichten — technisch wie strategisch. Diese Learnings fließen direkt in Folgeprojekte ein.