<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: fayismahmood</title>
    <description>The latest articles on Forem by fayismahmood (@fayismahmood).</description>
    <link>https://forem.com/fayismahmood</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F171231%2Fa8d2b9e4-5d37-435a-b5ed-f7c1c21a6c5b.jpeg</url>
      <title>Forem: fayismahmood</title>
      <link>https://forem.com/fayismahmood</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/fayismahmood"/>
    <language>en</language>
    <item>
      <title>Dev Browser: Browser Automation Built for AI Agents</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Tue, 19 May 2026 17:33:47 +0000</pubDate>
      <link>https://forem.com/fayismahmood/dev-browser-browser-automation-built-for-ai-agents-4bfk</link>
      <guid>https://forem.com/fayismahmood/dev-browser-browser-automation-built-for-ai-agents-4bfk</guid>
      <description>&lt;p&gt;I recently tried applying for jobs on &lt;a href="https://www.linkedin.com" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; using the &lt;a href="https://claude.ai" rel="noopener noreferrer"&gt;Claude Chrome Extension&lt;/a&gt;, and one thing became very obvious quickly:&lt;/p&gt;

&lt;p&gt;It was taking screenshots for almost every step.&lt;/p&gt;

&lt;p&gt;Open page.&lt;br&gt;
Take screenshot.&lt;br&gt;
Click button.&lt;br&gt;
Take another screenshot.&lt;br&gt;
Navigate again.&lt;br&gt;
Another screenshot.&lt;/p&gt;

&lt;p&gt;The workflow worked, but it felt slow, expensive, and inefficient for long automation tasks.&lt;/p&gt;

&lt;p&gt;That’s why &lt;a href="https://github.com/SawyerHood/dev-browser" rel="noopener noreferrer"&gt;dev-browser&lt;/a&gt; caught my attention.&lt;/p&gt;

&lt;p&gt;Instead of relying heavily on screenshot-driven interactions, &lt;code&gt;dev-browser&lt;/code&gt; provides a lightweight browser automation runtime designed for AI agents.&lt;/p&gt;

&lt;p&gt;It runs scripts inside a &lt;strong&gt;sandboxed QuickJS WASM environment&lt;/strong&gt; with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;no host access,&lt;/li&gt;
&lt;li&gt;persistent browser pages,&lt;/li&gt;
&lt;li&gt;full Playwright APIs,&lt;/li&gt;
&lt;li&gt;and AI-friendly snapshots.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;browser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getPage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;main&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;goto&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://example.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;title&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One of the biggest advantages is persistent sessions.&lt;/p&gt;

&lt;p&gt;The browser page stays alive across multiple scripts, so agents don’t need to repeatedly reload pages or rebuild context every step. That means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;fewer screenshots,&lt;/li&gt;
&lt;li&gt;lower token usage,&lt;/li&gt;
&lt;li&gt;fewer interaction turns,&lt;/li&gt;
&lt;li&gt;and faster workflows.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Dev Browser vs Claude Extension
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Dev Browser&lt;/th&gt;
&lt;th&gt;Claude Extension&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Persistent sessions&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Limited&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Screenshot-heavy workflow&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;td&gt;High&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Token efficiency&lt;/td&gt;
&lt;td&gt;Better&lt;/td&gt;
&lt;td&gt;Higher usage&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Interaction turns&lt;/td&gt;
&lt;td&gt;Lower&lt;/td&gt;
&lt;td&gt;Higher&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Playwright compatibility&lt;/td&gt;
&lt;td&gt;Full&lt;/td&gt;
&lt;td&gt;Limited&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;For AI-powered browser automation, reducing unnecessary context transfer matters a lot.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;dev-browser&lt;/code&gt; feels less like a browser extension and more like a proper browser runtime built specifically for AI agents.&lt;/p&gt;

</description>
      <category>testing</category>
      <category>automation</category>
      <category>javascript</category>
      <category>ai</category>
    </item>
    <item>
      <title>PDF to Text Conversion with Rust on AWS Lambda</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Mon, 18 May 2026 20:23:55 +0000</pubDate>
      <link>https://forem.com/fayismahmood/pdf-to-text-conversion-with-rust-on-aws-lambda-5dbb</link>
      <guid>https://forem.com/fayismahmood/pdf-to-text-conversion-with-rust-on-aws-lambda-5dbb</guid>
      <description>&lt;p&gt;A complete guide to building a serverless PDF conversion service using Rust, pdf_oxide, and cargo-lambda.&lt;/p&gt;

&lt;h3&gt;
  
  
  Demo: &lt;a href="https://pdf-to-text-phi.vercel.app" rel="noopener noreferrer"&gt;https://pdf-to-text-phi.vercel.app&lt;/a&gt;
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Repo: &lt;a href="https://github.com/fayismahmood/pdf-to-text" rel="noopener noreferrer"&gt;https://github.com/fayismahmood/pdf-to-text&lt;/a&gt;
&lt;/h3&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;You'll need Rust 1.70+ installed, AWS CLI configured with credentials, and basic familiarity with AWS Lambda concepts. For cargo-lambda installation, follow the &lt;a href="https://www.cargo-lambda.info/guide/installation.html" rel="noopener noreferrer"&gt;official guide&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Your AWS IAM user also needs permissions for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;lambda:* (or the required Lambda deployment permissions)&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;iam:CreateRole&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;iam:AttachRolePolicy&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;iam:PassRole&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without these permissions, cargo lambda deploy may fail during the initial deployment when creating the Lambda execution role.&lt;br&gt;
To install cargo-lambda, follow the official installation guide:&lt;/p&gt;

&lt;h2&gt;
  
  
  Installing cargo-lambda
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.cargo-lambda.info/" rel="noopener noreferrer"&gt;cargo-lambda&lt;/a&gt; is the official Cargo subcommand for AWS Lambda functions.&lt;/p&gt;

&lt;h3&gt;
  
  
  macOS / Linux
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-L&lt;/span&gt; https:// cargo-lambda.info/install.sh | sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Verify: &lt;code&gt;cargo lambda --version&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Project Setup
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Create new project
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cargo lambda new pdf-converter &lt;span class="nt"&gt;--http&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;pdf-converter
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This creates an HTTP-compatible Lambda project with API Gateway integration.&lt;/p&gt;

&lt;h3&gt;
  
  
  Update &lt;code&gt;Cargo.toml&lt;/code&gt;
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight toml"&gt;&lt;code&gt;&lt;span class="nn"&gt;[package]&lt;/span&gt;
&lt;span class="py"&gt;name&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"pdf-converter"&lt;/span&gt;
&lt;span class="py"&gt;version&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"0.1.0"&lt;/span&gt;
&lt;span class="py"&gt;edition&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"2021"&lt;/span&gt;

&lt;span class="nn"&gt;[dependencies]&lt;/span&gt;
&lt;span class="py"&gt;lambda_http&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"1.0"&lt;/span&gt;
&lt;span class="py"&gt;pdf_oxide&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"0.3"&lt;/span&gt;
&lt;span class="py"&gt;tokio&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="py"&gt;version&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="py"&gt;features&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s"&gt;"macros"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Code Implementation
&lt;/h2&gt;

&lt;h3&gt;
  
  
  src/http_handler.rs
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight rust"&gt;&lt;code&gt;&lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="nn"&gt;lambda_http&lt;/span&gt;&lt;span class="p"&gt;::{&lt;/span&gt;&lt;span class="n"&gt;Body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;RequestExt&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="k"&gt;use&lt;/span&gt; &lt;span class="nn"&gt;pdf_oxide&lt;/span&gt;&lt;span class="p"&gt;::{&lt;/span&gt;&lt;span class="n"&gt;PdfDocument&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nn"&gt;converters&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;ConversionOptions&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;pub&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;crate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;enum&lt;/span&gt; &lt;span class="n"&gt;FileType&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;Html&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;Markdown&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;impl&lt;/span&gt; &lt;span class="n"&gt;FileType&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;fn&lt;/span&gt; &lt;span class="nf"&gt;from_str&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;-&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;Option&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;Self&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;match&lt;/span&gt; &lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="nf"&gt;.to_lowercase&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="nf"&gt;.as_str&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="s"&gt;"html"&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;Some&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Html&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
            &lt;span class="s"&gt;"text"&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;Some&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
            &lt;span class="s"&gt;"markdown"&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;Some&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Markdown&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
            &lt;span class="n"&gt;_&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;None&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;pub&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;crate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="k"&gt;fn&lt;/span&gt; &lt;span class="nf"&gt;function_handler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;event&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;-&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;Result&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;Response&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;Body&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Error&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;file_type&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;event&lt;/span&gt;
        &lt;span class="nf"&gt;.query_string_parameters_ref&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
        &lt;span class="nf"&gt;.and_then&lt;/span&gt;&lt;span class="p"&gt;(|&lt;/span&gt;&lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;|&lt;/span&gt; &lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="nf"&gt;.first&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"file_type"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
        &lt;span class="nf"&gt;.unwrap_or&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;file_type&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;from_str&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;file_type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="nf"&gt;.unwrap_or&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;body&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;event&lt;/span&gt;&lt;span class="nf"&gt;.body&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="nf"&gt;.to_vec&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;pdf_data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;PdfDocument&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;from_bytes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;body&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;options&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;ConversionOptions&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;default&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;page_count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;pdf_data&lt;/span&gt;&lt;span class="nf"&gt;.page_count&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="k"&gt;mut&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;String&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="o"&gt;..&lt;/span&gt;&lt;span class="n"&gt;page_count&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;page_content&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;match&lt;/span&gt; &lt;span class="n"&gt;file_type&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Html&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;pdf_data&lt;/span&gt;&lt;span class="nf"&gt;.to_html&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;options&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Text&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;pdf_data&lt;/span&gt;&lt;span class="nf"&gt;.to_plain_text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;options&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Markdown&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;pdf_data&lt;/span&gt;&lt;span class="nf"&gt;.to_markdown&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;options&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;};&lt;/span&gt;
        &lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="nf"&gt;.push_str&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;page_content&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;content_type&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;match&lt;/span&gt; &lt;span class="n"&gt;file_type&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Html&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s"&gt;"text/html"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Text&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s"&gt;"text/plain"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nn"&gt;FileType&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;Markdown&lt;/span&gt; &lt;span class="k"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s"&gt;"text/markdown"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="k"&gt;let&lt;/span&gt; &lt;span class="n"&gt;resp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nn"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;builder&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
        &lt;span class="nf"&gt;.status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="nf"&gt;.header&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"content-type"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;content_type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="nf"&gt;.body&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="nf"&gt;.into&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
        &lt;span class="nf"&gt;.map_err&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nn"&gt;Box&lt;/span&gt;&lt;span class="p"&gt;::&lt;/span&gt;&lt;span class="n"&gt;new&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nf"&gt;Ok&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;resp&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Local Testing
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Start the local server
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cargo lambda watch
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Send a PDF via curl
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-X&lt;/span&gt; POST &lt;span class="s1"&gt;'http://localhost:9000/function/function_handler?file_type=markdown'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s1"&gt;'Content-Type: application/pdf'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--data-binary&lt;/span&gt; @document.pdf
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Deployment
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Build for production
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cargo lambda build &lt;span class="nt"&gt;--release&lt;/span&gt; &lt;span class="nt"&gt;--arm64&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;--arm64&lt;/code&gt; flag targets AWS Graviton processors for better cost/performance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Deploy to AWS
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;cargo lambda deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first deployment will create an IAM role automatically. Subsequent deployments will reuse it.&lt;/p&gt;

&lt;h3&gt;
  
  
  Via AWS CLI
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Package the function&lt;/span&gt;
cargo lambda build &lt;span class="nt"&gt;--release&lt;/span&gt;

&lt;span class="c"&gt;# Deploy&lt;/span&gt;
aws lambda deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Performance Benchmarks
&lt;/h2&gt;

&lt;h3&gt;
  
  
  pdf_oxide Performance
&lt;/h3&gt;

&lt;p&gt;pdf_oxide is one of the fastest PDF libraries available, with benchmark results on 3,830 real-world PDFs:&lt;/p&gt;

&lt;h4&gt;
  
  
  Python PDF Libraries Comparison
&lt;/h4&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Library&lt;/th&gt;
&lt;th&gt;Mean Time&lt;/th&gt;
&lt;th&gt;Pass Rate&lt;/th&gt;
&lt;th&gt;License&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;pdf_oxide&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;0.8ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;100%&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;MIT&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PyMuPDF&lt;/td&gt;
&lt;td&gt;4.6ms&lt;/td&gt;
&lt;td&gt;99.3%&lt;/td&gt;
&lt;td&gt;AGPL-3.0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;pypdfium2&lt;/td&gt;
&lt;td&gt;4.1ms&lt;/td&gt;
&lt;td&gt;99.2%&lt;/td&gt;
&lt;td&gt;Apache-2.0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;pdfminer&lt;/td&gt;
&lt;td&gt;16.8ms&lt;/td&gt;
&lt;td&gt;98.8%&lt;/td&gt;
&lt;td&gt;MIT&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;pdfplumber&lt;/td&gt;
&lt;td&gt;23.2ms&lt;/td&gt;
&lt;td&gt;98.8%&lt;/td&gt;
&lt;td&gt;MIT&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h4&gt;
  
  
  Rust PDF Libraries Comparison
&lt;/h4&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Library&lt;/th&gt;
&lt;th&gt;Mean Time&lt;/th&gt;
&lt;th&gt;Pass Rate&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;pdf_oxide&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;0.8ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;100%&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;unfpdf&lt;/td&gt;
&lt;td&gt;2.8ms&lt;/td&gt;
&lt;td&gt;95.1%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;pdf_extract&lt;/td&gt;
&lt;td&gt;4.08ms&lt;/td&gt;
&lt;td&gt;91.5%&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;oxidize_pdf&lt;/td&gt;
&lt;td&gt;13.5ms&lt;/td&gt;
&lt;td&gt;99.1%&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;pdf_oxide is &lt;strong&gt;5× faster than pdf_extract&lt;/strong&gt; and &lt;strong&gt;17× faster than oxidize_pdf&lt;/strong&gt; in Rust.&lt;/p&gt;

&lt;h3&gt;
  
  
  AWS Lambda Cold Start
&lt;/h3&gt;

&lt;p&gt;Rust's minimal runtime and compiled binary size result in extremely fast cold starts:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Runtime&lt;/th&gt;
&lt;th&gt;Cold Start (typical)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Rust (provided.al2023)&lt;/td&gt;
&lt;td&gt;~50-100ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Node.js&lt;/td&gt;
&lt;td&gt;~100-200ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Python&lt;/td&gt;
&lt;td&gt;~100-300ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Java&lt;/td&gt;
&lt;td&gt;~500-2000ms&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Memory Usage
&lt;/h3&gt;

&lt;p&gt;With pdf_oxide's efficient design, memory usage stays low:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;PDF Size&lt;/th&gt;
&lt;th&gt;Peak Memory&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;100KB&lt;/td&gt;
&lt;td&gt;~5MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;1MB&lt;/td&gt;
&lt;td&gt;~20MB&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;10MB&lt;/td&gt;
&lt;td&gt;~100MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  API Usage
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Request
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;POST /function/function_handler?file_type={html|text|markdown}
Content-Type: application/pdf

&amp;lt;binary PDF data&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Response
&lt;/h3&gt;

&lt;p&gt;Returns the converted content with appropriate &lt;code&gt;content-type&lt;/code&gt; header.&lt;/p&gt;

&lt;h3&gt;
  
  
  Example with AWS CLI
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws lambda invoke &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--function-name&lt;/span&gt; pdf-converter &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--payload&lt;/span&gt; &lt;span class="s1"&gt;'{"file_type": "markdown"}'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--cli-binary-format&lt;/span&gt; raw-in-base64-out &lt;span class="se"&gt;\&lt;/span&gt;
  response.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Further Reading
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://pdf.oxide.fyi/" rel="noopener noreferrer"&gt;pdf_oxide Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.cargo-lambda.info/" rel="noopener noreferrer"&gt;cargo-lambda Guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/awslabs/aws-lambda-rust-runtime" rel="noopener noreferrer"&gt;AWS Lambda Rust Runtime&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>rust</category>
      <category>opensource</category>
      <category>webdev</category>
    </item>
    <item>
      <title>!!!</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Sun, 17 May 2026 18:54:44 +0000</pubDate>
      <link>https://forem.com/fayismahmood/-22ck</link>
      <guid>https://forem.com/fayismahmood/-22ck</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/fayismahmood/building-a-low-cost-image-converter-on-aws-with-rust-lambda-1d11" class="crayons-story__hidden-navigation-link"&gt;Building a Low-Cost Image Converter on AWS With Rust Lambda&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/fayismahmood" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F171231%2Fa8d2b9e4-5d37-435a-b5ed-f7c1c21a6c5b.jpeg" alt="fayismahmood profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/fayismahmood" class="crayons-story__secondary fw-medium m:hidden"&gt;
              fayismahmood
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                fayismahmood
                
              
              &lt;div id="story-author-preview-content-3689140" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/fayismahmood" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F171231%2Fa8d2b9e4-5d37-435a-b5ed-f7c1c21a6c5b.jpeg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;fayismahmood&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/fayismahmood/building-a-low-cost-image-converter-on-aws-with-rust-lambda-1d11" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;May 17&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/fayismahmood/building-a-low-cost-image-converter-on-aws-with-rust-lambda-1d11" id="article-link-3689140"&gt;
          Building a Low-Cost Image Converter on AWS With Rust Lambda
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/lambda"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;lambda&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/rust"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;rust&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/cargo"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;cargo&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/fayismahmood/building-a-low-cost-image-converter-on-aws-with-rust-lambda-1d11" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;6&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/fayismahmood/building-a-low-cost-image-converter-on-aws-with-rust-lambda-1d11#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
    </item>
    <item>
      <title>Building a Low-Cost Image Converter on AWS With Rust Lambda</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Sun, 17 May 2026 18:24:38 +0000</pubDate>
      <link>https://forem.com/fayismahmood/building-a-low-cost-image-converter-on-aws-with-rust-lambda-1d11</link>
      <guid>https://forem.com/fayismahmood/building-a-low-cost-image-converter-on-aws-with-rust-lambda-1d11</guid>
      <description>&lt;p&gt;&lt;strong&gt;Project demo link&lt;/strong&gt;: &lt;a href="https://image-ignite.vercel.app/" rel="noopener noreferrer"&gt;https://image-ignite.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This started as a hobby project. I was thinking about a simple image conversion service for  resizing ,convert, compress uploaded images.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Since it was a personal project, cost mattered a lot.&lt;/strong&gt;&lt;br&gt;
Keeping EC2 instances running 24/7 felt unnecessary for a workload that only existed for a few seconds per request.&lt;/p&gt;

&lt;p&gt;So I started experimenting with AWS Lambda.&lt;/p&gt;


&lt;h2&gt;
  
  
  First Attempt: Node.js + Sharp on Lambda
&lt;/h2&gt;

&lt;p&gt;My initial stack was:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Component&lt;/th&gt;
&lt;th&gt;Tech&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Runtime&lt;/td&gt;
&lt;td&gt;Node.js&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Processing&lt;/td&gt;
&lt;td&gt;Sharp&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Compute&lt;/td&gt;
&lt;td&gt;AWS Lambda&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Storage&lt;/td&gt;
&lt;td&gt;AWS S3&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The architecture was very simple:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Upload → Lambda → Process Image → Store Result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At first, Lambda felt like the perfect solution:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;no idle server costs&lt;/li&gt;
&lt;li&gt;automatic scaling&lt;/li&gt;
&lt;li&gt;no server management&lt;/li&gt;
&lt;li&gt;pay only when used&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Exactly what I wanted for a hobby project.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem I Started Noticing
&lt;/h2&gt;

&lt;p&gt;After some usage, &lt;strong&gt;cold starts&lt;/strong&gt;  became noticeable.&lt;br&gt;
Especially for image-heavy requests.&lt;/p&gt;

&lt;p&gt;The actual image processing was fast enough, but startup time sometimes became a large part of the total request.&lt;/p&gt;

&lt;p&gt;Approximate numbers from my experience:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Node.js + Sharp&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Cold Start&lt;/td&gt;
&lt;td&gt;~700ms – 2s&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Warm Start&lt;/td&gt;
&lt;td&gt;~50ms – 150ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Memory Usage&lt;/td&gt;
&lt;td&gt;~180MB – 350MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;For a workload that only runs a few seconds, that startup overhead feels significant.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why I Switched to Rust
&lt;/h2&gt;

&lt;p&gt;I rebuilt the processor using Rust Lambda.&lt;br&gt;
Not because of hype.&lt;/p&gt;

&lt;p&gt;The workload simply matched Rust better.&lt;br&gt;
The difference became noticeable almost immediately.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Node.js + Sharp&lt;/th&gt;
&lt;th&gt;Rust Lambda&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Cold Start&lt;/td&gt;
&lt;td&gt;~700ms – 2s&lt;/td&gt;
&lt;td&gt;~80ms – 300ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Warm Start&lt;/td&gt;
&lt;td&gt;~50ms – 150ms&lt;/td&gt;
&lt;td&gt;~10ms – 40ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Memory Usage&lt;/td&gt;
&lt;td&gt;~180MB – 350MB&lt;/td&gt;
&lt;td&gt;~40MB – 90MB&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;For this type of workload, lower startup time mattered a lot more than I initially expected.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;This project started as a small hobby image converter where I wanted to avoid the cost of always-on infrastructure. I initially used Node.js with Sharp on AWS Lambda, but cold starts became noticeable for short-lived image processing tasks. Moving to Rust improved startup time and reduced memory usage significantly. More importantly, it changed how I think about infrastructure — some workloads work better as temporary, event-driven compute instead of persistent servers.&lt;/p&gt;

</description>
      <category>lambda</category>
      <category>rust</category>
      <category>cargo</category>
    </item>
    <item>
      <title>Leafer Editor — A Free, Open-Source Vector Design Tool for the Browser</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Wed, 13 May 2026 18:54:57 +0000</pubDate>
      <link>https://forem.com/fayismahmood/leafer-editor-a-free-open-source-vector-design-tool-for-the-browser-176l</link>
      <guid>https://forem.com/fayismahmood/leafer-editor-a-free-open-source-vector-design-tool-for-the-browser-176l</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftvlwdt81u81l1pkwx3ls.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftvlwdt81u81l1pkwx3ls.png" alt=" " width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;No installs. No accounts. No cost. Just open the browser and start designing.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;If you've ever needed to quickly sketch a UI, create a diagram, or put together a simple graphic — and didn't want to open a heavy desktop app or sign up for yet another SaaS tool — &lt;strong&gt;Leafer Editor&lt;/strong&gt; was built for exactly that moment.&lt;/p&gt;

&lt;p&gt;It runs entirely in your browser. Everything you create stays on your machine. And it comes with a surprisingly complete set of design tools that cover the most common tasks you'd normally reach for Figma or Illustrator to handle.&lt;/p&gt;

&lt;p&gt;Let me walk you through every feature. But first — jump in and try it yourself:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🖥 Live demo →&lt;/strong&gt; &lt;a href="https://leafer-editor.vercel.app" rel="noopener noreferrer"&gt;leafer-editor.vercel.app&lt;/a&gt; — no sign-up, just start designing.&lt;br&gt;
&lt;strong&gt;⭐ GitHub →&lt;/strong&gt; &lt;a href="https://github.com/fayismahmood/leafer-editor" rel="noopener noreferrer"&gt;fayismahmood/leafer-editor&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  The Canvas
&lt;/h2&gt;

&lt;p&gt;When you first open Leafer Editor you're greeted with a clean infinite canvas — a grey workspace with a single white &lt;strong&gt;Frame&lt;/strong&gt; sitting in the centre. That frame is your artboard, the area you design inside.&lt;/p&gt;

&lt;p&gt;Pan around by holding &lt;code&gt;Space&lt;/code&gt; and dragging. Zoom with the scroll wheel. The canvas is infinite — place as many frames side by side as you need without running out of room.&lt;/p&gt;




&lt;h2&gt;
  
  
  Frames — Your Artboards
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;Frame&lt;/strong&gt; is the container that holds all your design elements. Think artboard in Illustrator, frame in Figma.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Every shape, image, and text block lives inside a frame&lt;/li&gt;
&lt;li&gt;Frames have a configurable width and height&lt;/li&gt;
&lt;li&gt;Elements that overflow the frame boundary are clipped&lt;/li&gt;
&lt;li&gt;Name frames whatever you like — names show in the Layers panel&lt;/li&gt;
&lt;li&gt;Create as many frames as you need — handy for designing multiple screens side by side&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Presets&lt;/strong&gt; for paper sizes (A4, Letter, etc.), screen dimensions (1080p, 1440p, 4K), and social media formats (Instagram, Twitter, etc.)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Press &lt;code&gt;F&lt;/code&gt; or click the Frame tool, then pick a preset or draw a custom size.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Toolbar — 9 Tools, 9 Shortcuts
&lt;/h2&gt;

&lt;p&gt;At the bottom of the screen sits the toolbar:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Tool&lt;/th&gt;
&lt;th&gt;Key&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Select&lt;/td&gt;
&lt;td&gt;&lt;code&gt;V&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Click, drag-select, move, resize, rotate&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rectangle&lt;/td&gt;
&lt;td&gt;&lt;code&gt;R&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Draw rectangles — buttons, cards, containers&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ellipse&lt;/td&gt;
&lt;td&gt;&lt;code&gt;O&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Circles, ellipses, arcs, pie slices&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Line&lt;/td&gt;
&lt;td&gt;&lt;code&gt;L&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Straight lines with configurable stroke&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Star&lt;/td&gt;
&lt;td&gt;&lt;code&gt;S&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;3–20 point stars and polygons&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Pen&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;P&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Custom paths and bezier curves&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Text&lt;/td&gt;
&lt;td&gt;&lt;code&gt;T&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Inline text editing on the canvas&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Image&lt;/td&gt;
&lt;td&gt;&lt;code&gt;I&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Import images from your machine&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Frame&lt;/td&gt;
&lt;td&gt;&lt;code&gt;F&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Create a new frame with presets&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Every tool has a keyboard shortcut. Switch tools without touching the mouse.&lt;/p&gt;




&lt;h2&gt;
  
  
  Drawing Shapes
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Rectangle
&lt;/h3&gt;

&lt;p&gt;Press &lt;code&gt;R&lt;/code&gt;, drag inside a frame. Resize with corner handles, rotate by hovering just outside a corner, round corners with the slider, and apply fills, strokes, shadows, and blend modes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ellipse
&lt;/h3&gt;

&lt;p&gt;Press &lt;code&gt;O&lt;/code&gt;, drag. Hold &lt;code&gt;Shift&lt;/code&gt; for a perfect circle. Supports arcs and pie slices — great for charts and progress indicators.&lt;/p&gt;

&lt;h3&gt;
  
  
  Line
&lt;/h3&gt;

&lt;p&gt;Press &lt;code&gt;L&lt;/code&gt;, drag. Adjust stroke width, cap style (flat/round/square), and dash patterns for dotted or dashed lines.&lt;/p&gt;

&lt;h3&gt;
  
  
  Star
&lt;/h3&gt;

&lt;p&gt;Press &lt;code&gt;S&lt;/code&gt;, drag. Not just five-point stars — anywhere from &lt;strong&gt;3 to 20 points&lt;/strong&gt;. Adjust the inner radius ratio to morph from a sharp star to a flower shape.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pen
&lt;/h3&gt;

&lt;p&gt;Press &lt;code&gt;P&lt;/code&gt;. Click to place anchor points, drag to create curves. Build custom paths and bezier shapes.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Text Tool
&lt;/h2&gt;

&lt;p&gt;Press &lt;code&gt;T&lt;/code&gt;, click inside a frame, and start typing. Leafer Editor uses an &lt;strong&gt;inline text editor&lt;/strong&gt; on the canvas — no modal, no separate input box. Type directly on the canvas, Figma-style.&lt;/p&gt;

&lt;p&gt;The Properties panel gives you full typography control:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Font family&lt;/strong&gt; — ~40 popular Google Fonts, each previewed in its own typeface in the dropdown&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Font weight&lt;/strong&gt; — Normal, Bold, 600, or 800&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Italic&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Alignment&lt;/strong&gt; — Left, Centre, Right, Justify&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Line height&lt;/strong&gt; and &lt;strong&gt;letter spacing&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Fonts are lazy-loaded — only the ones you use are downloaded.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Image Tool
&lt;/h2&gt;

&lt;p&gt;Press &lt;code&gt;I&lt;/code&gt; to open a file picker. Select any image (PNG, JPG, WebP, GIF) and it appears on the canvas at a sensible size. Drag to reposition, resize with handles, and apply opacity and blend modes like any other element.&lt;/p&gt;

&lt;p&gt;Everything stays local. Images are never uploaded anywhere.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Select Tool
&lt;/h2&gt;

&lt;p&gt;Press &lt;code&gt;V&lt;/code&gt; to work with elements you've already created:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Click&lt;/strong&gt; an element to select it and see its properties&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Drag a selection box&lt;/strong&gt; to select multiple elements at once&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Drag&lt;/strong&gt; to move selected elements&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Corner handles&lt;/strong&gt; to resize&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hover just outside a corner&lt;/strong&gt; to rotate&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Click empty space&lt;/strong&gt; to deselect&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When multiple elements are selected, property changes apply to all of them simultaneously.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Properties Panel — Deep Styling
&lt;/h2&gt;

&lt;p&gt;The right-side panel is context-aware — different controls depending on what's selected.&lt;/p&gt;

&lt;h3&gt;
  
  
  Fill
&lt;/h3&gt;

&lt;p&gt;Solid colors via hue-saturation picker with hex/RGB inputs. Switch to &lt;strong&gt;gradient mode&lt;/strong&gt; for linear or radial gradients with a multi-stop gradient bar — click to add stops, drag to reposition, double-click to remove.&lt;/p&gt;

&lt;h3&gt;
  
  
  Stroke
&lt;/h3&gt;

&lt;p&gt;Border color, width, and alignment — &lt;strong&gt;inside&lt;/strong&gt;, &lt;strong&gt;centre&lt;/strong&gt;, or &lt;strong&gt;outside&lt;/strong&gt; the shape boundary. Cap and join styles for lines.&lt;/p&gt;

&lt;h3&gt;
  
  
  Opacity
&lt;/h3&gt;

&lt;p&gt;Slider from 0% (invisible) to 100% (fully opaque) for the entire element.&lt;/p&gt;

&lt;h3&gt;
  
  
  Blend Modes — 16 Modes
&lt;/h3&gt;

&lt;p&gt;Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity — plus Normal.&lt;/p&gt;

&lt;p&gt;A black rectangle set to Multiply lets the texture of the layer below show through. These unlock a lot of creative effects.&lt;/p&gt;

&lt;h3&gt;
  
  
  Shadows
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Drop Shadow&lt;/strong&gt; — offset X/Y, blur, spread, and color. &lt;strong&gt;Inner Shadow&lt;/strong&gt; — same controls, pressed-in or embossed look. Both update in real time as you tweak sliders.&lt;/p&gt;




&lt;h2&gt;
  
  
  Action Bar
&lt;/h2&gt;

&lt;p&gt;A context bar at the top of the canvas for common operations:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Group&lt;/strong&gt; — combine selected elements into a group&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mask&lt;/strong&gt; — apply clipping masks for advanced shape workflows&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bring to Front / Send to Back&lt;/strong&gt; — control z-order with one click&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lock / Unlock&lt;/strong&gt; — prevent accidental edits&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Delete&lt;/strong&gt; — remove selected elements&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Smart Snap Guides
&lt;/h2&gt;

&lt;p&gt;Drag any element and &lt;strong&gt;dashed alignment lines&lt;/strong&gt; appear automatically — showing when you're aligned with another element's edge or centre, or with the canvas grid. The element snaps into place when you're close.&lt;/p&gt;

&lt;p&gt;No more manual positioning or mental math about coordinates.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Layers Panel
&lt;/h2&gt;

&lt;p&gt;Switch to the Layers tab to see your canvas as a tree — every frame with all its children in z-order.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Click any layer row&lt;/strong&gt; to select it on the canvas — great for elements hidden behind others&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Drag and drop&lt;/strong&gt; to reorder — canvas updates instantly&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Double-click a name&lt;/strong&gt; to rename — keeps large designs navigable&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lock and visibility toggles&lt;/strong&gt; — hide elements while you work, lock the ones you're done with&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Type icons&lt;/strong&gt; beside every row — rectangle, circle, text, image, frame&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Export Panel
&lt;/h2&gt;

&lt;p&gt;When your design is ready, export it in any format:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Format&lt;/th&gt;
&lt;th&gt;Details&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;PNG&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Configurable resolution, transparent background&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;JPG&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Configurable quality&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;WebP&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Modern format, smaller files&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;BMP&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Uncompressed bitmap&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;JSON&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Full Leafer scene data for programmatic use&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Canvas&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Raw pixel data&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Export individual elements or entire frames. Pick the resolution — 1x, 2x, 3x, or custom.&lt;/p&gt;




&lt;h2&gt;
  
  
  Keyboard Shortcuts Summary
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Shortcut&lt;/th&gt;
&lt;th&gt;Action&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;V&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Select&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;R&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Rectangle&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;O&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Ellipse&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;L&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Line&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;S&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Star&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;P&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Pen&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;T&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Text&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;I&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Image&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;F&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Frame&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Space + drag&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Pan canvas&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Scroll&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Zoom&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Delete&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Remove selected&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Ctrl/Cmd + G&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Group&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Ctrl/Cmd + ]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Bring to front&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Ctrl/Cmd + [&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Send to back&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  The Tech Stack (for developers)
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Layer&lt;/th&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Canvas engine&lt;/td&gt;
&lt;td&gt;
&lt;a href="https://www.leaferjs.com/" rel="noopener noreferrer"&gt;Leafer UI&lt;/a&gt; + editor plugins&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;UI framework&lt;/td&gt;
&lt;td&gt;React 19&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Routing&lt;/td&gt;
&lt;td&gt;TanStack Router (file-based)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;State&lt;/td&gt;
&lt;td&gt;TanStack React Store&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Styling&lt;/td&gt;
&lt;td&gt;Tailwind CSS v4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Build&lt;/td&gt;
&lt;td&gt;Vite 8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Language&lt;/td&gt;
&lt;td&gt;TypeScript (strict)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lint/Format&lt;/td&gt;
&lt;td&gt;Biome&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Testing&lt;/td&gt;
&lt;td&gt;Vitest + Testing Library&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The entire editor is ~50 source files. The canvas layer (&lt;code&gt;editorCanvas.ts&lt;/code&gt;) creates a Leafer &lt;code&gt;App&lt;/code&gt; with an embedded &lt;code&gt;Editor&lt;/code&gt; instance. Drawing tools are registered as custom tool classes. State flows through a single TanStack Store, keeping the React UI and canvas engine in sync.&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next
&lt;/h2&gt;

&lt;p&gt;Leafer Editor is in active development. On the roadmap:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Undo / Redo&lt;/strong&gt; — full history stack&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SVG export&lt;/strong&gt; — vector format support&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multi-page support&lt;/strong&gt; — organise multi-screen designs in one file&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Collaborative editing&lt;/strong&gt; — real-time multi-user canvas&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Desktop app&lt;/strong&gt; — wrapped with Tauri for offline use&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Why I Built This
&lt;/h2&gt;

&lt;p&gt;I wanted a design tool that gets out of the way. No accounts. No Electron bloat. No feature creep. Just a canvas, some shapes, and the ability to export something useful. The idea was to prove that a production-quality canvas experience can fit in a ~50-file TypeScript codebase running entirely client-side.&lt;/p&gt;

&lt;p&gt;If that resonates — designer looking for a lightweight tool, or developer curious how a canvas editor is built from scratch — Leafer Editor is worth a look.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Star the repo, try it out, and let me know what you think in the comments.&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Leafer Editor is MIT licensed. Built with &lt;a href="https://www.leaferjs.com/" rel="noopener noreferrer"&gt;Leafer UI&lt;/a&gt; and React.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>design</category>
      <category>opensource</category>
      <category>webdev</category>
      <category>react</category>
    </item>
    <item>
      <title>🎓 Understanding Mutability &amp; Variables in Rust 🦀</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Sat, 17 May 2025 09:52:34 +0000</pubDate>
      <link>https://forem.com/fayismahmood/understanding-mutability-variables-in-rust-afe</link>
      <guid>https://forem.com/fayismahmood/understanding-mutability-variables-in-rust-afe</guid>
      <description>&lt;p&gt;Rust’s ownership system starts with the basics — mutability and variable bindings. If you're just getting into Rust, this concept is crucial to grasp before diving deeper.&lt;br&gt;
I’ve put together an interactive note explaining how variables and mutability work in Rust — perfect for hands-on learning!&lt;/p&gt;

&lt;p&gt;🔗 Check it out here:&lt;br&gt;
👉 Mutability &amp;amp; Variables in Rust on Gistr.so&lt;br&gt;
&lt;a href="https://gistr.so/thread/rust-basics-2024-lesson-6-variables-mutab-0yeo-vbkmu08" rel="noopener noreferrer"&gt;https://gistr.so/thread/rust-basics-2024-lesson-6-variables-mutab-0yeo-vbkmu08&lt;/a&gt;&lt;/p&gt;

</description>
      <category>rust</category>
      <category>datastructures</category>
      <category>programming</category>
    </item>
    <item>
      <title>Rust is not Hard #1</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Tue, 13 May 2025 16:12:12 +0000</pubDate>
      <link>https://forem.com/fayismahmood/rust-is-not-hard-1-504h</link>
      <guid>https://forem.com/fayismahmood/rust-is-not-hard-1-504h</guid>
      <description>&lt;h2&gt;
  
  
  Memory safety
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://gistr.so/fayis/t/rust-is-not-hard-1-b937uwkkztuo7m5kudt0siyytva-xzgkntd" rel="noopener noreferrer"&gt;Gistr interactive doc&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Pocketbase, readymade backend within clicks</title>
      <dc:creator>fayismahmood</dc:creator>
      <pubDate>Thu, 10 Nov 2022 15:53:16 +0000</pubDate>
      <link>https://forem.com/fayismahmood/pocketbase-readymade-backend-within-clicks-21hi</link>
      <guid>https://forem.com/fayismahmood/pocketbase-readymade-backend-within-clicks-21hi</guid>
      <description>&lt;p&gt;As for a freelance developer his most works would be something like shopping cart, or content management services. However the task in the backend would be the database, file storage, and authentication management.&lt;/p&gt;

&lt;p&gt;In each of his work he fixes almost the same problems, while some chooses services like firebase and supabase for database management and other common backend services. But the problem comes when these services are unaffordable as it's expensive or hard to configure.&lt;/p&gt;

&lt;p&gt;Here in this short article introduces a new service, which would be a solution for this problem.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's Pocketbase?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://camo.githubusercontent.com/37b131ac8e55b023dece2d2d9c6315eb96ceea26242acbf130fab830eacf0642/68747470733a2f2f692e696d6775722e636f6d2f5a66443442484f2e706e67" class="article-body-image-wrapper"&gt;&lt;img src="https://camo.githubusercontent.com/37b131ac8e55b023dece2d2d9c6315eb96ceea26242acbf130fab830eacf0642/68747470733a2f2f692e696d6775722e636f6d2f5a66443442484f2e706e67" alt="enter image description here" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Pocketbase is an open source backend service, written in Go programming language, which enables a realtime database, file storage, authentication system, role and permission manager and email engine with an elegant admin ui dashboard to manage databases and other services.&lt;/p&gt;

&lt;p&gt;Pocketbase supports javascript and dart SDKs officially in order to access the backend from the client side. This makes full stack development easier than ever, as the developer shouldn't be bothered with databases, role and permission management, realtime websockets and other backend services, as Pocketbase enables these all services within clicks.&lt;/p&gt;
&lt;h2&gt;
  
  
  Why Pocketbase.
&lt;/h2&gt;

&lt;p&gt;Here are several reasons for preferring Pocketbase over other services like firebase and others.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Open source,&lt;/strong&gt; so it is hostable in cloud services like vultr free of&lt;br&gt;
cost and customisable according to your use case.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Single file executable.&lt;/strong&gt; So, it is easy to host on cloud instances, just start by running the executable file, nothing to
configure.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Cross platform support.&lt;/strong&gt; Supports Windows, Linux and Mac operating systems.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Statically build application.&lt;/strong&gt; It’s built on top of GoLang, so it’s blazing fast and memory safe.So it would be better performing even on a basic $2.5 vultr instance&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FBSUoWft4pAUX75UPhixToxALiev-ZTkcbYbB5HR7dx750_eTfEkmhrDazNeVw77YzfKdYl4mHBvoFyl9jk09ooUYF3T1y_PVYtL2PEZdrqM0ZaRJlUU7mWvLUEPAZoYw3ss48kQSitcYlHLhi7-b0HaZX6SUKIfCbkB8skYAps2uforu08keaAbnBYt9YCjk" width="659" height="121"&gt;_Pocketbase  memory usage is about 12MB in Windows task manager. _&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Easy to Integrate.&lt;/strong&gt; Pocketbse officially provides Javascript and Dart Sdk which is helpful to integrate with flutter mobile apps and javascript frameworks like react and vue.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Quick start with Pocketbase.
&lt;/h2&gt;

&lt;p&gt;Pocketbase is easy to get started within a few steps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1:&lt;/strong&gt; Download and Unzip&lt;/p&gt;

&lt;p&gt;you can download pocketbase for any of Linux, WIndows, Mac platforms from &lt;a href="https://pocketbase.io/docs" rel="noopener noreferrer"&gt;pocketbase.io documentation page&lt;/a&gt;. then unzip the downloaded zip with your favorite zip extractor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2:&lt;/strong&gt; Run Pocketbase&lt;/p&gt;

&lt;p&gt;You can run pocketbase using any console application. run console application in unzipped folder and run the command&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;./pocketbase serve
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;in Windows&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pocketbase.exe serve
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;That's all to run a Pocketbase backend.&lt;/p&gt;

&lt;p&gt;The console will print out the routes for the admin panel, static server and rest api server.&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FTGYnZddw7J47kuphIZnTNx-YZWT0OSGvAO4DQYsVriQW_Tzh5-k7DTBc9U0RUh6FB5xKiVoJ6D8AqvevIBwgq4tzIkjqs0rJ2X7z63l65LzOOGBJQG-qAuQU82QzkRdYh5mjVYLNszeoYR87pJP2OX90UtVY_tKOBiKB4Jili_QaxQTJeNZkVdVauRtz4Szd" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FTGYnZddw7J47kuphIZnTNx-YZWT0OSGvAO4DQYsVriQW_Tzh5-k7DTBc9U0RUh6FB5xKiVoJ6D8AqvevIBwgq4tzIkjqs0rJ2X7z63l65LzOOGBJQG-qAuQU82QzkRdYh5mjVYLNszeoYR87pJP2OX90UtVY_tKOBiKB4Jili_QaxQTJeNZkVdVauRtz4Szd" width="640" height="162"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Go to the admin url (usually this would be : &lt;a href="http://localhost:8090/" rel="noopener noreferrer"&gt;http://localhost:8090/&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;First time you visit the admin panel you have to create an admin account. and you can open the admin account using these credentials.&lt;/p&gt;
&lt;h2&gt;
  
  
  Working with Pocketbase Collections.
&lt;/h2&gt;

&lt;p&gt;You can create and manage database collections with the Pocketbase admin panel by clicking on create New Collection in the collection section.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2Fr2-Oip-8bahcd03-3m2i40nVePcTFlhv9Hnr_wH4pAOKz3u2tDWQPHYF1UYUTcXYBoJi5azxWQKJY1zopmw8BT90ts8AOwKnpFxaWXjDyf3976hWU24WdaNcK2Ddak3FQ7rcMsScq7LNL-tJ_tYbrim33Pcb1dBltm2FmavNr2Sn8biDuNEW3gsoRC8TSsdV" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2Fr2-Oip-8bahcd03-3m2i40nVePcTFlhv9Hnr_wH4pAOKz3u2tDWQPHYF1UYUTcXYBoJi5azxWQKJY1zopmw8BT90ts8AOwKnpFxaWXjDyf3976hWU24WdaNcK2Ddak3FQ7rcMsScq7LNL-tJ_tYbrim33Pcb1dBltm2FmavNr2Sn8biDuNEW3gsoRC8TSsdV" width="1355" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This will open a drawer to define your database schema, here you can add fields for your collection in the field tab and role and permissions in the Api rules tab. After setting fields and api rules you can click the create button to create your collection.You can upload files by creating file field in collection fields,&lt;/p&gt;

&lt;p&gt;Whenever you create a collection the collection would be displayed at the left corner as a button, by clicking the button you can add, edit, delete records to the collection.&lt;/p&gt;
&lt;h2&gt;
  
  
  Manage Users.
&lt;/h2&gt;

&lt;p&gt;In order to create users and manage you can click on the users button. Users panel allows you to create, delete, edit users and their roles as admin and user. To create a user you have to provide the user email id and password , once you created a user Pocketbase send an verification mail to the email id to user verification.&lt;/p&gt;

&lt;p&gt;In Pocketbase every user has a basic credential modal including email id and password, and a profile model which admin can customize them.&lt;/p&gt;
&lt;h2&gt;
  
  
  Working with web APIs.
&lt;/h2&gt;

&lt;p&gt;Pocketbase officially supports Dart and Javascript SDKs, which would be helpful to integrate with mobile apps and web application frameworks, like Flutter, Vanilla Javascript, React and Vue. This tutorial will focus on Javascript SDK.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1&lt;/strong&gt;&lt;br&gt;
Firstly you have to install Pocketbase npm package using the command&lt;br&gt;
&lt;code&gt;npm i pocketbase&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2&lt;/strong&gt;&lt;br&gt;
After the installation is completed you can import this into the frontend code. and connect with the server using the Pocketbase class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import PocketBase from  'pocketbase';
    const client =  new  PocketBase('http://127.0.0.1:8090');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 3&lt;/strong&gt;&lt;br&gt;
Authenticate with your credentials, by logging in you would be allowed to access Pocketbase as the user permitted by admin.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const adminAuthData =  await client.admins.authViaEmail('test@example.com',  '123456');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;&lt;em&gt;Pocketbase provides various types of authentication methods like google auth and other, refer the official docs for more details.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;As you logged in you can access collections and all other services. For example you can list the collection records using Pocketbase.records.getList function&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const pageResult =  await client.records.getList('demo',  1, 50,  { filter:  'created &amp;gt;= "2022-01-01 00:00:00"',});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Refer the official doc for further details&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Going to production
&lt;/h2&gt;

&lt;p&gt;Pocketbase is self-hostable and easy to deploy, no configuration and no dependency is needed as it is completely portable, so it could deploy just by uploading and executing the file.&lt;/p&gt;

&lt;p&gt;The example shown here is based on linux server,&lt;br&gt;
&lt;strong&gt;Step 1&lt;/strong&gt;&lt;br&gt;
Firstly you have to allow Pocketbase ports in the server by the command&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[root@dev ~]$ ufw allow 80  &amp;amp;&amp;amp; ufw allow 443
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Step 2&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Then run the pocketbase executable file by the command&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  [root@dev ~]$ ./pocketbase serve --http="yourdomain.com:80"  --https="yourdomain.com:443"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Pocketbase server will run on “yourdomain.com”&lt;/p&gt;

&lt;h2&gt;
  
  
  Adding into Service
&lt;/h2&gt;

&lt;p&gt;Instead of using previous method, you have to add Pocketbase into service. By adding into service the server would be active after you restart your server. in order to add into service you have to create a service file namely &lt;code&gt;pocketbase.service&lt;/code&gt; and edit the file as shown below.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Unit]

Description = pocketbase



[Service]

Type = simple

User =  YOUR_USER

Group =  YOUR_GROUP

LimitNOFILE =  4096

Restart = always

RestartSec = 5s

StandardOutput = append:/your/path/to/logs/errors.log

StandardError = append:/your/path/to/logs/errors.log

ExecStart =  /your/path/to/pocketbase serve --http="yourdomain.com:80"  --https="yourdomain.com:443"



[Install]

WantedBy = multi-user.target
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Save the file and run the command&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[root@dev ~]$ systemctl enable pocketbase.service

[root@dev ~]$ systemctl start pocketbase
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;These commands add pocketbase into service, though pocketbase will restart when your server restarts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Serve static files with pocketbase
&lt;/h2&gt;

&lt;p&gt;You can serve static files like html, css, using pocketbase.&lt;/p&gt;

&lt;p&gt;In order to enable static serving you have to create a folder named ‘pb_public’ in the pocketbase base directory and copy files to the &lt;code&gt;pb_public&lt;/code&gt; . The static files would be served in the base pocketbase url ( usually in &lt;a href="http://localhost:8090/" rel="noopener noreferrer"&gt;http://localhost:8090/&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2Fee-32TmhcyRdzLZpV4Xe077sneGPdbuftaELgPK93tPdVPDr-SgXQcOThGnxtxx6VUtH0ilDICpD2mg-3RcRORhDQu8SQ8g2dENSrfcUGAVK0InPuq-55b9U42t4m4UvK_xpEnd-Ic4PMqfHuYL12kuAwkd8YNQwzjLD8NuNv6h1h-rotPNT0hcnymF_lU9D" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2Fee-32TmhcyRdzLZpV4Xe077sneGPdbuftaELgPK93tPdVPDr-SgXQcOThGnxtxx6VUtH0ilDICpD2mg-3RcRORhDQu8SQ8g2dENSrfcUGAVK0InPuq-55b9U42t4m4UvK_xpEnd-Ic4PMqfHuYL12kuAwkd8YNQwzjLD8NuNv6h1h-rotPNT0hcnymF_lU9D" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>go</category>
      <category>webdev</category>
      <category>fullstack</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
