DEV Community: Nikhil Agrawal

I redesigned my WordPress WooCommerce site for $0 [exact workflow + prompts included]

Nikhil Agrawal — Wed, 14 Oct 2026 15:23:57 +0000

My WooCommerce store looked like 2019. A dark header, colours nobody remembered choosing, leftover demo content from the theme, and a shop that showed the newest products first instead of the ones people buy.

I knew roughly what a WordPress designer would charge to fix it: at least $2,500, and a few weeks of back-and-forth.

So I tried something else. I opened Claude Code (Opus 5.5) in my terminal, connected it to the Claude-in-Chrome extension, and let it work on the live site from my logged-in browser. I had no staging site. Everything happened in production, one approved change at a time.

Two weeks later it had made 108 changes, every one of them logged with a way to undo it. My own time added up to about 10 hours, mostly reading its proposals and saying yes or no. New spend: $0. I already pay for Claude for coding work, and if you build things for a living you probably have Claude Code or something like it too.

This article is the workflow, step by step, with the prompts to copy, so you can do the same on your own WordPress or WooCommerce site. It also covers the four things that went wrong and what I'd do differently.

What you need

Claude Code, installed in your terminal, on a plan that includes it.
The Claude-in-Chrome extension, installed in the Chrome profile where you're logged into WordPress. Start Claude Code with claude --chrome, or type /chrome inside a session to connect it.
An admin login to your WordPress site, already signed in in that Chrome profile. Claude works through your session, so you never paste a password into the chat.
The Code Snippets plugin (free). Small PHP changes go in here as named snippets you can switch off with one click, instead of edits to functions.php.
An empty folder on your computer for the project. Claude keeps its notes, backups, scripts and changelog here.
A full backup of the site, from your host or a backup plugin, before you start. Also export your theme's options if it has an export button.

No staging server, no FTP, no new paid plugins.

Adapting this to your site

Blog or content site, no shop? Skip steps 5, 6 and 8.
Elementor, Divi or another builder? Same workflow. Tell Claude to build with that builder's own widgets.
No heatmap tool yet? Install Microsoft Clarity (free) a week or two before you start, so step 7 has data to read.

Step 0: Write the ground rules first

This is the step that made the rest safe. Before Claude touched anything, I gave it rules and asked it to save them in its memory so they'd survive between sessions.

We're redesigning my live WordPress + WooCommerce site at <your URL>.
There is no staging site, so these rules apply to every change:

1. Never change anything without showing me the plan first and getting a yes.
2. Before each change, save a backup of the exact old value (to a local
   file or a custom field on the post).
3. After each change, reload the page logged out and confirm it worked.
4. Log every change in notes/changelog.md: what, where, and how to undo it.
5. Build pages with my theme's own builder elements, not custom HTML,
   so I can still edit them myself later.
6. Work in small phases. Never batch-edit many products in one go
   without testing on one first.

Save these rules to memory.

Rule 5 is about after the project. A page made of custom HTML looks great until you want to change a headline and have to open the code. Pages built from the theme's own elements look slightly less custom, but you can maintain them yourself.

Step 1: Audit everything, change nothing

Audit my whole site. Use the browser to visit the homepage, shop,
3 product pages, cart, checkout, the docs or blog, and 404s from the
sitemap. Check:
- broken links and broken images
- typos and broken characters
- SEO basics: titles, meta descriptions, alt text, H1s
- page speed and what's slowing it down
- anything that looks broken or outdated
- leftover demo content from the theme

Don't change anything. Write the findings to notes/01-audit.md,
sorted by how much they hurt sales or trust.

Things it's likely to find on any site that's a few years old:

Theme demo leftovers: a demo logo, a sample phone number at checkout, placeholder text in a footer or popup. On mine, a broken demo logo was showing on more than 200 documentation pages.
Emoji that turned into "?" after a database or hosting migration, in headings, product descriptions and even button labels.
404 links in old posts and docs, pointing at pages you deleted or renamed.
No page cache and a slow server response.
Empty meta descriptions on pages that get traffic.

None of this is hard to find. Most of us have just never sat down and looked.

Step 2: Turn the audit into phases

Turn the audit into a phased plan. Phase 1: safe fixes (typos, broken
links, demo leftovers). Phase 2: global design (logo, header, fonts,
colours, footer). Phase 3: key pages. Phase 4: shop and checkout.
For each item, say what changes, where, and the risk. Save it to
notes/04-phased-plan.md.

Phases keep your review sessions short. You start with low-risk changes and get used to the approve-check-log routine before anything big happens.

Step 3: Global design (logo, header, fonts, footer)

Propose a new look: a simple text logo + favicon, a white header,
two Google fonts (one for headings, one for body), and a colour
palette with one main colour. Show me a before/after screenshot of
a product page and a doc page before applying anything. Then apply
it through the theme's global options, one group at a time.

Claude wrote a small script that drew the logo as SVG and exported PNGs and a favicon in every size. It uploaded them, set them in the theme options, then changed the header, fonts, colours and footer.

For each group of settings it logged the old value next to the new one, so any of them can go back in a minute.

In page-builder themes, a single palette colour often controls every border and divider on the site. Change it for one purpose and lines change colour everywhere. Before changing a global colour, ask Claude to list every option that uses it.

Step 4: Rebuild the pages that matter, as drafts first

Build a new homepage as a DRAFT page, not public. Use only the
theme's builder elements. Sections: hero with one clear action,
best-selling products, proof (real numbers + real reviews), latest
videos, FAQ, closing call to action. Use only facts from my site.
Send me the preview link. Don't switch the front page until I say so.

The draft-first habit means the live page is never half-built. When I approved it, Claude switched the front page setting and left the old homepage published, so rolling back is one dropdown.

Two pages worth doing next:

A reviews page from real reviews. If you sell on a marketplace or have Google or Trustpilot reviews, have Claude read them and pull the best ones word for word, with the reviewer's name and the product. Real quotes beat any testimonial you'd write yourself.

The page your traffic lands on. It's often not your homepage. Step 7 shows how to find it.

Step 5: Product images from one template

Create a consistent product image for every product: 1200×1200, same
layout, product icon, one short benefit line. Write it as a script so
I can change the design once and rebuild all of them. Show me 3
samples first. Then upload them, set alt text = product name, and set
each as the featured image AND as the image of every variation.
Save a backup of the old image IDs first.

The "AND every variation" part catches a common WooCommerce bug. On variable products, each variation can hold its own copy of the old image, and that copy overrides the new featured image on the product page. Ask Claude to check the shop logged out afterwards to confirm only the new images show.

Because the images come from a script, design changes later take minutes: drop a line of text, add a label, rebuild, re-upload.

Step 6: Fix the shop (where the money is)

Review /shop/ for conversion problems. Check sort order against real
sales data, products per page, how prices are shown, buttons, badges,
filters, and anything covering the content. Compare what the shop
shows first with what actually sells. Don't change anything; list
the findings with the fix for each.

Before switching my shop to "best sellers first," Claude checked the sales counters against WooCommerce Analytics and found three corrupted ones. Two products claimed 9,223,372,036,854,775,807 sales each. That's the largest number a 64-bit integer can hold, and those two products would have sat at the top of every popularity sort. Check your counters before you sort by them.

The usual shop fixes to ask for:

Sort by real popularity, and show all products on one page if you have fewer than 30 or so, so best sellers don't hide on page 2.
Filter tabs above the grid, by the categories buyers think in.
A "sold" count under the price, only past a threshold that looks credible.
The real saving ("Save 15%") instead of a generic "Sale!" badge, and "From $49" instead of a price range.
Hidden products you forgot about. Bundles are a common one.
In the cart, cross-sells below the totals, so "Proceed to checkout" isn't pushed off the screen.

Ask for each one as a small named snippet you can switch off on its own.

Step 7: Read your heatmaps with it

If you run Microsoft Clarity, Hotjar or similar, let Claude read it in the browser.

Open my Clarity dashboard for the last 30 days. Report the top entry
pages, dead clicks, rage clicks, popup clicks, JavaScript errors and
the performance score. Then open heatmaps for the top 5 entry pages
and the shop. For each page: what visitors try to do, and what stops
them. Also pull last 30 days of orders and revenue from WooCommerce
as a baseline. Don't change anything.

Patterns to look for:

Your top landing page. Check whether it does its job. Mine was a page I hadn't touched in years, getting more visits than the homepage, with almost nothing on it.
Popups taking clicks. On my shop, about a third of all clicks were people closing popups. I turned the discount popup off the same day.
Archive and tag pages that rank but look broken. Google sends people there, and nobody checks them.
Dead clicks on text people expect to be a link.

Write down your last 30 days of orders and revenue before you change anything, so you can tell what worked.

Step 8: Checkout, and the parts you do yourself

Walk through the purchase flow as a customer: product page, add to
cart, cart, checkout. Don't place an order. Count the steps and the
required fields, and flag anything that slows down a buyer of a
digital product.

Count the steps and the required fields. Many themes split checkout into several tabs, and digital products rarely need a street address or phone number. Mine had a multi-step checkout, and the fix was one theme setting, which I changed myself. Some changes touch payments, so I'd rather click those myself. Let Claude find the problem and tell you exactly which setting to change.

Step 9: SEO cleanup

Fix the SEO basics found in the audit: missing meta descriptions on
key pages, missing alt text on product images, broken internal links,
and typos. Use my SEO plugin's fields. Back up each old value. Verify
on the logged-out page source.

Mostly unexciting work, and exactly the kind that a designer bills by the hour and you never get round to.

What went wrong

Four incidents in 108 changes. Every one was fixed the same day, and every one became a new rule.

1. It saved rendered HTML over a product description. Reading a product through one API endpoint returns the page as it displays, not the editable builder content. Claude saved that back, and for a few minutes one product's description was static HTML. Its own check (saved length didn't match the plan) caught it, and it restored from the backup. Rule: always read and write the raw content.

2. Saving the widget list shuffled the footer. Sending the full "inactive widgets" list made WordPress reassign widgets, and for a few minutes the footer showed the wrong widgets. Rule: assign widgets to one target area at a time.

3. I deleted live images myself. While cleaning the media library I deleted images that were still in use. Because the image script and a map of product IDs were saved locally, Claude re-uploaded and re-assigned them the same day.

4. Editing in the builder after Claude edits. When I edited the homepage in the visual builder, it re-saved every element with all its default settings, so Claude's local copy no longer matched. Rule: Claude always reads the live page before editing it, never its own old copy.

What to plan separately

Page caching. If your store shows different prices by country or customer, full-page caching needs a proper plan, not a quick fix.
Social share images (OG images). Worth a separate pass.
Content-level fixes like pages with two H1 headings. Claude can list them; some are faster to fix by hand.
Payment settings. Change those yourself.

The bill

	Designer	This workflow
Cost	$2,500+	$0 new spend
My time	Briefs, calls, reviews	~10 hours of reviewing
Calendar time	A few weeks	2 weeks, in short sessions
Changes logged with undo steps	Not usually part of the job	108 of 108
Can I edit the pages myself?	Depends on the designer	Yes, by rule

A good designer brings taste and judgement, and I still made every design call myself. What Claude added was patience. It wrote down the old value before every one of those 108 changes.

The rules I'd follow again

1. Rules before work. Write the ground rules on day one and make Claude save them to memory.

2. Audit, then plan, then change. Make the first two prompts read-only. You'll fix the right things in the right order.

3. Drafts for pages, one-product tests for bulk edits. Never let the first attempt be the live one.

4. Data before design. The broken sales counters and my neglected top landing page were both in my own data. No redesign would have found them.

5. Follow the undo rule. More on it below.

The undo rule

If Claude can't tell you how to undo a change, it doesn't make the change.

Every entry in my changelog has three parts: what changed, where, and how to undo it. Some undo steps are "restore the previous revision." Some are "deactivate this snippet." Some are "set this option back to the old hex colour."

When the description incident happened, nobody had to work out what the old content was. The backup was in a custom field on the product, saved seconds before the edit. When I deleted live images, the mapping of image to product was in a local file.

Three questions before any change on a live site

What's the exact old value, and where is it saved?
How will we check it worked, logged out?
If it's wrong, how many clicks to undo it?

If the answer to the third is "a lot," make it a draft or a snippet first.

Sort your changes by risk

Safe to approve quickly

Typos, broken links, alt text, meta descriptions. One revision each, easy to restore.

Approve after a preview

New pages (built as drafts), global colours and fonts, shop layout snippets.

Do these yourself, or watch closely

Checkout and payment settings, bulk edits across many products, anything that deletes.

Where to start

Run Step 0 and Step 1 this week, and nothing else. The audit changes nothing on your site, costs you an hour, and gives you a list you can hand to anyone, whether that's Claude, a designer, or yourself on a free Saturday.

I Replaced Our $647/Month SaaS Stack With Open Source. We Saved $8.

Nikhil Agrawal — Sat, 19 Sep 2026 06:16:57 +0000

The software was free. The servers were cheap. I was the expensive part.

TL;DR

Eleven SaaS subscriptions for a five-person team came to $647 a month.
Every one has a free, open-source alternative, so we tried to replace them.
The cash bill fell 40% .
But servers, backups, email delivery and AI API usage add $86
And about 5 hours of maintenance a month at $50 an hour eats the rest.
The 3am rule: if a tool breaking at 3 am would wake you up, pay someone else to be awake. Self-host docs, chat and automations; pay for logins, passwords, payments and email delivery.

It started with a renewal email.

Nothing dramatic. Just Loom, reminding me that five seats would renew next week. I opened a spreadsheet to check what else was coming up, and an hour later I was staring at a number I didn't like.

Eleven subscriptions. $647 a month. For a team of five.

Every one of those tools has a free, open-source version. Most of them have tens of thousands of stars on GitHub and a README that says "self-host in 5 minutes."

So I did what any reasonable founder does on a Sunday night. I decided to replace all of them.

This is what happened over the next three months.

The real bill, the real hours, and the one tool I switched back to after five weeks.

$647 a month, before — Eleven SaaS subscriptions for five people, before any of this started.
$8 a month, really saved — What the switch actually saved once servers, email and my own hours were counted.

The stack I was paying for

Tool	What we used it for	Monthly cost
Ahrefs	SEO and keyword research	$129
ChatGPT (5 seats)	Writing, research, everything	$100
Loom	Screen recordings for clients and each other	$75
Auth0	Logins for our app	$70
Canva Business (3 seats)	Social graphics, decks	$63
Notion	Docs, wiki, project notes	$50
Crisp	Live chat on our website	$45
Zapier	Automations between everything	$39
Slack	Team chat	$36
Calendly	Sales calls	$20
1Password	Passwords	$20
Total		$647/month ($7,764/year)

Nothing on that list is outrageous. That's the problem. Nobody ever decides to spend $7,700 a year on software. It just happens, $36 at a time.

The spreadsheet everyone makes

If you've ever googled "open source alternative to Notion," you've seen this math:

Paid tool	Open-source swap	New cost
Notion	AppFlowy	$0
Slack	Mattermost	$0
Crisp	Chatwoot	$0
Zapier	n8n	$0
Calendly	Cal.com	$0
Loom	Screenity / OBS	$0
ChatGPT	Open WebUI	$0
Canva	Penpot	$0
Auth0	Keycloak	$0
Ahrefs	OpenSEO	$0

Look at that column. Zero, zero, zero. A 100% saving. I felt like I'd found a glitch in the matrix.

I had not found a glitch in the matrix.

How I picked the replacements

Quick note on this, because it saved me from one mistake early.

There are dozens of "open-source alternatives to X" lists, and most of them are sorted by GitHub stars. Stars tell you a project was popular. They don't tell you it's still alive.

I ended up using the alternatives pages on this site, mostly because they show when each project was last updated right next to it. That's how I noticed that two of the five Loom alternatives on the list hadn't had a code update since November 2024. Both still show up in plenty of "best Loom alternatives" articles.

Tip: Before you install anything, check the last update date, not the star count. A project with 20,000 stars and no commits in eighteen months is a project you will be maintaining yourself.

What happened, tool by tool

I gave each swap a "how close did it get" score out of 10. Not a lab test. Just: after a month of real use, how much did we miss the paid version?

Notion → AppFlowy

How close: 7/10 · Setup: 9 hours

The writing experience is genuinely good. It feels like Notion, which is the whole point. Pages came across from Notion's export fine.

Linked databases did not. Anything with relations between tables had to be rebuilt by hand, which is where most of the 9 hours went. If your Notion is mostly docs, this is an easy switch. If it's a web of connected databases, budget a weekend.

Verdict: switched, stayed.

Zapier → n8n

How close: 9/10 · Setup: 8 hours

The surprise of the whole project. Rebuilding our 23 Zaps took a full day, but n8n is honestly better for anything with more than three steps. You can see the data moving through each step, and there's no task counter ticking up in the corner making you nervous.

Verdict: switched, and I'd never go back.

Crisp → Chatwoot

How close: 8/10 · Setup: 7 hours

The chat widget, shared inbox, and canned replies all work well. Our support person barely noticed the change.

Two catches. First, Chatwoot is hungry. It wanted more memory than everything else combined, so it ended up on its own server. Second, getting email replies to flow into the inbox took an evening of fiddling with settings I'd never touched before.

Verdict: switched, stayed.

Calendly → Cal.com

How close: 9/10 · Setup: 3 hours

Booking links, calendar sync and reminders all worked on the first try. The easiest swap on the list.

Verdict: switched, stayed.

ChatGPT → Open WebUI (with an API key)

How close: 8/10 for chat · Setup: 3 hours

Open WebUI gives you a ChatGPT-style interface, and you pay per use through an API key instead of per seat. For the three people on our team who use AI a few times a day, it was perfect. Their combined usage cost about $30 a month.

For the two heavy users, it wasn't. They missed voice mode, memory, and the polish of the real app. And they burned through API credit fast.

Verdict: half and half. Three people switched, two kept their seats.

Loom → Screenity and OBS

How close: 6/10 · Setup: 1 hour

Recording is 90% there. The missing 10% is the part that matters with clients: sending a link instantly and seeing that they watched it.

Verdict: switched for internal videos, kept one Loom seat for sales.

Canva → Penpot

How close: 3/10 · Setup: 2 hours

This one isn't Penpot's fault. Penpot is a great open-source design tool, much closer to Figma than to Canva.

But nobody on our team uses Canva for design. They use it for templates. Thousands of ready-made Instagram posts, decks, and thumbnails. That library is the product, and there's no open-source version of it.

Verdict: kept Canva.

Ahrefs → OpenSEO

How close: 2/10 · Setup: 1 hour

Same story, bigger gap. You pay Ahrefs for a constantly updated map of the internet's links and keywords. You can't install that on a $19 server.

Verdict: kept Ahrefs. (I cancelled the OpenSEO experiment in under an hour.)

Auth0 → nothing at all

How close: 10/10 · Setup: 0 hours

I had Keycloak half-installed when I went back to Auth0's pricing page to check what exactly I was saving. Their free plan now covers up to 25,000 monthly active users. We have nowhere near that.

I downgraded to free in two minutes and uninstalled Keycloak.

Tip: A full $70 of my monthly savings came from reading a pricing page. Before you self-host anything, check whether the free tier quietly got bigger since you signed up.

1Password → didn't even try

Password managers are the one thing where I want someone else to be awake at 3am. More on that below.

Verdict: kept.

The one I switched back: Slack → Mattermost

How close: 8/10 · Setup: 6 hours · Lasted: 5 weeks

Mattermost itself was great. Fast, familiar, did everything Slack did for our internal chat.

The problem wasn't the software. It was everybody else.

Two of our clients talked to us through shared Slack channels. Our contractors were in Slack for their other clients. A couple of founder communities I rely on live in Slack. So instead of replacing Slack, I'd added a second chat app, and half my team was now checking both.

After five weeks, we moved back. $36 a month to not have that conversation again felt like a bargain.

Watch out: Slack's value to us was the network, not the app. You can copy the software. You can't copy the network.

What the servers cost

What "free" cost to run every month:

Hidden cost	Monthly
Main server (Hetzner, 16 GB RAM)	$19
Second server, just for Chatwoot	$10
Automatic backups	$6
File storage for uploads	$6
Email sending service (you can't self-host email delivery reliably)	$15
AI API usage for the three Open WebUI users	$30
Total	$86/month

And the SaaS I still paid for after all the switching and switching back:

Still paying	Monthly
Ahrefs	$129
Canva	$63
ChatGPT (2 seats)	$40
Slack	$36
1Password	$20
Loom (1 seat)	$15
Auth0	$0
Total	$303/month

New monthly bill: $389. Down from $647. That's $258 a month, or about $3,100 a year. A 40% saving.

A real saving, but not the 100% the spreadsheet promised. And we're not done.

Now add the most expensive item: me

I kept a rough log of every hour I spent keeping this stuff running.

Setup across all tools: 40 hours (spread over three weekends)
Ongoing maintenance: about 5 hours a month. Updates, checking backups actually restore, and two small fires: Chatwoot running out of memory one Tuesday, and an update that broke our n8n webhooks for half a day.

Let's be generous and value my time at $50 an hour. (If you're a founder, your time is probably worth more. If you're a developer billing clients, definitely more.)

	Monthly
Cash saved	$258
My maintenance time (5 hrs × $50)	−$250
Real saving	$8

Eight dollars a month. And that's before counting the 40 hours of setup, which at $50 an hour is $2,000 I will never earn back at $8 a month.

The server costs $19. I cost $250.

So was it a waste? Not quite.

Look at which tools saved money: Notion, Calendly, Loom, ChatGPT. They all charge per person. Every time you hire someone, the bill grows.

My server doesn't care how many people use it. Maintenance takes roughly the same 5 hours whether there are 5 of us or 20.

So I ran the numbers for the same setup at 20 people:

Team size	SaaS bills removed	Servers + API cost	My time	Real saving
5 people	$344	$86	$250	$8/month
20 people	$923	$161	$300	~$460/month

At 5 people, self-hosting is a hobby. At 20, it's about $5,500 a year back in your pocket.

Same tools, same servers, same five hours a month. The only thing that changed is headcount.

The rules I'd follow if I did it again

1. Self-host tools that charge per seat.
Docs, wikis, scheduling, internal chat, automations. The bill grows with your team, the maintenance doesn't.

2. Don't self-host anything where the data is the product.
Ahrefs' link data. Canva's template library. You're paying for years of someone else's work, and it doesn't come with the code.

3. Don't self-host networks.
If your clients, contractors, or community are already there, switching means asking all of them to switch too.

4. Read the free tier before you do anything.
Auth0 saved me $70 without me installing a single thing.

5. Pass the 3am rule.
It gets its own section below.

The 3am rule

One rule came out of all this, and I now apply it to every tool:

If this tool breaking at 3am would wake you up, pay someone else to be awake.

One Tuesday night, Chatwoot ran out of memory and quietly died. Our live chat was down for about six hours. I found out at breakfast.

And... nothing happened. The chat bubble didn't load, a couple of visitors emailed us instead, and that was it. No lost sales. No angry customers. I restarted it, gave the server more memory, and went on with my day.

Then I thought about Keycloak, the login system I almost installed instead of staying on Auth0. If that had died at 3am, none of our customers could log in. Support emails would pile up overnight. Some of those people would cancel. And the only person who could fix it was asleep.

A SaaS fee buys a team of people whose job is to be awake when it breaks. For some tools that's a waste of money. For others it's the whole point.

The three questions

Before self-hosting anything, I now ask:

If it's down, can customers still log in, pay us, or reach us? If no, don't self-host it.
If it's down for 8 hours while I sleep, what does it cost? "Some annoyed teammates in the morning" is fine. "Lost revenue" is not.
If the data disappears, can we recreate it? A lost wiki page is annoying. A lost password vault is a catastrophe.

How our stack scored

😴 Sleep through it (self-host is fine)

Notion → AppFlowy. If the wiki is down, the team waits until morning.
Crisp → Chatwoot. Proven the hard way. Visitors email you instead.
Calendly → Cal.com. Worst case, someone books a call tomorrow instead of tonight.
Loom → Screenity. Nobody records videos at 3am.

⏰ Might wake you (self-host, but add an alarm)

Zapier → n8n. When our webhooks broke, it happened at 2pm and I noticed by luck. Now n8n messages me the moment a workflow fails. If you self-host automations, set this up on day one.

🚨 Will wake you (pay someone)

Auth0. Nobody logs in, nobody uses your product.
1Password. Lose it and you lose access to everything else.
Email delivery. If password resets and receipts stop arriving, you won't know until customers tell you.
Payments. Never. Not even a little bit.

"Pay someone" doesn't mean "give up on open source"

This was the part I got wrong at first. The 3am rule sorts tools by who gets woken up, not by licence: self-hosted against someone else's problem.

A lot of open-source tools sell their own hosted version. Bitwarden, Cal.com, and plenty of others run the servers for you. You still get open code you can take with you if they ever raise prices or shut down, but when it breaks at 3am, it's their engineer's phone that rings, not yours.

For the tools that fail the 3am rule, that's usually the best of both worlds.

What I tell people now

When a founder friend asks me "should I switch to open source to save money?", I don't say yes or no anymore. I ask two questions:

How many people are on your team? Under 10, the savings are mostly imaginary once you count your time. Over 15, they're real.

Do you enjoy this? Because I kind of did. I learned more about how our tools work in three months than in the previous three years. That's worth something. It's just not worth $647 a month.

We turned a predictable monthly bill into unpredictable weekend work. For n8n and Cal.com that was a good trade. For the rest, I'm happy to keep paying.

What to do next

Try it small. Pick your two most expensive per-seat tools, swap only those, and log your hours for a month. The number at the end will tell you more than any article, including this one.
Pick replacements that are still alive. Every round-up on the alternatives index shows stars, licence and last update side by side, so you can rule out abandoned projects before you install anything.
Built something yourself? Open source, self-hosted or plain SaaS, you can list it here: we write the review, place it next to the tools it replaces, and the page is built to rank on Google and be cited by AI tools. Disclosure: Shortlisted is our site, and listing is paid.

FAQ

Is self-hosting cheaper than SaaS?

Only once you count your own time, and only above a certain team size. For our five-person team, cancelling $344 of SaaS cost $86 in servers, backups, email delivery and AI API usage, plus about five hours of maintenance a month. At $50 an hour that leaves $8. Run the same setup for 20 people and the saving is about $460 a month, because the tools we replaced charge per seat and the server does not.

What are the hidden costs of self-hosting?

The server is the small part. Ours was $19 a month, plus $10 for a second one because Chatwoot needed its own memory. Then automatic backups ($6), object storage for uploads ($6), an email delivery service ($15, because you cannot reliably self-host deliverability) and AI API usage ($30). The biggest line is time: 40 hours of setup and about five hours a month afterwards, including two small outages.

Which SaaS tools are worth replacing with open source?

Tools that charge per seat and whose downtime is survivable: docs and wikis (Notion to AppFlowy), automations (Zapier to n8n), scheduling (Calendly to Cal.com) and support chat (Crisp to Chatwoot) all worked for us. Tools where the data is the product, like Ahrefs and Canva, are not worth it: you would be replacing the software but not the link index or the template library you actually pay for.

Is it worth self-hosting for a small team?

Under about ten people, the savings are mostly imaginary once you count maintenance time. Over fifteen, they are real, because per-seat SaaS bills grow with every hire while a server and its upkeep stay roughly flat. If you enjoy the work, a small team can still do it for the learning, but not for the money.

Which tools should you never self-host?

Anything that would wake you at 3am if it broke: logins (we stayed on Auth0), passwords (1Password), payments and email delivery. Your internal wiki being down for an hour will not sink the company; customers being unable to log in might. For those tools, the SaaS fee is paying for a team that is awake when it breaks.

Can you self-host Slack?

Yes. Mattermost, Rocket.Chat and Zulip all replace Slack's software well, and Mattermost scored 8 out of 10 for us. The problem was not the software but the network: our clients, contractors and founder communities were still on Slack, so we ended up running two chat apps and switched back after five weeks.

I run Shortlisted, where these alternatives live. If you've built a tool of your own — open source, self-hosted, or SaaS — you can submit it here.

Switch to Laragon from XAMPP/WAMPP

Nikhil Agrawal — Mon, 14 Aug 2023 06:25:15 +0000

Laragon is gaining importance as it is portable, isolated, fast & powerful universal development environment for PHP.
Instead of using XAMPP or WAMPP for local development in Windows, you can switch to Laragon.

It is a blazing fast local development tool.

what's Laragon?

A Modern & Powerful local development tool packed with all "developer toolkit" you'll need for web development.

Supported Languages:
PHP, Node.js, Python, Java, Go, Ruby

Supported Database:
MySQL/MariaDB, PostgreSQL & MongoDB

Here are top 9 features that make it most powerful...

1. Blazing fast ⚡

It uses only 4MB RAM when running far lesser compared to xampp, so doesn't hang & leave RAM for other apps.

2. Pretty URLs 🔗

Tired of creating virtual hosts or using ugly urls like http://localhost/app?

Laragon automatically does it for you...
a nice, short, beautiful URL like:

http://app.test
http://.test

➡ no commands to run
➡ no file changes required

3. Inbuilt terminal 👩‍💻

Laragon comes with powerful inbuilt terminals like cmder, Powershell & Bash.

➡ Use the one you like
➡ No need to include environment path

4. Share local web apps to Internet 🔌

Share local web app to colleagues/clients for quick demo with just 2 click

➡ No command to run
➡ Nothing to install
➡ Uses ngrox to tunnel localhost to internet

5. Quick App ✨

Quickly install Laravel, Symphony, WordPress, Drupal & many others with 1 click.

➡ Again - no need to run a command or refer docs
➡ It does all the heavy lifting for you

6. Install & quickly switch version of any language 🔀

➡ Install different versions

➡ Need to switch PHP/NodeJs/Python versions between different project?

No worry, Just do it with one click

➡ Automatically handles all environment gotchas for you!

7. Mail Sender & Catcher 📨

➡ Catch all outgoing emails to local
➡ Send all outgoing emails from your email

Best for local email development & testing

8. Portable 💼

You can move Laragon folder after installing without worrying:

➡ to another disk/partition: C:\laragon to D:\laragon or E:\dev,…

➡ to another computer

➡ to USB

➡ sync to Cloud (DropBox, OneDrive, Google Drive)

Carry where you need!

9. Free & Open-Source 😍

Yes, devs love open source... so...

➡ Laragon is free & Open source
➡ Developed by Leo Khoa

➡ With 27 contributors
➡ 7+ years in development & continued

All these features make it the world's most powerful...

Also saves multiple hours every week!

12 Very Helpful HTML attributes that can save Your Hours of coding

Nikhil Agrawal — Mon, 12 Sep 2022 08:26:18 +0000

There are 26.2 million Web Developers but not everyone uses this HTML attribute.
Here are 12 Lesser-Known HTML attributes that you cannot miss

1. Download attribute in ahref:

➡ Easily allow users to download any asset on clicking a link

➡ File specified in href attribute is downloaded

➡ Optionally, specify new name of the file after it is downloaded

2. Input mode in input element:

➡ hints browser about the type of data to be entered by the user

➡ Display appropriate virtual keyboard

➡ & appropriate keyboard in mobile devices

➡ values: numeric, decimal, email, URL, tel

3. Loading attribute in img:

➡ Lazy load or eager load images

➡ Lazy loads defer loading of images until user scrolls near them

➡ Lazy loading increases website performance

4. Accept in file upload

➡ File types that are allowed in upload

➡ Possible values can be accepted mime-types or file extensions.

5. Autofocus form fields:

➡ Focus an input element on page load

➡ Useful to bring users' attention to a particular form fields

➡ Can be used for tags like button, input, select, textarea

6. DNS-prefetch

➡ Resolve domain names before resources get requested

➡ increases website performance by reducing latency for DNS resolution

➡ only used for cross-origin domains requests

7. Custom Data Attributes

➡ data-* allow additional information to be stored in HTML Dom

➡ Custom data can be easily accessed using HTMLElement.dataset property.

8. Autocomplete

➡ Specifies whether the browser has permission to provide autocomplete field values based on history

➡ Values: on/off

9. Tab Index:

➡ Represents the tab order of the current element

➡ Navigation proceeds from the lowest tabIndex to the highest tabIndex

10. Defer:

➡ Defers the script when the page has finished parsing

➡ Defer attribute only has an effect on external scripts

11. Onerror:

➡ Allows calling a javascript function if image loading fails

➡ For example if the original is not loaded the load fallback image

12. Display error if js disabled

➡ Use noscript check to show an error if script execution is disabled.

Please like & Re-Share if you find this post helpful

Connect me on Twitter

[Free & open-source] Beautiful tailwindcss components 👇

Nikhil Agrawal — Tue, 30 Aug 2022 07:45:14 +0000

There are thousands of tailwind design components, but not all are good.

Here are 7 beautiful 🤩 free & Open source tailwindcss components 👇

1.Flowbite:

➡️ Almost all components as bootstrap
➡️ Inbuilt Light/Dark mode
➡️ Figma designs
➡️ Integrates well with Vue, React, Laravel, Svelte, Django & more
➡️ Pro version for complex components

🔗 flowbite.com

2. Daisyui

➡️ Most popular tailwind component
➡️ 11K stars on github
➡️ Beautifully designed
➡️ Comes with theming options like Light, Dark, Cupcake, and 10 more 💅

🔗 daisyui.com

3. Kometa UI:

➡️ 130 sections
➡️ Available for HTML, VueJS, and React
➡️ Beautifully designed

🔗 https://kitwind.io/products/kometa/

4. Tailwind Components:

➡️ Collection of components by community
➡️ 1000's free components
➡️ Not only components but also pages like about us, contact us, coming soon available

🔗 tailwindcomponents.com

5. Mambaui:

➡️ Beautiful components
➡️ 140 components in 37 categories
➡️ Minimal design

🔗 mambaui.com

6. Tailwind Toolbox:

➡️ Collection of components from the community
➡️ Get Templates, Components, Kits, Plugins & More.
➡️ Optional premium marketplace

🔗 http://tailwindtoolbox.com

7. HyperUI:

HyperUI is a collection of free Tailwind CSS components that can be used in your project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more.

🔗 http://hyperui.dev

8. Web3 Templates:

➡️ A growing library of pre-built, fully responsive & customizable HTML & React UI components built with Tailwind CSS.

🔗 https://web3templates.com/components

Do you know any more good tailwind components? Feel free to reply below.

Let's be friends 🤝

Connect me on Twitter and LinkedIn

Please like & reshare if you find this post useful

Web3 101: 20 most important web3 terms you should know (many won't)

Nikhil Agrawal — Thu, 21 Jul 2022 18:02:36 +0000

Web3 is growing rapidly.

Every developer wants to start or switch to web3 because of it's huge market demand.

Even if you're not a web3 developer you must know some of the common & basic web3 terminologies.

In this post we'll have a quick glance of 20 most common & important web3 terms:

1. Address, Crypto Address, Public Key:

Alphanumeric character string used to send and receive crypto in blockchain network
In Ethereum, the address begins with 0x

2. Block:

A node in a chain
Blockchain network is comprised of millions of such blocks
A block is virtually impossible to hack
It possesses parts or all of the records of the transactions that preceded it

3. Blockchain

Blockchains store data in blocks that are then chained together
Different types of information can be stored on a blockchain but the most common use so far has been as a ledger for transactions
It is Immutable, which means data entered is irreversible
Transactions are permanently recorded & viewable to anyone

4. ENS

Ethereum Name Service

Human-readable and easy-to-remember addresses to Ethereum addresses
Something like yourname.eth

5. ERC-20

A set of specifications for tokens to follow in order to function optimally on the Ethereum blockchain
Using it developers and entrepreneurs can build new tokens
It is one of the foundational pillars of the blockchain ecosystem

6. DAO

Decentralized Autonomous Organization

Blockchain-based system that enables people to coordinate & self-govern
It has self-executing rules deployed on a public blockchain

Ex:
DASH - cryptocurency managed by its users
MakerDAO - A softwre that maintains stablecoin

7. DApp

Decentralized Application

Web app that is built on top of open, decentralized, peer-to-peer infrastructure services

Example:
Decentralized storage and.or a message protocol and platform

8. DeFi

Decentralized Finance

Financial app developed on top of blockchain systems
Removes the control banks & institutions have on money, financial products, & financial services
Derivatives, Asset Management, Insurance

Eg:
Augur - a popular DeFi betting platform

9. Airdrop

Distribution of a cryptocurrency token or coin
Usually for free
Done to gain attention, new followers and popularise a token

10. Alt Coin, Altcoin

Any cryptocurrency that is not Bitcoin
An alternative digital currency
Created after BTC

11. Smart Contract:

Programs stored on a blockchain that run when predetermined conditions are met
Usually an automated agreement between 2 parties
Code controls the execution, and transactions are trackable and irreversible

12. Gas

Fee that is charged for any crypto transaction. Like as sending crypto & minting NFT
Incurred to conduct the transaction or execute a contract on their blockchain platform
Etherum gas prices are denoted in gwei

1 gewi = 0.000000001 ETH

13. Minting:

A process by which digital art becomes a part of the Ethereum blockchain
That is unchangeable & tamper-proof
Similar to the way that metal coins are minted and added into circulation

14. Learn-to-earn:

Mechanism that rewards users when they can prove they've learned something
Often receive cryptocurrencies when they send proof of their new knowledge.

15. ATH, all time high

highest price (or market cap) that an asset has reached since its listing or inception

16. Testnet

A blockchain instance that is used for testing and experimentation without risk to real funds or the main chain

Usually used for a newer version of the underlying software for testing

17. Hodl

hold on for dear life
used among cryptocurrency enthusiasts when encouraging traders to resist the urge to sell one's holdings in response to market fluctuations

18. Seed Phrase:

A series of words generated by your cryptocurrency wallet that give you access to the crypto associated with that wallet
Think of it as a master password to your wallet
You shouldn't share it with others

19. Consensus Mechanism:

A fault-tolerant mechanism that is used in blockchain systems to achieve the necessary agreement on a single data value among distributed processes or multi-agent systems
The consensus mechanism is known as Proof-of-Work (PoW)

20. Some frequent acronyms:

gg = Good Game

gmi = Gonna Make it

lfg = Lets Fucking Go

ngmi = Not Gonna make it

FOMO = Fear Of Missing Out

WAGMI = We're All Gonna Make It

fren = metaverse term for 'friend'

Ser = Sir (respectfully introduce oneself)

Congratuations, now you've learned most common web3 terms 😎

Accelerate your career, learn web3.

Download 100+ web3 resource 👇

💎 Awesome Web3 Resources

How I reduced clients website loading speed from 10 to 2 sec? Time: 2 hours, Charged: $500

Nikhil Agrawal — Mon, 18 Jul 2022 04:41:17 +0000

Few days back...

I optimized a client's website loading speed from 10 sec to < 2 sec

Time spent: 2 hours
Charged client: $500

Here are 8 steps I did which You can follow them to optimize website made with any CMS or technologies:

First, why should you make any website faster?

✔️ Decrease bounce rate by 57% (as per study)
✔️ Increases google ranking
✔️ Happy Visitors/Customers

let's check the steps 👇

1/ Analysing website:

➡ Go to http://gtmetrix.com

➡ Enter the URL and hit "Test your site"

➡ In few secs you'll see complete report containing GTmetrix Grade, Performance & structure.

(GT metric report)

➡ In GT metric report scroll down to "Top Issues"

➡ Which will show issues related to JS, CSS, Images, too many requests, page size & more

👉 GTmetrix will show most of the improvements, BUT NOT ALL

➡ Let's resolve issues pointed by GT metric

2/ Image size optimization:

➡ Reduce all image sizes from MB to KB

➡ Go to http://squoosh.app
➡ Upload original images
➡ Download compressed images
➡ Replace in your website

3/ Lazy load images:

➡ Lazy loads defer loading of images until user scrolls near them

➡ Do only if there are lot of images

➡ Just add loading="lazy" in img tags

(check screenshot)

4/ Caching js & css

➡ Caching assets loads them once & stores them in browser cache

➡ This reduces loading time of subsequent pages

➡ Cache them by adding an asset version

(check screenshot)

5/ Minify JS & CSS:

➡ Minifying JS & CSS will reduce their size by almost 70%

➡ Go to http://smalldev.tools, search js/css minifier

➡ Minify all js & CSS

PS: keep a backup of non-minified files in case it may be required later

6/ Move JS to end of document:

➡ JS blocks all other resources
➡ This increases "First Contentful Paint" time
➡ Move them to end of HTML document

7/ Brotli compression:

➡ It reduces HTML size by almost 80%

➡ Go to http://giftofspeed.com/gzip-test/ & check if enabled or not

➡ If not, contact hosting to enable it

➡ Or use cloudflare to use this for free

Now we're done with optimization suggested by GTmetrix

➡ Re-test your website & you'll see a good improvement 🤩

➡ but not yet 100% optimized

Let's optimize more...

8/ Database optimization:

Unoptimized DB can reduce speed by a lot

DB optimization can be a big topic, but doing this basic will help

➡ Add indexing to fields used for searching, sorting & table joins (basic)

This is my first post. Hope this post helps!

Comment below for an questions you have.

Connect me on Twitter and LinkedIn.