<h4>Goal</h4>
<p>Use @runno/runtime to execute code within HTML.<br>
The runtimes currently supported by @runno/runtime are python, ruby, quickjs,
sqlite, clang, clangpp, and php. For this example, we will use python.</p>
<h4>Preparation</h4>
<p>Add the library</p>
<pre><div class="remark-highlight">yarn add @runno/runtime
</div></pre>
<p>Add CORS settings to next.config.js</p>
<pre><div class="remark-highlight">async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "require-corp",
          },
        ],
      },
    ];
  },
</div></pre>
<h4>Createa Component</h4>
<pre><div class="remark-highlight">/* eslint-disable react/no-unescaped-entities */
import "@runno/runtime";

const RunnoComponent = () => {
  // @ts-ignore
  const runPythonScript = `
  print("Hi")
  number = int(input("Choose number"))
  if number % 2 == 0:
      print("That number is even")
  print("Done")
  `;
  return (
    &#x3C;runno-run runtime="python" editor controls>
      {runPythonScript}
    &#x3C;/runno-run>
  );
};

export default RunnoComponent;
</div></pre>
<p>Add the Component to a Page Disable SSR</p>
<pre><div class="remark-highlight">import dynamic from "next/dynamic";

const DynamicRunnoComponent = dynamic(
  () => import("../../../components/RunnoComponent"),
  {
    ssr: false, // Disable SSR
    loading: () => &#x3C;p>Loading...&#x3C;/p>,
  }
);

const PythonExample = () => {
  return (
    &#x3C;div>
      &#x3C;h1>is even ?&#x3C;/h1>
      &#x3C;DynamicRunnoComponent />
    &#x3C;/div>
  );
};

export default PythonExample;
</div></pre>
<h4>Final Result</h4>
<p><a href="https://nash1111-old-blog.pages.dev/playground/runno-wasi/PythonExample">runtime=python specified</a></p>
<h4>References</h4>
<p><a href="https://runno.dev/docs/runtime/">API docs</a> <a href="https://runno.dev/">runno.dev</a></p>

Running Code in the Browser with @runno/runtime in Next.js

<h4>Goal</h4>
<p>make unixtime parser again like</p>
<pre><div class="remark-highlight">wasmer run target/wasm32-wasi/release/wasmer_datetime_parser.wasm -- 1690416880
</div></pre>
<h4>Preparation</h4>
<pre><div class="remark-highlight">curl https://get.wasmer.io -sSfL | sh
rustup target add wasm32-wasi
</div></pre>
<h4>Edit src/main.rs</h4>
<p>parse args with wasi::args_get
<a href="https://github.com/nash1111/wasmer_datetime_parser/blob/master/src/main.rs">src/main.rs</a></p>
<h4>Run it locally</h4>
<pre><div class="remark-highlight">cargo build --target wasm32-wasi --release
wasmer run target/wasm32-wasi/release/wasmer_datetime_parser.wasm -- 1690416880
2023-07-27 00:14:40 UTC
</div></pre>
<h4>Publish as a wasmer package</h4>
<pre><div class="remark-highlight">wasmer init
wasmer login
wasmer publish
</div></pre>
<h4>Test what published</h4>
<p><a href="https://wasmer.io/nash1111/wasmer_datetime_parser@0.1.6">Go to url</a> and download wasm file then try it</p>
<pre><div class="remark-highlight">wasmer run [filepath] -- 1690416880
2023-07-27 00:14:40 UTC
</div></pre>

How to create simple wasmer package (Rust)

<h4>Goal</h4>
<p>We will create an API that takes a unixtime and returns the time.</p>
<h4>Preparation</h4>
<pre><div class="remark-highlight"># Set the target
rustup target add wasm32-unknown-unknown

# A browser will open, so click on "Allow"
yarn global add wrangler
wrangler login
</div></pre>
<h4>Preparetion</h4>
<p>Follow the <a href="https://developers.cloudflare.com/workers/runtime-apis/webassembly/rust/#1-create-a-new-project-with-wrangler">Official Guide</a> to generate a project from the template.</p>
<pre><div class="remark-highlight">npx wrangler generate unix_time_formatter https://github.com/cloudflare/workers-sdk/templates/experimental/worker-rust
cd unix_time_formatter
</div></pre>
<h4>Running in the Development Environment</h4>
<pre><div class="remark-highlight">wrangler dev
</div></pre>
<p>When a request is received, it returns "Hello, World!".<a href="https://github.com/cloudflare/workers-sdk/blob/main/templates/experimental/worker-rust/src/lib.rs">template</a></p>
<pre><div class="remark-highlight">❯ curl localhost:8787
Hello, World!
</div></pre>
<h4>Modifying the Code</h4>
<p>We will use Chrono to return the unixtime in the format yyyy/mm/dd (day of the week) HH:MM:SS.
<a href="https://github.com/nash1111/unixtime_formatter">Modified Code</a></p>
<h4>Testing the Functionality</h4>
<p>(If you save while running wrangler dev, hot reloading will run and it will be updated automatically.)</p>
<pre><div class="remark-highlight">curl -X GET http://127.0.0.1:8787/$(date +%s)
2023/7/21(Fri) 08:51:05
</div></pre>
<h4>Deploy</h4>
<pre><div class="remark-highlight">wrangler publish

# Published worker-rust (0.29 sec)
# URL will be generated
</div></pre>
<h4>Testing in Production</h4>
<p>After running wrangler publish, a URL will be issued.</p>
<pre><div class="remark-highlight">curl -X GET [Insert the issued URL here]/$(date +%s)
2023/7/21(Fri) 08:52:33
</div></pre>

Creating a Simple API with CloudFlareWorkers (Rust)

<h4>Goal</h4>
<p>make simple Actor with wasmCloud</p>
<h4>What is Actor?</h4>
<p>This refers to an Actor within the Actor Model. It slightly differs from the academic definition of the Actor Model, where it's not possible to generate other Actors.<br>
see more on Official Doc <a href="https://wasmcloud.com/docs/fundamentals/actors/">Overview of the Actor Model</a></p>
<h4>Create &#x26; Register an Actor</h4>
<pre><div class="remark-highlight">❯ rustup target add wasm32-unknown-unknown
</div></pre>
<pre><div class="remark-highlight">❯ wash new actor firstactor --template-name hello
🔧   Cloning template from repo wasmCloud/project-templates subfolder actor/hello...
🔧   Using template subfolder actor/hello...
🔧   Generating template...
✨   Done! New project created [your path]

Project generated and is located at: [your path]


</div></pre>
<p>generated firstactor/src/lib.rs is below, just returning string "Hello World"</p>
<pre><div class="remark-highlight">use wasmbus_rpc::actor::prelude::*;
use wasmcloud_interface_httpserver::{HttpRequest, HttpResponse, HttpServer, HttpServerReceiver};

#[derive(Debug, Default, Actor, HealthResponder)]
#[services(Actor, HttpServer)]
struct FirstactorActor {}

/// Implementation of the HttpServer capability contract
#[async_trait]
impl HttpServer for FirstactorActor {
    async fn handle_request(&#x26;self, _ctx: &#x26;Context, _req: &#x26;HttpRequest) -> RpcResult&#x3C;HttpResponse> {
        Ok(HttpResponse::ok("Hello, World!"))
    }
}
</div></pre>
<p>at root of firstactor</p>
<pre><div class="remark-highlight">❯ wash build

# check _s.wasm generated
❯ ls build/firstactor_s.wasm
build/firstactor_s.wasm
</div></pre>
<p>upload via WebUI, Choose "Start Actor"->"From File"</p>
<h4>Generate Provider</h4>
<p>via WebUI, "Start Provider"->select default one</p>
<h4>Setup Link</h4>
<pre><div class="remark-highlight"># get your host id
❯ wash get

# get your ACTOR_ID
❯ wash get inventory [host id]

# set up environment variables
❯ export HELLO_ACTOR_ID= [actor id you see above]
❯ export PROVIDER_ID= [provider id you see above]

# put link
❯ wash ctl link put ${HELLO_ACTOR_ID} ${PROVIDER_ID} wasmcloud:httpserver address=0.0.0.0:8087
</div></pre>
<p>Now you can see Actors, Providers, Link Definition Activated
<img src="/blog/wasm_uploaded.png" alt="wasm_uploaded"></p>
<h4>Test</h4>
<pre><div class="remark-highlight">❯ curl localhost:8087
Hello, World!
</div></pre>

How to make Actor in wasmCloud

<h4>Goal</h4>
<p>install wasmCloud and wash (wasmCloud Shell)</p>
<h4>Installation</h4>
<pre><div class="remark-highlight"># install wash
❯ curl -s https://packagecloud.io/install/repositories/wasmcloud/core/script.deb.sh | sudo bash
❯ sudo apt install wash openssl

# start wasm cloud
❯ wash up --detached

🛁 wash up completed successfully
🕸  NATS is running in the background at http://127.0.0.1:4222
🌐 The wasmCloud dashboard is running at http://localhost:4000
📜 Logs for the host are being written to /home/nash1111/.wash/downloads/wasmcloud_4000.log

⬇️  To stop wasmCloud, run "wash down"
</div></pre>
<p>At <a href="http://localhost:4000/">http://localhost:4000/</a> you will see dashboard
<img src="/blog/wasmCloudDashboard.png" alt="wasmCloudDashboard.png"></p>
<h4>Next</h4>
<p>In the next post, we will introduce the steps to create an Actor.<br>
In the following post, we will present the process to create a Provider.</p>

How to install wash(wasmCloud Shell) on Ubuntu

<h4>Download and install and setup to desktop</h4>
<p><a href="https://processing.org/download">Download processing</a></p>
<pre><div class="remark-highlight">tar xvf ~/Downloads/processing-4.2-linux-x64.tgz
sudo mv processing-4.2/ /opt/processing
sudo ln -s /opt/processing/processing /usr/local/bin/processing
sudo vim /usr/share/applications/processing.desktop

[Desktop Entry]
Version=2.1
Name=Processing
Comment=Processing Rocks
Exec=processing
Icon=/opt/processing/lib/icons/pde-256.png
Terminal=false
Type=Application
Categories=AudioVideo;Video;Graphics
</div></pre>

How to install processing on Ubuntu

<h4>Goal</h4>
<p>In this post, we will set up our development environment for node.js</p>
<h4>Environment</h4>
<pre><div class="remark-highlight">❯ cat /etc/os-release 
PRETTY_NAME="Ubuntu 22.04.2 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.2 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy
</div></pre>
<h4>Setup</h4>
<pre><div class="remark-highlight">sudo apt install nodejs npm
sudo n lts
sudo npm install n -g
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
npm install -g yarn
</div></pre>
<h4>Result</h4>
<pre><div class="remark-highlight">❯ yarn -v; node -v
1.22.19
v18.16.0
</div></pre>

Install n on Ubuntu 22.04 LTS

<h4>Goal</h4>
<p>In this post, we will set up our development environment and draw a triangle
using WebGPU, and then turn it into a component. We aim to render the red
triangle seen in this
<a href="https://webgpu.github.io/webgpu-samples/samples/helloTriangle">link</a> within
Next.js. In other words, our goal is to port this
<a href="https://github.com/webgpu/webgpu-samples/blob/main/src/sample/helloTriangle/main.ts">code</a>
into a component.</p>
<h4>Environment Setup</h4>
<p>Access <a href="chrome://flags/">chrome://flags/</a> in your chrome browser and turn on
WebGPU.<br>
Access <a href="chrome://gpu/">chrome://gpu/</a> in your chrome browser and make sure
WebGPU is enabled.<br>
<img src="/blog/webgpu.png" alt="webgpu.png"></p>
<p>Install an extension for WGSL.<br>
https://marketplace.visualstudio.com/items?itemName=PolyMeilex.wgsl</p>
<p>Add the WebGPU type definitions to your project (
<a href="https://github.com/gpuweb/types">type repo</a> )</p>
<pre><div class="remark-highlight">yarn add @webgpu/types
</div></pre>
<p>Add to types.d.ts to treat wgsl files as strings.</p>
<pre><div class="remark-highlight">declare module "*.wgsl" {
  const shader: string;
  export default shader;
}
</div></pre>
<p>Add to next.config.js.</p>
<pre><div class="remark-highlight">webpack: (config, { webpack }) => {
  config.module.rules.push({
    test: /\.(png|jpe?g|gif|webm)$/i,
    type: "asset/resource",
    generator: {
      filename: "static/[path][name].[hash][ext]",
    },
  });
  config.module.rules.push({
    test: /\.wgsl$/i,
    use: "raw-loader",
  });
  config.plugins.push(
    new webpack.DefinePlugin({
      __SOURCE__: webpack.DefinePlugin.runtimeValue((v) => {
        // Load the source file and set it as a global definition.
        // This is useful for easily embedding a file's source into the page.
        const source = fs.readFileSync(v.module.userRequest, "utf-8");
        return JSON.stringify(source); // Strings need to be wrapped in quotes
      }, []),
    })
  );
</div></pre>
<h4>Implementation</h4>
<p>The
<a href="https://github.com/webgpu/webgpu-samples/blob/main/src/sample/helloTriangle/main.ts">original code</a>
was largely left as is. However, since compilerOptions was set to strict: false
in the original code and true in my project, I added things like checking for
the existence of the canvas. <div class="remark-highlight">components/FirstWebgpu.tsx</div> eventually ended up
looking like this:</p>
<pre><div class="remark-highlight">import React, { useState, useRef, useEffect } from "react";
import triangleVertWGSL from "../shaders/triangle.vert.wgsl";
import redFragWGSL from "../shaders/red.frag.wgsl";

const HelloTriangle: React.FC = () => {
  const [pageState, setPageState] = useState({ active: true });
  const canvasRef = useRef&#x3C;HTMLCanvasElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const init = async () => {
      const adapter = await navigator.gpu.requestAdapter();
      const device = await adapter?.requestDevice();

      if (!pageState.active) return;
      if (!canvas) {
        console.error("canvas not defined");
        return;
      }
      const context = canvas.getContext("webgpu") as GPUCanvasContext;

      const devicePixelRatio = window.devicePixelRatio || 1;
      canvas.width = canvas.clientWidth * devicePixelRatio;
      canvas.height = canvas.clientHeight * devicePixelRatio;
      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

      if (!device) {
        console.error("Device is not available");
        return;
      }
      context.configure({
        device,
        format: presentationFormat,
        alphaMode: "premultiplied",
      });

      const pipeline = device.createRenderPipeline({
        layout: "auto",
        vertex: {
          module: device.createShaderModule({
            code: triangleVertWGSL,
          }),
          entryPoint: "main",
        },
        fragment: {
          module: device.createShaderModule({
            code: redFragWGSL,
          }),
          entryPoint: "main",
          targets: [
            {
              format: presentationFormat,
            },
          ],
        },
        primitive: {
          topology: "triangle-list",
        },
      });

      const frame = () => {
        if (!pageState.active) return;

        const commandEncoder = device.createCommandEncoder();
        const textureView = context.getCurrentTexture().createView();

        const renderPassDescriptor: GPURenderPassDescriptor = {
          colorAttachments: [
            {
              view: textureView,
              clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
              loadOp: "clear" as const,
              storeOp: "store" as const,
            },
          ],
        };

        const passEncoder =
          commandEncoder.beginRenderPass(renderPassDescriptor);
        passEncoder.setPipeline(pipeline);
        passEncoder.draw(3, 1, 0, 0);
        passEncoder.end();

        device.queue.submit([commandEncoder.finish()]);
        requestAnimationFrame(frame);
      };

      requestAnimationFrame(frame);
    };

    init();
  }, [pageState.active]);

  return &#x3C;canvas ref={canvasRef} />;
};

export default HelloTriangle;
</div></pre>
<h4>Result</h4>
<p>You can see the triangle being drawn at this
<a href="https://nash1111-old-blog.pages.dev/playground/hellotriangle">link</a>.<br>
Note: Please turn on WebGPU. <img src="/blog/hellotriangle.png" alt="hellotriangle.png"><br>
In the next post, I would like to implement features such as changing colors
over time.</p>

Integrating WebGPU into Your Next.js and TypeScript Application Part 1

<p>Working with AWS is exciting and enriching, but one aspect that can easily be overlooked in the day-to-day hustle is managing costs. Keeping track of your AWS spending often involves logging into your AWS Management Console and manually checking the cost management page, which can be a hassle.</p>
<p>That's why I built an AWS cost notification bot using AWS CDK (Cloud Development Kit) that sends daily updates about your AWS costs directly to your Slack workspace. The completed project is available on my <a href="https://github.com/nash1111/aws_billing_lambda">GitHub</a> repository, but in this post, I'll take you through the steps of creating your own.</p>
<h4>Step 0: Prepare CDK, AWS CLI, and generate slackWebhookUrl</h4>
<pre><div class="remark-highlight">❯ cdk --version
2.81.0 (build bd920f2)
❯ aws --version
aws-cli/2.11.2 Python/3.11.2
</div></pre>
<h4>Step1: Create a new AWS CDK Project</h4>
<pre><div class="remark-highlight">mkdir aws_billing_lambda
cd aws_billing_lambda
cdk init app --language typescript
</div></pre>
<h4>Stpe2: add library for CDK</h4>
<pre><div class="remark-highlight">yarn add aws-cdk-lib aws-sdk axios @slack/webhook
</div></pre>
<h4>Step3: put your SlackWebhookUrl to SSM</h4>
<pre><div class="remark-highlight">aws ssm put-parameter \
--name "/billing_lambda_app/slackWebhookUrl" \
--value "[Your SlackWebhookUrl]" --type "SecureString"
</div></pre>
<h4>Step4: Grant the Necessary Permissions to Lambda (lib/aws_billing_lambda-stack.ts)</h4>
<p>setup handler</p>
<pre><div class="remark-highlight">    const billingLambda = new NodejsFunction(this, "BillingLambda", {
      entry: "./lambda/index.ts",
      handler: "handler",
      timeout: cdk.Duration.minutes(5),
      memorySize: 1024,
    });
</div></pre>
<p>set ssm policy to load slackWebhookUrl</p>
<pre><div class="remark-highlight">    const ssmPolicy = new iam.PolicyStatement({
      actions: ["ssm:GetParameter"],
      resources: ["arn:aws:ssm:*:*:parameter/billing_lambda_app/*"],
    });
    billingLambda.addToRolePolicy(ssmPolicy);
</div></pre>
<p>set kms policy, this is necessary for decrypt</p>
<pre><div class="remark-highlight">    const kmsPolicy = new iam.PolicyStatement({
      actions: ["kms:Decrypt"],
      resources: ["*"],
    });
    billingLambda.addToRolePolicy(kmsPolicy);
</div></pre>
<p>attach GetCostAndUsage policy</p>
<pre><div class="remark-highlight">    const cePolicy = new iam.PolicyStatement({
      actions: ["ce:GetCostAndUsage"],
      resources: ["*"],
    });
    billingLambda.addToRolePolicy(cePolicy);
</div></pre>
<p>set rule</p>
<pre><div class="remark-highlight">    const rule = new events.Rule(this, "BillingLambdaRule", {
      schedule: events.Schedule.cron({ minute: "0", hour: "4" }),
    });
</div></pre>
<h4>Step5: load slackWebHookUrl from ssm (lambda/index.ts)</h4>
<pre><div class="remark-highlight">  const ssm = new AWS.SSM();
  const slackWebhookUrlParam = await ssm
    .getParameter({
      Name: "/billing_lambda_app/slackWebhookUrl",
      WithDecryption: true,
    })
    .promise();
  const slackWebhookUrl = slackWebhookUrlParam.Parameter?.Value || "";
</div></pre>
<h4>Step6: Load AWS cost and send to Slack (lambda/index.ts)</h4>
<pre><div class="remark-highlight">  const params: AWS.CostExplorer.Types.GetCostAndUsageRequest = {
    TimePeriod: {
      Start: firstDayOfMonth.toISOString().substring(0, 10),
      End: today.toISOString().substring(0, 10),
    },
    Granularity: "MONTHLY",
    Metrics: ["UnblendedCost"],
  };

  const data = await costExplorer.getCostAndUsage(params).promise();

  if (data &#x26;&#x26; data.ResultsByTime &#x26;&#x26; data.ResultsByTime[0]) {
    const amount = data.ResultsByTime[0].Total?.UnblendedCost.Amount;
    console.log(`Total cost for the month so far: $${amount}`);

    const message = `Total cost for the month so far: $${amount}`;
    await webhook.send({
      text: message,
    });
  } else {
    console.log("No cost data available");
  }
</div></pre>
<h4>Step7: Deploy</h4>
<pre><div class="remark-highlight">cdk deploy
</div></pre>
<p><img src="/blog/slackbot.png" alt="slackbot.png"></p>

How to create AWS cost notificator

<h3>Setup for hosting Next.js on CloudFlare Pages</h3>
<h4>fix node-version</h4>
<p>create file <div class="remark-highlight">.node-version</div> and write <div class="remark-highlight">v16.20.0</div><br>
since default node-version not working with Next.js</p>
<h4>Project Settings</h4>
<p>Login to cloudflare and go to pages/workers and edit Build configurations, and connect to GitHub
<img src="/blog/cloudflarepagesbuildsettings.png" alt="cloudflarepagesbuildsettings.png"></p>
<p>And you see your next app is running on your domain</p>
<p>I highly recommend run Build command locally</p>
<pre><div class="remark-highlight">Build command: npx @cloudflare/next-on-pages@1
Build output directory: /.vercel/output/static
Root directory: /
Build comments on pull requests: Enabled
</div></pre>
<h3>add favicon(optional)</h3>
<p>add favicon files on <div class="remark-highlight">public/favicons/*.png</div><br>
and edit <div class="remark-highlight">_document.tsx</div> as below</p>
<pre><div class="remark-highlight">import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    &#x3C;Html>
      &#x3C;Head>
        &#x3C;link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=2" />
        // rest of your icon links...
      &#x3C;/Head>
      &#x3C;body>
        &#x3C;Main />
        &#x3C;NextScript />
      &#x3C;/body>
    &#x3C;/Html>
  )
}
</div></pre>

How I created this blog PART 2

<h3>How I created this blog Part 1</h3>
<h4>My Environment</h4>
<p>OS: Ubuntu 22.04.2 LTS<br>
node-version: 16.20.0<br>
yarn: 1.22.19</p>
<h4>Create From Template</h4>
<p>(my answer)</p>
<pre><div class="remark-highlight">yarn create next-app blog  
✔ Would you like to use TypeScript with this project? … No / Yes (Yes)  
✔ Would you like to use ESLint with this project? … No / Yes (Yes)  
✔ Would you like to use Tailwind CSS with this project? … No / Yes (No)  
✔ Would you like to use `src/` directory with this project? … No / Yes (No)  
✔ Use App Router (recommended)? … No / Yes (No)  
✔ Would you like to customize the default import alias? … No / Yes (No)  
</div></pre>
<h4>Why I chose these</h4>
<p>Would you like to use TypeScript with this project? (Yes)<br>
I prefer TypeScript over JavaScript.<br>
What I don't want to be misunderstood is that I'm not averse to JavaScript.<br>
JavaScript is a great language that can be used safely once you fully understand its specifications, and it works in browsers and is fast.<br>
However, since I don't have the intelligence or time to understand all of JavaScript, I want to rely on TypeScript's type system.</p>
<p>Would you like to use ESLint with this project? (Yes)</p>
<p>For the sake of code law and order, I prefer to have a linter.</p>
<p>Would you like to use Tailwind CSS with this project? (No)<br>
I used to be fond of Tailwind, but since this blog also serves as my practice for CSS, I've decided to write as much CSS as possible using @emotion/react.<br>
Even though Tailwind allowed me to create fantastic UIs despite my lack of proficiency in CSS, I often found it unreadable when revisiting it later.<br>
Therefore, in order to deepen my understanding of CSS, I decided to take a break from Tailwind.</p>
<p>Would you like to use <div class="remark-highlight">src/</div> directory with this project? (No)<br>
Though a src/ folder can be handy, I prefer quicker access so I opted for No.</p>
<p>Use App Router (recommended)? (No)<br>
AppRouter provides great speed, but using @emotion/react, which I wanted, required declaring use client everywhere, which was too challenging for me.<br>
Would you like to customize the default import alias? (No)<br>
I chose 'No', the default option, as I had no particular preferences.　　</p>
<h4>End</h4>
<p>Thanks for reading!!</p>

How I created this blog PART 1

<h4>ゴール</h4>
<p>remixプロジェクトをbun buildして、GitHubActionsでCloudFlareにデプロイする</p>
<h4>Remixプロジェクト作成</h4>
<p><a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/">公式のテンプレート</a></p>
<pre><div class="remark-highlight">npm create cloudflare@latest remix-cloudflare-template -- --framework=remix
</div></pre>
<pre><div class="remark-highlight">git   Initialize a new git repository? (recommended)
      ○ Yes  ● No
deps   Install dependencies with npm? (recommended)
       ○ Yes  ● No 
...
// Yes
╰ Do you want to use git for version control?
  Yes / No

// No
╭ Deploy with Cloudflare Step 3 of 3
│ 
╰ Do you want to deploy your application?
  Yes / No
</div></pre>
<p>package-lock.json消す</p>
<pre><div class="remark-highlight">❯ rm remix-cloudflare-template/package-lock.json
</div></pre>
<p>package.json修正
before</p>
<pre><div class="remark-highlight">    "dev": "remix dev --manual -c \"npm run start\"",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "wrangler pages dev --compatibility-date=2023-06-21 ./public",
    "typecheck": "tsc",
    "pages:deploy": "npm run build &#x26;&#x26; wrangler pages deploy ./public"
</div></pre>
<p>after</p>
<pre><div class="remark-highlight">    "dev": "remix dev --manual -c \"bun run start\"",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "wrangler pages dev --compatibility-date=2023-06-21 ./public",
    "typecheck": "tsc",
    "pages:deploy": "bun run build &#x26;&#x26; wrangler pages deploy ./public"
</div></pre>
<p>README.mdに含まれるnpmもbunに置換します</p>
<h4>GitHubActionsで自動デプロイするようにする(準備)</h4>
<p>CloudFlareの<a href="https://dash.cloudflare.com/profile/api-tokens">api-tokenダッシュボード</a><br>
ログイン直後の画面からだと右上->MyProfile->API Tokensからもアクセスできます<br>
CloudFlareWorkersの編集権限を持つTokenを作成します<br>
これから、GitHubSecretsに３つ変数を登録します<br>
先程発行したTokenをGitHubSecretsのCLOUD_FLARE_DEPLOY_TOKENに登録します<br>
CloudFlareAccountIdを、GitHubSecretsのCLOUD_FLARE_ACCOUNT_IDに登録します<br>
プロジェクト名を、PROJECT_NAMEとして登録します</p>
<h4>GitHubActionsで自動デプロイするようにする(workflow設定)</h4>
<p>oven-shとcloudflareが提供しているActionを使うだけでした<br>
masterを常にデプロイしたい場合</p>
<pre><div class="remark-highlight">name: deploy-workflow

on:
  push:
    branches:
      - master

jobs:
  deploy-production:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Bun
        uses: oven-sh/setup-bun@v1

      - name: Install dependencies
        run: bun install

      - name: Run lint
        run: bun run lint

      - name: Run build
        run: bun run build

      - name: Deploy
        id: deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUD_FLARE_DEPLOY_TOKEN }}
          accountId: ${{ secrets.CLOUD_FLARE_ACCOUNT_ID }}
          command: pages deploy --project-name=${{ secrets.PROJECT_NAME }} ./public --env=production --branch=master
</div></pre>
<h4>おわり</h4>
<p>masterにpushしたらデプロイされるようになりました<br>
bunに移行しただけでとても早くなり快適でした<br>
パブリックテンプレとして公開するかもしれません</p>

remixv2をbunでビルドしてwrangler deployする

<h4>この記事の内容</h4>
<p>Astro v3 が<a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API">View Transitions API</a>を<a href="https://developer.chrome.com/blog/astro-view-transitions/">組み込んだ</a>らしいので試しました<br>
fade(デフォルトの挙動,滑らかに遷移)と slide(横から新しいコンテンツが現れる)を試しました</p>
<h4>手順</h4>
<p>index.astro</p>
<pre><div class="remark-highlight">---
import { ViewTransitions } from 'astro:transitions';
---
&#x3C;html lang="en">
  &#x3C;head>
    &#x3C;title>My Homepage&#x3C;/title>
    &#x3C;ViewTransitions />
  &#x3C;/head>
  &#x3C;body>
    &#x3C;h2>ViewTransitions, fade&#x3C;/h2>
    &#x3C;p>&#x3C;a href="fuga/">go fuga&#x3C;/a>&#x3C;/p>
  &#x3C;/body>
&#x3C;/html>
</div></pre>
<p>fuga.astro</p>
<pre><div class="remark-highlight">---
import { ViewTransitions } from 'astro:transitions';
---

&#x3C;html lang="en">
  &#x3C;head>
    &#x3C;title>My Homepage&#x3C;/title>
    &#x3C;ViewTransitions />
  &#x3C;/head>
  &#x3C;body transition:animate="slide">
    &#x3C;h1>transition:animate="slide"&#x3C;/h1>
    &#x3C;p>&#x3C;a href="/">go home&#x3C;/a>&#x3C;/p>
  &#x3C;/body>
&#x3C;/html>
</div></pre>
<h3>動き</h3>
<p><a href="https://www.youtube.com/watch?v=yn8RlDJK-QI">Youtube</a>にアップロードしました<br>
なめらかに遷移して楽しかったです</p>
<h4>参考</h4>
<p><a href="https://docs.astro.build/ja/guides/upgrade-to/v3/">Astro v3 へのアップグレード</a></p>

Astro v3でサポートされたView Transitions APIを試す

<h4>準備</h4>
<p>PROJECT_REFにprojec-refを入れます<br>
projectの名前とは別で、対象のprojectにダッシュボートでアクセスした時の<div class="remark-highlight">project/</div>以降がproject-refです<br>
例<br>
<div class="remark-highlight">https://supabase.com/dashboard/project/{project-ref}</div></p>
<pre><div class="remark-highlight">export PROJECT_REF=project-ref
</div></pre>
<h4>手順</h4>
<pre><div class="remark-highlight"># install supabase cli
brew install supabase/tap/supabase
# login
supabase login
# link project
supabase link --project-ref PROJECT_REF
# dump data, default=schema only
supabase db dump --data-only -f supabase/dump.sql
</div></pre>

supabase cliでdumpを作成する手順

<h4>ゴール</h4>
<p>extism PDK(Rust) で plug-in (wasm)を作成し、extism SDK(Rust) で呼び出す</p>
<h4>extism とは</h4>
<p><a href="https://github.com/extism/extism">extism 公式レポジトリ</a><br>
ユニバーサルプラグインシステムを謳っている(?)OSS<br>
PDK(Plugin Development Kit)を使い plug-in(wasm)を作成し SDK(Software Development Kit)から call する<br>
PDK は<br>
Rust, AssemblyScript, Go, C/C++, Haskell, Zig<br>
SDK は<br>
Go, Ruby, Python, Node, Rust, C, C++, OCaml, Haskell, PHP, Elixir/Erlang, .NET, Java, Zig<br>
が対応している</p>
<h4>準備</h4>
<p>extism-cli のインストール</p>
<pre><div class="remark-highlight">sh &#x3C;(curl https://raw.githubusercontent.com/extism/cli/main/install.sh) /usr/local/bin
extism install latest
</div></pre>
<h4>rust-pdk を使って plug-in 作成</h4>
<pre><div class="remark-highlight">cargo new extism_pdk_rust_sample --lib
</div></pre>
<p>Cargo.toml に追記</p>
<pre><div class="remark-highlight">[lib]
crate_type = ["cdylib"]

[dependencies]
extism-pdk = "0.3.4"
serde = { version = "1.0.188", features = ["derive"] }
serde_json = "1.0.106"
</div></pre>
<p>lib.rs を編集</p>
<pre><div class="remark-highlight">#[derive(serde::Deserialize)]
struct Multiply {
    a: u32,
    b: u32,
}

#[derive(serde::Serialize)]
struct Product {
    product: u32,
}

#[plugin_fn]
pub fn multiply(Json(mul): Json&#x3C;Multiply>) -> FnResult&#x3C;Json&#x3C;Product>> {
    let product = Product { product: mul.a * mul.b };
    Ok(Json(product))
}
</div></pre>
<p>ビルド</p>
<pre><div class="remark-highlight">rustup target add wasm32-unknown-unknown
cargo build --release --target wasm32-unknown-unknown
</div></pre>
<p>extism-cli を使ってテスト</p>
<pre><div class="remark-highlight">extism call ./target/wasm32-unknown-unknown/release/extism_pdk_rust_sample.wasm multiply --input '{"a": 2, "b": 3}' --config thing=i_hope_this_flag_become_optional
</div></pre>
<h4>rusd-sdk を使って plug-in を call する</h4>
<pre><div class="remark-highlight">cargo new extism_sdk_rust_sample
</div></pre>
<p>Cargo.toml に追記</p>
<pre><div class="remark-highlight">[dependencies]
extism = "0.5.0"
serde = { version = "1.0.188", features = ["derive"] }
serde_json = "1.0.106"
</div></pre>
<p>main.rs を編集</p>
<pre><div class="remark-highlight">fn sdk_sample() {
    let wasm = include_bytes!("../../extism_pdk_rust_sample/target/wasm32-unknown-unknown/release/extism_pdk_rust_sample.wasm");
    let context = Context::new();

    // ignore official document
    let mut plugin = Plugin::new(&#x26;context, wasm, [], false).unwrap();
    let data = plugin.call("multiply", "{\"a\": 2, \"b\": 3}").unwrap();

    // bite to string
    let data_str = std::str::from_utf8(&#x26;data).expect("Failed to convert to string");

    // string to json
    let parsed: Value = serde_json::from_str(data_str).expect("Failed to parse JSON");

    // json to int
    if let Some(count) = parsed["product"].as_i64() {
        println!("product: {}", count);
    } else {
        println!("Failed to retrieve 'product' value");
    }
}

fn main() {
  sdk_sample();
}
</div></pre>
<p>実行</p>
<pre><div class="remark-highlight">cargo run
product: 6
</div></pre>
<h4>最終</h4>
<p><a href="https://github.com/nash1111/rust_to_rust_extism_example">できたもの</a></p>

extismでRust(PDK)->plug-in(wasm)->Rust(SDK)をやる

<h4>ゴール</h4>
<p>@runno/runtimeを使って、HTML内でコードを実行します。<br>
現在@runno/runtimeでサポートされているランタイムはpython,ruby,quickjs,sqlite,clang,clangpp,phpです、今回はpythonを使います。</p>
<h4>準備</h4>
<p>ライブラリ追加</p>
<pre><div class="remark-highlight">yarn add @runno/runtime
</div></pre>
<p>CORS設定をnext.config.jsに追加</p>
<pre><div class="remark-highlight">async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "require-corp",
          },
        ],
      },
    ];
  },
</div></pre>
<h4>コンポーネント作成</h4>
<pre><div class="remark-highlight">/* eslint-disable react/no-unescaped-entities */
import "@runno/runtime";

const RunnoComponent = () => {
  // @ts-ignore
  const runPythonScript = `
  print("Hi")
  number = int(input("Choose number"))
  if number % 2 == 0:
      print("That number is even")
  print("Done")
  `;
  return (
    &#x3C;runno-run runtime="python" editor controls>
      {runPythonScript}
    &#x3C;/runno-run>
  );
};

export default RunnoComponent;
</div></pre>
<h4>ページにコンポーネントの読み込みを追加</h4>
<p>SSRを無効化します</p>
<pre><div class="remark-highlight">import dynamic from "next/dynamic";

const DynamicRunnoComponent = dynamic(
  () => import("../../../components/RunnoComponent"),
  {
    ssr: false, // Disable SSR
    loading: () => &#x3C;p>Loading...&#x3C;/p>,
  }
);

const PythonExample = () => {
  return (
    &#x3C;div>
      &#x3C;h1>is even ?&#x3C;/h1>
      &#x3C;DynamicRunnoComponent />
    &#x3C;/div>
  );
};

export default PythonExample;
</div></pre>
<h4>最終的に出来たもの</h4>
<p><a href="https://nash1111-old-blog.pages.dev/playground/runno-wasi/PythonExample">runtime=pythonで指定</a></p>
<h4>参考</h4>
<p><a href="https://runno.dev/docs/runtime/">API docs</a> <a href="https://runno.dev/">runno.dev</a></p>

Next.jsで@runno/runtimeを使い、ブラウザでコード実行

<h4>ゴール</h4>
<p>またunixtimeをパースして返すパッケージを作る</p>
<pre><div class="remark-highlight">wasmer run target/wasm32-wasi/release/wasmer_datetime_parser.wasm -- 1690416880
</div></pre>
<p>を実行した時、YYYY-MM-DDで返すようにする</p>
<h4>準備</h4>
<pre><div class="remark-highlight">curl https://get.wasmer.io -sSfL | sh
rustup target add wasm32-wasi
</div></pre>
<h4>src/main.rsの編集</h4>
<p>wasi::args_getを使って入力を受け取ってパースする様にします
<a href="https://github.com/nash1111/wasmer_datetime_parser/blob/master/src/main.rs">src/main.rs</a></p>
<h4>ローカルで実行</h4>
<pre><div class="remark-highlight">cargo build --target wasm32-wasi --release
wasmer run target/wasm32-wasi/release/wasmer_datetime_parser.wasm -- 1690416880
2023-07-27 00:14:40 UTC
</div></pre>
<h4>wasmer packageとして公開</h4>
<pre><div class="remark-highlight">wasmer init
wasmer login
wasmer publish
</div></pre>
<h4>公開されたもののテスト</h4>
<p><a href="https://wasmer.io/nash1111/wasmer_datetime_parser@0.1.6">公開されたURL</a>からwasmファイルをダウンロードして</p>
<pre><div class="remark-highlight">wasmer run [filepath] -- 1690416880
2023-07-27 00:14:40 UTC
</div></pre>

wasmer packageを作って公開する (Rust)

<h4>ゴール</h4>
<p>unixtime を投げて時刻を返す API を作ります。</p>
<h4>準備</h4>
<pre><div class="remark-highlight"># target設定
rustup target add wasm32-unknown-unknown

# ブラウザが開くので、Allowを押す
yarn global add wrangler
wrangler login
</div></pre>
<h4>プロジェクト作成</h4>
<p><a href="https://developers.cloudflare.com/workers/runtime-apis/webassembly/rust/#1-create-a-new-project-with-wrangler">公式ガイド</a>に従ってテンプレートからプロジェクトを生成します</p>
<pre><div class="remark-highlight">npx wrangler generate unix_time_formatter https://github.com/cloudflare/workers-sdk/templates/experimental/worker-rust
cd unix_time_formatter
</div></pre>
<h4>開発環境での実行</h4>
<pre><div class="remark-highlight">wrangler dev
</div></pre>
<p>テンプレートのコードはリクエストが来たら"Hello, World!"返すようになっているので、確認します
<a href="https://github.com/cloudflare/workers-sdk/blob/main/templates/experimental/worker-rust/src/lib.rs">テンプレート</a></p>
<pre><div class="remark-highlight">❯ curl localhost:8787
Hello, World!
</div></pre>
<h4>コードの変更</h4>
<p>Chrono を使って unixtime を yyyy/mm/dd (曜日) HH:MM:SS で返すようにします
<a href="https://github.com/nash1111/unixtime_formatter">変更後のコード</a></p>
<h4>動作確認</h4>
<p>(wrangler dev している状態で保存をするとホットリロードが走って自動で更新されます)</p>
<pre><div class="remark-highlight">curl -X GET http://127.0.0.1:8787/$(date +%s)
2023/7/21(Fri) 08:51:05
</div></pre>
<h4>デプロイ</h4>
<pre><div class="remark-highlight">wrangler publish

# Published worker-rust (0.29 sec)
# URLが発行されます
</div></pre>
<h4>本番での動作確認</h4>
<p>wrangler publish すると URL が発行されるので</p>
<pre><div class="remark-highlight">curl -X GET [ここに発行されたURLを入れてください]/$(date +%s)
2023/7/21(Fri) 08:52:33
</div></pre>

CloudFlareWorkersでシンプルなAPIを作る(Rust)

<h4>ゴール</h4>
<p>シンプルな Actor を一つ作成すること</p>
<h4>Actor とは？</h4>
<p>wasmCloud の Actor は Actor Model の Actor を指しています。<br>
しかし、他のアクターを生成することができないアクターモデルの学術的な定義とは少し異なります。<br>
詳細は公式ドキュメントを参照してください。<a href="https://wasmcloud.com/docs/fundamentals/actors/">Overview of the Actor Model</a></p>
<h4>Actor の作成と登録</h4>
<pre><div class="remark-highlight">❯ rustup target add wasm32-unknown-unknown
</div></pre>
<pre><div class="remark-highlight">❯ wash new actor firstactor --template-name hello
🔧   Cloning template from repo wasmCloud/project-templates subfolder actor/hello...
🔧   Using template subfolder actor/hello...
🔧   Generating template...
✨   Done! New project created [your path]

Project generated and is located at: [your path]
</div></pre>
<p>firstactor/src/lib.rs に"Hello World"とだけ返すコードが生成されています。</p>
<pre><div class="remark-highlight">use wasmbus_rpc::actor::prelude::*;
use wasmcloud_interface_httpserver::{HttpRequest, HttpResponse, HttpServer, HttpServerReceiver};

#[derive(Debug, Default, Actor, HealthResponder)]
#[services(Actor, HttpServer)]
struct FirstactorActor {}

/// Implementation of the HttpServer capability contract
#[async_trait]
impl HttpServer for FirstactorActor {
    async fn handle_request(&#x26;self, _ctx: &#x26;Context, _req: &#x26;HttpRequest) -> RpcResult&#x3C;HttpResponse> {
        Ok(HttpResponse::ok("Hello, World!"))
    }
}
</div></pre>
<p>firstactor プロジェクトのルートで実行します。</p>
<pre><div class="remark-highlight">❯ wash build

# _s.wasm が生成されます
❯ ls build/firstactor_s.wasm
build/firstactor_s.wasm
</div></pre>
<p>WebUI(localhost:4000)で"Start Actor"を選び"From File"で生成された<div class="remark-highlight">_s.wasm</div>
をアップロードします。</p>
<h4>Provider の作成</h4>
<p>WebUI(localhost:4000)で"Start Provider"からデフォルトの設定で一つ作成します。</p>
<h4>Link の作成</h4>
<pre><div class="remark-highlight"># PROVIDER_IDを見ます
❯ wash get

# ACTOR_IDを見ます
❯ wash get inventory [host id]

# 環境変数を設定します
❯ export HELLO_ACTOR_ID= [actor id you see above]
❯ export PROVIDER_ID= [provider id you see above]

# Linkをつけます
❯ wash ctl link put ${HELLO_ACTOR_ID} ${PROVIDER_ID} wasmcloud:httpserver address=0.0.0.0:8087
</div></pre>
<p>Actor, Provider, Link が Active であることを確認します
<img src="/blog/wasm_uploaded.png" alt="wasm_uploaded"></p>
<h4>テスト</h4>
<pre><div class="remark-highlight">❯ curl localhost:8087
Hello, World!
</div></pre>
<p><a href="https://nash1111-old-blog.pages.dev/posts/how_to_make_wasmcloud_actor">原文</a></p>

wasmCloudでActorを作る

<h4>ゴール</h4>
<p>wasmCloud の CLI ツールの wash をインストールします</p>
<h4>インストール</h4>
<pre><div class="remark-highlight"># washのインストール
❯ curl -s https://packagecloud.io/install/repositories/wasmcloud/core/script.deb.sh | sudo bash
❯ sudo apt install wash openssl

# wasmCloudの起動
❯ wash up --detached

🛁 wash up completed successfully
🕸  NATS is running in the background at http://127.0.0.1:4222
🌐 The wasmCloud dashboard is running at http://localhost:4000
📜 Logs for the host are being written to /home/nash1111/.wash/downloads/wasmcloud_4000.log

⬇️  To stop wasmCloud, run "wash down"
</div></pre>
<p><a href="http://localhost:4000/">http://localhost:4000/</a>でダッシュボードが見えていれば起動できています
<img src="/blog/wasmCloudDashboard.png" alt="wasmCloudDashboard.png"></p>
<h4>次</h4>
<p>次の投稿で、wasm から Actor を作り、ハローワールドをします</p>

nash1111 Tech Blog