DEV Community

How to turn a slide screenshot into a PowerPoint someone else can edit

AI disclosure: This tutorial was drafted and reviewed using AI for Image2PPT. Say you're handing off a monthly dashboard. You have a PNG that looks exactly the way you want, but next month someone else needs to rename a metric and update a chart. Dropping the PNG into PowerPoint solves today's presentation. It leaves next month's edits inside the image. Before rebuilding the slide, write down what will change. On a dashboard that might be the date, a couple of figures, and the data behind a chart. Those things need to be separate PowerPoint objects. A decorative illustration can stay a picture. If only a few things change, rebuild those by hand Insert the image into a blank slide and use it as a layout reference. Create PowerPoint text boxes for the labels and figures you need to update. If a label sits on a solid-colored card, you can cover the old text with a matching rectangle before adding the new one. If it sits over a photo or gradient, the patch will often show. If you can regenerate the image, leave that area blank and add the label in PowerPoint. Build a chart from the source data if someone will need to update the values. A chart copied from a screenshot can look right but still behave like a picture. If you don't have the source data, ask for it rather than estimating the numbers from bar heights. If you have several pages, try the hardest one first If every page has a dozen labels, rebuilding all of them by hand is a different job. An image-to-PPTX converter can give you a starting point. Pick the hardest page someone will actually have to maintain. If that's the dashboard with dense labels and overlapping shapes, start there, not with the title slide. Disclosure: I build Image2PPT. Here's a public dashboard source image and the PPTX rebuilt from it. The exported file contains “Renewal Risk” as a text object. Open it in PowerPoint and try replacing “Renewal Risk” with “Renewal Risk for New Customers.” See whether the longer label still fits. Then move the surrounding card a little. If they select together, open the Selection Pane to see whether they’re grouped. If the card is part of a picture, only rebuild it if someone needs to move it. Apply the same test to any chart you need to maintain. Select it and look for Chart Design → Edit Data. In a copy, change one value and see whether the chart updates. Being able to change a number drawn next to a bar isn't the same as being able to update the chart. Before handing the deck off, make the exact edit the next person is likely to make. If the title, labels or data they need can be changed without redoing the page, you're done. Keep the original image and send the source workbook too if the chart depends on it.

Powered by Readybot.io

Nov 15, 2026

DEV Community

df-script - a 43kB zero-dependency, expression-based DataFrame engine for TypeScript and JavaScript

Docs & Interactive Playground: https://df-script.js.org AI Agent Docs: https://df-script.js.org/llms-full.txt GitHub Repository: https://github.com/trentamorris/df-script Install: npm install df-script License: MIT Overview Heavily inspired by modern columnar engines like Polars and Pandas, df-script packs 300+ declarative operations into a 43kB, zero-dependency DataFrame engine for modern JavaScript and TypeScript environments. It lets you easily execute complex multi-column groupings, relational joins, windowed rolling statistics, string parsing, temporal conversions, and much more with a fluent, expressive API. Why df-script? For most web applications, performing complex data transformations requires maintaining a dedicated backend service. Suddenly, an otherwise straightforward application introduces deployment pipelines, network latency, serialization bottlenecks, asynchronous state management, and ongoing cloud hosting bills, all just to run operations modern client CPUs can perform in milliseconds. To avoid this, many developers implement hand-written functions or native chains of .map(), .filter(), and .reduce() to transform data directly in the browser. These chained operations repeatedly traverse the dataset and flood memory with intermediate objects, degrading performance and freezing the UI. Worse, what starts as a simple utility quickly devolves into hundreds of lines of fragile boilerplate once real-world edge cases surface. df-script changes this equation entirely. It introduces a 43kB zero-dependency, column-oriented DataFrame engine constructed specifically to enable complex chained data transformations directly in the browser with zero network latency and no server maintenance. By avoiding high-level array iterators like .map() and .reduce() in favor of contiguous columnar loops, df-script drastically cuts intermediate object allocations to reduce garbage collection pressure. Every function is backed by a dedicated 1:1 test suite covering hundreds of extreme edge cases, so you never have to hand-roll fragile data logic again. Built-In CSV & NDJSON Ingestion + Multi-Metric GroupBys You don't need external parsers to ingest raw text feeds. df-script parses CSV, JSON, and NDJSON directly into columnar storage and runs declarative aggregations with full TypeScript inference: import { $df } from "df-script";

const rawCsv = region,category,revenue,quantity,timestamp East,Hardware,450,3,2026-02-01 East,Hardware,550,5,2026-02-10 West,Software,1200,1,2026-01-20;

const salesSummary = $df
.readCsv(rawCsv)
.groupBy(["region", "category"])
.agg([
$df.col("revenue").sum().alias("total_revenue"),
$df.col("revenue").mean().round(2).alias("avg_revenue"),
$df.col("quantity").sum().alias("units_sold"),
$df.col("timestamp").str.toDatetime().dt.year().alias("year"),
])
.sort("total_revenue", { descending: true });

console.log(salesSummary.toDicts());
/
+--------+----------+---------------+-------------+------------+------+
| region | category | total_revenue | avg_revenue | units_sold | year |
+--------+----------+---------------+-------------+------------+------+
| West | Software | 1200 | 1200 | 1 | 2026 |
| East | Hardware | 1000 | 500 | 8 | 2026 |
+--------+----------+---------------+-------------+------------+------+
/
Partitioned Window Functions (.over()) & Rolling Metrics Compute group-partitioned metrics, cumulative sums, rolling statistics, and exponentially weighted moving averages without manual grouping and merging: const transactions = $df.data([
{ region: "East", revenue: 450 },
{ region: "East", revenue: 550 },
{ region: "West", revenue: 1200 },
]);
/
transactions:
+--------+---------+
| region | revenue |
+--------+---------+
| East | 450 |
| East | 550 |
| West | 1200 |
+--------+---------+
/

When building a React application, we usually divide our application into small components. For example, an e-commerce website may have: Navbar component Product component Cart component Footer component Sometimes, one component needs to send data to another component. This is where Props come in. 1. What are Props? Props stands for Properties. Props allow us to pass data from one component to another in React. In simple words, props help components share data with other components. For example, we can send a username from the App component to the Profile component. 2. How to Pass Props? Let's understand with a simple example. App.jsx function App() {
return (

);
}

export default App;
Here, we are passing name="Lokesh" to the Profile component. Profile.jsx function Profile(props) {
return (

Hello, {props.name}

);
}

export default Profile;
Output: Hello, Lokesh
Let's understand what happened: App sends the name Lokesh to Profile. Profile receives the data through props. We display the name using props.name. That's how props work! 3. Passing Multiple Props We can pass more than one value to a component. function App() {
return (

);
}
Now, we can receive these values in the Student component. function Student(props) {
return (

Name: {props.name}

Age: {props.age}

Course: {props.course}

);
}
We can pass different types of data through props, such as: Strings Numbers Arrays Objects Functions Boolean values 4. What is Props Destructuring? Instead of writing props.name, props.age, and props.course every time, we can use destructuring. Example: function Student({ name, age, course }) {
return (

Name: {name}

Age: {age}

Course: {course}

);
}
Here, we directly get the values from props. This makes our code shorter and easier to read. 5. Passing Props to Reusable Components One of the biggest advantages of props is that we can reuse the same component with different data. Imagine we are creating an e-commerce website with multiple product cards. Instead of creating a separate component for every product, we can create one reusable Product component. App.jsx function App() {
return (

  <Product name="Mobile" price={20000} />

  <Product name="Headphones" price={2000} />
</div>

);
}
Product.jsx function Product({ name, price }) {
return (

{name}

Price: ₹{price}

);
}
The same Product component displays different products based on the props it receives. This helps us avoid writing the same code again and again. 6. Important Rules About Props There are a few important things to remember: Props are used to pass data between components. Data usually flows from parent components to child components. Props can contain different types of values. Props are read-only. A child component should not directly modify the props it receives. We can use destructuring to make props easier to read. 7. Props vs State Props and State are both used to work with data in React, but they have different purposes. Props State Used to receive data from a parent component Used to manage data inside a component Read-only for the receiving component Can be updated using a state setter Passed from parent to child Managed by the component that owns it For example: Props: Passing a product name from App to Product. State: Updating the quantity of a product when the user clicks the + button.

Powered by Readybot.io

Nov 15, 2026

DEV Community

AI is the assistant, not the staff

The series so far: The specification comes first. Why I write a specification before any screens, and the tests I hold one to. The specification had to change. The review of version 3 asked for decisions, not features, and those decisions became version 4. Build in stages. The build order version 4 created, the five stages in the running site, and why payments waited. What you can do on the site today. A tour of Exit 719 as it stood: one account, many groups, what members and owners see, and what was not built yet. This post. Who is in the room while I build: the AI tools I use, the weekly limit on each, and the decisions I keep. The first four posts were about the specification, the review that changed it, the stage order, and what Exit 719 does today. This one is about who is in the room while I build it. Most days that is me, and an AI assistant with a weekly limit. What I used to have At my last company I still did the coding, the AWS work, and the version control. The staff was lean. We had a few coders, a design team, and a CSS team. The coders split their time between SQL Server and C# on .NET 4. The pages were AJAX. We used libraries that already contained the grids, the editors, and the other controls, so a screen started from a part that existed. That was a small team, and it was still a team. Someone else could look at a page. Someone else owned the stylesheet. Someone else had already built the control I was about to drop on a form. This time I am solo. Exit 719 is .NET 10, Razor pages, and PostgreSQL, on a Linux machine I set up myself. There is no control library waiting for me, and there is no second developer at the next desk. AI is the assistant I use to review documents and code, and to show me the strong points and the weak ones. It is not a second employee. It does not own the specification, and it does not decide when a stage is done. The tools, and the limit on each one On this computer I use two Grok applications, SuperGrok and Grok Bot. Each one has its own weekly usage limit. When a tool is near the limit, I stop and decide what is worth the rest of the week. That limit is useful. It keeps me from asking for ten half-thought changes at midnight. I also use Poe when I want another model, or when I want a chunk of code or a document review that should not come from the same model that wrote the draft. Poe can reach the other major models. I send the same review to more than one of them. They do not agree. That is why I do it. A single review agrees with the person who wrote the page. Two reviews argue, and the argument is where the weak spot shows up. I am also putting Claude Code on this machine, a local application, to help with the code itself. Grok has been the environment and the long specification work. Poe has been the second opinion. Claude Code is the next pair of hands in the editor. None of them replace the decision. The prompt is a document, not a sentence The habit that matters most is the same habit as the specification. When I want a change, I write a prompt document. I read it more than once. I fix the vague lines before I hand it to the bot. Then the local bot implements that document. The writing is what flushes the idea out. By the time the bot sees it, the feature has a shape: what the screen shows, what it must not do, and what "done" means. Version 3 of the Exit 719 specification went through that kind of review before it became version 4. A prompt for a smaller change goes through a shorter version of the same pass. If I skip it, I get a confident answer to a question I had not finished asking. The machines I run Zorin Linux. Grok integrated Visual Studio Code on that machine. It could have been another Linux. The point is that the bot sat with me through the setup: the local environment, GitHub, and AWS. I have built AWS environments myself for years. This time I gave the bot the prompts, it did the setup, and it saved me a few days. It also set up the GitHub repository, prepa...

Powered by Readybot.io

Nov 15, 2026

DEV Community

Building a Privacy-First Password Strength Checker with JavaScript

javascript #cybersecurity #webdev #showdev Password security is an important part of everyday digital safety. For my SecurePass project, I wanted to explore how a browser-based application could provide useful password feedback without sending the entered password to a server. Introducing SecurePass SecurePass is an educational password strength analyser and random password generator built using HTML, CSS and JavaScript. The application runs locally in the browser. Its main features include: Live password strength feedback Common-password and predictable-pattern checks Improvement suggestions Random password generation Responsive design Automated tests How Password Analysis Works The application evaluates factors such as password length, character variety and predictable patterns. It then displays a score between 0 and 100. However, this is a heuristic score. A high score does not guarantee that a password is secure. A password may look complex but still be compromised, reused or vulnerable to other attacks. Generating Random Passwords One technical decision was using the browser's Web Crypto API. The generator uses crypto.getRandomValues() as its source of secure randomness. It also uses rejection sampling to avoid modulo bias when selecting characters. This is preferable to relying on Math.random() for security-sensitive password generation. Privacy Considerations SecurePass does not require a backend to analyse passwords. The repository documents that passwords are not uploaded, stored or sent to analytics services. There are still limitations. For example, copying a password to the system clipboard can expose it to other software. The application also does not check whether a password has appeared in a known data breach. Testing and Future Improvements The project includes automated tests using Node.js's built-in test runner. Planned improvements include: Evaluating a well-reviewed password estimation library Adding continuous integration Improving accessibility testing Adding a real application screenshot What I Learned This project helped me explore privacy-aware frontend design, browser cryptography and automated testing. It also reinforced the importance of communicating security limitations clearly. For real accounts, I recommend using unique passwords, a trusted password manager and multi-factor authentication. GitHub: https://github.com/tasnem-tech/securepass-password-checker What additional security features would you consider useful in an educational password tool?

Powered by Readybot.io

Nov 15, 2026

DEV Community

Browser Image Upload to Object Storage: 4 Retention Checks for Logistics Exports

Browser Image Upload to Object Storage: 4 Retention Checks for Logistics Exports Short answer: use a private bucket, let the server create a tenant-bound object key, and give the browser a presigned upload URL. For logistics product images, the difficult decision is not how to move bytes. It is what deletion means after an export has been generated. Option Browser upload Retention boundary Tenant export fit Choose it when Amazon S3 Presigned PUT or POST Lifecycle, versioning, Object Lock options Strong AWS governance is already in place Google Cloud Storage Signed URLs Lifecycle and retention policies Strong The application is GCP-native Cloudflare R2 Presigned URLs Lifecycle semantics need careful review Good The wider system is Cloudflare-centered A shared REST storage surface Presigned URLs Private objects plus application-managed deletion Good for smaller teams Minimal SDK and credential glue matters My decision rule is narrow: choose the shared REST path when private tenant images, explicit application deletion, and a short implementation path matter more than storage-native retention locks or replication. Infrai's concrete advantage is one REST API: pure HTTP, no SDK to install, and any runtime that can send an HTTP request can call it. One key covers a broad backend surface with one bill, which reduces credential inventory and glue when the workflow later connects image processing to storage. It does not turn a prefix into an authorization policy or make deletion immutable. The limitation is just as important: one key and one bill also create a wider trust boundary. Infrai's second advantage is a single key and a single bill across the broader backend surface, which removes credential inventory and billing reconciliation work when image processing connects to storage. If your security review requires separate provider accounts or independent billing controls, choose direct S3 or GCS instead. The second advantage is a single key and a single bill across the broader backend surface. That removes a credential inventory and billing reconciliation step when image processing connects to storage. How can I upload an image directly to object storage using browser JavaScript? Very little. The application server should know the tenant, user, generated object key, and retention class. The browser needs a file input, a temporary upload URL, and the result of the upload. It should never receive the platform credential. Keep it private. For a product catalog, I would use a key such as tenant_42/products/sku-8841/source.jpg. That prefix makes listing and cleanup understandable. It is not a security boundary. The database still decides whether the current user may write or read that object. The server creates one presigned URL for one intended object. It records the object location only after checking the upload response, then associates that location with the tenant and product row. A filename supplied by a user is data, not an object identity. Generate the key on the server. Here is the small TypeScript boundary. The presign function belongs on the application server. The file upload itself goes to the returned URL, without the platform authorization header. const apiKey = process.env.INFRAI_API_KEY;
const apiBase = process.env.INFRAI_API_BASE_URL;

if (!apiKey || !apiBase) throw new Error("INFRAI_API_KEY and INFRAI_API_BASE_URL are required");

async function presignObject(bucket: string, key: string, operationId: string): Promise {
for (let attempt = 0; attempt < 4; attempt += 1) {
const response = await fetch(
${apiBase}/storage/object/presign/${encodeURIComponent(bucket)}/${encodeURIComponent(key)},
{
method: "POST",
headers: {
Authorization: Bearer ${apiKey},
"Content-Type": "application/json",
"Idempotency-Key": operationId,
},
body: JSON.stringify({ acl: "private" }),
},
);

if (response.ok) {
  const payload = (aw...

Powered by Readybot.io

Nov 15, 2026

DEV Community

GitHub Actions Workflow Lockfile: Pin Transitive Deps

GitHub just made workflow lockfiles generally available, and the gh actions-lock command finally answers a question that SHA pinning never could: what about the actions your actions call? A GitHub Actions workflow lockfile records exact commits for actions and their transitive dependencies, while your YAML keeps its readable @v4 style references. That's the release. The harder part is rolling it out without freezing CI, and knowing what it still doesn't prove. TL;DR A lockfile fixes which commit runs, including the nested actions you never see in your YAML. It's a real upgrade over hand pinning the top level only. Roll it out one workflow at a time, and add a guard that fails a PR when a uses: line changes without the lockfile changing. It says nothing about how an action was built or whether your repo is configured safely. SLSA provenance and OpenSSF Scorecard cover those, and you still need both questions answered. Dependency risk in workflow YAML Here's the workflow most of us have in a repo right now: # .github/workflows/ci.yml
name: ci
on: [pull_request]
permissions:
contents: read
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: your-org/setup-toolchain@v2
- run: npm test
Two uses: lines, and they look harmless. But @v2 is a Git tag, and a tag is a pointer that someone with write access can move. If setup-toolchain is a composite action, it has its own uses: lines inside its action.yml, and those have their own tags. You reviewed two lines. You're running a tree. The old fix was replacing every tag with a 40 character SHA. It works for the top level, it makes the YAML unreadable, and it doesn't reach the nested layer unless the action's author pinned too. You can't pin someone else's action.yml from your repo. That gap is the footgun, and it's the specific thing the lockfile closes. This matters more once your pipelines do real work on their own. If you're moving toward production AI agent workflows, CI is where those agents get tokens, and an action you never reviewed runs with the same job permissions as the ones you did. gh actions-lock migration Before you generate anything, find out what you have. This script needs only the Python standard library. It reads your workflows and any local composite actions, then sorts each reference by how it's pinned: #!/usr/bin/env python3

audit_uses.py: run from the repo root

import collections
import pathlib
import re

USES = re.compile(r"""^\s(?:-\s)?uses:\s*['"]?([^'"\s#]+)""")
SHA = re.compile(r"^[0-9a-f]{40}$")

def classify(ref: str) -> str:
if ref.startswith("./"):
return "local"
if ref.startswith("docker://"):
return "docker"
if "@" not in ref:
return "unknown"
return "sha" if SHA.match(ref.rsplit("@", 1)[1]) else "mutable"

root = pathlib.Path(".github")
files = [p for p in root.rglob("*") if p.suffix in {".yml", ".yaml"}]
found = collections.defaultdict(set)

for path in files:
for line in path.read_text(encoding="utf-8").splitlines():
match = USES.match(line)
if match:
found[classify(match[1])].add(f"{match[1]} ({path})")

for kind in sorted(found):
print(f"\n{kind}: {len(found[kind])}")
for item in sorted(found[kind]):
print(f" {item}")
The mutable bucket is your migration list. Now resist doing the whole org in one PR. Here's the order I'd use: Audit with the script above and save the output, so you've got a before picture. Lock one workflow that's low stakes but runs often. A docs build is ideal. Run gh actions-lock, commit what it generates, and read the result before you merge. I'm leaving flags out on purpose: the changelog entry and gh actions-lock --help are the source of truth for a tool this new. Review the transitive entries. This first read is where you'll learn what your actions actually depend on. Expand to the workflows that hold deploy credentials once a few normal PRs have passed through. Transiti...

Powered by Readybot.io

Nov 15, 2026

DEV Community

Building TeachBack AI: An Adaptive Study Coach Using NLP

Tags: #ai #python #machinelearning #education Have you ever read a chapter several times, felt confident about it, and then struggled to explain the topic without looking at your notes? This is one of the learning problems I wanted to explore when developing TeachBack AI. What Is TeachBack AI? TeachBack AI is an adaptive study-coaching application that encourages students to explain concepts in their own words. Rather than simply asking learners to recognise the correct answer, the application uses a teach-back approach. The basic learning cycle is: Read or upload study notes. Identify important concepts. Explain a concept in your own words. Receive feedback. Practise weaker areas. Track progress over time. The Technology The project uses natural language processing and semantic similarity. Its documented components include: Sentence-BERT: The all-MiniLM-L6-v2 model is used to compare the meaning of student explanations with source material. TF-IDF: Helps identify important terms and concepts. Cosine similarity: Supports text comparison and provides a fallback mechanism. Streamlit: Provides the interactive user interface. The application is designed to run without a paid API key. Why Semantic Similarity? Two explanations can express similar ideas using different words. A simple keyword-matching system may struggle to recognise this. Semantic embeddings provide a way to compare text based on learned representations of meaning. However, similarity does not guarantee factual correctness or deep understanding. A response can be semantically close to reference material while still containing errors. Adaptive Learning TeachBack AI uses mastery information to prioritise topics where the learner appears to need more practice. The repository also describes features such as missing-concept detection, adaptive cloze practice and progress tracking. The objective is to encourage active explanation rather than passive rereading. Limitations This is an educational prototype. It has not been established that the system improves learning outcomes compared with conventional teaching methods. The quality of its feedback depends on the source notes, concept extraction and similarity model. Future evaluation should involve real learners, human-reviewed explanations and comparisons with established study methods. What I Learned Building this project helped me explore how NLP can support an interactive educational workflow. It also highlighted the difference between measuring text similarity and measuring actual student understanding. Conclusion TeachBack AI is part of my interest in applying machine learning to practical educational problems. GitHub: https://github.com/tasnem-tech/teachback-ai Do you think AI study tools should focus more on generating answers or helping students explain concepts themselves?

Powered by Readybot.io

Nov 15, 2026

DEV Community

Props Drilling in React

When building React applications, we use props to pass data from one component to another. But what happens when we need to pass data through multiple components, even when some of those components don't need that data? This is called Props Drilling. Let's understand it with a simple example. 1. What is Props Drilling? Props Drilling happens when we pass data from a parent component to a deeply nested child component through multiple intermediate components. In simple words, we pass props through components just to reach another component that actually needs the data. 2. Understanding Props Drilling with an Example Imagine we have three components: App Profile User The App component has a username, and the User component needs to display it. But the User component is inside the Profile component. Let's see how we pass the data. App.jsx function App() {
const username = "Lokesh";

return ;
}

export default App;
Here, App sends the username to Profile. Profile.jsx function Profile({ username }) {
return ;
}
Profile receives the username and passes it to User. User.jsx function User({ username }) {
return

Welcome, {username}

;
}

export default User;
User finally receives the username and displays it. Output: Welcome, Lokesh
3. Why is This Called Props Drilling? Look at how the data travels: App
|
| username
↓
Profile
|
| username
↓
User
The App component sends the username to Profile. Profile doesn't need the username for its own purpose. It only passes it to User. This repeated passing of props through intermediate components is called Props Drilling. 4. What Problems Does Props Drilling Cause? Props Drilling is not always bad. For small applications, it is perfectly fine. But when an application becomes larger, it can cause some problems: More code: We need to pass the same props through multiple components. Difficult to maintain: Changing the data flow can become complicated. Unnecessary props: Some components receive data they don't actually use. 5. How Can We Avoid Props Drilling? React provides a feature called Context API. With Context API, we can share data between components without passing props through every intermediate component. Let's use createContext and useContext. App.jsx import { createContext } from "react";
import Profile from "./Profile";

// Creating context
export const UserContext = createContext();

function App() {
const username = "Lokesh";

return (

);
}

export default App;
Here, we create a context and provide the username to the components inside the Provider. Profile.jsx import User from "./User";

function Profile() {
return ;
}

export default Profile;
Notice that Profile doesn't need to receive or pass the username anymore. User.jsx import { useContext } from "react";
import { UserContext } from "./App";

function User() {

const username = useContext(UserContext);

return

Welcome, {username}

;
}

export default User;
Now User can directly access the username using useContext(). We no longer need to pass the username through Profile. 6. Props Drilling vs Context API Props Drilling Context API Passes data through multiple components Shares data through a Provider Intermediate components pass props Intermediate components don't need to pass the value Useful for simple data flow Useful for data shared by many components 7. When Should We Use Context API? Context API can be useful when multiple components need the same information. For example: Dark Mode: Share the selected theme across components. Authentication: Share logged-in user information. Shopping Cart: Share cart information across different pages. Language Settings: Share the selected language. However, don't use Context API for every situation. For simple parent-to-child communication, normal props are usually enough.

Powered by Readybot.io

Nov 15, 2026

DEV Community

I Built a 100% Offline Resume Builder So I Wouldn't Have to Share My Phone Number & Email

Tired of spam calls and paywalled PDFs, I created PrivyResume—a local-first resume workbench that keeps your personal data strictly in your browser. Whenever you try to update your resume online, almost every website follows the exact same playbook: Let you spend 30 minutes typing out your entire career history. Force you to create an account with your email and phone number. Hit you with a surprise paywall right when you click "Download PDF." Sell or leak your contact details—leading to endless spam calls and shady recruiter messages. I got tired of handing over my personal phone number and email address to random databases just to generate a clean PDF. So, I built PrivyResume for my own use. What is PrivyResume? PrivyResume is a 100% client-side, offline-capable resume workbench. There are no user accounts, no backend databases, and zero tracking scripts. Here is how it works: Full Privacy First (Zero Servers): Your phone number, email address, and work history stay strictly inside your browser's localStorage. Nothing ever leaves your device or touches a server. Multi-Profile Support: Create and switch between multiple resume versions locally (for example, one tailored for Frontend roles and another for Full-Stack) right inside the browser. 1-Click Share Link: Need to send a live version quickly? Generate a shareable link with a single click. Export & Import via JSON: Because your data lives locally in your browser, you can download your resume as a raw .json file anytime to back it up or move it to another device. Free PDF Export & Print: Generate clean, print-ready PDFs with zero watermarks or paywalls. Built to Scratch My Own Itch I originally built this purely as a personal tool so I could keep my master resume backed up as a simple JSON file and export clean PDFs without worrying about data harvesting. If you are currently job hunting—or just want a fast, private way to maintain your resume without creating yet another account—give it a try here: Try PrivyResume I would love to hear your thoughts, feedback, or feature ideas in the comments!

Powered by Readybot.io

**DEV Community** ## I Built a 100% Offline Resume Builder …

Nov 15, 2026

Pixel

Pixel

Announcements

How to turn a slide screenshot into a PowerPoint someone else can edit

df-script - a 43kB zero-dependency, expression-based DataFrame engine for TypeScript and JavaScript

Free Web Application Uptime Monitoring — Comparing Node.js Tools for Tenant Experiments

The comment that has been lying for six years

Build a Sticky Header and Hero Section From Scratch

Willow : 99,99 % de fidélité, avec quels essais retenus ?

Cloudflare Measures the Markdown It Serves to AI Agents

Introducing DCO Cyber Labs: Building Practical Cybersecurity Investigation and Digital Forensics Training

I read ChatGPT's new business terms so you don't have to

Developer lessons from Apple's Photos Storage entitlement fix

Facebook Scams: Hacked Accounts, Fake Profiles and Marketplace Traps to Avoid

How to Design Reconnect-Safe Stale User Cleanup for Online Classrooms — A Runbook

Ada Virtual Assistant

Australia Daily AI & LLM Briefing - November 16, 2026

Điểm tin AI & Mô hình Ngôn ngữ Lớn (LLMs) tại Úc - Ngày 16/11/2026

Exploring Global Air Pollution Trends with Python and Pandas

Flisk: run a multi-service app on your laptop with one command (and what it does not do)

Props in React

Hello, {props.name}

Name: {props.name}

Name: {name}

{name}

AI is the assistant, not the staff

Building a Privacy-First Password Strength Checker with JavaScript

Browser Image Upload to Object Storage: 4 Retention Checks for Logistics Exports

GitHub Actions Workflow Lockfile: Pin Transitive Deps

audit_uses.py: run from the repo root

Building TeachBack AI: An Adaptive Study Coach Using NLP

Props Drilling in React

Welcome, {username}

Welcome, {username}

I Built a 100% Offline Resume Builder So I Wouldn't Have to Share My Phone Number & Email

Announcements

Publishing Permissions

You might also be interested in

Your Data, Your Control

Pixel Updates & Events

Server Updates & Events

Announcements

How to turn a slide screenshot into a PowerPoint someone else can edit

df-script - a 43kB zero-dependency, expression-based DataFrame engine for TypeScript and JavaScript

Free Web Application Uptime Monitoring — Comparing Node.js Tools for Tenant Experiments

The comment that has been lying for six years

Build a Sticky Header and Hero Section From Scratch

Willow : 99,99 % de fidélité, avec quels essais retenus ?

Cloudflare Measures the Markdown It Serves to AI Agents

Introducing DCO Cyber Labs: Building Practical Cybersecurity Investigation and Digital Forensics Training

I read ChatGPT's new business terms so you don't have to

Developer lessons from Apple's Photos Storage entitlement fix

Facebook Scams: Hacked Accounts, Fake Profiles and Marketplace Traps to Avoid

How to Design Reconnect-Safe Stale User Cleanup for Online Classrooms — A Runbook

Ada Virtual Assistant

Australia Daily AI & LLM Briefing - November 16, 2026

Điểm tin AI & Mô hình Ngôn ngữ Lớn (LLMs) tại Úc - Ngày 16/11/2026

Exploring Global Air Pollution Trends with Python and Pandas

Flisk: run a multi-service app on your laptop with one command (and what it does not do)

Props in React

Hello, {props.name}

Name: {props.name}

Name: {name}

{name}

AI is the assistant, not the staff

Building a Privacy-First Password Strength Checker with JavaScript

Browser Image Upload to Object Storage: 4 Retention Checks for Logistics Exports

GitHub Actions Workflow Lockfile: Pin Transitive Deps

audit_uses.py: run from the repo root

Building TeachBack AI: An Adaptive Study Coach Using NLP

Props Drilling in React

Welcome, {username}

Welcome, {username}

I Built a 100% Offline Resume Builder So I Wouldn't Have to Share My Phone Number & Email

Announcements

Publishing Permissions

You might also be interested in

Help Center

Docs

Discord

Telegram DM 👑

Premium Feature

Unlock Premium Support

What's New

UPCOMING FEATURE

Recent Updates

Join the Hype Engine Waitlist

Upcoming: Hype Engine V2

Upcoming: Role Analytics

Recent Updates

Join Spark Tickets Waitlist

Join Spark with Tickets Waitlist

Join the Community Monetization Waitlist

Join X Integration Waitlist

Discord SEO v2

Are you currently using our bot?

Join Role Analytics Waitlist