GopherProxy

	RANT_WEBTIPS - jscancer - Javascript crap (relatively small)
	git clone git://git.codemadness.org/jscancer
	Log
	Files
	Refs
	README
	LICENSE
	---
	RANT_WEBTIPS (9709B)
	---
	1 Rant / tips to improve the web
	2 ------------------------------
	3
	4 Below are some tips to make your site more pleasant to use, it covers on…
	5 common issues with the "front-end" of sites such as:
	6
	7 - Accessibility
	8 - Privacy
	9 - Security
	10 - Speed / bandwidth use.
	11
	12
	13 Webdesign:
	14 - Contrast:
	15 - Use good contrast on your site.
	16 (Light) Grey text on a white background IS NOT COOL! Most people don…
	17 100% correct calibrated monitors or 20/20 vision.
	18 - Fonts:
	19 - Don't use tiny or weird fonts, make sure to atleast specify default
	20 fallback fonts, don't force people to use your fonts!
	21 - Don't use external custom fonts.
	22 - Preferably don't use icon fonts, if you do don't overdo it and also …
	23 text description if possible.
	24 - Don't overuse pagination on your site especially if you have not much …
	25 - Always think of the blind. Try your site with a screenreader.
	26 - Make sure your navigation links are easy to find, as a good test use l…
	27 and try to navigate your site using the keyboard only.
	28
	29 To check accessibility errors the useful site http://wave.webaim.org/ ca…
	30
	31 Web Content Accessibility Guidelines 2.0, level AA:
	32 - http://ec.europa.eu/ipg/standards/accessibility/index_en.htm
	33
	34 10 golden rules in accessible Web design:
	35 - http://ec.europa.eu/ipg/standards/accessibility/10_rules/index_en.htm
	36
	37 Web Content Accessibility Guidelines 2.0 (WCAG):
	38 - https://www.w3.org/TR/WCAG20/
	39
	40
	41 Correctness:
	42
	43 Make sure all your (markup) code is correct, these tools can be used to …
	44 check this:
	45
	46 HTML:
	47 - W3 HTML validator: https://validator.w3.org/
	48 CSS:
	49 - W3 CSS validator: https://jigsaw.w3.org/css-validator/
	50 Javascript:
	51 - jslint: http://www.jslint.com/
	52 - uglifyjs: http://lisperator.net/uglifyjs/ check "Scope warnings" optio…
	53 NOTE: do not use minification!
	54 Browsers:
	55 - Test it in all common browsers (Firefox, Firefox ESR, Chrome) and some…
	56 versions.
	57 User-Agent checking:
	58 - NEVER DO THIS.
	59
	60
	61 Content filesize:
	62 - Optimize your content for the web:
	63 - Optimize your images:
	64 - Use a common format such as: JPEG, PNG or GIF.
	65 - If you use thumbnails scale them down to a visible thumbnail and lin…
	66 the original image.
	67 - Strip unneccesary metadata.
	68 - Balance an appropriate setting between quality and filesize. For exa…
	69 standard quality setting of 85% for JPEGs is more than good enough a…
	70 decreases the content size alot!
	71 - Choose the appropriate format depending on the kind of image, as a g…
	72 rule: JPEG for photos, PNG: for sprites. 8-bit PNG/gif for simple pa…
	73 images.
	74 - Try to combine CSS and Javascript in a single file: 1 CSS file, 1 Java…
	75 file. This reduces the amount of requests and speeds up your page.
	76 - Try to reduce the size of your CSS and Javascript files: don't depend …
	77 jQuery or other bloated frameworks.
	78 - Don't obscure and don't minify your Javascript or CSS content. Using G…
	79 compression for your _textual_ content is fine though. Parsing speed of
	80 Javascript and CSS is reduced by simplifying the content, not be minif…
	81
	82
	83 Javascript use:
	84 - Make sure your site is visible without Javascript, if you serve simple…
	85 content site there is generally NO reason to use Javascript. As a good…
	86 make sure it is usable in for example lynx(1) or links(1).
	87 - Use as little Javascript as possible, preferably none.
	88 - If Javascript is absolutely needed notify the user using the <noscript…
	89 and make sure your web page "fallback gracefully".
	90 - Don't use animations, at the very least not coded in Javascript (diffi…
	91 block), use subtle CSS animations, gif or webm if you must. Animations…
	92 not be required to serve a functional page.
	93 - Don't use jQuery or other bloated frameworks, there is no need to supp…
	94 IE6 (anymore).
	95 - Make sure links to your content work without Javascript enabled: no ug…
	96 onclick handlers or event subscriptions.
	97 - Don't use "toggle" menu's, make sure all content is visible without ha…
	98 uncollapse it.
	99 - Avoid custom popups or dialogs using Javascript, especially modal dial…
	100
	101
	102 Mobile:
	103 - Don't scale your site according to resolution, for example using CSS
	104 selectors. This can break your site for users with smaller screens or …
	105 your site in a smaller window. A better way is to serve a specific
	106 mobile-friendly site via a separate space for example a subdomain such…
	107 m.yourdomain or mobile.yourdomain.
	108 - Don't use "hamburger" menus: try to have a functional navigation direc…
	109 visible on your web page.
	110
	111
	112 CSS:
	113 - Don't overuse animations.
	114 - Don't use the Bootstrap or standard bloated CSS templates.
	115
	116
	117 Video / audio:
	118 - Never use DRM.
	119 - Use open (container) formats such as webm, oggv.
	120 - Show the link to the file for viewing it in a normal movie/media playe…
	121 - Do not autoplay video and audio, this includes background video/audio:
	122 extremely invasive to the user, potentially harmful to some (handicapp…
	123 people.
	124
	125
	126 Flash or other proprietary plugins:
	127 - NEVER USE THEM!
	128
	129 Websockets:
	130 - NEVER USE THEM!
	131
	132 WebGL:
	133 - NEVER USE IT. Consider GPU kernel bugs and users exposing this to any …
	134 site... scary. It also opens options for GPU compute abuse (browser bi…
	135 mining, side-channel attacks, memory attacks etc).
	136
	137 Captchas:
	138 - NEVER USE THEM! Consider the handicapped people. A sane alternative is…
	139 some question text "What is the color of a banana?". This solution is …
	140 much more accessible to poor-sighted people etc.
	141
	142
	143 HTTP protocol:
	144 - Use HTTP/1, don't use SPDY or HTTP/2: if your webpage has a performance
	145 issue it is most likely not because of the protocol.
	146 - HTTP/1 is plain-text and the stream is easy debuggable.
	147
	148
	149 Cookies / localStorage:
	150 - Try to reduce the amount of cookies, for static content there is no ne…
	151 use them. For logins Basic HTTP authentication can be used:
	152 https://tools.ietf.org/html/rfc2617 (Section 2).
	153 - Don't use Javascript localStorage or session storage. This is a useless
	154 technology often abused for persistent advertising tracking.
	155
	156
	157 TLS (HTTPS):
	158 - Make sure to allow encryption of all resources on your site.
	159 It is especially important to protect HTML forms using TLS, but it is …
	160 important to protect any other resource because otherwise any resource…
	161 be MITM and affect the page content: for example injecting code into a
	162 webpage or serving a malicious image.
	163
	164 - So make sure your web server support HTTPS and your httpd is properly
	165 configured, there are good tools such as the SSLLabs site to check thi…
	166 gratis certificate can be requested from Letsencrypt.
	167
	168 SSLLabs (check): https://www.ssllabs.com/
	169 Letsencrypt: https://letsencrypt.org/
	170
	171
	172 Privacy:
	173 - If you are publishing for Europeans, always consider that you have to …
	174 stored data about a user available.
	175 GDPR: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
	176
	177 Advertisements:
	178 - Preferably don't use advertisements, at the very least don't serve it …
	179 external ad-network. Serve the ads from an url that the user can block…
	180 such as: http://yourdomain/ads/*.
	181 - If the user blocks your advertisements don't show a nagscreen notifica…
	182 - Don't track user behaviour, at the very least not if he has set the "D…
	183 HTTP header.
	184
	185
	186 Tracking:
	187 - Don't use Google Analytics or similar spy networks. Please use a custo…
	188 log analyzer or something like it.
	189 - Logging can be useful for security and debugging purposes, but make su…
	190 have some sort of logging and data retention policy.
	191
	192
	193 Maps:
	194 - Instead of Google Maps you can use OpenStreetMap or simply a static im…
	195 Google uses tracking in many of their applications.
	196 - Consider making a money donation or other contribution to the
	197 openstreetmap.org project.
	198
	199
	200 Use of content-delivery networks (CDNs):
	201 - Don't use CDN's such as Cloudfront, Cloudflare, at the very least don'…
	202 Javascript from them. Cloudflare is also known to block Tor traffic. T…
	203 obviously very useful for many things.
	204 When you use a third-party CDN you effectively give away the control of
	205 your site and make it untrusted for all clients. Some sites use so-cal…
	206 "Subresource Integrity headers", but these are just another ugly stand…
	207 for the ugly web.
	208
	209 https://torrentfreak.com/cloudflare-and-riaa-agree-on-tailored-site-bl…
	210
	211
	212 Misc scary things:
	213 - CSS keylogging: https://github.com/maxchehab/CSS-Keylogging
	214 - Talk "Scriptless Attacks: Stealing the Pie Without Touching the Sill".
	215 - Javascript rowhammer attack: https://www.vusec.net/projects/glitch/
	216 - Researchers show Nvidia GPUs can be vulnerable to side channel attacks:
	217 https://www.techspot.com/news/77301-researchers-show-nvidia-gpus-can-v…
	218 - In-browser (local) port scanning and probing:
	219 https://defuse.ca/in-browser-port-scanning.htm
	220 https://github.com/joevennix/lan-js/tree/master/src
	221 - Navigator beacon: https://w3c.github.io/beacon/
	222 - Hyperlink auditing (<a ping>): https://lists.w3.org/Archives/Public/pu…
	223 - Protocol handler leaks by using an image and CSS:
	224 https://www.fortinet.com/blog/threat-research/leaking-browser-url-prot…
	225 - Leak screen data by overlaying a SVG and time the rendering:
	226 https://www.hertzbleed.com/gpu.zip/
	227
	228 This is what happens when you let advertising agencies (such as Google) …
	229 write web standards.
	230
	231 Tim Berners-Lee on HTML DRM (EME): https://www.w3.org/blog/2017/02/on-em…
	232 Encrypted Media Extensions (EME): https://w3c.github.io/encrypted-media/
	233
	234 The editors in this standard:
	235
	236 "Editors:
	237 David Dorwin, Google Inc.
	238 Jerry Smith, Microsoft Corporation
	239 Mark Watson, Netflix Inc.
	240 Adrian Bateman, Microsoft Corporation (Until May 2014)"