A direct influence after attending Capitol du Libre 2016 was to redo Pepper&carrot website over the last weeks. I wanted to solve something important: remove all CDN libraries I used in the past. It took me long to accept the challenge. It was like cleaning the Augean Stable and of course it was longer and harder than I expected because I'm not Hercules... This work was full of challenges, constrains but also creativity and happy accidents. Here are my notes about it.
What's a CDN library and why I don't want one anymore?
A CDN ( acronym for Content Delivery Network ) library is often a single line of code proposed "generously" by an external service to let you link and embed a complex features, the easy way. A common example is Google Web Fonts:
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> Paste this line in the header of your website and 'tadaaa!', you can use the font 'Lobster' to decorate all your texts. Easy, quick, efficient and fast to load. Merci Google. So, what's the problem?
Well a big one: Privacy of the readers of Pepper&Carrot. In our example, users of Google Web Fonts are bound by Google's privacy policy. It allows Google to collect a large amount of data about readers: log data (e.g. browser version), location data (the IP address of your site's visitors) and more because they can track your path or history threw all the website using their other networks of CDN.
... And I didn't had a CDN only for Google Web Font. I had also a CDN for Addthis (easy social-networks buttons), Gravatar (easy avatars), Font-awesome (easy icons), etc... As many, many website around!
Even if this services are not evil; CDN allow them to inject code in my webpages and do data farming."Data is the new oil" and all this enterprises works at gathering the more information to create virtual double of you and me. You can watch the conference The Matrix, Inverted by Aral Balkan for more infos about what this farming of data can do. For sure, they are succeeding... but only one deep sentence comes to my heart: I'll not contribute to THAT. So, let's fight!
First Fight: Replacing Gravatar
Gravatar is a well known service to propose good looking and custom avatar pictures to the majority of blogs out there, but if you search about it, it's also possibly one of the worst CDN. How to build a solid alternative to it? In my research, I have found the open MonsterID code of Andreas Gohr. Generating pictures was a cool idea, and I quickly started my own generator. The CAT AVATAR GENERATOR project was born.
The main challenge with the generator was to generate only pleasant results so everyone can possibly be happy about the resulting cat attributed to their name. I had to remove many shape after a first test. Some of the generated cats had vicious eyes, angry mouth, or also chicken meat in mouth (offensive for a vegan, I guess).
Now, the code is running on all the comments of the website. Leave a comment to test it. If you want to fork the code or download the source *.ora files, I distribute the sources here as Creative Commons Attribution license.
Second Fight: Replacing Google Web Font
No need to present this service more after the little paragraph I wrote about it in the introduction. I used Google Web Fonts because my website was needing to support this big amount of language; Bahasa Indonesia, Brezhoneg, Català, Čeština, Deutsch, English, Español, Français, Italiano, Magyar, Norsk, Nederlands, Polski, Português, Pусский, Ślōnskŏ gŏdka, Tiếng Việt and 日本語 ... Rare are the fonts able to do it and I had to load a custom CSS theme sheet per language (imagine the pain to maintain that). So I loaded a single Google Web Font per lang to get specific accent support.
For the alternative, I wanted to unify all my CSS sheets into one and use a single font, single style sheet. But few fonts with all language support are available... And almost zero with a comic style. And near to absolute zero if searching for free and open. But not zero, two fonts were good start: Comic Relief by Jeff Davis, and Patrick Hands by Patrick Wagesreiter. First one had support of Latin and Cyrillic and a good font structure, Second one had Latin and Latin extended to many variants including the complex Vietnamese alphabet. I started my own fork of Comic Relief named ComicSpice.
Then I started to tweak it: I wanted a font more condensed, less looking like a derivation of ComicSansMS, with all the accent and variation of Patrick Hands, and low gravity for the middle bar in E, F, A, H, etc...
Thanks to Font-Forge and a big amount of hours and sleepless nights, I could build ComicSpice as I wanted. It's now support many glyph, and it's lightweight enough as a webfont. You can download ComicSpice on the peppercarrot_fonts repository.
Final Fight: Replacing Font-awesome and Addthis
Font-awesome proposed a CDN to provide a special web-font: one with many icons easy to insert. I liked a lot building website with it and the project is open-source friendly. But the CDN is owned by Bootstrap/Twitter, and abusing a font to show picture is not really semantically correct in regards to the web. Loading all the 675 fonts-icon was frankly overkill for my needs of less than 40 icons.
I started to trace the icons with Inkscape SVG for the web, reusing classic symbol and easy derivative aspect from the Font-awesome icons. While I was doing this refactoring, I decided to manage myself the the social-network icons and remove another bad CDN, the Addthis one, providing button that track, spy and analyze the content you share. I wonder how possible this thing runs on 15 Millions websites... Well, never underestimate the human laziness. Doing 'networks' icons is long, boring and retrieve the link and the correct way to send to their API is also painful. But hard to beat my folder of 42 SVG icons for 44KB of data only!
Conclusion: I'm free!
Now Pepper&Carrot readers are free to spend time on the website and touch to all the buttons without being tracked by a third party services. You can even deactivate JavaScript for browsing it; I don't use this too. So, I'm free? Yes, no CDN libraries around on peppercarrot.com ! It's a clean website now. For sure, I'm not a developer and when I do this type of work, I do it by necessity because I prefer to draw. But I'm deeply worrying about the changes into the politic at a worldwide scale. Who will own our future data?... I feel it's urgent to act, to clean even a small 'in front of our door', to do something.
Yes, but...Investing a big week into this was on the downside the non-possibility to finish the episode 20 for the end of November, and so, no Pepper&Carrot money for me (I earn money only 'per finished and posted episode', not monthly). That was of course a deliberate choice, and I made a bit of Freelance artworks to not damage too much my bank account and to produce this work, but If you want to support my decisions and way to do things; every small coins is welcome to help me reach my monthly production goal budget on Pepper&Carrot. Thanks to all of you who support the project!