DEV Community: fayismahmood

!!!

fayismahmood — Sun, 17 May 2026 18:54:44 +0000

fayismahmood

May 17

Building a Low-Cost Image Converter on AWS With Rust Lambda

#lambda #rust #cargo

Comments

2 min read

Building a Low-Cost Image Converter on AWS With Rust Lambda

fayismahmood — Sun, 17 May 2026 18:24:38 +0000

Project demo link: https://image-ignite.vercel.app/

This started as a hobby project. I was thinking about a simple image conversion service for resizing ,convert, compress uploaded images.

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

So I started experimenting with AWS Lambda.

First Attempt: Node.js + Sharp on Lambda

My initial stack was:

Component	Tech
Runtime	Node.js
Processing	Sharp
Compute	AWS Lambda
Storage	AWS S3

The architecture was very simple:

Upload → Lambda → Process Image → Store Result

At first, Lambda felt like the perfect solution:

no idle server costs
automatic scaling
no server management
pay only when used

Exactly what I wanted for a hobby project.

The Problem I Started Noticing

After some usage, cold starts became noticeable.
Especially for image-heavy requests.

The actual image processing was fast enough, but startup time sometimes became a large part of the total request.

Approximate numbers from my experience:

Metric	Node.js + Sharp
Cold Start	~700ms – 2s
Warm Start	~50ms – 150ms
Memory Usage	~180MB – 350MB

For a workload that only runs a few seconds, that startup overhead feels significant.

Why I Switched to Rust

I rebuilt the processor using Rust Lambda.
Not because of hype.

The workload simply matched Rust better.
The difference became noticeable almost immediately.

Metric	Node.js + Sharp	Rust Lambda
Cold Start	~700ms – 2s	~80ms – 300ms
Warm Start	~50ms – 150ms	~10ms – 40ms
Memory Usage	~180MB – 350MB	~40MB – 90MB

For this type of workload, lower startup time mattered a lot more than I initially expected.

Final Thoughts

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.

Leafer Editor — A Free, Open-Source Vector Design Tool for the Browser

fayismahmood — Wed, 13 May 2026 18:54:57 +0000

No installs. No accounts. No cost. Just open the browser and start designing.

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 — Leafer Editor was built for exactly that moment.

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.

Let me walk you through every feature. But first — jump in and try it yourself:

🖥 Live demo → leafer-editor.vercel.app — no sign-up, just start designing.
⭐ GitHub → fayismahmood/leafer-editor

The Canvas

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

Pan around by holding Space 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.

Frames — Your Artboards

A Frame is the container that holds all your design elements. Think artboard in Illustrator, frame in Figma.

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

Press F or click the Frame tool, then pick a preset or draw a custom size.

The Toolbar — 9 Tools, 9 Shortcuts

At the bottom of the screen sits the toolbar:

Tool	Key	What it does
Select	`V`	Click, drag-select, move, resize, rotate
Rectangle	`R`	Draw rectangles — buttons, cards, containers
Ellipse	`O`	Circles, ellipses, arcs, pie slices
Line	`L`	Straight lines with configurable stroke
Star	`S`	3–20 point stars and polygons
Pen	`P`	Custom paths and bezier curves
Text	`T`	Inline text editing on the canvas
Image	`I`	Import images from your machine
Frame	`F`	Create a new frame with presets

Every tool has a keyboard shortcut. Switch tools without touching the mouse.

Drawing Shapes

Rectangle

Press R, 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.

Ellipse

Press O, drag. Hold Shift for a perfect circle. Supports arcs and pie slices — great for charts and progress indicators.

Line

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

Star

Press S, drag. Not just five-point stars — anywhere from 3 to 20 points. Adjust the inner radius ratio to morph from a sharp star to a flower shape.

Pen

Press P. Click to place anchor points, drag to create curves. Build custom paths and bezier shapes.

The Text Tool

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

The Properties panel gives you full typography control:

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

Fonts are lazy-loaded — only the ones you use are downloaded.

The Image Tool

Press I 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.

Everything stays local. Images are never uploaded anywhere.

The Select Tool

Press V to work with elements you've already created:

Click an element to select it and see its properties
Drag a selection box to select multiple elements at once
Drag to move selected elements
Corner handles to resize
Hover just outside a corner to rotate
Click empty space to deselect

When multiple elements are selected, property changes apply to all of them simultaneously.

The Properties Panel — Deep Styling

The right-side panel is context-aware — different controls depending on what's selected.

Fill

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

Stroke

Border color, width, and alignment — inside, centre, or outside the shape boundary. Cap and join styles for lines.

Opacity

Slider from 0% (invisible) to 100% (fully opaque) for the entire element.

Blend Modes — 16 Modes

Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity — plus Normal.

A black rectangle set to Multiply lets the texture of the layer below show through. These unlock a lot of creative effects.

Shadows

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

Action Bar

A context bar at the top of the canvas for common operations:

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

Smart Snap Guides

Drag any element and dashed alignment lines 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.

No more manual positioning or mental math about coordinates.

The Layers Panel

Switch to the Layers tab to see your canvas as a tree — every frame with all its children in z-order.

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

Export Panel

When your design is ready, export it in any format:

Format	Details
PNG	Configurable resolution, transparent background
JPG	Configurable quality
WebP	Modern format, smaller files
BMP	Uncompressed bitmap
JSON	Full Leafer scene data for programmatic use
Canvas	Raw pixel data

Export individual elements or entire frames. Pick the resolution — 1x, 2x, 3x, or custom.

Keyboard Shortcuts Summary

Shortcut	Action
`V`	Select
`R`	Rectangle
`O`	Ellipse
`L`	Line
`S`	Star
`P`	Pen
`T`	Text
`I`	Image
`F`	Frame
`Space + drag`	Pan canvas
`Scroll`	Zoom
`Delete`	Remove selected
`Ctrl/Cmd + G`	Group
`Ctrl/Cmd + ]`	Bring to front
`Ctrl/Cmd + [`	Send to back

The Tech Stack (for developers)

Layer	Technology
Canvas engine	Leafer UI + editor plugins
UI framework	React 19
Routing	TanStack Router (file-based)
State	TanStack React Store
Styling	Tailwind CSS v4
Build	Vite 8
Language	TypeScript (strict)
Lint/Format	Biome
Testing	Vitest + Testing Library

The entire editor is ~50 source files. The canvas layer (editorCanvas.ts) creates a Leafer App with an embedded Editor 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.

What's Next

Leafer Editor is in active development. On the roadmap:

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

Why I Built This

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.

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.

Star the repo, try it out, and let me know what you think in the comments.

Leafer Editor is MIT licensed. Built with Leafer UI and React.

🎓 Understanding Mutability & Variables in Rust 🦀

fayismahmood — Sat, 17 May 2025 09:52:34 +0000

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.
I’ve put together an interactive note explaining how variables and mutability work in Rust — perfect for hands-on learning!

🔗 Check it out here:
👉 Mutability & Variables in Rust on Gistr.so
https://gistr.so/thread/rust-basics-2024-lesson-6-variables-mutab-0yeo-vbkmu08

Rust is not Hard #1

fayismahmood — Tue, 13 May 2025 16:12:12 +0000

Memory safety

Gistr interactive doc

Pocketbase, readymade backend within clicks

fayismahmood — Thu, 10 Nov 2022 15:53:16 +0000

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.

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.

Here in this short article introduces a new service, which would be a solution for this problem.

What's Pocketbase?

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.

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.

Why Pocketbase.

Here are several reasons for preferring Pocketbase over other services like firebase and others.

Open source, so it is hostable in cloud services like vultr free of
cost and customisable according to your use case.
- Single file executable. So, it is easy to host on cloud instances, just start by running the executable file, nothing to configure.
- Cross platform support. Supports Windows, Linux and Mac operating systems.
- Statically build application. 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_Pocketbase memory usage is about 12MB in Windows task manager. _
- Easy to Integrate. Pocketbse officially provides Javascript and Dart Sdk which is helpful to integrate with flutter mobile apps and javascript frameworks like react and vue.

Quick start with Pocketbase.

Pocketbase is easy to get started within a few steps.

Step 1: Download and Unzip

you can download pocketbase for any of Linux, WIndows, Mac platforms from pocketbase.io documentation page. then unzip the downloaded zip with your favorite zip extractor.

Step 2: Run Pocketbase

You can run pocketbase using any console application. run console application in unzipped folder and run the command

./pocketbase serve

in Windows

pocketbase.exe serve

That's all to run a Pocketbase backend.

The console will print out the routes for the admin panel, static server and rest api server.

Go to the admin url (usually this would be : http://localhost:8090/)

First time you visit the admin panel you have to create an admin account. and you can open the admin account using these credentials.

Working with Pocketbase Collections.

You can create and manage database collections with the Pocketbase admin panel by clicking on create New Collection in the collection section.

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,

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.

Manage Users.

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.

In Pocketbase every user has a basic credential modal including email id and password, and a profile model which admin can customize them.

Working with web APIs.

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.

Step 1
Firstly you have to install Pocketbase npm package using the command
npm i pocketbase

Step 2
After the installation is completed you can import this into the frontend code. and connect with the server using the Pocketbase class.

import PocketBase from  'pocketbase';
    const client =  new  PocketBase('http://127.0.0.1:8090');

Step 3
Authenticate with your credentials, by logging in you would be allowed to access Pocketbase as the user permitted by admin.

const adminAuthData =  await client.admins.authViaEmail('test@example.com',  '123456');

Pocketbase provides various types of authentication methods like google auth and other, refer the official docs for more details.

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

const pageResult =  await client.records.getList('demo',  1, 50,  { filter:  'created >= "2022-01-01 00:00:00"',});

Refer the official doc for further details

Going to production

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.

The example shown here is based on linux server,
Step 1
Firstly you have to allow Pocketbase ports in the server by the command

[root@dev ~]$ ufw allow 80  && ufw allow 443

Step 2

Then run the pocketbase executable file by the command

  [root@dev ~]$ ./pocketbase serve --http="yourdomain.com:80"  --https="yourdomain.com:443"

Pocketbase server will run on “yourdomain.com”

Adding into Service

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 pocketbase.service and edit the file as shown below.

[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

Save the file and run the command

[root@dev ~]$ systemctl enable pocketbase.service

[root@dev ~]$ systemctl start pocketbase

These commands add pocketbase into service, though pocketbase will restart when your server restarts.

Serve static files with pocketbase

You can serve static files like html, css, using pocketbase.

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 pb_public . The static files would be served in the base pocketbase url ( usually in http://localhost:8090/)