My fight against CDN libraries

A direct consequence of my attending Capitol du Libre 2016 was to redo Pepper&carrot website over the last weeks. I wanted to solve something important: remove all the CDN libraries I was using. It took me long to accept the challenge. It was like cleaning the Augean Stables and of course it was longer and harder than I expected because I'm no Hercules... This work was full of challenges and contraints but also creativity and happy accidents. Here are my notes about it.

What's a CDN library and why don't I want one anymore?

A CDN ( acronym for Content Delivery Network ) library is often a single line of code offered "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 through all the websites that are also using their CDN.

... And I didn't have a CDN only for Google Web Font. I also had a CDN for Addthis (easy social-network buttons), Gravatar (easy avatars), Font-awesome (easy icons), etc... As many, many websites around!

Even if those services are not evil; use of their CDN allows them to inject code in my webpages and do data farming. "Data is the new oil," and all those companies thrive by gathering the most information to create virtual doubles of you and me. You can watch the conference The Matrix, Inverted by Aral Balkan for more info about what this farming of data can do. For sure, they are succeeding... but only one deep thought 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 provide good looking and custom avatar pictures, used by a majority of blogs out there, but if you research it, it's also possibly one of the worst CDNs. But how to build a solid alternative to it? In my research, I have found the open MonsterID code from 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 be happy about the resulting cat assigned to their name. I had to remove many shapes after a first test. Some of the generated cats had vicious eyes, angry mouth, or also chicken meat in their mouth (offensive for a vegan, I guess).

Now, the code is running for 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. [update] Git source code is available


Second Fight: Replacing Google Web Font

No need to present this service further after the little paragraph I wrote about it in the introduction. I used Google Web Fonts because my website needed to support a big amount of languages: 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 日本語 ... The fonts able to do it all are rare and I had to load a custom CSS theme sheet per language (imagine my pain having to maintain that). So I loaded a single Google Web Font per language to get specific accent support.

For the alternative, I wanted to unify all my CSS sheets into one and use a single font, and a single style sheet. But few fonts with support for all languages are available... And fewer still with a comic style. And close to none if searching for free and open ones. But not zero, two fonts were a good start: Comic Relief by Jeff Davis, and Patrick Hands by Patrick Wagesreiter. The first one had support for Latin and Cyrillic and a good font structure, the 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 my font more condensed, looking less like a derivation of ComicSansMS, with all the accents and variation of Patrick Hands, low gravity for the middle bar in E, F, A, H, etc...

Thanks to Font-Forge and a big amount of time and sleepless nights, I managed to build ComicSpice like I wanted. It now supports many glyphs, 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 offers a CDN to provide a special web-font: one with many icons easy to insert. I really liked building websites with it and the project is open-source friendly. But the CDN is owned by Bootstrap/Twitter, and abusing a font to show pictures is not really semantically correct with regards to the web. Loading all of 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 handle the social-network icons myself and get rid of another bad CDN, Addthis, providing buttons that track, spy and analyze the content you share. I wonder how this thing got to run on 15 Millions websites... Well, never underestimate the human laziness. Doing the 'networks' icons was long, boring and retrieving the link and the correct way to post with their API was also painful. But it's now hard to beat my folder of 42 SVG icons for only 44KB of data!


Conclusion: I'm free!

Now Pepper&Carrot readers are free to spend time on the website and touch all the buttons without being tracked by third party services. You can even deactivate JavaScript to browsing it; I don't use this either. 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 worried about the changes into the politics of the web at the worldwide scale. Who will own our future data?... I feel it's urgent to act, to clean even if only 'in front of our door', to do something.

Yes, but... investing a big week into this had a big downside, the impossibility to finish 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 my bank account too much be able to produce this work, but If you want to support my decisions and way of doing things; every small coin is welcome to help me reach my monthly budget production goal for Pepper&Carrot. Thanks to all of you who support the project!

144 comments

link   Baptiste   , - Reply

Après il reste toujours les boutons de partages des réseaux sociaux. Il me semble qu'il y a aussi des trakers dessus.

link   David Revoy   Author , - Reply

Non, ils ont été refait 'maison' aussi:
ce sont des simples liens autour d'image en SVG.

La preuve dans mon code :-)

link   Baptiste   , - Reply

Ah ok, cool ^^. Je vois aussi que tu t'es arrangé pour avoir Carotte en avatar :)

link   David Revoy   Author , - Reply

Oui :o)
J'avoue, j'ai triché un peu pour l'avoir :-)

link   HTTPS   , - Reply

Bonjour David,

Je souhaite juste te prévenir que la capture de ton code pour prouver l'absence de traqueurs dans les boutons sociaux CASSE le chiffrement de la page web, car l'image n'est pas en HTTPS.
Si tu as l'occasion de corriger ça, je t'en remercie.

Bonne continuation !

link   David Revoy   Author , - Reply

Ha, vrai. Mon site est accessible en https et en http. J'ai tendance à l'oublier.
Ce genre de liens externes pour des images que j'héberge à la volée peut survenir.
Je vais faire attention. ( corrigé )

link   HTTPS   , - Reply

Merci ! :)

link   Seth   , - Reply

I only recently discovered Pepper & Carrot; I liked the strip but after this post I also like you.
You have a new patron, keep up the great work

link   David Revoy   Author , - Reply

A big thank you Seth for your support and nice words!

link   Sky   , - Reply

Great work !!
Thanks you fo all this work and love.

link   François   , - Reply

Thank you so much for this David!

link   Brunus   , - Reply

Hi David,
Few days ago I wrote a small Diaspora* post on Web fonts and Web icons.
Google Fonts are published under Free licenses, you can serve it from your website, all you need is to put the license description file in the same directory than the font, and even add a credit somewhere in the website, and a like to the licence file.
It’s possible to download the TTF version, to convert it to WOFF (Web Open Font Format), and to serve it from the website itself, as a CSS font familly. It’s even possible to base 64 encode it and to inject the font directly as data URI in the CSS.
For icons, there is also a simple solution : to pack it into a Web font and to serve it also from the website. Services like http://fontello.com/ allow us to choose icons from several sets, even FontAwesome, only icons we need, to inject our own icons as SVG files, and to pack it as a Web font.
It’s even possible to base64 encode this other Web font and to inject it in your CSS.
To convert TTF fonts to WOFF , there is the infamous FOSS Fontforge.
To base64 encode…if you have a webserver localy for your Web dev needs, you should have base64 command line tool.

link   David Revoy   Author , - Reply

Sure, that's a bit what I did for 'Patrick Hands' font ; the only open one with 'handwritting' style and support of Vietnamese Alphabet. I grabbed it on local, and copied only special characters and accents from it after batch rescaling and styling. One of the real problem was the multiple CSS file to embed 3 or 4 fonts with support of Latin, other one of Latin-extended, other one, of Japanese , etc... With different font metric, that was a hell to maintain. http://transfonter.org/ web service was a good help. I wish Fontforge could automatize this multiple export/generate render for web.

link   Jookia   , - Reply

Hey David,

Not many people care about self-sufficiency, tracking and surveillance. Even fewer of them are in a position to do something about it whether it be time or skills. I don't know much about the effort that you put in to art, but as a developer I'm floored that you did this at all. To put it simply, I'd probably get in to headache territory just by looking at the requirements. As a non-developer, you sure are agile. ;)

link   David Revoy   Author , - Reply

Thank you again Jookia for the support , the nice words about my dev skill ; and the help with the code of the Cat Generator!

link   Blazinghand   , - Reply

I respect this. Thank you.

link   CatchChallenger   , - Reply

Great work, thanks to you.

link   amic_   , - Reply

Génial.

Après avoir gagné le premier easter egg légalement sans tricher, je suis allé voir le code, et j’ai bien rigolé avec les autres.

Du coup j’ai un peu cherché autour de mon nom pour voir celui qui me convenait, je teste ça en commentant !

link   Craig Maloney   Contributor , - Reply

Thank you! This is awesome work!

link   Jerry Wham   , - Reply

Merci.

link   Jean Marcelin   , - Reply

Bravo !

link   Ned   , - Reply

un seul mot : Bravo.

link   jcfrog   , - Reply

Ouaip, bravissimo :)

link   Lodewijk Gonggrijp   , - Reply

Well done, mon ami

link   Matou   , - Reply

Gros boulot dis donc! Je suis même surpris que tu aies pu faire tout ça en seulement 1 semaine! Et j'ai beau être développeur moi-même (enfin, à la base), je n'avais jamais pensé à l'aspect collection de data derrière les CDN... Quelle naïveté... Bref, félicitations!

link   mmu_man   , - Reply

Super les chatons ;-)
A noter que changer les boutons de partages enfreint les CGU de nombreux de ces sites, cf. https://tosdr.org/ mais OSEF :D

link   mmu_man   , - Reply

"nombre de", mais euh...

link   Jay   , - Reply

Thank you for this. So much good info and I've been blindly trusting some CDN.

link   Olivier Saraja   , - Reply

Cats ! Cats now everywhere ! I hate you, pal ! ;-)

link   David Revoy   Author , - Reply

Hehe, your cat is looking good! :-P

link   PhiLho   , - Reply

@Brunus "For icons, there is also a simple solution : to pack it into a Web font"
No. David hinted about this, it is a bad idea. There are lot of articles on the Net explaining why. Example: https://cloudfour.com/thinks/seriously- … con-fonts/
Basically, this hurts the accessibility of the pages using these iconic Web fonts. Moreover, as David said, it is a bit of a waste to download a file with hundred of icons while you use only a few dozen.
Using SVG, as individual files or as a sprite sheet, is a better, more semantic solution, even if it needs a bit more work. Here again, there are several ways to do that, and lot of articles to explain that, for example : https://medium.com/@iamryanyu/svg-sprit … 609d4d6144

Thank you, David, for sharing your thoughts. I never thought of CDNs this way... :-(

link   Kedamono   , - Reply

Great work David. And thank you for documenting the struggle to be free!

link   lisandro   , - Reply

Muy interesante, creo que al final fue una buena decisión ya que ahora estas ayudando a una red mas neutral y defendiendo la privacidad de tus usuarios.

link   remi   , - Reply

This is awesome! Thanks for taking a stance on this man. I just went over my websites and pulled everything that was referenced through a CDN ;) (unfortunately a couple things need Google Analytics)

link   Nick   , - Reply

Wow, thank you for all the hard work!

link   Sk   , - Reply

Thank you for the effort and sharing your thoughts. You are awesome!

(btw. as I replaced external content, I stumbled upon Libravatar as an Gravatar replacement. But as I don't need Avatars at all, I turned it off completely, so I have no Idea how good it works).

link   z3ntu   , - Reply

I am a cat :3

link   David Revoy   Author , - Reply

a cute one !

link   marzoul   , - Reply

By default I block everything not from the original domain...
And it's so pleasant to see that strictly all content of this page is from peppercarrot.com!
A big thank you for this effort!

link   David Revoy   Author , - Reply

Thank you marzoul!
Can you share with us your solution to bloc all CDN on other website? I'm interested in such a solution too :)

link   Guillaume   , - Reply

Under Firefox, you can use the uMatrix extension for this purpose.

link   igor giuseppe   , - Reply

oh my god!
you're an true MVP, true warrior '-'

but, for CSS i don't think you need to get into all this trouble, css dont support code, so you could just download the .css file and embed it directly to the site, without an cross origin/domain request, there is no way to track the users with an css file.

i may be wrong, i don't know the full spec of css3, in any case you would need download it for all languages.

with javascript its possible to track, depending on what is inside the code, so it may be dangerous to use, and you would need chose if you want to update the library to the lastest version (for example, to fix security issues) or not because the latest version may have an backdoor, so it would require to re-read the code, to much trouble to deal with.

link   David Revoy   Author , - Reply

Thank you! Even if the link is on the CSS ; your computer has to access another server than my server to download it. This access produce logs. Connection logs contains a lot of information: your IP, the time, your browser. This impact is little if you focus on a single website. It has a lot of impact if an enterprise log 15Million websites and all their traffic!

link   valvin   Contributor , - Reply

Great Article! It should be a good idea to translate it with framalang.

Big thanks for this wornderful cat generator and for our privacy :)

link   freecultureftw   , - Reply

Can I comment now ?

link   freecultureftw   , - Reply

Yesssss !!! \o/

link   G. A.   , - Reply

Great work! I love the new avatars. :D

link   BibiSky51   , - Reply

Wahou !
uBlock Origin s'ennuie : plus une seule requête à bloquer

link   Aurélien   , - Reply

Wow, great work David! Have you considered hosting some of these files yourself instead of completely replacing them?

link   David Revoy   Author , - Reply

Oh yes, especially for font-awesome and Google font as Patrick Hand ( because of the open license ). But for font awesome, I quickly saw the css only minified ( so, hard to edit ) weight 31KB + the font-awesome font file itself, between 96 and 165KB depending the browser. A footprint of additional 140KB or 190KB for my homepage only to display 5 icons simultaneously on my front page was crazy. 5 icons = 8KB with SVG

link   Anonymous   , - Reply

Je dois bien avouer que ce côté libriste me fascine toujours en encore plus : quel joie de voir un dessinateur -- dont la passion et l'occupation principales ne sont pas l'informatique -- prendre autant à cœur quelque chose de si important :-)

C'est pour l'art qui se dégage de Pepper&Carrot mais aussi un peu pour ce choix courageux de la liberté que j'ai choisi une (petite) donation mensuelle (à ma modeste mesure) : les artistes comme toi sont rares et précieux !

Merci !

link   David Revoy   Author , - Reply

Merci pour le soutient Anonymous!
( et pour ces mots qui me vont droit au coeur <3 )

link   ki   , - Reply

Pour info, il y a http://overpassfont.org/ qui est fait par Red Hat
Je ne sais pas ce qu'il en est des licences mais je pense que ça doit être assez libre.

Sinon, je sais pas si c'est moi mais la police de caractère est petite comparé à d'habitude. J'ai du zoomé pour avoir une lecture confortable.

link   David Revoy   Author , - Reply

Des polices sans-serif comme Open Sans, celle-ci, Roboto, DroidSans, Noto , etc... Il y en a un paquet! Elles ont des records de completion de l'UTF8 et sont libres. Ce sont aussi bien souvent des sacrés plaquards (taille des fichiers ) et leur aspect fait pas trop BD, ça manque de fun pour la font du site web. :-)

Oui, j'ai mis à jour le CMS du blog (PluXML) , et ils conseillait une remise à zero des font à 97,0% dans leur template de base. J'ai imité. Je vais voir pour ajuster ça. Merci du retour.

link   Aurélien   , - Reply

I see, indeed that's much lighter!

link   Aurélien   , - Reply

By the way, your post made it to the front page of hackernews! https://news.ycombinator.com/item?id=13075199

link   David Revoy   Author , - Reply

Wow!

link   Jim   , - Reply

The font re-work you did was very nice. All I did with my site's Google Fonts was to download it and serve it from the same place as the actual web pages. Your approach was much more artistic, and a great contribution too!

link   Jim   , - Reply

Also love the cats :-) Perhaps they could be integrated with libravatar (https://www.libravatar.org/) which is an Open drop-in replacement for Gravatar. Also, for analytics you can either increase the details logged by your webserver directly, or implement piwik (https://piwik.org/) for local, under-your-control analytics.

link   583f657b3a80c   , - Reply

Oh, merci ! C'est super ce que tu as fait, mon uMatrix ne voit plus rouge ! ^^

link   Electromantis   , - Reply

Great read, I got to cleaning up my cdn usage as well hehe.
My favorite tool for generating icon fonts is the icomoon webapp. It's a really handy tool. (https://icomoon.io/app/)

You can import your own svg icons or you can pick and choose icons from other libraries (like fontawesome) and bundle them into your own custom icon font.

Then you can download the customized font file and a tidy css file and host it on your site, nifty!
Also, you don't even have to create an account to use it, as your icon libraries are stored in the browser's cache!

link   Electromantis   , - Reply

Also, really like the catvatars. Always wanted to write something similar!

link   583f7b02633e4   , - Reply

Thank you very much! The cats are very pretty, and I appreciate the care you're putting into this website.
(I'm still experimenting with which cat I prefer. :) )

link   TheNinthWave   , - Reply

This is now one of the few websites that Privacy Badger finds no third party resources on! It's nice to see that little green 0.

link   Adam Baxter   , - Reply

Next up, enabling HTTPS?

link   David Revoy   Author , - Reply

Ha, this sounds really technical ; but I'm open to help and contributions :)

link   Jookia   , - Reply

It's a bit technical, though you already have an HTTPS version of the site. You just need to do three things:

- Enable HSTS on the HTTPS site. This way browsers will auto-redirect to the HTTPS site if they're able to visit it at least once.
- Redirect to HTTPS when people go to the HTTP version. You can do this using your web server I think.
- Refine to not redirect to HTTPS if you're visiting from China. China blocks HTTPS for this site, and it'd be a shame to lose a Chinese audience. This is probably the most complicated part but it's done using GeoIP extensions for the web server.

link   BohwaZ   , - Reply

Please please don't use HSTS for your websites, this is terrible for users who are trying to browse on public hotspots, libraries, cyber cafes, etc. as those are usually using a router/proxy that is re-encrypting HTTPS websites with a different certificate (this is because the router is filtering malware, ads, porn, etc.). In that case people trying to visit your website will be stuck with an error message and no way to use your website (especially if you don't keep a HTTP version of your website).

I know that the problem comes from the proxy, but this is not a banking website, and the most important thing is being able to access the website. Just try to browse the internet from a public library and you will know the pain users (who are usually poor and cannot pay for an internet connection or a phone) may feel when browsing the web nowadays, so please think about them :)

link   Sergey Ponomarev   , - Reply

> Please please don't use HSTS for your websites
No, it's better to use HTTPS everywhere, even if this is not a "banking" site. This is a problem of proxies and they shouldn't block it. Even more, HTTP2 is totally built on top of SSL.
Or you might use a Tor browser and create your .onion version of site for this kind of users.
You must fight for your rights.

link   Jackie   , - Reply

Just some information: at the time of writing, HTTPS works in China, though it seems to be slower and probably not very stable.
By the way, nice comics! And happy Chinese new year =^_^=

link   Marc Diethelm   , - Reply

I commend your conscience, thinking and effort here it's more than 99.9% of all professional web developers would do. Did you consider that fonts and icons from services like Google Fonts, Font Awesome can be hosted an you own server? That's what I always do, for two reasons. Privacy but also performance. On mobile devices the additional DNS lookup and overall latency especially when one considers the often slow CDNs can slow the initial rendering of a page down quite a bit.

As for the problems related to gravatar, thank you. I wasn't aware of this.

link   Chester   , - Reply

Nice article! BTW cats eating chicken wouldn't be offensive to anyone. Cats are carnivores by nature ;)

link   Caggers   , - Reply

Very elegant! Thanks for sharing, I always find myself hunting down CDNs use in terms of performance, but I had never even considered privacy! Constant vigilance!

link   MaxenceC   , - Reply

While being very useful, Addthis is awful in terms of tracking & loading time, I removed it long ago.

It would be great to have a "CDN info" website where you could see how heavy is the librairies we are loading, as well as how much data are tracked !

link   Chris   , - Reply

That's really great! Unfortunately too few people care about beeing tracked everywhere.

link   Jesus Flores   , - Reply

Thank you for this! Also, as a vegan, I appreciate your empathy.

link   guest   , - Reply

awesome! (also want to see my random cat avatar)

link   Teddy   , - Reply

Another option is to pay for your own CDN from a cloud provider. We use Azure CDN to host images/css/js/fonts and while the pricing model is confusing as can be, it only comes to $5-$10/month for a decent amount of traffic.

link   David Revoy   Author , - Reply

Sure, CDN for your own data with self-hosting is not the same than letting a third party inject code in your webpage and benefit from log/datas. No problem on my side with it ( as long as the host propose a good solution to clear CDN cache, because fighting with a too strong cache can be a pain to update a CDN-based host/website ).

link   marzoul   , - Reply

For blocking all external contents, I use uMatrix add-on with Firefox.
This extension seems to also be available for Chrome and Opera.

link   marzoul   , - Reply

It was an answer for David Revoy who asked.
For an unknown reason my reply appears at end of comments, sorry!

link   David Revoy   Author , - Reply

If you watch the page, that's the only place where I'm using Javascript to get focus on the 'reply box'. But it's buggy 30% of the time and I'm not able to fix that because I still don't know how to reproduce and this code is inherited from the CMS ( PluXml ) I'm using.

Thanks for the extension, I'll adopt it!

link   David Revoy   Author , - Reply

Oh, I think I found the bug : when something already exist in the URL ( as my-fight-against-cdn-libraries#c090-749 , hitting reply button force the page to reload the page with the my-fight-against-cdn-libraries#form anchor ) I'll dive into the code to (try to) fix this.

link   hbnk   , - Reply

My David, you are the man! Great decision, awsome execution. You have just showed everyone, that build a good looking website without tracking shit and javascript IS possible. You are right, people are lazy, they do not think forward and they will end up with project that is halfed-owned by 3rd parties. 10$ is going from me, keep on this good job.

link   David Revoy   Author , - Reply

Thank you @hbnk for the nice words and for supporting my work on Pepper&Carrot!

link   softwarerero   , - Reply

Thanks for the inspiration. Yesteday night I cut off all CDN from my developer's profile. I found that there is no need at all for a personalized font, so I simply eliminated Google Fonts and then I served FontAwesome from my server. It took me an hour including some other tweaks.

link   David Revoy   Author , - Reply

... and your page load very quickly and is very easy to read and get access to the content!
I'm happy my article inspired you!

link   Andres   , - Reply

Oh but you are missing one of the cardinal rules for web optimization nowadays: reduce HTTP requests. What you are suggesting by using individual SVGs will take you from < 6 requests to God knows how many. And since you are supposed to put your javascript at the end of the page, the net effect will be noticeable while you wait for the page to load.

link   faav   , - Reply

Maybe you could also suggest a solution. But nevermind, I will do instead: "SVG Image Sprites"

link   David Revoy   Author , - Reply

Hey, I studied the SVG-Image-Sprite solution, but I never was really convinced about it. All solution I saw felt like workarounds or trick to bypass the HTML spec. I like to keep the semantic of the webpage simple and call an image and image.
Of course, I understand the challenge of dealing with hundreds of HTTP requests for site with hundreds of glyph; but here I'm loading 10 or 15 3KB images per page. It's content, it's 20x20px decorations, it's images. So, it feels normal it has an impact on the loading of the page!

link   skarfester   , - Reply

That's a lot of work!
Thank you for sharing it. Man, you are an internet hero.

link   test   , - Reply

test comment to check the cat image.

link   hkmaly   , - Reply

The IDEA behind using CDN for fonts and similar stuff is that by sharing the code for multiple sites, users will already have it in cache. It's true that the CDN provider can anytime turn off the caching and go for collecting data instead, but I still wouldn't put it in same category as gravatar, social share buttons (not only addthis, even the "direct" facebook/twitter ones) and services like google analytics or google adsense, which are tracking users by design and by using javascript they can directly inject stuff into your pages.

link   Salbet   , - Reply

Je trouve ton engagement très chouette :) Merci pour tous ces changements ET pour ce paragraphe explicatif. Mes amis informaticiens m'ont pas mal branchée sur l'open source et la liberté sur le web mais finalement je n'y connais pas grand chose et de petites infos comme ça sont toujours bonnes à prendre... Rien que pour se re-motiver à refuser le contrôle vicieux et invisible des pieuvres qui ont su se rendre si indispensables (en théorie seulement, comme tu le prouves si bien). Continuons tous ensemble le combat pour le partage et le respect de nos libertés individuelles (wow, le slogan ! ;) )

link   Abner   , - Reply

Great work, I have just forked your code to Github. If you don't like to display it there, I could remove it. https://github.com/ForkedReposBak/cat-avatar-generator

link   David Revoy   Author , - Reply

I'm totally ok with it Abner. I have 90% of my repos on Github. It's the first time I'm trying the new Framagit alternative. ( you can log in it with a Github account , and it has the same features ). Thank you.

link   Languard   , - Reply

Just a quick note to say you did a good job with this. Ghostery reports 0 trackers on the site :)

link   gok   , - Reply

Great decision.
Keep up the good work ;-).

link   Moini   , - Reply

Merci, David! The font looks really nice, the cats are funny and SVGs, are, of course, a wonderful choice :)
I wish more people would go with this approach and respect other people's privacy with a bit more sincerity.

link   Lucas   , - Reply

Incredible, great work.

link   fwolf   , - Reply

Well .. replacing stuff like this is nice-to-haves. I'd be more bothered about ultra-crappy compression of your images (article pics etc.). nearly 200 kb for a 1100 x 500 image? wasted bandwidth! Just throwing it through ImageMagick with 80% quality reduced the size by over 100%. But even 90% quality = 10% compression resulted in 143 kb. Thats a reduction of about 30%!

I'd do that the foremost - excessive image optimization - and just then, head over to the fine-tuning ;)

cu, w0lf.

link   David Revoy   Author , - Reply

Haha. Yes, I know. I love 92% jpg quality.
80% jpg quality for visual artists ; is a bit like Walkie-talkie sounds for a musician xD

link   Barun Saha   , - Reply

Hi David,

Interesting read. However, in many cases -- as some others have also pointed out already -- using a CDN is optional and the content can be served from your own website (e.g., jQuey and font-awesome). AddThis, Gravatar, and similar things are a different story for they actually provide some "service" rather than a "resource". Nevertheless, I agree with the overall theme of this article.

Hoping to see a cute cat icon :)

link   Lloyd Ash Pyne   , - Reply

Very cool. Certainly gives pause for thought and makes me think about what can be done for future sites I may work on

... and look at all those carrot-style cat avatars :)

link   Sergey Ponomarev   , - Reply

Hi David, I just want you to know that now you can use CDN safelly:
https://en.wikipedia.org/wiki/Subresource_Integrity
It's still doesn't supported by Internet Explorer but... you know, if someone uses this browser it doesn't care about security. Anyway they are planning to add it https://wpdev.uservoice.com/forums/2578 … -integrity

And even some CDN are suggest to use this https://www.maxcdn.com/blog/bootstrapcd … integrity/

link   chuck   , - Reply

@ Sergey Ponomarev
CDN isn’t about integrity. CDN is a third party which gets all the information about visitors that the website gets. I’m not willing to give information to a CDN when I visit peppercarrot.com.

link   Sergey Ponomarev   , - Reply

Just set attribute "crossorigin="anonymous"
https://developer.mozilla.org/en-US/doc … attributes

Then problem is solved ;-)

link   libre fan   , - Reply

Excellente nouvelle et bravo pour ces premiers pas vers la liberté, David. Quel boulot en effet ! et quel sacrifice (un mois de dons) !
Tu donnes un bel exemple et des gens déjà marchent dans tes pas. Framasoft et sa campagne de dégooglisation ont dû t’influencer, c’est une bonne chose. À ton tour, tu as une grande influence sur les gens qui lisent et aiment Pepper&Carrot.
Bravo pour tes chats délivrés de gravatar.
Et tu es un peu passé à Gitlab, ça fait vraiment plaisir aussi :-) Franchement, le passage des traductions sur Gitlab de Framasoft ou ailleurs ne devrait poser aucun problème et les gens vont te suivre, aucune crainte de ce côté ! En attendant, je mettrai mes fichiers corrigés et recorrigés des épisodes P&C en espéranto sur mon site pour les garder bien libres pour tous, hors d’atteinte de Github. Tout ceci m’encourage à me dépêcher ;-)

Encore bravo et mille mercis David :-)

link   libre fan   , - Reply

HTTPS is easy David with Let’s Encrypt :-)

link   Gav   , - Reply

Bonjour !

Est-ce que par hasard vous sauriez comment intégrer l'appel du script cat avatar generator dans un Wordpress ?

Merci d'avance !

link   A fake username   , - Reply

but... but I'm a dog person I really don't like cats. Been attacked by them (and injured) one too many times. I've also been physically and mentally abused enough times involving cats (to the point I had to switch schools over it) that I am not comfortable attaching my normal online username to this post.

Not trying to take away from what you're doing here, I really do agree with it, but could use an ability to put my own avatar (or at the very least pick an animal)

link   skankhunt42   , - Reply

Are you a grown up? Deal with it.
Are you a child? STFU.
Are you a troll? ROFL.

link   Anonymous   , - Reply

That was actually not very polite. In my opinion it is quite obvious that "A fake username" was being sincere, and telling them to just deal with it and shut up, not even bothering to consider the possible circumstances of the injuries and abuse, is very inconsiderate.
Myself, I like cats, but this doesn't mean that I don't respect someone's wish to use an avatar that they're comfortable with.
I think it might be nice if there was an opportunity to pick other animals as avatars, and even if not, there's no call to be so rude.

link   Anonymous   , - Reply

Oops, clicked the wrong 'Reply' button. I meant to reply to "skankhunt42". Sorry.

link   freecultureftw   , - Reply

Does it work if you browse the web through a SOCKS proxy ?

link   freecultureftw   , - Reply

err, my bad, I was replying to BohwaZ : http://peppercarrot.com/en/article390/m … #c0390-774 about ssl-hijacking proxies

link   Vlad Svoka   , - Reply

I just want my catavatar

link   Sergey Ponomarev   , - Reply

Hi David,
You can also enable HTTS preloading to force users to use HTTPS
https://scotthelme.co.uk/hsts-preloading/

link   lanodan   , - Reply

Yeah more freedom for pepper & carrot. \o/

I love the idea of using carrot-style cats (also wonder if there is genderqueer cats, hope mine sorta is :P) even if I think there is too much cats… I think I’ll maybe remix it with another living being (probably wolves) if I have time and/or think of adding comments to my blog (currently using “social medias” and XMPP+email).
Also I don’t think a non-vegan image is offensive but maybe put a preview/reload button so people can choose another one.

PS : Le captcha semble ne pas fonctionner quand les cookies sont désactivés (5+2 cookies, 1 devrait suffire, voire zéro)

link   David Revoy   Author , - Reply

Thank you/Merci pour le feedback. Ha oui, Je vais essayer de cleaner les cookies pris par le CMS. 1 devrait suffire pour la selection de langue active.

link   H   , - Reply

Thank you!

link   DeepBlue V7.X   , - Reply

That actually convinced me to become a patreon. I knew, that you did awesome stuff with Krita and I loved reading Pepper&Carrot, but your attention to detail in using open source and going to the roots of it, protecting the privacy and rights of the users and creators is definitively something else.
Thank you so much for this, I just love it!

link   David Revoy   Author , - Reply

Thank you a lot for your support!

link   Marco   , - Reply

The cat avatar is soooooo cuuuuuuuute =) but the cat i got looks like a female cat tahahahah!

link   David Revoy   Author , - Reply

Ha yes, I couldn't solve something to manager gender in it. :) Cute Marco!

link   Testa   , - Reply

I love you, man. Another light in the dark.

link   Benji   , - Reply

https://en.wikipedia.org/wiki/Category: … s_software

link   David Revoy   Author , - Reply

:-)

link   Ruangfoto.com   , - Reply

This is awesome! Thanks for taking a stance on this man. I just went over my websites and pulled everything that was referenced through a CDN ;) (unfortunately a couple things need Google Analytics)

link   Purr   , - Reply

If you care about the privacy of your readers why don't you enforce HTTPS?

link   David Revoy   Author , - Reply

Hi Purr, I care for the privacy of readers.
But I also care about accessibility, and I had report HTTPS could make the webcomic not accessible for a part of the users.
I don't know a lot about HTTPS ; So, let me know : How HTTPS is better for privacy? How HTTP is bad for privacy? I mean in the case of Pepper&Carrot ; a website not collecting any user profile information, without upload from community, without profile creation and login... We are in a read-only website. Sorry for my ignorance in case it's obvious, I just read somewhere HTTPS was good for encrypting/certifying the website and that was mandatory for security in case of profile/login/user side datas but not for a read only website... Let me know, I prefer spending all my energy in production of artwork this month instead of diving in understanding the confusing documention around HTTPS, so any help to give me clear and easy answer, easy technical help of how it's possible to "enforce", and a list of minimal downside impact ; is welcome. As far as I know, the website in current form doesn't harm anyone privacy, but I'm ready/open to improve this.

link   Purr   , - Reply

You are right HTTPS isn't that important for read-only sites, but encryption is the only way to fight mass-surveillance. Should the intelligence organizations know what pages of your site your readers are visiting? What comments they are leaving? What email addresses they are submitting with their comments?

Since your site already offers HTTPS you'd only have to redirect from HTTP to HTTPS, how you do this depends on your web server. I guess I worded my question a bit harshly. I totally get if you want to draw.

link   David Revoy   Author , - Reply

Thank you for your simple explanation. I better understand how it can improve security. I'll try to look and experiment a bit with the concept of redirecting all http to https for peppercarrot.com. Noted on to-do , post release of episode 21 :)

link   handicraftsman   , - Reply

I did that on my site using DNS provider service. (cloudflare). Other choice is to send redirect-request as response to all HTTP (not S) requests

link   Thorsten Ziegler   , - Reply

Cloudflare seems to have something to do with Google (partnership or something). Think twice, please :-\

link   Kartik Luke Singh   , - Reply

Hi

link   nayanatara   , - Reply

are bubbles magic?

link   Watcher   , - Reply

That Matrix Inverted video: first 6:50 minutes are expendable; whole conference could last half as long if the system speaker didn't pause so much within every phrase; he has an exasperating voice like every sentence he says is the most important sentence of the conference.
There, I said it. I'd prefer to read a transcript honestly.

link   Watcher   , - Reply

Woops, the word 'system' shouldn't be there.

link   Mindless   , - Reply

Super article, ça redonne un peu d'espoir pour le web. Je suis tombé sur ton article grâce à ton post sur reddit/webdev. Super blog, je met en fav :)

link   默默   , - Reply

很好!
猫很可爱。

link   barrabinfc   , - Reply

Super article and nice avatars! Thank you!
I've ported the PHP version to a pure javascript (ES6) , maybe it will be useful to other people too.
Maybe you can merge with your code at framagit ?

Thanks for all the fish!

link   David Revoy   Author , - Reply

Thanks!
For sure I'll be happy to point the 'README' to your repo.

link   Grayson   , - Reply

I cannot thank you enough for taking the effort and time to protect your user's privacy. Merci David.

Leave a reply

Notice : URL allowed ( auto-clickable ). Pictures URL too ( gif,jpg,png auto-displayed )

Capcha

Enter image code