The way we show your pages, is we simple. First, we store your letters, one by one, in base64 format. Then we put it within the localStorage, and then whilst you type, we display the letters as images.
But, this, really really gets slow...
Because we store the base64 string within the localStorage, everything is laggy. Think about it. A small 300x300 image can be the size of 50KB>, and a single letter is a byte. Meaning that for a single letter, there could be a string of 50.000 characters. And all of the letters would display their image using the base64 strings.
The problem? Well, most phones, or IPads dont really like it when their html page contains more than a million characters (1000 letters => 30.000~ characters per letter => 30.000.000 characters for images alone.)
So we need a fix.
Simple attempts go first. The very first thing I attempted was simple converting all of the strings of images I have, into a blob url before displaying them on the page, that reduces the string count, and also allows for better handling of letters, meaning that if I use the letter "a" more than once, the same blob url will be used instead of generating a new blob url.
Very easy solution to begin with, but there is still one caveat, images just load slower, and they are pixelated. So we gotta do more.
When you click on "store letter", the first thing we do is take a screenshot of the current canvas. Next we clear the canvas, and screenshot that data aswell. We do that to compare both of the canvases, and compare them. If they are the same, it will not continue. If it is not, we attempt to convert the base64 image data to SVG format.
SVG (Scaleable Vector Graphic), is a format, that doesnt work with pixels, instead it works with math, meaning that you can easily scale data up and down. This also helps to reduce the size of the letter data, and also blob urls will load significantly faster, as they are simply loading html tags.
After we try to convert the base64 string into an svg, we compare the svg with a pre-made empty svg string, to check whether or not the svg conversion worked. If the svg string is the same as the empty svg string, the conversion failed, and we fall back to the base64 string data. The reason for most failures is, if the data is small, meaning like a dot or just a simple comma, the converter we use will not see that as worth converting. So we needed a fallback.
Anyway, now we have everything well optimized, right?
When you typed, back then, it would do as follows;
REMOVE ALL PAGES => SPLIT CHARACTERS INTO PAGES => CREATE PAGES => ADD WORDS
This was done, for every, single, character. So, you could have 10 pages of text, and if I added a single letter to the end, it would re-render the whole thing.
It is not surprise that that made the website lag a lot, and resulted in a lot of issues, but what was the fix?
Very simple, well, it was not. But we tried our best. All we need to do, is creating a simple algorithm, which checks the current letters, and words, and sees whether or not the values have changed of the given values, and depending on that we would delete, add or modify the letter or word.
Here is how we do that;
const generate_letter = (letter, letter_index, letter_target = null) => {
- if (letter_target != null) {
- - if (letter_target.getAttribute('letter') == letter) return
- }
let letter_list = user_fonts[letter] || []
if (letter_list.length == 0) {
...
}
let obj_letter = letter_list[letter_index % letter_list.length]
if (obj_letter.type == 'png' || obj_letter.type == 'url') {
- // fallback to image format
...
}
let svg = new DOMParser().parseFromString(obj_letter.url, 'image/svg+xml').documentElement
...
return svg
}
Of course we will not show everything, but simply, we check whether or not the letters are the same, if they are continue. Else we get the font for the letter. We then get the new letter, and check whether or not the attribute "letter_target" is null, if it is, we create a new letter, if it is not we modify the current letter. With that strategy we have all of our words and sentences optimized.
Even for a simple font website, optimization is a little difficult. We try our best though.