Marco RodriguesHow to Upload Files on Arweave With Python
Throughout history, the need to store information has been crucial, both for individuals and organizations. Traditionally, paper documents and photographs were kept in physical folders and secured at home. The invention of computers revolutionized storage, transitioning from floppy disks to CDs, USBs, hard drives, and finally, solid-state drives. Recognizing the growing demand for data storage, the internet embraced cloud services, which emerged rapidly like mushrooms. Massive data centers, l...
Marco RodriguesMeet AO: The Hyper-Parallel Computer
The ao hyper-parallel computer hit the scene in February 2024 and is already making waves among developers worldwide. This innovative system takes inspiration from the actor model, enabling processes to run concurrently and communicate seamlessly without waiting for each other. Each processing unit within ao adheres to a core data protocol that runs on Arweave blockchain-like decentralized storage solution. This distributed network of nodes creates a unified experience for users, presenting a...
Marco RodriguesExploring Doug DeMuro's Cars Dataset
This analysis is part of a data challenge brought by Desights, a platform built by the Ocean Protocol to . If you’re not familiar with the latter, Ocean Protocol is paving the way for a new data economy using the power of blockchain. They provide several services, like earning and trading mechanisms, data challenges, and the Ocean Market, where datasets, reports, algorithms and more, can be published on Web3 decentralized storage infrastructures like Arweave and IPFS. Desights team is focused...
Where Data Science and AI, converge with Web3. Build 🔨 | Write ✏️ | Code 💻
Marco RodriguesHow to Upload Files on Arweave With Python
Throughout history, the need to store information has been crucial, both for individuals and organizations. Traditionally, paper documents and photographs were kept in physical folders and secured at home. The invention of computers revolutionized storage, transitioning from floppy disks to CDs, USBs, hard drives, and finally, solid-state drives. Recognizing the growing demand for data storage, the internet embraced cloud services, which emerged rapidly like mushrooms. Massive data centers, l...
Marco RodriguesMeet AO: The Hyper-Parallel Computer
The ao hyper-parallel computer hit the scene in February 2024 and is already making waves among developers worldwide. This innovative system takes inspiration from the actor model, enabling processes to run concurrently and communicate seamlessly without waiting for each other. Each processing unit within ao adheres to a core data protocol that runs on Arweave blockchain-like decentralized storage solution. This distributed network of nodes creates a unified experience for users, presenting a...
Marco RodriguesExploring Doug DeMuro's Cars Dataset
This analysis is part of a data challenge brought by Desights, a platform built by the Ocean Protocol to . If you’re not familiar with the latter, Ocean Protocol is paving the way for a new data economy using the power of blockchain. They provide several services, like earning and trading mechanisms, data challenges, and the Ocean Market, where datasets, reports, algorithms and more, can be published on Web3 decentralized storage infrastructures like Arweave and IPFS. Desights team is focused...
Where Data Science and AI, converge with Web3. Build 🔨 | Write ✏️ | Code 💻
Share Dialog
Share Dialog
Subscribe to Marco Rodrigues
Subscribe to Marco Rodrigues
<100 subscribers
<100 subscribers
Farcaster's groundbreaking Frames introduce a whole new way to experience social media, leaving Twitter (aka X) in the dust.
The latter has long been the main application for web3 and crypto-related content, users rely on Twitter to keep updated about new projects, tokenomics, airdrops, updates and much more. However, the app hasn’t done much to adapt to the web3 community values, which preach decentralization and permissionlessness.
Farcaster is a protocol completely open-source, where developers can make use of their creativity and build decentralized social media applications and more. The most used Farcaster client is called Warpcaster, which serves a Twitter-like user experience.
Just recently, Farcaster launched Frames, and its adoption increased exponentially. In Warpcaster, “tweets” are called “casts”, and users can embed links into these “casts”. Now these links can integrate Frames and display extra components to the embedding. This feature allows users to perform a suite of functions, both on-chain and off-chain, including minting NFTs, displaying slides, creating polls, making games and everything that comes to the developers’ minds.
As a Python developer with little knowledge of JavaScript, I wanted to create my own Frames to promote my project Post3, without getting into much advanced code.
Fortunately, I found a tweet by Dan Romero, one of the founders of Farcaster, showing how to make a Frame in 5 minutes.
I took the example and I built two types of Frames with OpenGraph tags. The first one is a linktree-like Frame, which was simply integrated into my Post3 Engine website. For the second I used basic Javascript and I made slides. Let’s now take a look at both Frames.
Making this kind of Frames is probably the simplest way to start because you only need to use the OpenGraph tags provided by Farcaster’s documentation in your HTML script.
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<!-- Frames -->
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta property="og:title" content="Post3 Links" />
<meta property='og:image' content="https://images.mirror-media.xyz/publication-images/TayvxH_MswvGYxcV5AnJX.png?height=672&width=1344" />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content="https://images.mirror-media.xyz/publication-images/TayvxH_MswvGYxcV5AnJX.png?height=672&width=1344" />
<meta property="fc:frame:button:1" content="Reports 📊" />
<meta property="fc:frame:button:1:action" content="link" />
<meta property="fc:frame:button:1:target" content="https://mirror.xyz/post3.eth" />
<meta property="fc:frame:button:2" content="Datasets 🌊" />
<meta property="fc:frame:button:2:action" content="link" />
<meta property="fc:frame:button:2:target" content="https://market.oceanprotocol.com/profile/post3.eth" />
<meta property="fc:frame:button:3" content="Engine 🚀" />
<meta property="fc:frame:button:3:action" content="link" />
<meta property="fc:frame:button:3:target" content="https://www.post3.xyz"/>
<meta property="fc:frame:button:4" content="Discord 🫂" />
<meta property="fc:frame:button:4:action" content="link" />
<meta property="fc:frame:button:4:target" content="https://www.discord.gg/Z5Q2VAUTnu" />
</head>
The HTML script above generates the following on Warpcaster:
The flow is pretty straightforward, I added four buttons with the OpenGraph tags and their respective links. They are all <meta> HTML elements which are all defined inside the <head> element. Since this was integrated into my website, I have my own <body> HTML architecture, but you can try it with a simple “Hello World” page.
To deploy the website, you can use the example provided by Dan Romero, which uses Replit.
To make a slide Frame I utilized JavaScript adapted from another piece of code. This Frame uses buttons to change the slide and redirect to external links. The code is available at my Replit, but let’s take a look at it below:
This script generates the following Frame:
When the user clicks on Next it takes him/her to another image until it reaches the last slide.
In the final slide above, the user has the option to either open the full report or go to the page to acquire the dataset from which the charts were obtained.
I know, at this point JavaScript stewards are looking at my piece of code and making it much shorter and efficient. However, as a non-JS developer, I found this structure easy to understand and follow for beginners.
👉 Join Post3 Discord community here. Follow Post3 on Twitter (aka X) and Farcaster
During the code screening, you’ve probably noticed that the most important OG tag is the fc:frame:button:$idx:action, because it grants dynamic interaction to the Frames. The actions of the buttons can be post, post_redirect, mint or link. Head to this documentation to learn more.
At the moment I’ve only explored off-chain interactions, but you can also mint NFTs directly from the Warpcaster application with Frames and probably more features will be added shortly.
While the basic building blocks (OG tags) might seem simple, developers are already creating complex experiences like video games. This technology has huge potential for the future, and Farcaster's can be proud of changing forever the paradigm of traditional social networks. To truly unlock its power, Frames need to become more accessible, allowing everyone to participate without requiring coding expertise.
Farcaster's groundbreaking Frames introduce a whole new way to experience social media, leaving Twitter (aka X) in the dust.
The latter has long been the main application for web3 and crypto-related content, users rely on Twitter to keep updated about new projects, tokenomics, airdrops, updates and much more. However, the app hasn’t done much to adapt to the web3 community values, which preach decentralization and permissionlessness.
Farcaster is a protocol completely open-source, where developers can make use of their creativity and build decentralized social media applications and more. The most used Farcaster client is called Warpcaster, which serves a Twitter-like user experience.
Just recently, Farcaster launched Frames, and its adoption increased exponentially. In Warpcaster, “tweets” are called “casts”, and users can embed links into these “casts”. Now these links can integrate Frames and display extra components to the embedding. This feature allows users to perform a suite of functions, both on-chain and off-chain, including minting NFTs, displaying slides, creating polls, making games and everything that comes to the developers’ minds.
As a Python developer with little knowledge of JavaScript, I wanted to create my own Frames to promote my project Post3, without getting into much advanced code.
Fortunately, I found a tweet by Dan Romero, one of the founders of Farcaster, showing how to make a Frame in 5 minutes.
I took the example and I built two types of Frames with OpenGraph tags. The first one is a linktree-like Frame, which was simply integrated into my Post3 Engine website. For the second I used basic Javascript and I made slides. Let’s now take a look at both Frames.
Making this kind of Frames is probably the simplest way to start because you only need to use the OpenGraph tags provided by Farcaster’s documentation in your HTML script.
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<!-- Frames -->
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta property="og:title" content="Post3 Links" />
<meta property='og:image' content="https://images.mirror-media.xyz/publication-images/TayvxH_MswvGYxcV5AnJX.png?height=672&width=1344" />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content="https://images.mirror-media.xyz/publication-images/TayvxH_MswvGYxcV5AnJX.png?height=672&width=1344" />
<meta property="fc:frame:button:1" content="Reports 📊" />
<meta property="fc:frame:button:1:action" content="link" />
<meta property="fc:frame:button:1:target" content="https://mirror.xyz/post3.eth" />
<meta property="fc:frame:button:2" content="Datasets 🌊" />
<meta property="fc:frame:button:2:action" content="link" />
<meta property="fc:frame:button:2:target" content="https://market.oceanprotocol.com/profile/post3.eth" />
<meta property="fc:frame:button:3" content="Engine 🚀" />
<meta property="fc:frame:button:3:action" content="link" />
<meta property="fc:frame:button:3:target" content="https://www.post3.xyz"/>
<meta property="fc:frame:button:4" content="Discord 🫂" />
<meta property="fc:frame:button:4:action" content="link" />
<meta property="fc:frame:button:4:target" content="https://www.discord.gg/Z5Q2VAUTnu" />
</head>
The HTML script above generates the following on Warpcaster:
The flow is pretty straightforward, I added four buttons with the OpenGraph tags and their respective links. They are all <meta> HTML elements which are all defined inside the <head> element. Since this was integrated into my website, I have my own <body> HTML architecture, but you can try it with a simple “Hello World” page.
To deploy the website, you can use the example provided by Dan Romero, which uses Replit.
To make a slide Frame I utilized JavaScript adapted from another piece of code. This Frame uses buttons to change the slide and redirect to external links. The code is available at my Replit, but let’s take a look at it below:
This script generates the following Frame:
When the user clicks on Next it takes him/her to another image until it reaches the last slide.
In the final slide above, the user has the option to either open the full report or go to the page to acquire the dataset from which the charts were obtained.
I know, at this point JavaScript stewards are looking at my piece of code and making it much shorter and efficient. However, as a non-JS developer, I found this structure easy to understand and follow for beginners.
👉 Join Post3 Discord community here. Follow Post3 on Twitter (aka X) and Farcaster
During the code screening, you’ve probably noticed that the most important OG tag is the fc:frame:button:$idx:action, because it grants dynamic interaction to the Frames. The actions of the buttons can be post, post_redirect, mint or link. Head to this documentation to learn more.
At the moment I’ve only explored off-chain interactions, but you can also mint NFTs directly from the Warpcaster application with Frames and probably more features will be added shortly.
While the basic building blocks (OG tags) might seem simple, developers are already creating complex experiences like video games. This technology has huge potential for the future, and Farcaster's can be proud of changing forever the paradigm of traditional social networks. To truly unlock its power, Frames need to become more accessible, allowing everyone to participate without requiring coding expertise.
const http = require("http");
const preimage_url =
"https://images.mirror-media.xyz/publication-images/tjtQ7ZJaeVVLauO2oiVzf.png?height=672&width=1344";
const postimage_1 ="https://arweave.net/Yreyl7-ZFTR8H-EZl7_Jk50S5JuXH48FulZpIfAZnDE";
const postimage_2 ="https://arweave.net/uZaQdegxucnWHYhEr-XCEhTqfmdpoZB55yYnlNMw-GI";
const postimage_3 ="https://arweave.net/y-smGQwDJTcVJM0n4UFCc1GDvtL6fd2xIY6MVRYAF38";
const REPORT_LINK =
"https://mirror.xyz/post3.eth/M9fc-1rXGRak0i3gtkXHOlKLT8WTmd43I8A_A3YtMTg?referrerAddress=0x";
const DATASET_LINK = "https://market.oceanprotocol.com/asset/did:op:dee9e208d792567f0e22106073c4da918ac77862106aba7fcd3be15e28775780"
const MORE_LINK = "https://bento.me/post3";
const server = http.createServer((req, res) => {
if (req.url === "/") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${preimage_url} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${preimage_url} />
<meta property="fc:frame:button:1" content="Full Report 📊" />
<meta property="fc:frame:button:1:action" content="link" />
<meta property="fc:frame:button:1:target" content=${REPORT_LINK} />
<meta property="fc:frame:button:2" content="Next ⏩" />
<meta property="fc:frame:post_url" content="https://post-3-reports-macrodrigues.replit.app/slide_1" />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href=${MORE_LINK} target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else if (req.url === "/slide_1") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${postimage_1} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${postimage_1} />
<meta property="fc:frame:button:1" content="Next ⏩" />
<meta property="fc:frame:post_url" content="https://post-3-reports-macrodrigues.replit.app/slide_2" />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href="https://bento.me/post3" target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else if (req.url === "/slide_2") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${postimage_2} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${postimage_2} />
<meta property="fc:frame:button:1" content="Next ⏩" />
<meta property="fc:frame:post_url" content="https://post-3-reports-macrodrigues.replit.app/slide_3" />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href="https://bento.me/post3" target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else if (req.url === "/slide_3") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${postimage_3} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${postimage_3} />
<meta property="fc:frame:button:1" content="Full Report 📊" />
<meta property="fc:frame:button:1:action" content="link" />
<meta property="fc:frame:button:1:target" content=${REPORT_LINK} />
<meta property="fc:frame:button:2" content="Buy Dataset 🌊" />
<meta property="fc:frame:button:2:action" content="link" />
<meta property="fc:frame:button:2:target" content=${DATASET_LINK} />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href="https://bento.me/post3" target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else {
// Catchall 404 Route
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("Page not found");
}
});
server.listen(3000, () => {
console.log("Server running on port 3000");
});
const http = require("http");
const preimage_url =
"https://images.mirror-media.xyz/publication-images/tjtQ7ZJaeVVLauO2oiVzf.png?height=672&width=1344";
const postimage_1 ="https://arweave.net/Yreyl7-ZFTR8H-EZl7_Jk50S5JuXH48FulZpIfAZnDE";
const postimage_2 ="https://arweave.net/uZaQdegxucnWHYhEr-XCEhTqfmdpoZB55yYnlNMw-GI";
const postimage_3 ="https://arweave.net/y-smGQwDJTcVJM0n4UFCc1GDvtL6fd2xIY6MVRYAF38";
const REPORT_LINK =
"https://mirror.xyz/post3.eth/M9fc-1rXGRak0i3gtkXHOlKLT8WTmd43I8A_A3YtMTg?referrerAddress=0x";
const DATASET_LINK = "https://market.oceanprotocol.com/asset/did:op:dee9e208d792567f0e22106073c4da918ac77862106aba7fcd3be15e28775780"
const MORE_LINK = "https://bento.me/post3";
const server = http.createServer((req, res) => {
if (req.url === "/") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${preimage_url} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${preimage_url} />
<meta property="fc:frame:button:1" content="Full Report 📊" />
<meta property="fc:frame:button:1:action" content="link" />
<meta property="fc:frame:button:1:target" content=${REPORT_LINK} />
<meta property="fc:frame:button:2" content="Next ⏩" />
<meta property="fc:frame:post_url" content="https://post-3-reports-macrodrigues.replit.app/slide_1" />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href=${MORE_LINK} target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else if (req.url === "/slide_1") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${postimage_1} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${postimage_1} />
<meta property="fc:frame:button:1" content="Next ⏩" />
<meta property="fc:frame:post_url" content="https://post-3-reports-macrodrigues.replit.app/slide_2" />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href="https://bento.me/post3" target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else if (req.url === "/slide_2") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${postimage_2} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${postimage_2} />
<meta property="fc:frame:button:1" content="Next ⏩" />
<meta property="fc:frame:post_url" content="https://post-3-reports-macrodrigues.replit.app/slide_3" />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href="https://bento.me/post3" target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else if (req.url === "/slide_3") {
res.writeHead(200, { "Content-Type": "text/html" });
res.write(`
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<meta property="og:title" content="Weekly Report" />
<meta property='og:image' content=${postimage_3} />
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content=${postimage_3} />
<meta property="fc:frame:button:1" content="Full Report 📊" />
<meta property="fc:frame:button:1:action" content="link" />
<meta property="fc:frame:button:1:target" content=${REPORT_LINK} />
<meta property="fc:frame:button:2" content="Buy Dataset 🌊" />
<meta property="fc:frame:button:2:action" content="link" />
<meta property="fc:frame:button:2:target" content=${DATASET_LINK} />
</head>
<body>
<p style="font-family: 'Open Sans', sans-serif; font-size: 50px;">More about Post3 <a href="https://bento.me/post3" target="_blank" style="color: rgb(0, 122, 255);">here</a>.</p>
</body>
</html>
`);
res.end();
} else {
// Catchall 404 Route
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("Page not found");
}
});
server.listen(3000, () => {
console.log("Server running on port 3000");
});
No activity yet