I suspect it may be used to enforce custom fonts in an old-fashioned way, but nowadays you would simply deliver the font with you site, or use a font service.
Or, it could serve as some kind of "copy-protection", but it would not protect against OCR.
Thinking more about it, this may be a diabolic way to collect strings from people who want to make them "copy-protectable". So you don't need OCR anymore, but fetch them from the source. ;-)
Either way, it's a nice project with a good execution!
Well, I mainly made this after seeing people on Twitter tweet out code perfectly formatted and highlighted, but it's just a screenshot of their text editor.
So basically, the main use-case of Alter is that it lets you tweet code snippets that are a little over 140 characters that are formatted correctly.
It can also be used for more, such as "copy-protection", like you said above.
var lineLengthOrder = lines.slice(0).sort(function(a, b) {
return b.length - a.length;
});
ctx.canvas.width = ctx.measureText(lineLengthOrder[0]).width + 25;
Ok, written by a beginner. A few tips:
1. Sorting all the lines just to get the longest is pretty wasteful. Try an explicit loop that iterates over the array once, keeping track of the longest line seen so far.
2. Using measureText to get the visible length of a line is a good idea, but doesn't mesh with using the .length property to find the longest line. Some characters may be wider than others, so a line containing fewer characters (shorter .length) could actually be longer (using measureText) than the one with the most characters. Try copy-pasting some Chinese from https://zh.wikipedia.org and compare with a line containing the same number of Latin characters.
To also say something positive: At least it looks nice!
Regarding point number 2, it should be noted that this only applies for non mono-spaced fonts. If you were using a mono-spaced font, then each character glyph uses the same physical canvas width as all others.
Regarding 1: I think the sorting approach is actually really nice in this case. Clearly it's not as efficient as a simple loop, but it's safer and more readable. Explicit looping and mutation can introduce nasty bugs which this kind of declarative approach can't.
The best part about this post is that the author is 13 years old. You are going to have an amazing career. I started programming around your age too. Trust me, it helps :)
35 comments
[ 14.8 ms ] story [ 1269 ms ] threadI suspect it may be used to enforce custom fonts in an old-fashioned way, but nowadays you would simply deliver the font with you site, or use a font service.
Or, it could serve as some kind of "copy-protection", but it would not protect against OCR.
Thinking more about it, this may be a diabolic way to collect strings from people who want to make them "copy-protectable". So you don't need OCR anymore, but fetch them from the source. ;-)
Either way, it's a nice project with a good execution!
Twitter.
I agree. Very quick too. I tried it with some ascii art and it makes the overall image a bit thinner, though:(
(not handling spaces correctly)
Image: https://sli.mg/ZSLtf6
Ascii Source: http://www.ascii-art.de/ascii/ghi/gary_larson.txt
The problem is that it finds the longest line, by the number of characters in it. Instead of taking the actual width.
1. Transparent Background (and)
2. Choice of character color (to integrate better with a webpage's color scheme, for example)
So basically, the main use-case of Alter is that it lets you tweet code snippets that are a little over 140 characters that are formatted correctly.
It can also be used for more, such as "copy-protection", like you said above.
1. Sorting all the lines just to get the longest is pretty wasteful. Try an explicit loop that iterates over the array once, keeping track of the longest line seen so far.
2. Using measureText to get the visible length of a line is a good idea, but doesn't mesh with using the .length property to find the longest line. Some characters may be wider than others, so a line containing fewer characters (shorter .length) could actually be longer (using measureText) than the one with the most characters. Try copy-pasting some Chinese from https://zh.wikipedia.org and compare with a line containing the same number of Latin characters.
To also say something positive: At least it looks nice!
EDIT: sorry, initial code returned length, not line itself
Edit: `lines.reduce((line, line_) => line_.length > line.length ? line_ : line, '')`
I'll iterate through the array instead. If you have any other suggestions, the repo is at https://github.com/KingPixil/alter
It does what it says (although I'm not sure how useful what it does is).
Still, good job.