Information Design
Content Design
-
DFINITY Help Center Redesign
A case study on how best to improve the DFINITY Help Center
-
Video Tutorials
A collection of videos made to provide Technical Support of the Internet Computer
Technical Writing
Bitcoin Integration on the Internet Computer
-
The Internet Computer blockchain is integrated with the Bitcoin blockchain to make powerful smart contract functionality available for Bitcoin through a direct, bridgeless, integration of the two blockchains. "Direct" in this context means that there are no additional parties required, such as bridges or other types of intermediaries, resulting in a much cleaner and more secure integration.
What new capabilities are possible from this integration?
Canisters can have Bitcoin addresses, and therefore can receive and hold bitcoin directly on the Bitcoin blockchain.
Canisters can access the balance and UTXO set of Bitcoin addresses.
Canisters can securely sign Bitcoin transactions.
Canisters can submit Bitcoin transactions to the Bitcoin network.
All of this is made possible by (1) the Internet Computer integrating with Bitcoin at the protocol level and (2) canisters being able to securely hold and use ECDSA keys by means of a novel protocol for chain-key signatures, based on threshold ECDSA. The Internet Computer is among the first blockchain networks performing such direct integration with other blockchains and has built a novel technology foundation for this purpose.
The SNS: Preparation for creating your DAO
-
Set the initial parameters: For initializing an SNS for your dapp, you first choose the initial parameters of the SNS. This includes both initial parameters of the governance and ledger (e.g., token name). For an idea of how to set additional parameters, check out this IC Developer Doc.
Ask the SNS-W to install the SNS canisters: When all parameters are specified, you make a call to the SNS wasm modules canister on the NNS to install an SNS with the specified parameters. At this point, the SNS canisters exist but are not yet fully functional - the SNS is in pre-decentralization-sale mode. At this point, the SNS ledger only has two accounts with liquid tokens, the treasury that is owned by the SNS governance canister and which can be used in the future according to the SNS community's wishes, and some pre-allocated tokens to be used in the initial decentralization sale.
Dapp control handover: Before the decentralization sale, the SNS root canister must be set as the controller of the dapp and other developers are removed from the list of controllers. This entails "registering" the dapp with the SNS so that SNS root is aware that it controls these canisters, and this registration is done by SNS proposal.
Ask the IC to start the decentralization sale: The decentralization sale is started by an NNS proposal that can be submitted by anyone and is decided on by the IC community. The NNS proposal defines the conditions for the decentralization sale, for example how many ICP tokens should at least and at most be collected. When voting on the proposal, the NNS neurons can check the sale parameters and whether the dapp’s control has been handed over to the SNS. The NNS proposal thus also serves as a safeguard where the wisdom of the crowd can detect potentially malicious SNSs before they trick users into investing in them. If the NNS proposal is adopted, the sale is started. If the NNS proposal is rejected, the SNS launch is aborted and the dapp’s control is handed back to the original developers of the dapp.
Decentralization sale: When the sale starts, the sale canister holds the number of SNS tokens that were specified. End users can participate in the decentralization sale by transferring ICP tokens to the sale canister.
SNS genesis: When the decentralization sale ends, it is first established whether it was successful, e.g., enough ICP have been collected. If the sale was successful, the exchange rate is determined and all SNS tokens are given to the sale participants in neurons. Once all neurons are created, the SNS should be under decentralized control and the pre-decentralization-sale mode is reverted. Thus, the governance canister is set to be fully functional. If the sale is unsuccessful, the decentralization attempt failed and everything is reverted to the state before the SNS launch attempt, including that the dapp’s control is handed back to the original developers of the dapp, and the collected ICP are refunded to the sale participants.
How to optimize a dapp for SEOs
-
Once you have a dapp running on the Internet Computer, it's important to be sure that you have all the necessary data needed for webcrawlers to find and present your dapp to others through various channels such as Twitter.
Important information to keep in mind for metadata can include:
Title: The name of the application, the product.
Description: Its tag line, its catchy selling phrase.
Icon: A square image used to generate the favicons (note the plural).
Social image: Another image (ratio 1.9:1) used to generate a card on platforms such as Twitter, Facebook, Discord, LinkedIn, etc.
These static assets must be served by our canister smart contracts, so be sure to set meta data in all HTML pages of your application, as well as a web app manifest, and a sitemap.xml. Lastly, you can allow crawlers to view your content by defining a robots.txt.
HTML
In the <head /> container of our HTML pages, it is good practice to set not only the <title /> but also a <description /> and an<author />. It is also important to set the language of the document to one that matches its content. For instance, if you provide meta tags in Spanish, for example, it is useful to also set the document as such.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Papyrs</title>
<meta content="Blog on web3" name="description" />
<link href="https://papy.rs" rel="canonical" />
</head>
</html>
When I was working at Paradox Customs, I had the fortunate opportunity to collaborate with the developers to create a functional, intuitive design for our website. Being that we were primarily an online retailer, it was important that we were able to funnel people through the experience as efficiently as possible. During my time there, we serviced over 500 orders and completely redesigned the look and feel of this website using animations, bright bold photography, and a user-focused design to help individuals find what they were looking for as quickly as possible.
Starting with the 6 tiles, I worked alongside the team to categorize the products and hierarchy to cut excessive clicks by ~20%. Then, we brought Ready-to-Ship PCs to the forefront, promoting the products that were the most efficient for the company to produce, with the quickest turnaround time. We added delightful hover animations and engaging moving components, calling out the organizations that showed strong support.
On the product page, we made all the information for the product and each of it’s components crystal clear, to minimize confusion when purchasing. Then, to take full advantage of the sale, we promoted additional accessories, particularly in preparation for a new custom controller that I helped design.
All in all, we gave the whole website a modern refresh, catering to a gamer’s love of RGB.
Web Design
Web Development
During my time as the sole developer for the College of Engineering and Applied Science at Stony Brook University, I was fortunate enough to work across departments and associated organizations to create pages showcasing research, bringing light to projects and groups working towards something larger.
-
I collaborated with professors and faculty to write about and showcase real breakthroughs in projects focusing on biology, robotics, and engineering.
-
I added an artistic touch to portraits and related images to news articles, editing photographs and working within Illustrator and Photoshop for attention-grabbing vector images across the site.
-
Hosting the website within OmniUpdate, CEAS works within the confines of the Content Management System using HTML, CSS, PHP and JavaScript to make key components like photo galleries, hover effects, and effective navigation menus, as well as aesthetic functional landing pages.
