>_ DevTrendsnl

Taal

Home

Talen

Secties

Frontend Backend Mobiel DevOps AI / ML GameDev Blockchain Embedded Beveiliging
TypeScript

Hoe je stopt met betalen voor online diensten voor het genereren van basis QR-codes

Elke keer dat een ontwerper of layout-artiest een nette QR-code nodig heeft voor een landingspagina of drukwerk, begint dezelfde zoektocht. Je opent de eerste generator die je vindt in een zoekopdracht, besteedt vijf minuten aan het aanpassen van kleuren, uploadt een logo, klikt op de downloadknop, en plotseling eist de site registratie, een betaald abonnement, of genereert een dynamische code die via hun trage servers omleidt. Lijkt je dat bekend?

Ik heb onlangs een open-source project ontdekt genaamd mini-qr van een ontwikkelaar die zich lyqht noemt. Het is een lichtgewicht webapp die precies doet wat je zou verwachten: snel mooie vectorcodes genereert zonder watermerken, trackers of abonnementen.

Waarom dit project praktisch nuttig is

De meeste open-source generators leveren saaie zwart-witte vierkanten op in basisformaat. Mini QR gaat verder en biedt een visuele stijleditor met goede controle over het resultaat.

Hier is wat dit hulpmiddel kan doen:

  • Modules en frames stylen. Je kunt de vorm van stippen, finder patterns (hoekmarkeringen), de hoeken afronden en het buitenste frame met aangepaste tekst configureren.
  • Logo's in het midden invoegen. De app beheert automatisch het Error Correction Level zodat scanners de code betrouwbaar blijven lezen, zelfs wanneer het midden bedekt is.
  • Data templates voor verschillende taken. Geen noodzaak om handmatig raw strings samen te stellen zoals WIFI:S:MyNet;T:WPA;P:secret;;. De interface heeft kant-en-klare formulieren voor Wi-Fi-inloggegevens, vCard-contacten, agenda-evenementen, locaties, links en zelfs EPC QR-betalingen (SEPA).
  • Exporteren naar elk formaat. Het resultaat wordt geleverd als schone SVG voor drukwerk, raster PNG/JPG, of als ASCII/Unicode-tekens rechtstreeks in de terminal.

Batch export verdient speciale vermelding. Je kunt de app een CSV-tabel voeden met een lijst van links of contacten, en het genereert een hele batch van consistent gestileerde afbeeldingen in een archief. Voor conferentiebadges of voorraadstickers in een magazijn bespaart dit een paar uur routinematig werk.

Ingebouwde scanner en lokale verwerking

Naast de generator bevat de app ook een scanner. Deze werkt rechtstreeks via WebRTC-stream van een webcam of parseert een geüploade afbeelding.

Als de code gestructureerde data bevat (bijvoorbeeld een Wi-Fi-wachtwoord of contact), herkent de scanner het type en toont een snelle actieknop. Er zijn geen verzoeken naar externe backends hier: alle parsing en rendering gebeuren strikt in de browser aan de client-side. Je data gaat nergens naartoe.

De app ondersteunt ook PWA, dus je kunt hem installeren als een apart pictogram op je desktop of telefoon en gebruiken zonder een constante netwerkverbinding.

Onder de motorkap

De technische stack van het project ziet er modern en clean uit:

  • Vue 3 met TypeScript
  • Gebouwd met Vite
  • Componenten gebaseerd op shadcn-vue en Tailwind CSS
  • Lokalisatie in 30+ talen via Crowdin
  • Component testing via Storybook

De auteurs namen toegankelijkheid serieus: de interface voldoet aan basisvereisten voor WCAG A, ondersteunt lichte, donkere en systeemkleurthema's, en verwerkt complexe UTF-8-tekens correct (Arabisch script, CJK-karakters, emoji).

De interne rendering library kan apart getest worden in het openbare Storybook van het project, wat het gemakkelijker maakt om vergelijkbare componenten te integreren in je eigen frontend-services.

Lokaal draaien

Als je de publieke demo op Vercel niet wilt gebruiken of de generator wilt deployen binnen het interne netwerk van je bedrijf met je eigen merk presets, is het project eenvoudig lokaal op te zetten.

Clone de repository en installeer dependencies:

git clone https://github.com/lyqht/mini-qr.git
cd mini-qr
pnpm install
pnpm dev

Voor productie is het project verpakt in een Docker-container of gebouwd naar een statische folder met het pnpm build commando, waarna het kan worden geserveerd door elke willekeurige webserver zoals Nginx of Caddy.

Het project is gelicenseerd onder GPL-3.0. Dit betekent dat de code open is voor forks en self-hosting, maar je kunt de bronnen niet sluiten bij het aanpassen ervan.

Wie zal dit nuttig vinden

Mini QR pakt twee behoeften tegelijk aan.

Ten eerste is het een handig werkhulpmiddel voor alledaagse taken: het afdrukken van een gast-Wi-Fi-wachtwoord voor de koffiekamer op kantoor, het voorbereiden van SVG-codes voor een presentatie, of het formatteren van links op conferentiebadges voor deelnemers.

Ten tweede is het een goed voorbeeld van een kwaliteits-Vue 3 en Tailwind applicatie. Hier kun je zien hoe je Storybook-workflows organiseert voor gespecialiseerde grafische componenten, hoe je handige bestandsexports instelt, en hoe je previews voor pull requests automatiseert.

Als je regelmatig te maken hebt met QR-codes, bekijk dan de demo of bookmark het project. Het lost de taak netjes en zonder extra rommel op.

Gerelateerde projecten