New bridge component: NFC Scanner
And an official GitHub Project to share what components are coming next.
Last week I added a new tool to my bridge component library: an NFC scanner.
This unlocks native interaction with physical NFC tags. You can read encoded URLs or plain text. And write data to empty tags.
With v0.11 of the library installed all you need is the following HTML to start scanning:
<div data-controller="bridge--nfc">
<button data-action="bridge--nfc#read">Read</button>
<p data-bridge--nfc-target="result"></p>
</div>The iOS or Android app will display the native scanning UI instructing the user to tap an NFC tag. Once detected, it will automatically display the contents of the tag in the result target in the HTML. No native code (on your end) required!
Working on this component took a ton of trial and error. You can’t test interaction with NFC chips in the simulator. So every iteration required me to deploy to a physical device to verify the change.
But I have to say, there’s something magical about building tools that interact with physical objects. I mean, just look at this photo! Even if I’m coding 90% of the time, being able to pick up an NFC card and change how it behaves in the real world is a very cool, almost magical feeling. 🧙♂️
A big shoutout to
Bridge Component library updates
Along with the new component, the demo apps bundled with the library got a fresh coat of paint. In addition to some theme and color changes: new icons! Now it will be easier to tell them apart from other apps on your iOS or Android device.
I’ve also launched a public roadmap for the project, making it easier to see:
What’s being worked on next
What is currently being worked on
Which features were released with which version
As you can see: I don’t have anything in the pipeline right now! I’m currently on the lookout for new ideas and inspiration for future bridge components.
What component do you want to see next? Send me a message and let me know!