How I made a Pastebin clone with NO database and NO back-end code
Boris K
Posted on May 29, 2020
Hello everyone !
I'd like to show you the project I've been working on for the last few weeks, which is, as said in the title, a client side paste service, called NoPaste.
What does it mean exactly? Let's take a simple example
When you share a piece of code on Pastebin, your data is saved somewhere in a database, then Pastebin gives you a short link to access this data
NoPaste has a different approach: instead of using a database, your data is compressed then stored into a unique URL that can be shared and decoded later.
As a result, there is no risk of data being lost, censored or deleted. The data is stored entirely in the links and nowhere else!
Here are a few examples so you can see it in action:
This code is the CSS code used on the NoPaste page.
It has more than 3400 characters, but thanks to the compression, the link to access it has a length of 1710 characters.
Want something more impressive?
What about the CSS code of the Bootstrap grid system?
Because there are lots of repetitions, the compression is very efficient: 67959 characters stored in a link that's only 5762 characters (compression ratio about 8%)🤯
But a link length cannot be infinite! What's the limit?
Well, that's true, in some cases your browser won't support a URL which is too long, but that limit is actually quite high:
Browser | Max length | Notes |
---|---|---|
Google Chrome | (win) 32,779 (mac) 10,000 | Will not display, but larger links work |
Firefox | >64,000 | |
Microsoft IE 11 | 4,043 | Will not show more than 2,083 |
Microsoft Edge | 2,083 | Anything over 2083 will fail |
Android | 8,192 | |
Safari | Lots |
And here are the link length limits on a few popular apps / sharing methods:
App | Max length |
---|---|
10,000 | |
4,088 | |
Slack | 4,000 |
QR Code | 2,610 |
Bitly | 2,048 |
You can embed NoPaste snippets in (some) websites
Unfortunately, dev.to
is not one of them, but if you have a personal website, you can easily embed a NoPaste code snippet using the "Embed" button
The text inside an embed can be highlighted and copied, but not directly edited, unless you click on the "Edit" button. Perfect for tutorials!
Here is a preview made with jsFiddle:
Thanks for reading!
Don't hesitate to star ⭐ my Github repository, and leave comments if you have suggestions or ideas of improvement
Thanks again 👍
Posted on May 29, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.