How I made a Pastebin clone with NO database and NO back-end code
Tags: javascript, privacy, webdev, html
Published: 2020-05-29 15:46:32

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!

![](https://media.giphy.com/media/xT0xeJpnrWC4XWblEk/giphy.gif)


#### Here are a few examples so you can see it in action:

[This code](https://nopaste.ml/?l=css#XQAAAQB2DQAAAAAAAAAXioAj/ZZaukKWizx++f8w08qY+xe+w0AeNB0EtEDMR1jPECOrMSz2rcy5XqUVTzusmFXo407ujwufsB1Va3cy02BV4Chx15I+SbM8Ei2WS8/MaZa0wIOjHf0s6B9Kcwi1J73qYeIcKm39PEWGnBM4Ym5aXFOF1Irrn1N95vEcl4YI+98rydudZHmsNCmt995GvCpLImwH7yj3SlMadWaQA0jHCrY1ZBvhjSJ9mAAdYjCJLduITZuXomgpqtr3sYI1WKeRGNmPSD8J8WRLtCx0BZl3yWZZrUxJbmVod8cYiPJnlO+CzQA03qA/GZnxhMYd9TPc2Xlq8UIhBX6gmvo/xhHJc/WHnuBFB32xJ37O5FZlZuXGy6wFE/lakVteoqEqgvyan4LfaiL0pMfYapWjV8YoPa/KyVGugANNjvtRw0hRr+Z1IgKoVL2a1xqvQiB65vIXkw68/ui82O1ko9HTbsLMHX/2/CgWZ8TkTEvgr0+dzVqQYIpaWpB3hDnUTHMkG2UehM5iJyJXAgODNqk8IiWCJn5k/j2FeFpchSTWdgi7AeaCowubmWnFTNgNFXLf5zzARWBUGQFT55TiC0ah4HL17jG3rY6fXvAXlm6CWc88ne7wF0opHkLnhfPslssDYo75hDmCfYwJ6asQ/YBkSuuLJjdCEXVjF7Pdw2FhsOiiB0gNXC6ehieM28M+PMGSDRqt0Q0KveMgE44YJ8zFOvpu2Gg41qDkrsYS7Xb/iMnHz66tt69I1rGzrHx88PuI2/CZx+kv+z7a+/Eiq4JC3KTDx4IbNUYptmrIOC2bxGrcjd8TBKGe+dNi8a/PEnXrUXc/OD7D680/Awo+scE8VKuRVN5R7OPg0tmKVQSQkyCf+I3//kGmREyhh6/bCv6tvbEc7hNPNE1js2svlVBF001JlLY7g1w6ls2pjxrKxuCLrkjba1n4s5WlfrbwcX18rqgbfL2tVibHggsy3Lgq4i7fXtuO3JifxfauO66YIRjEWFnACrHbZ14FbHDMylN7GMvo5TusxestU0s6+kiibWq2qZVpi7C5JVKURNQrGEabICn5nUDoOPMZSfNrdmlTOhu4qjKW09XdQPNazTMc83KjG1YOKNjRP23i1oav5muBFRGMDkSXt7wCgv5PCpLZM9w2jC5GCa5oHuH92IWJu5d80fvTRw3GxNQzfMRxgjzfH6xxrzu+EghhbzayUhb3U5aSRSxOtPTPfjT9mxgk7j3f1mRlbYheuhko4/LBIKYvfA5CnN2Yr3VyBYqoZ/ZgP871LU0ix8ZLeaecao0SDj6V35bZ6RB53mcU8BRPfcyZhj0H6BrFcrcfXKVwnNVro/cIrwnoG3GwlpCXGYJmDDeUdlbBj2HrVmvMncd3w8SzPtxw5RAWQP9YPJdE4Tc490BMX4zAkPqirRHLcxG/K5ECLtKtGsnCkg24+XwFo4XRcGfMsbkSSYD7oZ2HkD+1NXYqJKgk+7uee+yrYCZF6xbsb0ca/7r3w8nU9DueSa6XPiaCLSeJ+phw8iK1U4+FcCzqLW4LzgfcGjz64+HM+Xst0YuqzrAI2RU80H2Mr0FnC/qL+klbM+p0yNUBxBd4IQ64SJmh6Irgi7fZq2wfuTuVEAI1qKKwGwBQ6x9UDyY/OqkD63mtRL//oHeipA==) 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](https://nopaste.ml/?l=css#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)?
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 |
| ------- | ---------- |
| Reddit  | 10,000     |
| Twitter | 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:

{% jsfiddle https://jsfiddle.net/ubhrpf5w/4 result %}

### Thanks for reading!

Don't hesitate to star ⭐ my Github repository, and leave comments if you have suggestions or ideas of improvement

{% github bokub/nopaste no-readme %}

Thanks again 👍