Recently, I’ve been spending time exploring Ethereum/web3 with the goal of trying to understand the technologies and opportunities. Having spent most of my career building in web2, my entire concept of building has been based on centralized systems. I’ve found that thinking about building in a decentralized ecosystem is really foreign.
To learn more in a hands on way, I built a simple open source project called ethTip which lets you add Ethereum tipping to a website with just five lines of HTML.
meta tags in your
head tag to determine the ethereum address and tip amount
<meta name="ethAddress" content="0x...."> <meta name="ethTip" content=".005"/> <!-- About $20 at the time of writing -->
<link rel="stylesheet" href="https://bthdonohue.com/ethTip/ethtip.css"> <script src="https://bthdonohue.com/ethTip/ethtip.js"></script>
Add the ethtip button at the bottom of your
If interested, you can view the commit that integrates ethTip into this blog.
When visiting a website with ethTip, a floating Ethereum button will appear on the bottom-right side of the page if the visitor has MetaMask (or any browser-based wallet that supports the Ethereum Provider API) installed.
The floating Ethereum button is hidden for visitors without a browser-based Ethereum wallet (i.e. web2 users?).
Here’s the experience with MetaMask installed:
Clicking on the floating Ethereum button will prompt MetaMask to send .005 ETH (~$20), the amount I configured in the
This project is small and trivial, but I learned a lot from it:
metatag. I could see applications for both domain-wide Ethereum addresses (e.g. this blog has one Ethereum address) and page-specific Ethereum addresses (e.g. a Twitter user’s webpage). The
metatag was a key part of making ethTip flexible and configurable, just in HTML.
0x4563918244F40000), and when you send that value to MetaMask, it’s shown as .005 ETH. As a developer, I wish that was more straightforward.
This was the most fun I’ve had building in a long time. Starting with a project that mostly leveraged web technologies, exploring here was much more approachable; I was able to ship something meaningful in a weekend.
Web3 as a mechanism for connecting the web to programmable blockchains is fascinating, and I’m excited to continue exploring here.