Check out our project for @metaplex cHack!

Decentralized on-chain documentation suitable for any project.

Content is stored for eternity on Arweave and verified on Solana using Metaplex cNFTs.

Users are their own creators and own 100% of their data.

Here's how it works ⤵

Once you connect your wallet, you'll be greeted by DeDoc to initialize your account. This step creates a Metaplex collection for your projects to live under.

After you have an account you'll see a list of your projects. Click "New Project" to mint a new project.

Edit projects using our rich Markdown editor. Create new pages on the side bar and nest them for organization. Use slash commands for handy Markdown shortcuts.

Ready to deploy? Click "Save"!

Your changes will be uploaded to Arweave and the cNFT representing the project on Solana will be updated with the new URI.

View and share published documentation in read only mode by visiting the project URL presented on save or located in project settings.


Want to run the code? We have a README! Check the repo
https://github.com/ru-labs/dedoc

Up next
- Overall app polish. Make transactions more reliable, reduce amount of times needed to sign.
- Make statically generate deployments and add SEO/metadata config.
- Collaboration features/teams.
- Encrypted/private docs.
- Themes and more customization.
- ...

Wen? Soon.

Follow the @dedocapp page to be notified about official launch.

 https://x.com/dedocapp/status/1757546232438997490?s=20

Decentralized On-Chain Documentation with Metaplex cHack

New @notbunjil TailwindCSS theme. If he ever learns to code, here's how he could get it. LGTS. ⬇️

First, add this cheat code to your tailwind.config.js. If you're on console instead of PC this will be L1 + R3 + A + Up + Left + then take out the batteries and put them back in while holding all bumpers and triggers.

You can now set the background of any elements in your app to red by adding the bg-bunjil class.

New ability unlocked. Or..AbiLILY. wen lilly abilillies.

New TailwindCSS Theme with a Cheat Code

I made the solana/spl-token-registry method to get token registry faster.

I am sure a lot of our apps still use the spl-token-registry to fetch the token list and build a map of token details.

The suggested usage is a little inefficient so I cleaned it up.

Here's how 👇

Here's the suggested usage for spl-token-registry.
- First, download the list. This checks against a CDN and has two fallback URLs.
- Loop the data and filter.
- Loop the same data again and make more variables.

Ok, now you can finally use the data.

🔗 https://www.npmjs.com/package/@solana/spl-token-registry#usage

My version
- Only use the CDN, if not available, RIP.
- Only have one instance of the token list in memory and only loop over it one time.
- Use Reduce to do all in one filter and map generation.

note: I tested this with a for loop and it was slower than og

📊 The results?

Consistently saving half a second when processing the data after the request comes in 🤝

Also, I bet we can't rely on all users computers and phones having the same processing power as my dev machine. I bet the discrepancy grows on slower machines.

I made my solution a Gist here, feel free to use! I'd make a PR to the registry repo but I think it's deprecated. Also didn't seem worth it since it does work fine as advertised. But if you want faster apps....😈⚒️

https://gist.github.com/qudo-code/4684c271e9be2412e3508b48ef18b3f3

Optimizing Token Registry Method for Faster Fetching

1/ GM JSoors🧑🏼‍💻, probably don't use spread operator if you like your memory maybe?

2/ Nice. `data` can be a `const` now since we are using existing instances vs creating new ones, populating, then reassigning.

4/ Proof
https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4hcYgAIAJhmIZJAXknIAOiAAk6ipPVbKuzeoC6Abl1pxUtDADuAETkLlakAGJthjwfXezqtACAQQAnEIwAT3wABxDaYniI6JgYgFc4QnwMaOioCIAKWXkdGwcnAEoAgPFaWHwoWgBzQorTShA4GFhqYgh6BB4AJkQABjYOEEwcPHxqOAEaekZmHjZjViA

5/ Be nice to your browser tab. You only get so many resources.

You can use this Node CLI I made to generate images right in your terminal for free, here's "man eating computer ram for breakfast".

npx openjourney-cli man eating computer ram for breakfast

Tips and Tricks for JavaScript Development

gm 🦀, this week I've been learning Rust. As I've been learning this from a web devs perspective, I've been eager to find cool web use cases for Rust. I looked at a couple Rust/WASM frameworks and this one stood out. Here's what I've learned so far...

I am new to this framework and Rust so DYOR, what do I know.

But, I've experimented with a lot of state shapes in web dev using meta frameworks like SvelteKit and lately the closest thing to what I've wanted is tRPC + Tanstack Query + tRPC/Tanstack Adapter.

This has been a cool way to componentize server interactions. You get to break out of file based routing  for a few things (whew), have nice subscribables as Svelte stores. It's nice, esp with Prisma integration and stuff it ALMOST feels like one piece, kinda..

I appreciate all these tools, and what Svelte does with the compiler and no vdom and fine tuned reactivity. But it seems like instead of layering on so many pieces just to get a nice DX, we could use a new language to compose web apps as a whole. 🤷

The above is something I've always had in the back of my mind. Recently, I've been really involved in Solana things and I started learning Rust because that's the popular choice for writing programs. At some point I thought, "I wonder if you can make UI with this stuff"?

I cam across Leptos and it seems pretty sweet. Most of the other Rust to web app frameworks seemed Reactlike....so

Here's an example Leptos component that contains some methods, and a template that references some reactive state.

If you want server logic, that looks like this. Here's an endpoint that toggles a cookie value.

Both of these things can be in the same file. A file can have some server bits plus some UI bits. If a "view" or template calls a server fn on the client side, it will end up being a request to the backend to run that fn.

This seems like a cool benefit of generating both the client and the server from a low level. There isn't really frontend and backend, it's all just data flows and, "app".

As Leptos components go through their render and hydration process, you can have specific logic that runs in each stage.

Here's logic that will only run on the client side version of the component.

Here's another version of the pervious logic that runs on the server during initial generation.

Here's the component and view for the dark mode logic.

Leptos also provides cool form actions for managing/submitting form state. Another cool thing about these actions is that they will work and be available on the page even before WASM hydration.

This was an awesome intro to the Leptos framework with the creator, @greg_johnston, and it goes over this dark mode example in more detail.

https://www.youtube.com/watch?v=AD3FHodVgE8

If you want to learn even more, here's the repo. I can't wait to start building some apps with this. It seems like a cool engineering solution to my problems and a great excuse to continue learning Rust. LMK if anything above needs revision.

https://github.com/leptos-rs

I guess one remaining questions is uh...how do I deploy this thing? 😆

I think I heard Cloudflare mention in one of the videos but need to do more research on this front. I also wonder about hosting come things via replit.

Exploring Rust and tRPC for Web Development

🍪 Svelte Snacks. Todays episode, updating a variable/state management. One of the things that draws me to this language is the fact that it attempts to stay as close to vanilla as possible while thoughtfully abstracting out things we do everyday in web dev.

A lot of times in UI dev, we need to capture data from the user. Here's an example of a .svelte file that binds the input value to state. In Svelte, things defined in the script tag are accessible in the template using {curly brackets}. You can also put any JS expression in {}s

In the above example, whenever a user adds text to that input field, it will automatically be assigned to the "value" variable. And notice the reference to {value} in our template? That <p> tag will contain the <input> text and auto update whenever it changes.

Go try it! You can also have an object and then bind <input/>s to object properties of course. It's all just variable references in the end and Svelte will follow all of them for you and update only the things that need to be updated. https://svelte.dev/repl/7f4f52bc9195455ead9e4f78d3f12e1e?version=3.55.1

This is great for local state. A user could fill out a form with all of their values and then in this component we could have a submit function that sends it all off. But what about global state? Can we really manage app state with these simple patterns? Probably 🤷🏼‍♂️

For global state, Svelte has "stores". A store is just a normal JavaScript variable with the added benefit of being able to subscribe to it. If the a store value is ever changed in one place, all other things/components using the store will also be refreshed.

Bear with me for a sec, this isn't the most common usage of accessing stores but I want to explain how they work and why they work so well in Svelte. When you Create a store and import it, you have the following methods. .set(), .update(), .subscribe().

See that subscribe method at the bottom? This pattern of a .subscribe() method that takes a callback that gets the value as the first arg isn't unique to Svelte and often used in subscription models. Svelte adheres to these standards

and adds a cool abstraction to these subscription patterns to tap into them, the "$". In .svelte files you can prefix stores with $ which stands for "subscribe, get the value, unsubscribe, give me the value". Allowing you to use stores like normal variables. These are the same.

You can use this with other frameworks too that use this pattern like XState. You could use Svelte's $ on that "service" instance to get the value of the state machine and subscribe to it like a store value.

Any component in our app can import user store and read whatever the value is with "$". You can even set it or bind to it like any normal variable making them uber convenient.

Stores are great, but there isn't really a state management framework in place. Svelte is BYOS (state manager). For most small projects stores are all you will need. You could even organize them with a nice map and add setters and getters to keep it all clean and roll your own.

Here's how I like to build stuff tho..
- SvelteKit (Svelte + backend, like Next): https://kit.svelte.dev/
- SvelteQuery: https://sveltequery.vercel.app/
- tRPC: https://trpc.io/

When you setup tRPC in SvelteKit, there's also this available library called trpc-svelte-query-adapter which lets us combine SvelteQuery and tRPC to create queries that are mapped to tRPC endpoints. This lets us import queries and "$" them to get data, no more "fetch()" + typed.

The above is an example of a get price endpoint and how you could use it in Svelte with this setup, so clean! When you subscribe to that query store it will fetch data if it doesn't have it or reuse existing if it does. you can also query.load() to manually refetch at any time.

Thanks for reading! LMK if you have any questions or ways to do it better. Happy building 🚀

Meh Discord https://discord.gg/rQt2Y59pz7

Svelte State Management

🧵 Saturday brain stream about @tailwindcss DaisyUI pure CSS modals.

I think it's cool how these are setup. Here are some of my findings and a @sveltejs  component I made to make them better for my use case. 

All of the modals pretty much look the same, styles are for later, in this thread I just want to talk about the cool ways they are triggered and multiple implementations. Here's the basic config, I'll go over the examples found on this page.
https://daisyui.com/components/modal/# 

1. Modal using label + hidden checkbox

This is a pretty flexible method. When you click that label that looks like a button, It checks the checkbox that it is "for". Here's usage + how Daisy does this. They use :checked plus the CSS sibling selector (+). 

Checkbox modals are cool because you can change the state of that checkbox and your modal also shows/hides. Makes it easy to integrate into existing state.

2. Modal using anchor link

The anchor link modals work by adding a "#" ID to the URL which shows the corresponding modal if it matches. Daisy achieves this with the :target selector. The "open modal" anchor sets the path, that div#my-modal-2 reacts. 

These are cool because the modal state is kept in the URL, so if you open a modal, then send that link to someone, the modal will be open for them too unlike the checkbox modals that are based on state from memory.
Looks like -&gt; abc . com /# my-modal

3. Modal that closes when clicked outside

To achieve click out, Daisy suggests that we essentially take the structure from the first example except make the modal background an additional label for the checkbox. Uses the same CSS under the hood as the first example. 

4. URL state + Click out: All of the benefits in one Svelte component

Manage your modal state like a JS variable with the benefits of URL persistent state. Here's a little wrapper I made to make what I think is the perfect modal. 

🛠️ Code here ⬇️ 
https://gist.github.com/qudo-code/91a1703f9a67d026bdc2e51cd13314de 

I think I'll stop here because now the next step would be to make some modal system for managing modals across your project. You're not going to want to have a bunch of buried boolean toggles.

You'll probably want to add all of your modals top level and register them with a store or something.

Another thing I have yet to try but want to is use XState to manage modals. You could do these "#" URL modifications upon the entry/exit functions of states.

https://xstate.js.org/docs/guides/start.html

XState is fun, I once worked on a project where we used it to define the entire UI. Svelte components were bound to particular states and they were rendered/destroyed as you enter/exit states. That can be for another day too lol 
https://github.com/qudo-code/state-machine-snacks

Thanks for reading, back to building for Grizzly 🐻🤓

Daisy Modals

🛠️ New Gist: Svelte Solana Connect Wallet
This is something I remake way too often. Made myself a little a quick start with some boilerplate for adding Solana wallet support to Svelte projects. Works for me, hope it helps you too! Link below 

🔗 https://gist.github.com/qudo-code/d10b674b0b4db9dbe0e711edb3aab8fb

Svelte Solana Connect Wallet

🛠️ I am making a UI to get holder snapshots of Solana NFT projects. 

Usually "get mintlist" is a process that takes what feels like years, but I used the @heliuslabs NFT API which returns it in a matter of seconds. Mintlist + resolving 1k holders in  ~20 seconds 🤯🔥 LFG 

🏙️ @qudo, @solhosty, &amp; @0toSol go to the big city. Met up with some internet friends today 