knew about this service almost one year ago
has been officially
During this time, Microlink Cards has been refined until reaching its final form, taking some engineering decisions under the hood.
There are some decisions worth to mention, specially when you're building things at scale.
Microlink Cards claims to use an online code editor.
How real is that? A code editor can be huge and hard to embed in a web application.
Well, Microlink Cards is using
which is a core component used by
, meaning you will have the same code editor features, like autocomplete, among others.
Although Monaco Editor is lighter than it may seem, it has to load asynchronously to prevent blocking the rendering step in a web browser.
a very well React wrapper that handles the setup process in a simple way.
We combined it with
for rendering the code in a live preview mode, giving you the instant code change experience and making it possible to load React components inside the embedded code editor. How crazy is that?
We wanted to avoid any database interaction since it will introduce a failure point and extra cost in terms of money and maintenance.
If you don't have a database, you don't need to maintain it.
Every time you do a code or data change, it will be encoded on the query parameters, generating a unique URL to retrieve the state.
That's great for data, but what about code? can we encode all the editor code inside the query parameters?
Well, you can do it, but that will produce so long URLs:
We didn't find an official
but looks like it could be around 2,000 characters. Also, we are not particularly interested in long URLs, they look terrible.
In order to minimize the size of the URLs, we apply a compression algorithm, being
one of the best for JSON payloads.
import createMsgpack from 'msgpack5'
import URLSafeBase64 from 'urlsafe-base64'
const msgpack = createMsgpack()
export const marshall = (value) => URLSafeBase64.encode(msgpack.encode(value))
export const unmarshall = (value) => msgpack.decode(URLSafeBase64.decode(value))
MessagePack will take the query parameters object as input, generating a compressed buffer representation as output.
It's important to note that MessagePack will produce a buffer of binary data as output and it isn't safe to encode it directly as part of the URL payload.
Instead, it should be encoded into
in order to retrieve the state with no data mutations.
The Base64 representation will increase the size ~33%, but even with that, MessagePack is still worth it.
Lastly, Microlink Cards
is part of the
Microlink's mission is to provide cloud-based browsers, ready to be used for end-users to enable any browser flow, such as taking a screenshot, getting full HTML, generating PDF, and more.
Here it is the inception: Microlink Cards is a product built using Microlink.
You can see Microlink Cards as a free canvas to draw any image composition that generates a unique URL.
That URL is provided to
feature to produce an image as output, distributed over