Our decentralized snippet application, powered by Blockstack, is starting to come together. We’ve seen how easy it is to add user authentication and basic persistence using Blockstack’s JavaScript library, Blockstack.js. This week, we’re going to add the ability to name snippets and the ability to save multiple snippets. In order to pull this off, we’ll have to dig into persistence again and show a slightly more complicated way of handling data.
Our Blockstack example app: Naming snippets
When we left off last week, our app opened directly to a snippet editing tool and loaded any work we may have saved to a snippet.json file we saved to Blockstack’s decentralized storage, also known as Gaia. The file we saved was a string-ified version of a JSON object that looks like this:
{
"html": "<div class="message">The rotat….",
"css": ".message { n text-align: center;n …",
"js": "const colors = ['red', 'blue', 'orange', …",
}
In order to support the naming of a snippet, we’ll have to restructure this object a little. We could simply add a name field alongside the other fields, but then the data (e.g., HTML and CSS) and the metadata (the name field) would be comingled. This isn’t the worst thing that could happen, but as metadata grows to include a description, the date it was created, the date it was last edited, and other fields, our object would get a bit trickier to read. In order to stay organized, let’s change the file structure to include a name field and a snippet field, which will be a nested object with the current properties.
{
"name": "Rotating Color",
"snippet": {
"html": "<div class="message">The rotat….",
"css": ".message { n text-align: center;n …",
"js": "const colors = ['red', 'blue', 'orange', …",
}
}
