techknowlogick / shiori

[Archived] Shiori is a simple bookmark manager. Upstream is now being supported again
https://github.com/go-shiori/shiori
MIT License
78 stars 9 forks source link

do not use/force remote fonts on the html/css/templates #132

Open m040601 opened 5 years ago

m040601 commented 5 years ago

I really like the aesthetics and the overall look of the html/templates/css you designed for shiori .

however I noticed my browser adblocker intercepting requests for remote fonts. So if block them i get an ugly place holder for the buttons (although still can read the nice popup that explains what the button . Not being an expert, I browsed the source code, and I (think) it has to with using some npm modules and the remote font services of fontawesome . So my browser tries to fetch the fonts frome the web if I dont have them on my system and/or cached. Am I correct ?

Althought very fashionable lately, the use of remote fonts has issues with privacy and fingerprinting. Shiori is all about owning your data locally, instead of using a service like pocket. So that once you have your articles cached, you can unplug from the internet and read them offline.

Would it be possible to design it in a way that makes use of the fonts that I already have on my system ?

techknowlogick commented 5 years ago

The fonts should be served from the binary itself via HTTP, so I am extremely concerned about it sending data to a remote service. Could you attach some logs where the fonts are being served from a remote service?

One area where I am specifically thinking something may be sent remotely is the "cache" page, due to HTML being essentially a copy (with some sanitation) of the bookmarked page.

I'm thinking about a user interface overhaul, and could instead of using Icon fonts then SVG could be used.

m040601 commented 5 years ago

thinking something may be sent remotely is the "cache" page ,due to HTML being essentially a copy

Excelent point ! We sure dont want that cleaned up page, "Phoning Home" again ... desperatly calling fonts.googleapis.com, facebook buttons, cute icon this or that ...

served from the binary itself via HTTP,

I see. I will be doing some more studying, and testing on this. Try to provide:

Again, I'm not an expert, and there are many related things to this issue, I have to learn myself . These web fashions keep changing seems like every year. Webfonts, social icons, svg icons, , inline-fonts ?, data:urls, embedded this or that... Shiori only makes sense offline, if it has everything needed to display it's own user interface and the cleaned up article. No matter how many times you hit the reload button (when offline)

Interesting Readings:

Example of a famous "aggressive" block remote fonts list, stoping , fontawesome.com, fonts.googleapis.com, typekit.com etc: https://github.com/ryanbr/fanboy-adblock/blob/master/fanboy-antifonts.txt Stops any thirdparty tracking when using fonts, however this will change the look and design of some sites.

And its'consequences: https://help.getadblock.com/support/solutions/articles/6000148708-adblock-blocks-font-awesome-social-media-icons

Excelent independent catalog: https://filterlists.com/

Web Design, how to save on webfonts , icons etc https://github.com/lowtechmag/solar/wiki/Solar-Web-Design

General:

Google Webfonts, the Spy Inside? | Hacker News https://news.ycombinator.com/item?id=9083606

European news sites are among the worst offenders when it comes to third-party cookies and content » Nieman Journalism Lab http://www.niemanlab.org/2018/05/european-news-sites-are-among-the-worst-offenders-when-it-comes-to-third-party-cookies-and-content/