paazmaya.fi

The Website of Juga Paazmaya | Stories about Web Development, Japanese Martial Arts, Hardware prototyping and travelling

Creating QR code generator with Rust and WebAssembly

Ever needed a QR code generator for something and did not know which online QR code generators to trust?

Some of them might store all the information that is being converted and abuse it somehow, and some might just make incompatible QR codes. Whatever the case might be, here is an open source solution for you, which I happened to create while working on one of the courses that I lecture at Metropolia University of Applied Sciences here in Helsinki, Finland. That course is about the Rust programming language, where we also cover a use case for WebAssembly.

Creating this QR code generator, which outputs the QR code as SVG for scalable use cases, the workflow was approximately the following:

  1. Build a Cargo project that compiles to WASM.
  2. Load that WASM to a web page, a single HTML file, which contains all the styling for its form too.
  3. Use generative AI to assist in coming up with the logo for the project.
  4. Colors probably also come through that logo exploration.
  5. Make the form to allow adjusting SVG size and QR code error correction levels
  6. Accessibility checking at least with the WAVE browser plugin
  7. Decide on a static website hosting platform. Chose Render.com since I have not used it much.
  8. Push the code to a public git repository for transparency. Chose Bitbucket because I have not used their public offering for over a decade.
  9. Automate building and publishing via some CI/CD pipeline that connects to both Bitbucket and Render.com.
  10. Configure DNS to use my own domain name for Render.com static website, configure also all HTTPS-only options
  11. Ready?

The final result is visible and usable at qr.paazmaya.fi, enjoy the privacy-first QR code generator!

The downloaded files in this we page are rather small. The transferred, typically Gzipped files:

  • WASM - 29.2 kb
  • HTML - 2.9 kb
  • JS - 2.4 kb
  • PNG - 8.8 kb
  • ICO - 8.6 kb

Total of 51.8 kb, which is pretty nice!

I also had to do git repository filtering, as the original work I did in a big monorepo where I have all my Rust-related small projects that are used as examples during the course lectures.

Here are the steps on how that was done:

  1. Clone the original repository, hereafter called realistic-rust
  2. cd realistic-rust and the folder that should be kept, without any renames from the history, is called wasm-qr-svg
  3. Filter with command git filter-branch --prune-empty --subdirectory-filter wasm-qr-svg -- --all
  4. Remove the earlier remote address git remote remove origin
  5. Add the new repository address git remote add origin git@bitbucket.org:paazmaya/qr.paazmaya.fi.git
  6. I still wanted to sign all the commits with my GPG key that has been configured globally, so running git rebase -i --root then changing all first words to “edit”
  7. Sign the commit git commit -S --amend --no-edit and then git rebase --continue, repeated these two commands until all commits had been rebased
  8. Finally a forceful push since while the repository was created, I had chosen predefined files for it, git push --force-with-lease (yes, always with lease)
  9. … and just to realize that Bitbucket.com seems still not to support git commit signing with GPG keys

Next steps for the QR code generator are borwser feature detections, toprovide feedback when something is not supported. Input size limitation, to prevent overflooding.