{
"path": "/3m7r5ehy5os2z",
"site": "https://leaflet.pub/p/did:plc:6i6n57nrkq6xavqbdo6bvkqr",
"tags": [
"atproto",
"code",
"tutorial"
],
"$type": "site.standard.document",
"title": "Baby's First (Atproto) App",
"content": {
"$type": "pub.leaflet.content",
"pages": [
{
"id": "019b0f9e-0099-7dd5-a420-cee9010eab99",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 22,
"byteStart": 0
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "Who is this guide for?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "People who have some programming experience. Not necessarily in Typescript. Maybe some HTML or CSS they picked up in the 00s. Little to no experience with creating webpages or apps."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 20,
"byteStart": 0
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "Who is the guide by?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 425,
"byteStart": 420
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "A scientist/engineer doing a PhD who loves to tinker and code. My background includes knowledge of a number of programming languages (Python, MATLAB, R, C/C++, LabVIEW, and other things I needed along the way). I have taken formal coursework requiring Python, MATLAB, C/C++, and LabVIEW. Only C/C++ was a computer science course. The closet to a webpage or app I've created was a command line recreation of the game Typeshift in C/C++. "
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 486,
"byteStart": 466
},
"features": [
{
"uri": "https://atproto.com/guides/applications",
"$type": "pub.leaflet.richtext.facet#link"
}
]
}
],
"plaintext": "The last few months, however, I have been \"vibe coding\" ATlast, a tool for finding and following your follows from other social media on the AT protocol. By “vibe coding” I mean the code was largely and almost entirely created with Claude (free version). Now I've reached a point where I can't deal with my currently-poor-understanding of web-server-dev and atproto basics. So I'm creating a more beginner friendly guide to the statusphere app because, frankly, the existing example assumes a lot of knowledge I don't even have yet."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.horizontalRule"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 186,
"byteStart": 74
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "Things I might come back to write about here or create as separate pages: What are we learning? What are we building? What is the AT protocol? What are quirks of AT protocol development?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.horizontalRule"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b0fbf-734f-7bbd-ada7-116ed2863363",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": ""
}
}
]
},
{
"id": "019b18f2-685a-7ee7-a5c7-d32d071adb41",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "HTTP, Websockets, and APIs"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"facets": [],
"plaintext": "HTTP "
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Requests"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Responses"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 3,
"byteStart": 0
},
"features": [
{
"uri": "https://seanaujong.medium.com/how-computers-access-websites-through-http-e010d4086f50",
"$type": "pub.leaflet.richtext.facet#link"
}
]
}
],
"plaintext": "[5]"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"facets": [],
"plaintext": "Websockets"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": ""
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"facets": [],
"plaintext": "APIs"
}
}
]
},
{
"id": "019b1383-a8a7-7ee7-a566-7d0829fb3d92",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "In testing, we make a pseudo-network."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "When client and server are on the same computer, we can use a pseudo-network to communicate between them using HTTP. This is useful for testing how a client-server will operate over a real network before needing to \"release\" them to the desired network, i.e. putting them on the internet."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "This happens usually in the web browser (client is often a web browser) and the server is local (not available to all networks, just on the computer)."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 210,
"byteStart": 194
},
"features": [
{
"uri": "http://localhost",
"$type": "pub.leaflet.richtext.facet#link"
}
]
},
{
"index": {
"byteEnd": 230,
"byteStart": 214
},
"features": [
{
"uri": "http://127.0.0.1",
"$type": "pub.leaflet.richtext.facet#link"
}
]
},
{
"index": {
"byteEnd": 332,
"byteStart": 323
},
"features": [
{
"uri": "https://localhost",
"$type": "pub.leaflet.richtext.facet#link"
}
]
},
{
"index": {
"byteEnd": 364,
"byteStart": 361
},
"features": [
{
"uri": "https://leapcell.io/blog/a-deep-dive-into-network-interfaces",
"$type": "pub.leaflet.richtext.facet#link"
}
]
}
],
"plaintext": "Instead of a physical network for communication, we create a \"loopback\" network ‒ a programmatic network that let's the computer talk to itself via HTTP. The address for this local network is http://localhost or http://127.0.0.1 and the different here is like the contact name in your phone book vs the phone number, and localhost usually points to 127.0.0.1 [4]."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 120,
"byteStart": 0
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "The relevance of this will become more apparent when we discuss setting up login for the statusphere app we will create."
}
}
]
},
{
"id": "019b18d0-96d8-7ee7-a5a9-cd5cf07be8a4",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "Why do we need...?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "A server and a database? Can't I just make a statusphere app that is just client-side, since ATproto is the server we want information from and it already has databases?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": ""
}
}
]
},
{
"id": "019b18ec-7831-7ee7-a5c2-c2d59fdee217",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "What is a computer network?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "A network is how computers are physically connected, e.g. through WiFi, Bluetooth, cellular data, and more. There are different types of networks:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.unorderedList",
"children": [
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "LAN (local area network) - devices on your home WiFi"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "PAN (personal area network) - devices close to the user, often connected via Bluetooth, e.g. earbuds, mouse, smart watch"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "the Internet - all different networks connected together"
},
"children": []
}
]
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 49,
"byteStart": 45
},
"features": [
{
"uri": "https://www.geeksforgeeks.org/computer-networks/basics-computer-networking/",
"$type": "pub.leaflet.richtext.facet#link"
}
]
}
],
"plaintext": "you can learn more about network terminology here."
}
}
]
},
{
"id": "019b107d-f018-7bbd-adbd-ef04bf79639c",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "Typescript is statically typed"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Read on if you have no idea wtf that means."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": ""
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "I expect you've programmed before if you are reading this guide. You may be kind-of familiar with data types: things like strings versus characters versus integers versus floats. Depending on what programming languages you have used (see below), you may be more or less familiar with data types."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Dynamically typed languages you may be less familiar with data types, since data types can change and you don't need to prescribe the data type of a variable."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Statically typed typed languages you are likely more familiar with data types, since you need to specify the data type when defining a variable and they can't change data types (with caveats)."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 62,
"byteStart": 50
},
"features": [
{
"uri": "https://bsky.app/profile/did:plc:btxrwcaeyodrap5mnjw2fvmz",
"$type": "pub.leaflet.richtext.facet#link"
}
]
},
{
"index": {
"byteEnd": 122,
"byteStart": 119
},
"features": [
{
"uri": "https://www.bairesdev.com/blog/static-vs-dynamic-typing/",
"$type": "pub.leaflet.richtext.facet#link"
}
]
}
],
"plaintext": "Below is a list (to be replaced with a table once @leaflet.pub adds them) of dynamically vs statically typed languages [2]:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.unorderedList",
"children": [
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Statically Typed"
},
"children": [
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "C++"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Java"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Rust"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Typescript"
},
"children": []
}
]
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Dynamically Typed"
},
"children": [
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Python"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Ruby"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "R"
},
"children": []
},
{
"$type": "pub.leaflet.blocks.unorderedList#listItem",
"content": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Javascript"
},
"children": []
}
]
}
]
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 118,
"byteStart": 115
},
"features": [
{
"uri": "https://www.geeksforgeeks.org/typescript/difference-between-typescript-and-javascript/",
"$type": "pub.leaflet.richtext.facet#link"
}
]
}
],
"plaintext": "Yes, for simplicity's sake, you can think of a typescript as a statically typed and enhanced version of javascript [3]."
}
}
]
},
{
"id": "019b1362-319e-7ee7-a532-a628f54cd754",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [
{
"index": {
"byteEnd": 17,
"byteStart": 0
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "What is a server?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 73,
"byteStart": 70
},
"features": [
{
"uri": "https://en.wikipedia.org/wiki/Server_(computing)",
"$type": "pub.leaflet.richtext.facet#link"
}
]
},
{
"index": {
"byteEnd": 156,
"byteStart": 131
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#underline"
}
]
},
{
"index": {
"byteEnd": 182,
"byteStart": 157
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
},
{
"index": {
"byteEnd": 254,
"byteStart": 235
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "A server is just a computer in that communicates with other computers [3]. Specifically, it's a computer that provides information across a computer network in response to a request from a client, which is also a computer but one that requests a response."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b18ec-7831-7ee7-a5c2-c2d59fdee217",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"index": {
"byteEnd": 63,
"byteStart": 36
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
},
{
"index": {
"byteEnd": 243,
"byteStart": 233
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
},
{
"index": {
"byteEnd": 290,
"byteStart": 287
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#italic"
}
]
},
{
"index": {
"byteEnd": 332,
"byteStart": 329
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#italic"
}
]
},
{
"index": {
"byteEnd": 494,
"byteStart": 450
},
"features": [
{
"$type": "pub.leaflet.richtext.facet#bold"
}
]
}
],
"plaintext": "Computers often communicate through HTTP responses and requests. Think of it as like sending physical letters in the mail, where one interaction usually occurs at a time in a cycle. For comparison, computers can also communicate via websockets that are more like webinar calls where you can have two-way, real-time communication but it's usually one-way. Both HTTP and websockets contain messages, they are just structured and delivered differently. APIs help computers interpret these messages."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b18f2-685a-7ee7-a5c7-d32d071adb41",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": ""
}
}
]
},
{
"id": "019b0fbf-c175-7bbd-ada7-da9915743dac",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "Why Typescript"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Honestly it's not that deep. You can use another language if you want. I'm using this one because it's a very common language."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Bluesky and the AT protocol heavily use it in their own development. And it's often used both for \"frontend\" and \"backend\" development."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.blockquote",
"facets": [
{
"index": {
"byteEnd": 399,
"byteStart": 396
},
"features": [
{
"uri": "https://www.geeksforgeeks.org/blogs/frontend-vs-backend/",
"$type": "pub.leaflet.richtext.facet#link"
}
]
}
],
"plaintext": "Frontend is what users see and interact with on a website, like the layout, buttons, and text. It's called the client-side because it runs in the user's browser. \n\nBackend is the part that works behind the scenes, handling tasks like storing data and processing requests. It works behind the scenes to manage server-side logic, databases, communication with the frontend, and security operations [1]."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Making the statusphere app will require \"full-stack\" development: that is, programming both a frontend and backend."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Other less-relevant, maybe-useful bit of information:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b107d-f018-7bbd-adbd-ef04bf79639c",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": ""
}
}
]
},
{
"id": "019b0fc4-2b8d-7bbd-adaa-eddf78aacc77",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "What is a (web) app(lication)?"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "And how is its development different than other coding programs you have worked on? You may have created interactive apps in your programming language - an interactive script, game, or GUI. The key difference for web apps is, well, they are on the internet. This means they are available 24/7 to respond to user interactions across different browsers and devices. "
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "In developing a web app, we will build a web page/client (the frontend) that allows user input and a server (the backend) that collects this input, gathers information, and provides information. So,"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b1362-319e-7ee7-a532-a628f54cd754",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b1383-a8a7-7ee7-a566-7d0829fb3d92",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": ""
}
}
]
},
{
"id": "019b0fbf-734f-7bbd-ada7-116ed2863363",
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 1,
"facets": [],
"plaintext": "Start Here: Web-Server-Dev-Stuff"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [],
"plaintext": "Or don't start here if you already know this stuff. Or come back when you get confused later. Or don't and just look stuff up yourself. You have the choice here."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"alt": "Color blocked art. On the left: mermaid on a blue background. On the right: old film reel on a black background.",
"$type": "pub.leaflet.blocks.image",
"image": {
"$type": "blob",
"ref": {
"$link": "bafkreieoagg2xz6anciqunq4ma3gnrgauflx253luuqzo3lqnekyjvd4m4"
},
"mimeType": "image/jpeg",
"size": 93811
},
"aspectRatio": {
"width": 800,
"height": 449
}
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b0fbf-c175-7bbd-ada7-da9915743dac",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b0fc4-2b8d-7bbd-adaa-eddf78aacc77",
"$type": "pub.leaflet.blocks.page"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"id": "019b18d0-96d8-7ee7-a5a9-cd5cf07be8a4",
"$type": "pub.leaflet.blocks.page"
}
}
]
}
]
},
"bskyPostRef": {
"cid": "bafyreifi4x646ntoeoae5eq6fyj6mvro265evbmrtkjkvskzx6ujdorbje",
"uri": "at://did:plc:6i6n57nrkq6xavqbdo6bvkqr/app.bsky.feed.post/3m7r5em2oh22z",
"commit": {
"cid": "bafyreicfd4tdy5xffywnjvbt7vmafh4kxt7cc2d2txuibeytu3jvzjppiq",
"rev": "3m7r5em5ffq2b"
},
"validationStatus": "valid"
},
"description": "a truly beginner ‒ never-done-web-server-dev-stuff ‒ guide to building a statusphere app in typescript.",
"publishedAt": "2025-12-12T03:26:47.951Z"
}