or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
⚔️ Intro to Frames
Hack-a-thons
Workshops
⚔️ Tools
/frogfm
Resources
WTF are Frames?
Frames are a new design pattern. A way of interacting with dynamic content. Developers can build a multi-view experience in the feed. The app has user context. The user is able to send data to the server. It allows developers to embed parts of their app in the feed and link users to specifc parts of your app.
Frames extend the OpenGraph standard and turn static embeds into interactive experiences.
Frames are simple af!
They are essentially just dynamic images that are interacted with intents.
All they are really doing is generating meta tags in HTML.
Required Properties
fc:frame
fc:frame:image
og:image
Optional Properties
fc:frame:button:$idx
fc:frame:post_url
fc:frame:button:$idx:action
fc:frame:button:$idx:target
fc:frame:input:text
fc:frame:image:aspect_ratio
fc:frame:state
Don't know why but I am kinda obsessed with meta data. Probably cause it is easy for my smooth brain to understand. Sam has called me, "The unfurl guy." I had also been looking into htmx so some things just clicked and I kinda geeked out as soon this stuff was released. Here is the simple first Yeet frame I made:
That one did not even have any dynamic image ish. It just updated the metadata with a different
.png
based on what button was pushed.The only real PITA was that it is a full Next.js app that had to be deployed to Vercel and checked in the Frame Validator to test every small change. Being able to do most of that locally in a sexy console was one of the things that got me so excited about frog.
Vanilla made the first RaidGuild frame:
Image
The image is
1200x630
which is a aspect ratio of1.91:1
. If you use1:1
you still need theog:image
fallback for clients that do not support frames.Intents
Where is this going?
While this fuel has been poured on Farcaster
frames.js
is enabling Display Frames in any site or app and pushing for Open Frames Spec [Draft v0.0.2] to become a standard.Frames in CharmVerse
jaymehoffman.eth wrote a good article about Framing Frames on Paragraph.
Six Mental Models to Help You Think about Farcaster Frames
Features
In just over a month we have gone from meta tags to transactions
Vision
Comms are critical to coordination. Farcaster is a new standard for social communication. And it appear to be the first real demand for DAOs. PFP projects and memecoins are bringing communities together fast.
There is governace of:
Frames can already hold tokens and I assume there will be governance over frames themselves.
This community is actually asking for DAO tools.
Let's sneak the Moloch pill into a hotdog and get the baseheads doing real onchain shit.
Nouns is active on Warpcast and if we wait too long we may lose governance of the culture layer like we missed governance of defi protocols with Compound.
Examples
There are some good examples in this thread: Since Frames launched, we’ve announced four rounds of grants for builders creating /frames on Base
Frames
Repos
storage-fairy (frog.fm)
adventure_frame
stateful-counter-frog-demo
yoink
Tips
Routes
Unsure of best practices but think most of these are intended to be a single file.
But if you create multiple pages:
view.tsx
vote.tsx
Just add them in the
src
directory and import them intoindex.tsx
Design
The
css-in-js
is pretty simple. But you can also use images for more detailed designs.FrogUI is
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →horsefacts said Satori might be the way to include fonts without React.
Tailwind is not necessary. But…
Building Farcaster Frames with Frog