{"version": "https://jsonfeed.org/version/1.1", "title": "dAppling dev blog", "home_page_url": "https://blog.dappling.network/", "feed_url": "https://blog.dappling.network/full.json", "description": "Nurturing the Future of Decentralized App Development", "user_comment": "dAppling dev blog JSON feed (full articles)", "authors": [ { "name": "dAppling", "url": "https://dappling.network" } ], "language": "en", "icon" : "https://blog.dappling.network/icon-192.png", "favicon" : "https://blog.dappling.network/icon-512.png","items": [{"id": "https://blog.dappling.network/a-github-app-would-like-to-act-on-your-behalf/", "url": "https://blog.dappling.network/a-github-app-would-like-to-act-on-your-behalf/", "title": "A GitHub App Would Like to Act on Your Behalf", "date_published": "2024-02-08T00:00:00Z", "language": "","content_html": "<p>An inaccurate warning when authorizing GitHub was a concern for some of <a href="https://dappling.network/">dAppling’s</a> users. We got around this by using a dual-auth approach: OAuth for log in and App authentication for repo access.</p> <h2 id="the-github-app-warning">The GitHub App Warning</h2> <p>When authorizing a GitHub App, the user is presented with a warning stating our app would like to “act on your behalf”. This warning is accompanied by a link <a href="https://docs.github.com/en/apps/using-github-apps/authorizing-github-apps#about-github-apps-acting-on-your-behalf">about GitHub Apps acting on your behalf</a>. While this is true for some actions GitHub apps can perform, this warning shows up when requesting only read access to the user’s profile. This has been understandably concerning for some of our users.</p> <p><img src="https://blog.dappling.network/images/github-app/github-app-warning.png" alt="The GitHub App Warning" /></p> <h3 id="github-authentication">GitHub Authentication</h3> <p>Ultimately we want to do two things: allow the user to log to dAppling with their GitHub account and build their specified repositories into a decentralized application. For logging in, GitHub provides OAuth as well as GitHub App authentication. For repo access, GitHub App authentication is the only reasonable option, although there are other more <a href="https://docs.github.com/en/rest/authentication/authenticating-to-the-rest-api">inconvenient options</a>. As you might have guessed, using GitHub App authentication for both log in and repo access would work. It would also trigger the warning. Therefore, we decided to use GitHub’s OAuth for the log in and GitHub’s App authentication for repo access.</p> <h2 id="flow-overview">Flow Overview</h2> <ul> <li>User Clicks “Log In” and are routed through the Next Auth sign in flow via <strong>GitHub OAuth</strong>. <ul> <li>If they are a new user, they are prompted to provide authorization.</li> </ul> </li> <li>They receive a token and are redirected to the <strong>Auth Check</strong> page.</li> <li>The path diverges based on whether or not they have the app authorized.</li> </ul> <p>If they do not have the app installed:</p> <ul> <li>Since they are most likely new, they are sent to /new</li> <li>The user will be shown a button to connect to the <strong>GitHub App Authentication</strong></li> <li>A popup, which, upon completion, will redirect to /auth/connection</li> <li>The <strong>middleware</strong> will intercept the call to /auth/connection, and using the code passed back, a GitHub App token is stored in the session</li> <li>The <strong>Auth Connection Page</strong> pop-up is closed and the session is refreshed with <code>update</code></li> </ul> <p>If they have the app installed:</p> <ul> <li>They are directly attempted to <strong>App Re-Authentication</strong> via GitHub’s app auth flow</li> <li>Upon completion, they are redirected to /auth/connection</li> <li>The <strong>middleware</strong> will intercept the call to /auth/connection, and using the code passed back, a GitHub App token is created and stored in the session</li> <li>Hitting the <strong>Auth Connection Page</strong>, the user is redirected to their /projects page</li> </ul> <p>Celebrate! The user now has both the <code>githubAppAccessToken</code> and <code>githubOauthAccessToken</code> until logging out</p> <h3 id="github-oauth">GitHub OAuth</h3> <p>Using <a href="https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app">GitHub’s OAuth app</a> is surprisingly straight-forward since we are using <a href="https://next-auth.js.org/">Next Auth</a>, but this should be similar for other platforms. Using the Client ID and Secret, allow the user to log into the OAuth provider and GitHub will return an access token. If you notice, the access token is named specifically to separate the OAuth access token from the GitHub App access token. The following is a simplified version of our config.</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">NextAuth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> providers<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token function">GithubProvider</span><span class="token punctuation">(</span><span class="token punctuation">{</span> clientId<span class="token punctuation">,</span> clientSecret<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> callbacks<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">jwt</span><span class="token punctuation">(</span><span class="token punctuation">{</span> token<span class="token punctuation">,</span> profile<span class="token punctuation">,</span> account <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> token<span class="token punctuation">.</span>githubOauthAccessToken <span class="token operator">=</span> account<span class="token punctuation">.</span>access_token<span class="token punctuation">;</span> <span class="token keyword">return</span> token<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">session</span><span class="token punctuation">(</span><span class="token punctuation">{</span> session<span class="token punctuation">,</span> token <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> session<span class="token punctuation">.</span>githubOauthAccessToken <span class="token operator">=</span> token<span class="token punctuation">.</span>githubOauthAccessToken<span class="token punctuation">;</span> <span class="token keyword">return</span> session<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <p>Now, when the user logs in, they are presented with a nicer looking prompt. You can see the scary warning is not present, and if you don’t need the profile, request only “email” by changing the <a href="https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/github.ts#L68">authorization scope</a>.</p> <p><img src="https://blog.dappling.network/images/github-app/github-oauth-warning.png" alt="GitHub OAuth Warning" /></p> <h3 id="auth-check-page">Auth Check Page</h3> <p>Once the user has an OAuth token, we can check if they have the app token and redirect them accordingly. This is done in a Next.js page. Since it is not possible to see if a user has given the app <a href="https://github.com/settings/apps/authorizations">authorization</a>, we separate our users into two categories: most likely new and most likely returning. The signal we use is if the user has any projects. If they do, assume they are returning and immediately try to run <strong>App Re-Authentication</strong>. If not, we redirect them to the new project page and allow them to go through regular <strong>App Authentication</strong>. The following is a simplified version of our AuthCheck function.</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">AuthCheck</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> session <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getServerSession</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>session<span class="token punctuation">.</span>githubAppAccessToken<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* This should only happen if the user has acquired the githubAppAccessToken from the JWT token. This should be the case only if they hit this page directly, as the preview user, who has the token added directly, or if they had the accessToken from the previous JWT. */</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">'/projects'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">await</span> <span class="token function">hasProjects</span><span class="token punctuation">(</span>session<span class="token punctuation">.</span>user<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* Redirect to GitHub's auth flow to get a new token for our app. Then, GitHub will redirect the user to the /auth/connection page, which will upgrade the token and redirect to the projects page. */</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token constant">GITHUB_AUTHORIZATION_URL</span><span class="token punctuation">,</span> RedirectType<span class="token punctuation">.</span>replace<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">'/new'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></code></pre> <h3 id="github-app-authentication">GitHub App Authentication</h3> <p>So the user has logged in to our app and we can query the GitHub API, but we need more permissions since we need to build code and report changes off of the website. That is where the GitHub App authentication comes in. Head over to <a href="https://docs.github.com/en/apps/creating-github-apps/registering-a-github-app/registering-a-github-app">create a GitHub app</a>. There is one very important option to check: “Request user authorization (OAuth) during installation”.</p> <p>At this point, we have a <code>gho</code> token for the user. From GitHub’s blog post <a href="https://github.blog/2021-04-05-behind-githubs-new-authentication-token-formats/#identifiable-prefixes">on token formats</a>, you can see this comes from the OAuth flow. After the user goes through the App flow, we will have a <code>ghu</code> token. This is the GitHub App token which will allow our app to access the repos granted by the user.</p> <p><img src="https://blog.dappling.network/images/github-app/github-app-installation.png" alt="GitHub App Installation" /></p> <p>What’s nice is you can now see the permissions our app is requesting as well as limiting which repos the app can access. Funnily enough, the warning about acting on the user’s behalf is missing. After this step, we will now have an app token which we can also store in the cookie. Our new callbacks will look like the code below. Note, the <code>githubAppAccessToken</code> is set in the middleware. More on that later.</p> <pre class="language-ts"><code class="language-ts"><span class="token function">jwt</span><span class="token punctuation">(</span><span class="token punctuation">{</span> token<span class="token punctuation">,</span> profile<span class="token punctuation">,</span> account <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> token<span class="token punctuation">.</span>githubOauthAccessToken <span class="token operator">=</span> account<span class="token punctuation">.</span>access_token<span class="token punctuation">;</span> <span class="token keyword">return</span> token<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">session</span><span class="token punctuation">(</span><span class="token punctuation">{</span> session<span class="token punctuation">,</span> token <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> session<span class="token punctuation">.</span>githubOauthAccessToken <span class="token operator">=</span> token<span class="token punctuation">.</span>githubOauthAccessToken<span class="token punctuation">;</span> session<span class="token punctuation">.</span>githubAppAccessToken <span class="token operator">=</span> token<span class="token punctuation">.</span>githubAppAccessToken<span class="token punctuation">;</span> <span class="token keyword">return</span> session<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre> <h3 id="app-re-authentication">App Re-Authentication</h3> <p>Great, so we have the app token, but what happens when a user logs out? Both tokens are thrown into the bin and lost to the void. On the next login, a new OAuth token is generated, but the App token must also be retrieved. How we got the token the first time was through the installation process. Since we would rather not show the installation window every time the user logs in, we can use the convenient <a href="https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps">GitHub Authorization URL</a>.</p> <p><code>https://github.com/login/oauth/authorize</code><br /> <code>?client_id=${clientId}&amp;state=${state}</code><br /> additionally, we use the <code>client_id</code> and <code>state</code> parameters to identify our app and which flow the user is in. More on the state later.</p> <p>What’s cool about using the authorize URL is if the app is already authorized, which you can see over at your <a href="https://github.com/settings/apps/authorizations">GitHub Authorizations</a>, the app token can be generated and stored securely without presenting extra pages.</p> <h4 id="middleware">Middleware</h4> <p>To do this, we use Next.Js Middleware. I’ve created a gist of our full <a href="https://gist.github.com/Namaskar-1F64F/b185f1e25aa8d8e2c124053018c37084">middleware.ts</a>, but a simplified version of the relevant parts is below. This was taken mostly from a <a href="https://github.com/nextauthjs/next-auth/discussions/9715">GitHub discussion</a> on the issue of setting a session cookie.</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">updateCookie</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span> response<span class="token punctuation">.</span>cookies<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token constant">NEXT_AUTH_COOKIE_NAME</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">upgradeOauthTokenWithCode</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>code<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">await</span> appOctokit<span class="token punctuation">.</span><span class="token function">auth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'oauth-user'</span><span class="token punctuation">,</span> code<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">addAppTokenToCookie</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>request<span class="token punctuation">,</span> response<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> code <span class="token operator">=</span> url<span class="token punctuation">.</span>searchParams<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'code'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> githubAppToken <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">upgradeOauthTokenWithCode</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">encode</span><span class="token punctuation">(</span><span class="token punctuation">{</span> githubAppAccessToken<span class="token operator">:</span> githubAppToken<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">updateCookie</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">middleware</span><span class="token punctuation">(</span>req<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">.</span>pathname <span class="token operator">===</span> <span class="token string">'/auth/connection'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">addAppTokenToCookie</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></code></pre> <p>The basic idea is to trigger this middleware on the callback of the GitHub App authorization. The code is passed back from GitHub and we use it to generate the app token. This token is then stored in the cookie. Since this happens in the middleware, the cookie will be set by the time the user hits our following react components to ultimately render their projects.</p> <h3 id="auth-connection-page">Auth Connection Page</h3> <p>Alright so we’re almost there. The user has logged in and we have both of the tokens, but what does the component look like when the user is re-directed from the GitHub App? You might have noticed the <code>/auth/connection</code> path, which for our Next.js project is a page. This page is server side rendered and takes the <code>state</code> I mentioned earlier to either continue completely server side and redirect the user, in the case of a login, or to update the user’s session and close the pop-up in the case of an install. Again, a simplified version of the relevant parts is below.</p> <pre class="language-tsx"><code class="language-tsx"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">AuthPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span> searchParams<span class="token operator">:</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> error<span class="token punctuation">,</span> state <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> session <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getServerSession</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>session<span class="token punctuation">.</span>githubAppAccessToken<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* If the githubAccessToken is set, there is no need to continue. The user is in a correct state. */</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>state <span class="token operator">===</span> AuthState<span class="token punctuation">.</span><span class="token constant">LOGIN</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* The LOGIN state comes from the /login page which will not be a pop-up so the page should be redirected. */</span> <span class="token keyword">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">'/projects'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>state <span class="token operator">===</span> AuthState<span class="token punctuation">.</span><span class="token constant">INSTALL</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* This is the other case where the state is from the install pop-up. The AppConnection page will update all windows with the new token and close. */</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">AppConnection</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">AppConnection</span></span> <span class="token attr-name">error</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>error<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></code></pre> <p>Finally, in the case of the pop-up, the simplified AppConnection component is rendered. Here we want to simply show the user that they are connected and up-to-date. If there is an error, we show the error. If there is no error, we close the window after a short delay.</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">AppConnection</span><span class="token punctuation">(</span><span class="token punctuation">{</span> error <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> window<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator">&lt;</span><span class="token operator">></span> <span class="token operator">&lt;</span>Image src<span class="token operator">=</span><span class="token punctuation">{</span>logo<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">{</span>error <span class="token operator">?</span> <span class="token punctuation">(</span> error <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token operator">&lt;</span>Space<span class="token operator">></span> <span class="token operator">&lt;</span>Title level<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span><span class="token operator">></span>Connected <span class="token operator">&amp;</span> Up<span class="token operator">-</span>to<span class="token operator">-</span>date<span class="token operator">&lt;</span><span class="token operator">/</span>Title<span class="token operator">></span> <span class="token operator">&lt;</span>Title level<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span><span class="token operator">></span>Closing the window now<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>Title<span class="token operator">></span> <span class="token operator">&lt;</span><span class="token operator">/</span>Space<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre> <p><img src="https://blog.dappling.network/images/github-app/pop-up.png" alt="GitHub Installation Pop-Up" /></p> <h2 id="conclusion">Conclusion</h2> <p>While this does work, is it worth the effort? For our security conscious users at <a href="https://dappling.network/">dAppling</a>, being explicit about permissions authorized apps have is important.</p> <p>We have found that using the dual-auth approach of OAuth for log in and App authentication for repo access is a good compromise. It allows us to use the GitHub App token for the necessary permissions while avoiding the inaccurate “act on your behalf” warning.</p> <p>If you have any questions or need help setting this up yourself, feel free to reach out to me on <a href="https://twitter.com/0xbookland">Twitter</a>.</p> " },{"id": "https://blog.dappling.network/detect-web3-frontend-attacks-with-dappling-dns-monitor/", "url": "https://blog.dappling.network/detect-web3-frontend-attacks-with-dappling-dns-monitor/", "title": "Detect Web3 Frontend Attacks with dAppling DNS Monitor", "date_published": "2024-01-25T00:00:00Z", "language": "","content_html": "<p><strong>TL;DR:</strong> We built <a href="https://dappling.network/monitor">dappling.network/monitor</a> to help prevent web3 DNS hijacking attacks. This tool alerts you to potential DNS hijacking. By monitoring over 3,000 Web3 domains (everything on <a href="https://defillama.com/">DeFiLlama</a>) for nameserver changes, it helps you be aware when domains are hijacked. <a href="https://dappling.network/monitor">Try the tool now</a> and be part of a safer DeFi community.</p> <p><img src="https://blog.dappling.network/images/dns-monitor/monitor-demo.png" alt="The DNS Monitor Tool" /></p> <h1 id="why-is-this-needed">Why is this needed?</h1> <p>In the last few months there have been several DNS hijacking attacks targeting web3 protocols. These included <a href="https://x.com/fraxfinance/status/1719497560543658073?s=20">Frax</a>, <a href="https://twitter.com/Balancer/status/1704281611326357567">Balancer</a>, <a href="https://twitter.com/galxe/status/1710305141016944654">Galxe</a>, <a href="https://twitter.com/VelodromeFi/status/1730040745736683679">Velodrome</a>, and <a href="https://x.com/aerodromefi/status/1736780326070870072?s=20">Aerodrome</a> to name a few.</p> <p>They all happened the exact same way. The DNS registrar they were using was social engineered, and the hacker was able to change the nameservers and take control over the domain.</p> <p>These nameserver changes is exactly what the tool looks for and would have detected all 5 of those attacks.</p> <h1 id="how-it-works">How it works?</h1> <p>We used <a href="https://defillama.com/">DeFiLlama</a> to build our original lists of sites to monitor. We then use cloudflare’s <a href="https://developers.cloudflare.com/1.1.1.1/encryption/dns-over-https/">DNS over HTTPS api</a> to check each of the nameservers for changes every 5 minutes. If we detect a change, we send out a notification to everyone who subscribed to nameserver changes for that domain + update the monitoring table.</p> <p>We also automatically add all dappling.network production domains to the monitor list + they get extra features to help them protect their users against these types of attacks.</p> <h1 id="next-steps">Next Steps</h1> <ul> <li><a href="https://dappling.network/monitor">Check out the tool</a> + signup for notifications for your most used site</li> <li>Deploy your site on <a href="https://dappling.network/">dAppling</a> to get this + other security features with 0 config.</li> <li><a href="https://twitter.com/0xbookland">DM me on twitter</a> if you have questions or want a site that’s missing added.</li> </ul> <h1 id="video-demo">Video Demo</h1> <p><a href="https://x.com/0xBookland/status/1757493370962739438?s=20">Video</a></p> <h1 id="thank-you">Thank you</h1> <p>Thank you to the <a href="https://dappling.network/">dAppling team</a> for building the tool. CerealSabre from <a href="https://twitter.com/eth_limo">eth.limo</a> for helping me brainstorm this idea and <a href="https://twitter.com/pcfreak30">Derrick</a> from <a href="https://twitter.com/LumeWeb3">Lume</a> for helping me understand DNS at a deeper level. Also huge shout out to the <a href="https://3dns.box/">3DNS team</a> who’s helping reduce the DNS hijacking problem with their hybrid domains.</p> " },{"id": "https://blog.dappling.network/simple-site-building-and-ipfs-deployment-with-dappling/", "url": "https://blog.dappling.network/simple-site-building-and-ipfs-deployment-with-dappling/", "title": "Simple Site Building and IPFS Deployment with dAppling", "date_published": "2023-10-02T00:00:00Z", "language": "","content_html": "<p>In this walkthrough, we will explore how to deploy your site using dAppling and try out the features that make it a tool you’ll want to use. At the end of this walkthrough, you will have a project on dAppling that will:</p> <ul> <li>automatically update on <strong>GitHub</strong> code changes</li> <li>be hosted on the <strong>InterPlanetary File System</strong> (IPFS)</li> <li>be live on a <strong>dappling.network</strong> subdomain</li> <li>be live on a <strong>dappling.eth</strong> subdomain</li> <li>receive an automatically updating <strong>IPNS</strong> key</li> </ul> <p>If you run into <strong>any</strong> problems, want to connect, or just say hi, my DMs are open on <a href="https://x.com/0xBookland">𝕏</a>. I would love to hear your feedback and help you get your project deployed.</p> <h2 id="what-dappling-does">What dAppling does</h2> <p>Literally, the word is a portmanteau of “dApp”, a term short for decentralized application, and “sapling,” because nature is wonderful 🌱. However, we support all kinds of web projects, not just <a href="https://app.gogopool.com.dappling.eth.limo/">dApps</a>: <a href="https://arbor-landing.dappling.eth.limo/">landing pages</a>, <a href="https://blog.dappling.network/">blogs</a>, or even a simple page of content arguing against the <a href="https://nomoreacronyms-xczmz4.dappling.org/">usage of acronyms</a>.</p> <p>Basically, we take your code, build it, and host the resulting files on IPFS. But what makes us special are the features we provide to make your experience easier. Even if you have an existing site, you can use dAppling to create a resilient “alternative frontend” that is hosted on IPFS.</p> <h1 id="the-walkthrough">The Walkthrough</h1> <p>I will guide you step by step through the process of deploying a project on dAppling. I will be using a blog template, but you can use any code that you want to deploy.</p> <p>The final project, <a href="https://dappling.network/projects/7ebe4f4f-70f0-4705-828b-c610fb1d9ddc">on the dAppling platform</a>, will be accessible at a URL like <a href="https://hello-ipfs-blog.dappling.network/">hello-ipfs-blog.dappling.network</a>.</p> <p>Let’s start exploring!</p> <h2 id="find-a-project">Find a Project</h2> <p>To begin, find a project that you would like to deploy to the decentralized web. This project should be able to be statically exported, and luckily the major frameworks like Next.js, React, and Svelte are supported. However, we cannot build projects with a backend, such as a database, server, or serverless functions. This means you can still use dAppling for your project, but you’ll need to host your backend separately.</p> <p>If you can’t think of a project, I would recommend forking <a href="https://github.com/lwojcik/eleventy-template-bliss">a nice blog template</a> to get started. Click on the “Use this template” button, then “Create a new repository”. This will bring up another screen confirming the fork.</p> <p><img src="https://blog.dappling.network/images/full-deployment/blog-template.png" alt="The bliss blog template repository on GitHub." /></p> <p>Name your new blog something. I chose thoughts because one of my favorite quotes is “Thoughts become things”. I also decided to make it public, but you can make it private if you’d like. Then click “Create repository”. This will take you to the repository page, but we should head back to <a href="https://dappling.network/">dAppling.network</a>.</p> <p><img src="https://blog.dappling.network/images/full-deployment/create-repository.png" alt="A GitHub page allowing you to fork the bliss blog template's repository." /></p> <h2 id="create-your-first-dappling-project">Create your First dAppling Project</h2> <p>Now that we have the code to use, head over to <a href="https://dappling.network/">dAppling.network</a> and click on “Deploy Frontend”. This will take you to the page to log in to GitHub.</p> <p><img src="https://blog.dappling.network/images/full-deployment/homepage.png" alt="The dAppling landing page shows a hero: &quot;100% uptime with alternative frontends&quot;." /></p> <h3 id="connect-your-github-account">Connect your GitHub Account</h3> <p>Press this “Connect GitHub” button, and you will be redirected to GitHub to authorize dAppling to access your account.</p> <p><img src="https://blog.dappling.network/images/full-deployment/login.png" alt="A mostly black dAppling login page with the GitHub logo." /></p> <p>What happens when you press “Authorize dApplingNetwork” is that we collect the email associated with your account and associate it with your dAppling account. We do not store your GitHub password or any other information. This page should redirect you to your projects page on dAppling.</p> <p><img src="https://blog.dappling.network/images/full-deployment/authorize-github.png" alt="GitHub pops up, asking the user to authorize dAppling's app." /></p> <h3 id="deployment-steps">Deployment Steps</h3> <p>Back on the projects page, click “New Project”. This will take you to our “Select Repository” step.</p> <p><img src="https://blog.dappling.network/images/full-deployment/new-project.png" alt="An empty dAppling projects page with a new project button." /></p> <p>To allow access to the project, click on “Add GitHub Account”. This will bring up the authorization screen again. This time, we are allowing dAppling to access the repository; this is necessary so we can build your code.</p> <p><img src="https://blog.dappling.network/images/full-deployment/add-github-account.png" alt="The repository selector is empty, with an action to add a GitHub account." /></p> <p>You may first see a screen that asks, “Where do you want to install dApplingNetwork?”. If you just forked the blog template, choose the account you used. Otherwise, pick where your code is located. You can always go back and authorize more or remove authorization to revoke access.</p> <p><img src="https://blog.dappling.network/images/full-deployment/select-install-location.png" alt="A GitHub pop-up asking the user to select an installation location." /></p> <p>After you select the installation location, or if you only have a personal account, you will see another step. Decide to either provide access to all repositories, so you do not have to repeat this process, or select the specific repositories you want to deploy. Then click “Install”.</p> <p><img src="https://blog.dappling.network/images/full-deployment/authorize-repository.png" alt="The next page in authorizing a list or single repository to the dAppling GitHub app." /></p> <p>Awesome! Now that we have repository access, you can select it from the list to deploy. Clicking on the “Select” button to the right of the repository you would like to build will move on to the configuration step.</p> <p><img src="https://blog.dappling.network/images/full-deployment/select-repository.png" alt="Back to the dAppling select repository step, now with a single repository." /></p> <p>The “Configure Build” step will try to detect the configuration automatically for your app. If you are following along with the blog template, the settings will be correct. Using your code may prove more tricky. If there is no framework detected, you will need to select what type of project it is. Then, continue with each setting. Hover over the “?” to get additional information about each setting.</p> <p><img src="https://blog.dappling.network/images/full-deployment/review-configuration.png" alt="The second step shows inputs for configuration settings." /></p> <p>After the configuration looks good, click “Next”. You will be taken to the “Finishing Touches” step where we do last-minute checks.</p> <p><img src="https://blog.dappling.network/images/full-deployment/confirm-configuration.png" alt="More settings and a button at the bottom of the page to confirm configuration." /></p> <h3 id="deploy">Deploy!</h3> <p>If everything looks good, click “Deploy”. You will be taken to your new project page.</p> <p><img src="https://blog.dappling.network/images/full-deployment/deploy.png" alt="A summary page showing no issues and the configured settings, with a deploy button." /></p> <h3 id="explore-the-project-page">Explore the Project Page</h3> <p>You will now see the project page with plenty of loading indicators! The build process may take a few minutes, so let’s explore the other parts of your project while we wait. Click on the second tab, “Deployments”.</p> <p><img src="https://blog.dappling.network/images/full-deployment/deploying.png" alt="The dAppling project page shows important information like the repository and configured domains." /></p> <p>Here you can see your deploying build and also where your historical deployments would be. You can also create a new deployment from this page by clicking on “Deploy Preview” to create a new version that isn’t live, or push a new “Production Deployment” to make your changes live on your domains. Speaking of domains, click on the “Domains” tab.</p> <p><img src="https://blog.dappling.network/images/full-deployment/deployments.png" alt="The deployments page shows the deployment in progress and related information." /></p> <p>Here you can see the pre-configured dappling domain, which can be edited to anything you desire, as well as where you could add your ENS name or link to a live domain. Additionally, when adding the ENS domain, you will get a unique IPNS key that will have the latest CID on IPFS. Now let’s look at the “Analytics” tab.</p> <p><img src="https://blog.dappling.network/images/full-deployment/domains.png" alt="The domains page can add different domains as well as an already set dAppling domain." /></p> <p>We have an analytics package that will give you unique user and page view counts. We are working on adding more features to this, but for now, it is a great way to see how many people are visiting your site. Finally, let’s look at the “Settings” tab.</p> <p><img src="https://blog.dappling.network/images/full-deployment/analytics.png" alt="An analytics page says to integrate the dAppling Analytics package to view analytics." /></p> <p>You can see the same information you configured earlier. If your deployment failed, this is where you might need to change a setting. You can also add build variables, change the branch to deploy, and delete the project.</p> <p><img src="https://blog.dappling.network/images/full-deployment/settings.png" alt="The settings page has inputs for configuration." /></p> <h3 id="trigger-a-deployment-from-github">Trigger a Deployment from GitHub</h3> <p>By now, the deployment should be done, which you will be able to see on the “Deployments” tab. Now we will try deploying from GitHub. Head over to your repository on GitHub, choose a file, and make a change to it. Here, I decided to change the content of the latest blog post <code>/content/posts/2023/12-12-sample-post-34-formatting.md</code>. After committing the change, the deployment should already be started in dAppling.</p> <p><img src="https://blog.dappling.network/images/full-deployment/make-a-change.png" alt="Editing a file on GitHub; about to push the changes." /></p> <p>You can see the second deployment. I introduced a bug in my change, however, so this build will fail. A perfect time to see what information you can see upon a failure!</p> <p><img src="https://blog.dappling.network/images/full-deployment/second-deployment.png" alt="The dAppling deployments page has two deployments now." /></p> <h3 id="ai-generated-debugging-insights">AI-Generated Debugging Insights</h3> <p>Within the deployment page, you can see the logs, environment variables, and other information about the deployment. There is also a button that will generate debugging insights. It uses AI to analyze the logs and give you a summary of what went wrong. After clicking it, the insights panel will appear.</p> <p><img src="https://blog.dappling.network/images/full-deployment/failed-deployment.png" alt="The deployment page has information about the deployment. This one has failed." /></p> <p>If your deployment did fail, you can see this; if not, you can check out the insights of <a href="https://dappling.network/projects/7ebe4f4f-70f0-4705-828b-c610fb1d9ddc/BuildImage74257FD8-Ag37vnjYXUuu:2f2bd735-92d2-47b8-89d6-6bdfc60f876f">my deployment</a>. You can see the reason, potential solution, and files affected. If applicable, a code sample will be provided. I will resolve the problem and push another commit to trigger a new deployment.</p> <p><img src="https://blog.dappling.network/images/full-deployment/ai-insights.png" alt="The deployment page now has a panel to the right providing information in cards to resolve the issue." /></p> <h3 id="final-deployment">Final Deployment</h3> <p>With those changes, the final deployment succeeded. You made it! Your project page will have a preview of the website, and the domains will be updated with your content.</p> <p><img src="https://blog.dappling.network/images/full-deployment/final-deployment.png" alt="The dAppling project's main page, with a website preview of a blog." /></p> <p>Thank you for following along, reading, or just looking at the pictures. You can check out my deployed <a href="https://dappling.network/projects/7ebe4f4f-70f0-4705-828b-c610fb1d9ddc">project on dAppling</a>. If there were issues that you ran into, please contact me on <a href="https://x.com/0xBookland">𝕏</a>. For other features and guides, visit <a href="https://docs.dappling.network/">our documentation</a>.</p> <p>If all went well, your project was also deployed successfully. That means you now have a live domain, an ENS subdomain, automatic deployments, and an IPNS key that will always point to the latest version of your site. Well done! Welcome to the decentralized future of IPFS. Post this acomplishment and tag us <a href="https://x.com/dApplingNetwork">@dApplingNetwork</a>!</p> <p>🙏</p> " },{"id": "https://blog.dappling.network/adding-automatic-deployment-debugging-with-ai/", "url": "https://blog.dappling.network/adding-automatic-deployment-debugging-with-ai/", "title": "Adding Automatic Deployment Debugging with AI", "date_published": "2023-09-18T00:00:00Z", "language": "","content_html": "<p>When I press “Commit &amp; Push” to send brand-new code on its dramatic debut, instead of confetti and fanfare, I’m given a little bop on my head as the scary ❌ icon tells me the deployment failed. There will be no code to show my friends; the link I had copied, intending to share, was overwritten by an error from the deployment logs.</p> <p>But wait. Why should I be reading logs and debugging a failure when we’ve got AI APIs now?</p> <p>Well, in this post, I share how I implemented a feature adding an “AI Insights” section for failed deployments while working on <a href="https://dappling.network/">dAppling.network</a>, a platform that builds and deploys code to IPFS. These insights should help the user resolve the issue or tell them it’s our fault, and we will fix it. Join me as I prompt-engineer in a React + TypeScript app to make seeing the ❌ a little less painful.</p> <h2 id="the-ins-and-the-outs">The Ins and the Outs</h2> <p>I decided to use OpenAI’s API because of my familiarity with previous usage, and I somewhat know how the model “behaves” from daily use of ChatGPT. So my first question was, “What <strong>inputs</strong> should I include to provide the LLM with useful context?” I settled on:</p> <ul> <li>Deployment logs: <em>where the build actually fails</em></li> <li>User editable settings: <em>commands, variables, GitHub branch</em></li> <li>Commands used to deploy: <em>our build script</em></li> <li>Instructions: <em>the LLM needs a direction</em></li> </ul> <p>Then, ultimately, the <strong>outputs</strong> should be usable information to guide the user on how to resolve the problem. I chose:</p> <ul> <li>What type of failure: <em>our fault or the users</em></li> <li>Reason: <em>why did this fail?</em></li> <li>Solution: <em>how can this be fixed?</em></li> <li>Code and files: <em>suggested changes if necessary</em></li> </ul> <h3 id="getting-to-a-string">Getting to a String</h3> <p>The model only takes a prompt, but I wanted this to be clean. A big template literal with many variables interspersed seemed not-so-maintainable to me, and that’s when I found <a href="https://js.langchain.com/docs/get_started/introduction">LangChain</a>. It helps to put together these variables into a <a href="https://js.langchain.com/docs/modules/model_io/prompts/prompt_templates/"><code>PromptTemplate</code></a>.</p> <pre class="language-typescript"><code class="language-typescript"><span class="token keyword">export</span> <span class="token keyword">const</span> getPrompt <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> model<span class="token punctuation">,</span> logs<span class="token punctuation">,</span> buildStep<span class="token punctuation">,</span> totalBuildTimeSeconds<span class="token punctuation">,</span> buildConfiguration<span class="token punctuation">,</span> forChatGpt <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> model<span class="token operator">:</span> <span class="token string">'gpt-3.5'</span> <span class="token operator">|</span> <span class="token string">'gpt-4'</span><span class="token punctuation">;</span> logs<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> buildStep<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> totalBuildTimeSeconds<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> buildConfiguration<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> forChatGpt<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token constant">LOG_SIZE</span> <span class="token operator">=</span> model <span class="token operator">===</span> <span class="token string">'gpt-4'</span> <span class="token operator">?</span> <span class="token number">8_000</span> <span class="token operator">:</span> <span class="token number">16_000</span><span class="token punctuation">;</span> <span class="token keyword">const</span> trimmedLogs <span class="token operator">=</span> logs<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token constant">LOG_SIZE</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> delimiter <span class="token operator">=</span> <span class="token string">'\n"""\n'</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">PromptTemplate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> inputVariables<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'buildStep'</span><span class="token punctuation">,</span> <span class="token string">'buildConfiguration'</span><span class="token punctuation">,</span> <span class="token string">'logs'</span><span class="token punctuation">,</span> <span class="token string">'instructions'</span><span class="token punctuation">,</span> <span class="token string">'buildSpec'</span><span class="token punctuation">,</span> <span class="token string">'totalBuildTimeSeconds'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> partialVariables<span class="token operator">:</span> <span class="token punctuation">{</span> outputInstructions<span class="token operator">:</span> forChatGpt <span class="token operator">?</span> <span class="token string">''</span> <span class="token operator">:</span> parser<span class="token punctuation">.</span><span class="token function">getFormatInstructions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">{instructions}</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>delimiter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">error log:\n{logs}</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>delimiter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">build step:\n{buildStep}</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>delimiter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">total build seconds:\n{totalBuildTimeSeconds}</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>delimiter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">build configuration:\n{buildConfiguration}</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>delimiter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">build specification:\n{buildSpec}</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>delimiter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">{outputInstructions}</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token punctuation">{</span> buildStep<span class="token punctuation">,</span> logs<span class="token operator">:</span> trimmedLogs<span class="token punctuation">,</span> buildConfiguration<span class="token punctuation">,</span> instructions<span class="token punctuation">,</span> buildSpec<span class="token punctuation">,</span> totalBuildTimeSeconds<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre> <p>You may be wondering</p> <blockquote> <p>Aren’t you just using a convoluted template literal?</p> </blockquote> <p>And to that, I say yes. Because I am injecting the variables at the same time as making the prompt, it looks silly. I thought I should follow the conventions that LangChain has, and I ended up not using any of the advanced prompt features as they did not seem useful for this use case.</p> <h4 id="tokens">Tokens!</h4> <p>In this prompt, there is only one variable that has, well, a variable size. The logs. Basically, the size of the prompt and the output should add up to the context size. For <code>gpt-4</code>, that context is 8k tokens, and for <code>gpt-3.5-turbo-16k</code>, it’s unsurprisingly 16k. Using the <a href="https://platform.openai.com/tokenizer">Tokenizer</a> app, I calculated <code>LOG_SIZE</code> to be 8,000 characters (not tokens) and 16,000 characters, respectively. Also, you can see I <code>slice</code> with a negative number to get the important part: the end of the logs.</p> <h4 id="delimiters">Delimiters</h4> <p>After reading <a href="https://github.com/dabit3/prompt-engineering-for-javascript-developers">Nader Dabit’s Prompt Engineering Guide</a>, I decided to use <code>&quot;&quot;&quot;</code> as a delimiter. I used this to separate the different parts. It is unclear if this is helpful.</p> <h3 id="specifying-the-format">Specifying the Format</h3> <p>The prompt includes instructions for the LLM to coax the output using an <a href="https://js.langchain.com/docs/modules/model_io/output_parsers/"><code>Output Parser</code></a>. What I’m using specifically is the <a href="https://js.langchain.com/docs/modules/model_io/output_parsers/structured#structured-output-parser-with-zod-schema"><code>StructuredOutputParser</code> with Zod</a> Why I find this totally rad is because <a href="https://github.com/colinhacks/zod">Zod</a> is being used in other parts of the codebase, it auto-completes well with <a href="https://github.com/features/copilot">GitHub Copilot</a>, and it creates very readable code.</p> <pre class="language-typescript"><code class="language-typescript"><span class="token keyword">const</span> schema <span class="token operator">=</span> z<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">{</span> errorCategory<span class="token operator">:</span> z <span class="token punctuation">.</span><span class="token function">enum</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token string">'systemError'</span><span class="token punctuation">,</span> <span class="token string">'configurationError'</span><span class="token punctuation">,</span> <span class="token string">'applicationError'</span><span class="token punctuation">,</span> <span class="token string">'unknownError'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'the error category the error falls into'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> reason<span class="token operator">:</span> z <span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span> <span class="token string">'A short description answering the question "why did the build fail?"'</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> solution<span class="token operator">:</span> z <span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span> <span class="token string">'A longer description answering the question, "how can this be fixed?" describing possible steps to take to solve the error.'</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> codeSample<span class="token operator">:</span> z <span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">optional</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'an optional code sample if helpful to the user.'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> files<span class="token operator">:</span> z <span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">array</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">optional</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span> <span class="token string">'an optional list of files that were affected. if none were affected, this will be empty.'</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> parser <span class="token operator">=</span> StructuredOutputParser<span class="token punctuation">.</span><span class="token function">fromZodSchema</span><span class="token punctuation">(</span>schema<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <h4 id="output-instructions">Output instructions</h4> <p>The resulting <code>parser</code> generates instructions for the LLM with <code>parser.getFormatInstructions()</code>. It first teaches JSON, though that seems unnecessary, and then gives an example. After that, the Zod schema is included and sent along with the prompt. And yes, the whole message, example and all, is included at the bottom of every prompt. The example and even the <code>$schema</code> property. I can’t complain about the extra tokens, though, because the instructions work surprisingly well.</p> <pre class="language-text"><code class="language-text">You must format your output as a JSON value that adheres to a given "JSON Schema" instance. "JSON Schema" is a declarative language that allows you to annotate and validate JSON documents. For example, the example "JSON Schema" instance ‍``` { "properties": { "foo": { "description": "a list of test words", "type": "array", "items": { "type": "string" } } }, "required": ["foo"] } ‍``` would match an object with one required property, "foo". The "type" property specifies "foo" must be an "array", and the "description" property semantically describes it as "a list of test words". The items within "foo" must be strings. Thus, the object ‍``` { "foo": ["bar", "baz"] } ‍``` is a well-formatted instance of this example "JSON Schema". The object ‍``` { "properties": { "foo": ["bar", "baz"] } } ‍``` is not well-formatted. Your output will be parsed and type-checked according to the provided schema instance, so make sure all fields in your output match the schema exactly and there are no trailing commas! Here is the JSON Schema instance your output must adhere to. Include the enclosing markdown codeblock: ‍```json { "type": "object", "properties": { "errorCategory": { "type": "string", "enum": [ "systemError", "configurationError", "applicationError", "unknownError" ], "description": "the error category the error falls into" }, "reason": { "type": "string", "description": "A short description answering the question 'why did the build fail?'" }, "solution": { "type": "string", "description": "A longer description answering the question, 'how can this be fixed?' describing possible steps to take to solve the error." }, "codeSample": { "type": "string", "description": "an optional code sample if helpful to the user." }, "files": { "type": "array", "items": { "type": "string" }, "description": "an optional list of files that were affected. if none were affected, this will be empty." } }, "required": ["errorCategory", "reason", "solution"], "additionalProperties": false, "$schema": "http://json-schema.org/draft-07/schema#" } ‍```</code></pre> <h3 id="send-it-off-and-hope">Send it off and Hope</h3> <p>The prompt is sent to the OpenAI API, and the response is hopefully good. And hopefully adheres to the schema! Now for the magic part of the parser.</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">await</span> parser<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>completion<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <p>This line is remarkable. Because the parser has the Zod schema, the response from the AI is automatically parsed into variables that can be used. For example, a recent deployment failure is neatly returned to my code with the following object:</p> <pre class="language-json"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"errorCategory"</span><span class="token operator">:</span> <span class="token string">"configurationError"</span><span class="token punctuation">,</span> <span class="token property">"reason"</span><span class="token operator">:</span> <span class="token string">"The 'hardhat' package is incompatible with the installed Node.js version."</span><span class="token punctuation">,</span> <span class="token property">"solution"</span><span class="token operator">:</span> <span class="token string">"To fix this error, you can try one of the following solutions:\n\n1. Update the 'hardhat' package to a version that is compatible with Node.js 18.16.0.\n2. Downgrade the Node.js version to a version that is compatible with the 'hardhat' package (e.g., 12.x.x, 14.x.x, or 16.x.x).\n3. Check if there are any other dependencies in your project that have specific Node.js version requirements and make sure they are compatible with the installed Node.js version."</span><span class="token punctuation">,</span> <span class="token property">"codeSample"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span></code></pre> <p>That means when trying to display it on the frontend, I can update an <code>output</code> variable with the results, pass this object into my <code>InsightsOutput</code> component, and de-structure the expected properties. All well typed.</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">const</span> <span class="token punctuation">[</span>output<span class="token punctuation">,</span> setOutput<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator">&lt;</span>Schema<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// ...</span> <span class="token function">setOutput</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token comment">// ...</span> <span class="token operator">&lt;</span>InsightsOutput insights<span class="token operator">=</span><span class="token punctuation">{</span>output<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token comment">// ...</span> <span class="token keyword">const</span> <span class="token function-variable function">InsightsOutput</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> insights<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> insights<span class="token operator">?</span><span class="token operator">:</span> Schema <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> errorCategory<span class="token punctuation">,</span> reason<span class="token punctuation">,</span> solution<span class="token punctuation">,</span> codeSample<span class="token punctuation">,</span> files <span class="token punctuation">}</span> <span class="token operator">=</span> insights <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token comment">// ...</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span></code></pre> <h2 id="results">Results</h2> <p>So… Does it provide useful results?</p> <p>Of course, yes and no. It seems helpful for most of my testing. There have been times when it has been wrong. Impressively, the output parser has always worked. The good thing about the system of prompts and output schema is that trial and error is pretty quick. I think getting it perfect on the first try would be impossible. Anyway, here’s an explanation in the form of a gif.</p> <video muted="" autoplay="" controls="" style="width: 100%; max-width: 100%;"> <source src="https://blog.dappling.network/video/09-18-using-langchain/demo.mp4" type="video/mp4" /> </video> <p>And a closer look at the output shows that the result actually gives good advice. Well, true advice at least, as we cannot export <code>i18n</code> projects.</p> <blockquote> <p>use a different deployment method</p> </blockquote> <p>Telling our users to leave the platform is a funny result. For all I did for the AI, a petty act!</p> <p><img src="https://blog.dappling.network/images/adding-langchain/demo.png" alt="" /></p> <h2 id="things-i-learned">Things I learned</h2> <ul> <li>The temperature should be 0 to ensure the response adheres to the output format.</li> <li>The instructions should be at the beginning, and the context should come after.</li> </ul> <h3 id="go-forth-and-fail">Go Forth and Fail</h3> <p>Now is the best time to create some failing builds on <a href="https://dappling.network/">dAppling.network</a>. We are trying to create the best experience possible for first-time deployments on dAppling and learning from every failure. Using LangChain seems useful, and having Zod schemas makes TypeScript support easy. Providing all the information while balancing the total token amount seemed to produce promising results. If this was interesting to you, I would recommend playing around with prompt engineering. I hope, if you see a ❌ on our platform, you have success working alongside our AI companions.</p> " },{"id": "https://blog.dappling.network/boost-your-website-insight-with-dappling-analytics-a-new-way-to-track-your-success/", "url": "https://blog.dappling.network/boost-your-website-insight-with-dappling-analytics-a-new-way-to-track-your-success/", "title": "Boost Your Website Insight with dappling-analytics! - A New Way to Track Your Success", "date_published": "2023-08-29T00:00:00Z", "language": "","content_html": "<p>Hey, fellow developers! 👋 Here at dAppling, we’ve been harnessing the power of <code>@vercel/analytics</code> to keep our finger on the pulse of our site’s performance. Every Monday, we’re either celebrating a ‘good’ week or strategizing to turn a ‘bad’ week around. But we know that these insights aren’t just valuable to us. That’s why we’ve crafted something special for you: the <strong>dappling-analytics package.</strong> 🚀</p> <h4 id="why-dappling-analytics">Why dappling-analytics?</h4> <p>Because we know that analytics are crucial to understanding what’s happening on your site, we wanted to offer something more than a one-size-fits-all solution. With dappling-analytics, you’ll get:</p> <ul> <li><strong>Per-project statistics</strong>: Track unique views and explore what specific pages people are visiting.</li> <li><strong>Easy integration</strong>: Installation and configuration are a breeze, especially with React and NextJS projects.</li> <li><strong>Privacy preservation</strong>: We care about user privacy as much as you do!</li> </ul> <p>And all this comes with an easy-to-use interface right in the dappling app!</p> <h4 id="how-to-get-started">How to Get Started</h4> <ol> <li> <p><strong>Installation via Your Favorite Package Manager</strong>: Just like any other NPM package, installing dappling-analytics is simple: <code>npm install dappling-analytics</code> or <code>yarn install dappling-analytics</code>.</p> </li> <li> <p><strong>Integration with React and NextJS</strong>: Our <code>&lt;Analytics /&gt;</code> component, built with React, makes integration seamless. Simply import it from our /react folder to access the component. If you’re using other frameworks, a bit more configuration might be needed (but we’re here to help!).</p> <p><code>import { Analytics } from 'dappling-analytics/react'</code></p> </li> <li> <p><strong>Tracking Beyond Page Views</strong>: Although we’re starting with tracking page views and unique users, we’re already planning to add more useful datapoints, such as customizable events.</p> </li> <li> <p><strong>The Backend Stuff</strong>: Our API endpoint and database storage are designed to make your analytics data easily accessible and interpretable.</p> </li> </ol> <p><img src="https://i.imgur.com/bxoPyW1.png" alt="dappling-analytics flow" /></p> <h4 id="conclusion">Conclusion</h4> <p>Here at dAppling, we believe that insight shouldn’t be complicated. The dappling-analytics package is our way of sharing a piece of our garden with you. 🌱 Whether you’re looking to understand your performance better or just want a quick and easy way to tell if you had a ‘good’ or ‘bad’ week, dappling-analytics has got you covered.</p> <p><strong>Ready to watch your garden grow? 🌼🌻 Try dappling-analytics today!</strong> Check out our <a href="https://docs.dappling.network/guides/site-analytics">docs</a> or contact our friendly team if you need any help. We’re just an email away!</p> " },{"id": "https://blog.dappling.network/adding-ens-support-to-dappling/", "url": "https://blog.dappling.network/adding-ens-support-to-dappling/", "title": "Adding ENS Support to dAppling", "date_published": "2023-08-15T00:00:00Z", "language": "","content_html": "<p>While working on <a href="https://dappling.network/">dAppling</a> (helping web3 developers by making decentralized websites easy), we wanted to allow our users to be able to access their site through their ENS name. The ENS community is excited about using and sharing their cool “.eth” names. Here’s how we integrated ENS name support into our platform.</p> <h2 id="resolving-ens-names">Resolving ENS Names</h2> <p>I bought the ENS name bookland.eth. I set a record that will “point” my name to a website. On the <a href="https://brave.com/">Brave</a> browser, navigating to <a href="https://bookland.eth/">bookland.eth</a> will automatically look up that record and load the content. This is done by going through the “dweb.link” gateway.</p> <p>If you’re not on brave, a popular option is <a href="https://eth.limo/">eth.limo</a>. You can use this service simply by prepending your ENS name: <a href="https://bookland.eth.limo/">bookland.eth.limo</a>. Your request is served by first looking at the subdomain (for this example, bookland) and doing a record lookup on ENS. That record is then decoded into the “pointer” I set. Finally, the content is retrieved from IPFS and returned.</p> <h2 id="how-this-technically-works">How this Technically Works</h2> <p>Ok - so let’s go though how this feature works. We introduced three different services with this feature: a name service, an ENS records service, and key storage service.</p> <h3 id="name-service">Name Service</h3> <p>These “pointers” I’m referring to are actually InterPlanetary Name System (<a href="https://docs.ipfs.tech/concepts/ipns/">IPNS</a>) records. These are cool because we can actually change the mapping of these keys to the content. This is perfect for our use-case of updating a website on behalf of a user.</p> <p>We considered 3 different name services</p> <h4 id="dwebservicesxyz">dwebservices.xyz</h4> <p>https://dwebservices.xyz/ would have been the simplest option. They provide and API where you can create an IPNS name, and use the API to control where it points and update revisions. This is the simplest option by far if you are OK not having custody of your keys. Unfortunately, for our use case, we needed to have custody over the IPNS keys. This is because we need to ensure that we have the ability to update where the IPNS names are pointing indefinitely into the future, and we need to be able to ensure the IPNS records are always resolvable.</p> <h4 id="running-the-ipns-infra-ourselves">Running the IPNS infra ourselves</h4> <p>The second thing we looked into was what it would look like to run the IPNS infrastructure ourselves. Unfortunately the documentation to do this in a way with high uptime was REALLY bad. I learned that js-ipfs was recently depreciated and is being replaced by Helia. But lacked good documentation around how to do <a href="https://github.com/ipfs/helia-ipns">IPNS on Helia</a>. There are still several questions I have around how to do this in a good way, but decided to move on when I discovered w3name</p> <h4 id="w3name">w3name</h4> <p>W3name helps us by making the creation, updating, and deletion easier. Additionally, w3name enables the lookup of the values of these pointers, ensuring that they are always available. We would have control over the keys, and the service has a simple and documented <a href="https://web3-storage.github.io/w3name/">API</a>. Feel free to <a href="https://web3.storage/products/w3name/">read more about w3name</a> on their site.</p> <h3 id="ens-service">ENS Service</h3> <p>For the interactions with ENS names, we do contract interactions with their <a href="https://docs.ens.domains/contract-api-reference/publicresolver">PublicResolver</a> using wagmi. Actually, the contract interactions were better than I expected. using the <a href="https://wagmi.sh/cli/getting-started">wagmi CLI</a>, React hooks for each call are created, keeping our code nice and type-safe. We also used some utils from <a href="https://www.npmjs.com/package/@ensdomains/content-hash">@ensdomains/content-hash</a> and the awesome, also type-safe, <a href="https://viem.sh/">viem</a>.</p> <p>One complaint with the ENS development is there is no nice way to resolve the content-hash. There are great ways to <a href="https://docs.ens.domains/dapp-developer-guide/resolving-names">resolve names</a> and such, though.</p> <h3 id="key-storage-service">Key Storage Service</h3> <p>For key storage, our thoughts were pretty straightforward. How do we keep our users’ keys safe while being accessible. Our infrastructure is on AWS so we considered using our Dynamo database, but that did not seem secure. What we ended up with was using storing them encrypted through <a href="https://docs.aws.amazon.com/systems-manager/latest/userguide/systems-manager-parameter-store.html">AWS ParameterStore</a>. When the keys need looked up, we can retrieve them through our services while keeping them secure for the user.</p> <h2 id="put-it-together-what-do-you-get">Put it Together, What do you Get?</h2> <p>From the user’s perspective, it should be simple.</p> <ol> <li>Show intent of adding their ENS domain. In the background we: get the latest IPFS CID, create an IPNS record, send it to w3name, update the project.</li> <li>The user connects their wallet and signs a transaction to update the content hash. Again, in the background we are: verifying the user owns the ENS domain or anything else that would prevent the transaction from succeeding, and creating that transaction with the newly created IPNS key.</li> </ol> <p>Then, immediately after the content record is updated, the user can visit their newly hosted website via Brave, eth.limo, or hopefully soon, anywhere! Even better, every time the project has an update, the content is automatically updated. Let’s go!</p> <p>Go forth and update your ENS records on your dAppling projects!</p> <p>📚</p> " },{"id": "https://blog.dappling.network/poetry-in-imagery-meta-image-generation-in-nextjs/", "url": "https://blog.dappling.network/poetry-in-imagery-meta-image-generation-in-nextjs/", "title": "Poetry in Imagery • Meta Image Generation in Next.js", "date_published": "2023-08-08T00:00:00Z", "language": "","content_html": "<p>When I stroll through the web without intention, every link, title, and image vies for my attention. With a goal in mind, those same links, titles, and images seem to lack dimension. I struggle to find the information I seek; behind each possible link lacking context, I’m left blind.</p> <p>Meta tags of a website are a helpful guide. Used to share information about potential content behind a link, these small tags can hold enormous amounts of useful data. As long as they are used correctly, that is. I hope their use is expanded and can help and inspire creators to put more energy into their own site’s images.</p> <h2 id="essence-of-representation">Essence of Representation</h2> <p>Meta tags provide glimpses into the content without requiring users to visit the page itself. These tags can articulate essential details like the title, description, and intended size of the site. Open Graph tags (og), introduced by Facebook, define a way to share a summary of the content, location data, media information, and <a href="https://ogp.me/">more</a>.</p> <p>The tag for an arbitrary image, <code>og:image</code>, I think has the most potential. These images are not mere visual aids; they are the distilled essence of the web page they represent. A visual haiku. For our app <a href="https://www.dappling.network/">dAppling</a>, I wanted to follow GitHub’s lead with a desire to give the user as much information as possible.</p> <p><img src="https://github.blog/wp-content/uploads/2021/06/framework-open-graph-images_fig-1-GitHub-twitter-card.png?resize=2400%2C1260" alt="" /></p> <p>By way of example, GItHub’s meta images. Explained more in their <a href="https://github.blog/2021-06-22-framework-building-open-graph-images/">A framework for building Open Graph images</a> article, the image succinctly and, in my opinion, beautifully explains what you will see before you see it. I love these images. From this little representation, I have been able to quickly gather information and confidently ignore or navigate into the site.</p> <h2 id="the-alchemists-wand">The Alchemist’s Wand</h2> <p>Creating these visual haiku is a craft, a magical art. With tools like <a href="https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images">@vercel/og</a> and <a href="https://github.com/vercel/next.js">Next.js</a>, I started my journey.</p> <p>A flick of the wrist and a small creation appeared <img src="https://www.dappling.network/api/og?id=blog" alt="" /><img src="https://www.dappling.network/api/og?id=dog" alt="" /> <img src="https://www.dappling.network/api/og?id=bog" alt="" /> Each project, tied to a unique gradient, becomes recognizable at a glance. To look under the leaves, <a href="https://gist.github.com/Namaskar-1F64F/c851789c4df7d528c6c08ec60a9c90f8">here’s a gist of the generator</a>. The examples above use different IDs:</p> <ul> <li>top <code>https://www.dappling.network/api/og?id=blog</code></li> <li>middle <code>https://www.dappling.network/api/og?id=dog</code></li> <li>bottom <code>https://www.dappling.network/api/og?id=bog</code>,</li> </ul> <p>Another gesture of the wand; a motion with emotion. Two new cards materialize. You can see the pretty gradient for each of them is consistent (The ID for the following two are <code>meow</code>). <img src="https://blog.dappling.network/images/dynamic-meta-images/project-card.png" alt="" /> Our beautiful project card contains a preview at a glance. The deployment card adds two more elements. <img src="https://blog.dappling.network/images/dynamic-meta-images/deployment-card.png" alt="" /> You can see, without navigating to the site, if your deployment passed or failed. You can get the “verified” badge after someone signs the deployment, attesting its legitimacy.</p> <h3 id="the-poetry-and-the-pitfalls-nextjs">The Poetry and the Pitfalls • Next.js</h3> <p>Now we come to the unfortunate story. I would love to say these things all worked perfectly, but the real-time creation of these images posed performance challenges. The metaphysical had to meet the physical world of server responses and loading times. You see, when apps like telegram, slack, discord, and the like try to get these images, the data must be created on the fly. This causes a few problems like, how do we get the information for the page on load?</p> <p>This is solved by <a href="https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props"><code>getServerSideProps</code></a>, but also causes the performance hit. In the new app router, the <a href="https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata"><code>generateImageMetadata</code></a> function should work nicely. However, when browsing the site normally, one must wait for the metadata to load, even though they are not concerned with the meta image, after all, they’re already on the site.</p> <p>We scaled back, yet the essence remains. The images still capture the spirit, albeit in a more simplistic form.</p> <p><img src="https://www.dappling.network/api/og?type=project&amp;id=meow" alt="" /> <img src="https://www.dappling.network/api/og?id=meow&amp;type=deployment" alt="" /></p> <h3 id="learnings-and-such">Learnings and Such</h3> <ul> <li>Meta tags are first come first used. That means, if you have multiple meta tags on the page, it’ll probably use the first one encountered. This confused me because instead of being able to define site-wide metadata, I had to use Next.js’s <a href="https://nextjs.org/docs/pages/api-reference/components/head"><code>&lt;Head&gt;</code></a> element on every page.</li> </ul> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Head</span><span class="token punctuation">></span></span></code></pre> <ul> <li>Having an <code>svg</code> as a meta image will silently fail and ruin your day. Make them <code>png</code>.</li> <li>Using metadata website checkers do not accurately reflect exactly what will happen on each individual social media platform. They all have their own way to display the images. <ul> <li><a href="https://en.rakko.tools/tools/9/">open graph debugger</a> - see if the images work</li> <li><a href="https://chrome.google.com/webstore/detail/meta-debugger/jfpdemgdamgplelnlmaecbonkfgfgomp#:~:text=Meta%20Debugger&amp;text=Debug%20the%20head%20section%20of,icons%20and%20many%20more%20things.">meta debugger</a> - view tags in chrome dev tools useful for duplicates</li> </ul> </li> <li>Using local metadata debugging does not accurately reflect the first load of your page. There is a chance the meta tags change as hooks return data. Keep this in mind when using extensions like <a href="https://chrome.google.com/webstore/detail/localhost-open-graph-debu/kckjjmiilgndeaohcljonedmledlnkij">localhost open graph debugger</a>.</li> <li><code>twitter:</code> tags are used by more than just twitter.</li> </ul> <p>The full list of image related tags used:</p> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{url}</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">itemProp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{url}</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">itemProp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{imageUrl}</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{imageUrl}</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{imageUrl}</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image:alt<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dAppling<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image:type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image:width<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image:height<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>630<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{imageUrl}</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:image:src<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{imageUrl}</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:card<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>summary_large_image<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:site<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@dApplingNetwork<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:creator<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@dApplingNetwork<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.dappling.network<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre> <ul> <li>If I were to start over, the process simply is:</li> </ul> <ol> <li>start ideating, sketching, and playing with <a href="https://og-playground.vercel.app/">the og playground</a> until you have struck inspiration and want to start migrating to your actual code.</li> <li>create either a new Next.js project or add the og endpoint to your existing project.</li> <li>modify the meta tags of your site to include the dynamic url. e.g. <code>https://www.dappling.network/api/og?type=project&amp;id=${projectId}</code>.</li> <li>test with the tools above</li> <li>cross your fingers</li> </ol> <p>If you’re interested in our exact implementation, the full code can be found in <a href="https://gist.github.com/Namaskar-1F64F/f499c85c286eaae6b2e6a7854539c140">this gist</a>.</p> <h2 id="the-art-of-the-web">The Art of the Web</h2> <p>Meta image generation is both a technical task and an art form. How one can translate the complex into the simple while maintaining beauty. Like a haiku captures a moment, a well-crafted meta image reminds that even in the technical world of web development, there’s room for poetry, beauty, and a touch of the metaphysical.</p> <p>Thank you for your time. If you need help, please reach out to me <a href="https://t.me/folded_hands">on telegram</a>.</p> <p>🙏❤️🌱 What a great day to be alive!</p> " },{"id": "https://blog.dappling.network/content-addressable-storage-vs-location-based-storage-for-websites/", "url": "https://blog.dappling.network/content-addressable-storage-vs-location-based-storage-for-websites/", "title": "Content-addressable Storage vs Location-based Storage for Websites", "date_published": "2023-08-04T00:00:00Z", "language": "","content_html": "<p>Content-based storage allows the lookup of a website based on its contents instead of its name or location.</p> <p>It works by passing the content through a hash function, which generates a content address. This content address can then be used to request the content, and anyone who is hosting the content that hashes to that content address can serve the content.</p> <h3 id="location-based-storage">Location-Based Storage</h3> <p>Location-based storage is the traditional and widely used approach for accessing web content. It involves accessing data through known URLs that point to specific locations where the content is stored. Here are the key traits of location-based storage:</p> <ol> <li><strong>Familiarity:</strong> Most people are familiar with location-based storage, as it is the standard method for accessing websites and online content.</li> <li><strong>Direct Retrieval:</strong> Users access data by navigating to known URLs, which directly point to the server hosting the content.</li> <li><strong>Hierarchical Structure:</strong> Location-Based Storage organizes data in hierarchical structures, making it easy to manage and categorize content.</li> <li><strong>Link Rot Susceptibility:</strong> Over time, URLs might become invalid due to changes in the underlying infrastructure, leading to link rot.</li> <li><strong>No built-in data verification:</strong> location-based storage does not inherently verify the integrity of the data being accessed.</li> </ol> <h3 id="content-addressable-storage">Content-Addressable Storage</h3> <p>Content-addressable storage is a newer approach that ensures data integrity and immutability through unique content hashes. Instead of relying on URLs with specific locations, content is accessed based on its cryptographic hash. Let’s explore the traits of content-addressable storage:</p> <ol> <li><strong>Data Integrity and Immutability:</strong> Each piece of content is identified by a unique content hash generated through a hash function. Any modification to the content results in a different hash, ensuring data integrity and immutability.</li> <li><strong>Efficient Deduplication:</strong> Since identical content generates the same content hash, content-addressable storage can efficiently deduplicate data, reducing storage overhead.</li> <li><strong>Resilience to Link Rot:</strong> Content is permanently accessible through its content hash, eliminating the issue of link rot experienced in location-based storage.</li> <li><strong>Complexity vs. Direct Interaction:</strong> While content hashes provide strong integrity, they may be less user-friendly for direct interaction compared to traditional URLs.</li> <li><strong>Implementation Complexity:</strong> Content-Addressable Storage may require slightly more complexity in implementation compared to straightforward location-based storage.</li> </ol> <h1 id="example-location-based-storage-vs-content-addressable-storage">Example: Location-Based Storage vs. Content-Addressable Storage</h1> <p><strong>Location-Based Storage Example:</strong></p> <p>URL: <a href="https://blog.dappling.network/">https://blog.dappling.network/</a></p> <p>In this blog, the URL “<a href="https://blog.dappling.network/">https://blog.dappling.network/</a>” is a classic example of location-based storage. The content you’re accessing is stored at the specific location, “blog.dappling.network.” When you navigate to this URL, your web browser sends a request to the web server hosting the blog, and the server responds by delivering the content associated with that particular location. This is the conventional and familiar way of accessing web content, widely used for traditional websites and blogs.</p> <p><strong>Content-Addressable Storage Example:</strong></p> <p>URL: <a href="https://bafybeigvbtiinlrfoewlccg4xgbxgsd4aa62gzjls6v2sg5aji4nu76n5q.ipfs.dweb.link/">https://bafybeigvbtiinlrfoewlccg4xgbxgsd4aa62gzjls6v2sg5aji4nu76n5q.ipfs.dweb.link/</a></p> <p>Now, let’s consider a content-addressable storage example using IPFS (InterPlanetary File System) for this blog post. The URL “<a href="https://bafybeigvbtiinlrfoewlccg4xgbxgsd4aa62gzjls6v2sg5aji4nu76n5q.ipfs.dweb.link/">https://bafybeigvbtiinlrfoewlccg4xgbxgsd4aa62gzjls6v2sg5aji4nu76n5q.ipfs.dweb.link/</a>” points to the content stored on the IPFS network. The string “bafybeigvbtiinlrfoewlccg4xgbxgsd4aa62gzjls6v2sg5aji4nu76n5q” is a unique content hash generated based on the blog post’s data. When you access this URL, the IPFS network retrieves the content associated with that specific content hash, ensuring data integrity and immutability.</p> <p>By using content-addressable storage, this blog post becomes permanently accessible via its unique content hash, even if the underlying IPFS network changes or moves.</p> <h1 id="conclusion">Conclusion</h1> <p>Both location-based storage and content-addressable storage present compelling use cases for hosting websites. Location-based storage offers a familiar and straightforward approach, enabling content retrieval through traditional URLs and hierarchical data organization.</p> <p>On the other hand, content-addressable storage ensures strong data integrity and immutability by generating unique content hashes. This method promotes efficient deduplication, reduces storage overhead, and ensures resilience to link rot.</p> <p>At <a href="https://dappling.network/landing">dAppling</a>, we are developing a platform that combines the strengths of both approaches to create a secure and performant hosting solution. By leveraging content addressing, we enhance data permanence and integrity while maintaining fast and efficient content retrieval for end-users. Our platform aims to empower developers with a user-centric and developer-friendly solution for building performant and resilient websites.</p> " },{"id": "https://blog.dappling.network/i11g-updating-an-immutable-blog/", "url": "https://blog.dappling.network/i11g-updating-an-immutable-blog/", "title": "i11g - Updating an Immutable Blog", "date_published": "2023-07-19T00:00:00Z", "language": "","content_html": "<p>We needed a blog for <a href="https://dappling.network/" title="dAppling site">dAppling</a>. One of our important marketing efforts revolves around writing engaging and helpful content. The aim of this is to show two things:</p> <ol> <li>We know things.</li> <li>We share things.</li> </ol> <p>Not only that, but we like to help people in ways that we can. Sharing knowledge, for me, gives great joy.</p> <h2 id="high-level-goals">High-level Goals</h2> <p>So the question is, how can we use the things we know to host and share those things in a way that is:</p> <ul> <li>Search Engine Optimization (SEO)</li> <li>Pretty</li> <li>Easy to update</li> </ul> <h3 id="search-engine-optimization-seo">Search Engine Optimization (SEO)</h3> <p>We have posted articles on <a href="https://dev.to/dappling">dev.to</a>, but wanted stronger search on our own domain. The ideation started a few days ago because dev.to does not allow us to use a custom domain. After reading an article advocating to <a href="https://indieweb.org/POSSE">Publish (on your) Own Site, Syndicate Elsewhere</a></p> <blockquote> <p>the practice of posting content on your own site first, then publishing copies or sharing links to third parties (like <a href="https://indieweb.org/social_media" title="social media">social media</a> silos) with <a href="https://indieweb.org/original_post_link" title="original post link">original post links</a> to provide viewers a path to directly interacting with your content.</p> </blockquote> <p>So the site is hosted on our domain, that’s wonderful. Further, the content is statically generated, which means easier to crawl.</p> <h3 id="pretty">Pretty</h3> <p>I went through the templates on the 11ty <a href="https://www.11ty.dev/docs/starter/">starter projects</a> page and found this awesome <a href="https://github.com/lwojcik/eleventy-template-bliss">“Bliss” template</a> by <a href="https://github.com/lwojcik" title="Lukasz Wojcik">Łukasz Wójcik</a> on GitHub. I think it’s pretty. Thanks, Łukasz!</p> <h3 id="easy-to-update">Easy to Update</h3> <p>This was a consideration because if other people on our team want to update the blog, it needs to be straightforward enough to not get in anyone’s way. Since this is all Markdown, along with this <a href="https://github.com/alwaysbegrowing/blog/commit/7c4562bee9b4c2962cf47f4c747d8c5751ee82c1">blog post commit</a>, it should be pretty self-explanatory to duplicate an article.</p> <h3 id="dont-get-me-wrong">Don’t Get me wrong!</h3> <p>I know there are many options to write blogs that are more optimized than what I’m suggesting here. There’s Medium, Substack, the aforementioned dev.to, Ghost, the list really goes on, but there’s a desire of mine to make something that’ll be compatible with our current infrastructure at dAppling, and I’m having fun. This is the best I have come up with, but do note, I’ve not exhausted all the web’s offerings!</p> <h2 id="implementing-this-yourself">Implementing this yourself</h2> <p>I’m using this blog post as a way to explain-by-doing. Here’s my workflow, from concept to creation.</p> <h3 id="create-your-content">Create your Content</h3> <p>One can obsess over the best way to display information, and that display can be in many different formats, but what most people have seemed to converge on is <a href="https://www.markdownguide.org/getting-started/">Markdown</a>. Because of its portability, writing the content in markdown first and finding where to host it later is a great strategy. To that end, I am writing this in my favorite editor, <a href="https://obsidian.md/">Obsidian</a>.</p> <p><img src="https://blog.dappling.network/images/11ty-on-ipfs/obsidian-editor.png" alt="Obsidian editor with the above content written" /></p> <h3 id="manage-your-files">Manage your Files</h3> <p>First, clone the <a href="https://github.com/lwojcik/eleventy-template-bliss">“Bliss” template</a> and open it up locally in your favorite file editor. When managing the files while writing the blog post, it will be helpful to run the website in development mode.</p> <pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i <span class="token comment"># first install dependencies</span> <span class="token function">npm</span> run dev <span class="token comment"># start a local server</span></code></pre> <p>To manage the files, you have images and content.</p> <ul> <li>For images, I created a folder for the specific blog post and the related images go into this dedicated folder. The image above is then referenced as: <code>![Obsidian editor with the above content written](/images/11ty-on-ipfs/obsidian-editor.png)</code></li> <li>Content goes into the posts’ folder with the markdown, saved as <code>07-19-11ty-on-ipfs.md</code>, the date and title.</li> </ul> <p><img src="https://blog.dappling.network/images/11ty-on-ipfs/file-system.png" alt="vscode showing the file structure of the blog" /></p> <p>And that’s it! After running the server, the content with images should now be viewable at <code>http://localhost:8080/&lt;post title&gt;/</code> because the template we are using, thanks to 11ty, creates that route for us.</p> <p><img src="https://blog.dappling.network/images/11ty-on-ipfs/rendered-website.png" alt="rendered website" /></p> <h2 id="create-your-dappling-project">Create your dAppling Project</h2> <p>Now this should be the easy part. Head over to <a href="https://dappling.network/">dAppling Network</a>, sign in, and create a new project. The steps for this are:</p> <ol> <li>Sign-up and authorize the GitHub App.</li> <li>Create a new project and select your blog repo.</li> <li>Accept the build settings, they should be automatically detected.</li> <li>Hit that big deploy button, and wait!</li> </ol> <p><img src="https://blog.dappling.network/images/11ty-on-ipfs/deploy-project.png" alt="deployment steps on dAppling" /></p> <p>You’ll wait a bit while the code is deployed, and you should get a link to the site deployed on IPFS. We have a friendly URL like <a href="https://blog-xn6nf4.dappling.network/">blog-xn6nf4.dappling.network</a> and the template should show up!</p> <p><img src="https://blog.dappling.network/images/11ty-on-ipfs/live-on-dappling.png" alt="live site on dAppling" /></p> <h2 id="update-your-dappling-project">Update your dAppling Project</h2> <p>Now, to update a new blog post, you can either update your “main” branch, by either pushing directly or by creating a PR and merging it. I will be pushing directly to the branch and let dAppling deploy the site. After that, the site should be live!</p> <h3 id="artifacts">Artifacts</h3> <p>I pushed it after writing that paragraph, and it created a <a href="https://gardener-ivy-jfecm0i.dappling.network/ipfs-11ty-dappling-i11g/">preview URL</a> for me. You can view the <a href="https://www.dappling.network/projects/4f6bf966-989f-434c-b1e1-739967f3de4d/BuildImage74257FD8-Ag37vnjYXUuu:b9627f25-d7d1-46a9-8892-40fc1327458b">deployment on dAppling</a>.</p> <p><img src="https://blog.dappling.network/images/11ty-on-ipfs/deployment-page.png" alt="deployment page on dAppling" /></p> <p>And the <a href="https://github.com/alwaysbegrowing/blog/commit/7c4562bee9b4c2962cf47f4c747d8c5751ee82c1">Commit on GitHub</a></p> <p><img src="https://blog.dappling.network/images/11ty-on-ipfs/commit.png" alt="commit on github with changes" /></p> <h2 id="what-did-i-learn">What Did I learn?</h2> <ul> <li>The creation of this blog post was slower than using an editor online. This is mainly from images. I have to take screenshots and then save them locally. I prefer this over hosting them on a website because having them hosted alongside the website guarantees they will always be available, whereas an online service might be down.</li> <li>Introducing changes to the blog layout is harder than, say Notion, as there aren’t many controls over the typed markdown. Luckily, I like the way the site looks out-of-the-box.</li> <li>I dare conclude that this blog post took me about 4 hours. That is long! I hope it was because of the do-as-I-go approach.</li> </ul> <h2 id="conclude">Conclude</h2> <p>I think this set-up with writing and updating in a single place and having deployment handled by dAppling will be convenient enough to use right now. There are some changes I still need to make, like branding on the site. Of course, we also miss out on features like comments and engagement. I guess we will learn more when I make the next post trying to figure out how the heck I syndicate this everywhere.</p> <p>Thank you for your time, and if you have any questions, do reach out.</p> " },{"id": "https://blog.dappling.network/how-dappling-uses-filebase/", "url": "https://blog.dappling.network/how-dappling-uses-filebase/", "title": "How dAppling Uses Filebase", "date_published": "2023-06-23T00:00:00Z", "language": "","content_html": "<p>At the core of <a href="https://dappling.network/">dAppling</a>, we both build code and host the completed app, ensuring a convenient experience for our users and one akin to centralized hosting for their users.</p> <p>We interact with Filebase in two ways: putting things into the bucket and taking things out of the bucket.</p> <h2 id="into-the-bucket">Into the Bucket</h2> <p>In a way, we use ‘storage’ in the sense popularized by Amazon because Filebase supports s3 APIs to store content. When a build is complete, we generate build artifacts and upload them to Filebase via the API. Once this process completes, we receive a ‘receipt’ containing the content identifier (CID) or hash of the uploaded content. This CID is stored with the project for use later when content needs to be accessed.</p> <p>This process is outlined in the following diagram in which a Uniswap developer wants to use dAppling.</p> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amptlikiaxawtx9qoaqo.png" alt="Request diagram of a dappling code build - how do you build a decentralized app" /></p> <h2 id="out-of-the-bucket">Out of the Bucket</h2> <p>When it comes to content access, there are two main methods. Users can either directly access the content via the CID using their local IPFS node or a gateway, or they can use an auto-updating URL created by dAppling. This URL could be an auto-generated link such as <code>garden-daisy.dappling.network</code>, or a custom domain configured by the user, like <code>ipfs.uniswap.org</code>.</p> <h3 id="an-aside-of-configuring-a-custom-domain">An aside of configuring a custom domain</h3> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4gpb37i6p843pliyino.png" alt="custom domain request diagram using dappling" /></p> <p>In the first case of accessing the CID directly, the content may or may not be downloaded via Filebase. This is because some other IPFS nodes may have cached the content. However, if the content does not exist, the “pinned” files will be ultimately retrieved at Filebase’s nodes.</p> <p>In the second case, we use Filebase’s gateway directly to retrieve the content.</p> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kegbos6y42kf7s10yaih.png" alt="request diagram of accessing Firebase content via dappling" /></p> <h2 id="how-could-this-be-improved">How could this be improved?</h2> <h3 id="replace-the-record-handling">Replace the Record Handling</h3> <p>Currently, we use a CDN in front of Filebase’s gateway, which also functions as a CDN. This process appears to involve one extra step. But how else could we allow users to use a custom domain that maps to an updatable CID?</p> <p>I think it might look something like:</p> <ul> <li>Filebase handles DNS records somehow. I know it involves certificate provisioning, which is a bummer. It would be nice to request a domain <code>ipfs.uniswap.org</code> and have it return the records for a user to update.</li> <li>Filebase allows updating the CID associated with the domain programmatically. So when the Uniswap code is updated, we can update the domain.</li> </ul> <h3 id="subdomain-gateways">Subdomain gateways</h3> <p>As I detailed in my article about <a href="https://dev.to/namaskar-dappling/hosting-static-sites-on-ipfs-46f">IPFS and resource paths</a>, it’s crucial to stay as close to the user’s development environment as possible. Therefore, we stay away from anything hosted at a “path”.</p> <p>From <a href="https://consensys.net/diligence/blog/2021/06/ipfs-gateway-security/">consensys IPFS security article</a>,</p> <blockquote> <p>TL;DR: Path-based IPFS gateways have a critical flaw: They effectively disable one of the essential security features of modern browsers: the same-origin policy.</p> </blockquote> <p>We therefore prefer having the user bring their domain to host, like using <code>ipfs.uniswap.org</code>, or our preview domain like <code>garden-daisy.dappling.network</code>. Because of this, we have sites that will not work on path gateways such as <code>gateway.dappling.network/&lt;CID hash&gt;</code>. We would prefer the gateway support the subdomain version a la <code>&lt;CID hash&gt;.gateway.dappling.network</code>.</p> <p>It would be ideal if Filebase supported these subdomains as the access is much faster than any other gateway, but meanwhile we will direct our users towards a subdomain version like <code>&lt;CID hash&gt;.ipfs.cf-ipfs.com</code></p> " }] }