DEV Community

Руслан
Руслан

Posted on

QR Codes for Developers: Beyond the Basics

#javascript #webdev #tutorial #productivity

QR codes are everywhere. Restaurant menus, event tickets, payment systems, WiFi sharing. But as developers, we often overlook how useful they can be in our own workflows.

Let's explore some practical use cases beyond "link to my website."

Quick Refresher: What's in a QR Code?

A QR code is just data encoded visually. It can hold:

  • URLs (most common)
  • Plain text (up to ~4,000 characters)
  • WiFi credentials (SSID + password)
  • Contact cards (vCard format)
  • Calendar events (iCal format)
  • Email/SMS templates
  • Geolocation coordinates

The format determines what happens when scanned.

Developer Use Cases

1. WiFi Sharing for Guests/Coworkers

Instead of spelling out your office WiFi password:

WIFI:T:WPA;S:MyNetwork;P:SecretPassword123;;
Enter fullscreen mode Exit fullscreen mode

Scan → connected. No typos.

2. Quick Environment Setup

Encode configuration URLs or setup commands:

https://myapp.dev/setup?token=abc123&env=staging
Enter fullscreen mode Exit fullscreen mode

New team member? Scan to configure their dev environment.

3. Localhost Tunneling

Testing on mobile? Generate a QR code for your ngrok/localtunnel URL:

ngrok http 3000
# Copy the URL, generate QR, scan with phone
Enter fullscreen mode Exit fullscreen mode

Faster than typing https://abc123.ngrok.io on mobile.

4. Deploy Previews

Add QR codes to your PR comments:

  • Vercel/Netlify preview URL as QR
  • Designers can scan and review on real devices
  • No Slack link hunting

5. Conference Badges

Build a simple badge generator:

  • Encode vCard with name, email, LinkedIn
  • Attendees scan each other's badges
  • No manual contact entry

6. Debug Information

Encode error details for support:

{"error":"AUTH_FAILED","userId":"12345","timestamp":1710000000}
Enter fullscreen mode Exit fullscreen mode

User scans → sends you structured debug data.

Generating QR Codes

JavaScript (Browser) 

// Using qrcode library
import QRCode from 'qrcode';

const canvas = document.getElementById('qr');
QRCode.toCanvas(canvas, 'https://example.com');
Enter fullscreen mode Exit fullscreen mode

JavaScript (Node.js) 

const QRCode = require('qrcode');

// To file
QRCode.toFile('./qr.png', 'https://example.com');

// To data URL
const dataUrl = await QRCode.toDataURL('https://example.com');
Enter fullscreen mode Exit fullscreen mode

Python 

import qrcode

qr = qrcode.make('https://example.com')
qr.save('qr.png')
Enter fullscreen mode Exit fullscreen mode

Command Line 

# macOS (with Homebrew)
brew install qrencode
qrencode -o qr.png 'https://example.com'

# Or use an online tool
Enter fullscreen mode Exit fullscreen mode

Free QR Generator

For quick one-off QR codes without writing code:

QRCreator.site — Simple, free, no signup required.

Supports:

  • URLs
  • Plain text
  • WiFi credentials
  • vCards
  • Download as PNG

Best Practices

1. Add Error Correction

QR codes have built-in redundancy. Higher error correction = more scannable even if partially obscured.

QRCode.toCanvas(canvas, url, {
  errorCorrectionLevel: 'H' // L, M, Q, H (7%, 15%, 25%, 30%)
});
Enter fullscreen mode Exit fullscreen mode

2. Mind the Size

  • Minimum: 2cm × 2cm for reliable scanning
  • Distance rule: 10:1 ratio (10cm away = 1cm QR minimum)
  • Test on multiple devices before printing

3. Use Short URLs

More data = denser QR = harder to scan.

❌ https://example.com/products/category/subcategory/item?ref=campaign&utm_source=qr
✅ https://example.com/p/abc123
Enter fullscreen mode Exit fullscreen mode

Or use a URL shortener with analytics.

4. Add a Frame/Label

Users don't know what a random QR does. Add context:

┌─────────────┐
│   [QR]      │
│             │
│ Scan for    │
│ WiFi access │
└─────────────┘
Enter fullscreen mode Exit fullscreen mode

5. Test Before Deploying

Always scan your QR with:

  • iPhone camera
  • Android camera
  • At least one QR scanner app

Different readers have different quirks.

Dynamic QR Codes

Static QR = fixed content. Dynamic QR = redirect through your server.

Static:  QR → https://example.com/menu.pdf
Dynamic: QR → https://qr.example.com/abc → redirects to current menu
Enter fullscreen mode Exit fullscreen mode

Benefits:

  • Change destination without reprinting
  • Track scan analytics
  • A/B test destinations

Security Considerations

⚠️ QR codes can be malicious:

  • Phishing URLs
  • Malware downloads
  • Automatic actions (call premium numbers, etc.)

For your apps:

  • Validate scanned data before acting on it
  • Show URL preview before opening
  • Don't auto-execute commands from QR input

Quick Project Ideas

  1. QR-based 2FA backup — Encode TOTP secrets for recovery
  2. Event check-in system — Scan ticket QR, mark attended
  3. Asset tracking — QR labels on equipment linking to inventory DB
  4. Restaurant ordering — Table QR → menu → order
  5. WiFi onboarding — Guest scans, agrees to terms, gets access

Wrapping Up

QR codes are a solved problem—but an underutilized one. Next time you're typing a URL on mobile or sharing WiFi credentials verbally, consider: would a QR code be faster?

Need a quick QR code? qrcreator.site — free, instant, no account needed.

Top comments (0)