Member-only story
Intro to Metamask for Dapps
Start to develop for the reigning web3 wallet.
Web3/Ethereum development has been progressing at a dizzying pace, I first wrote about Metamask in 2017* when things were getting started and well Metamask has cornered the web3 wallet/Dapp interface market and at this point it feels like you absolutely need to know about it if you are going to dabble in the whole web3 thing.
* Let's not sugar coat things, the developer experience (DX) for Crypto things was and still is not great, I just checked and the Metamask examples I used back in 2017 don't work anymore (shocking I know but I'll try making new working examples), the documentation is still a bit cryptic/incomplete for my taste (But we'll try simplifying it) and you will probably need to consult and follow the github repo for breaking changes and bugs, all this goes to say that web3 development is like many new things a work in progress.All right with that out of the way these are the obligatory links to the docs and repo.
Some Setup
We are all coming from different backgrounds and skill levels, maybe you are a seasoned (and fried ) developer, maybe you are just getting started, so we need to get everyone on the same page.
Metamask states you need: intermediate knowledge of HTML, CSS, and JavaScript, but that could mean anything especially in these days of complex front end frameworks and package/library managers like node/npm/react, so I'll try keeping my examples as vanilla and verbose as possible, for starters let's make a simple HTML single file whose sole job will be to be our MetaMask debugger and tester, I am using VsCode as my IDE with the open in browser extension, here's the file:
