improvements to RANTS with input from others - jscancer - Javascript crap (rela… | |
git clone git://git.codemadness.org/jscancer | |
Log | |
Files | |
Refs | |
README | |
LICENSE | |
--- | |
commit 1008fc2a801d8654064e48470b3c1fb73dc724f4 | |
parent 53212266cbe4e2266216b7aa9f5ddc6c64b7c818 | |
Author: Hiltjo Posthuma <[email protected]> | |
Date: Sun, 21 Jan 2018 20:21:06 +0100 | |
improvements to RANTS with input from others | |
Diffstat: | |
M RANT_WEBTIPS | 53 +++++++++++++++++++----------… | |
1 file changed, 33 insertions(+), 20 deletions(-) | |
--- | |
diff --git a/RANT_WEBTIPS b/RANT_WEBTIPS | |
@@ -5,9 +5,9 @@ Below are some tips to make your site more pleasant to use, it … | |
common issues with the "front-end" of sites such as: | |
- Accessibility | |
-- Speed / bandwidth use. | |
- Privacy | |
- Security | |
+- Speed / bandwidth use. | |
Webdesign: | |
@@ -15,15 +15,16 @@ Webdesign: | |
- Use good contrast on your site. | |
(Light) Grey text on a white background IS NOT COOL! Most people don't have | |
100% correct calibrated monitors or 20/20 vision. | |
- - Fonts: | |
- - Don't use tiny or weird fonts, make sure to atleast specify default | |
- fallback fonts, don't force people to use your fonts! | |
- - Don't use external custom fonts. | |
- - Preferably don't use icon fonts, if you do don't overdo it and also add a | |
- text description if possible. | |
- - Don't overuse pagination on your site especially if you have not much cont… | |
- - Make sure your navigation links are easy to find, as a good test use lynx(… | |
- and try to navigate your site using the keyboard only. | |
+- Fonts: | |
+ - Don't use tiny or weird fonts, make sure to atleast specify default | |
+ fallback fonts, don't force people to use your fonts! | |
+ - Don't use external custom fonts. | |
+ - Preferably don't use icon fonts, if you do don't overdo it and also add a | |
+ text description if possible. | |
+- Don't overuse pagination on your site especially if you have not much conten… | |
+- Always think of the blind. Try your site with a screenreader. | |
+- Make sure your navigation links are easy to find, as a good test use lynx(1) | |
+ and try to navigate your site using the keyboard only. | |
To check accessibility errors the useful site http://wave.webaim.org/ can be u… | |
@@ -40,6 +41,11 @@ CSS: | |
Javascript: | |
- jslint: http://www.jslint.com/ | |
- uglifyjs: http://lisperator.net/uglifyjs/ check "Scope warnings" options. | |
+Browsers: | |
+- Test it in all common browsers (Firefox, Firefox ESR, Chrome) and some older | |
+ versions. | |
+User-Agent checking: | |
+- NEVER DO THIS. | |
Content filesize: | |
@@ -59,15 +65,15 @@ Content filesize: | |
file. This reduces the amount of requests and speeds up your page. | |
- Try to reduce the size of your CSS and Javascript files: don't depend on | |
jQuery or other bloated frameworks. | |
-- Don't obscure / minify your Javascript or CSS content, GZIPping text content | |
- is fine though. Parsing speed of Javascript and CSS is reduced by simplifying | |
- the content, not be minifying it! | |
+- Don't obscure and don't minify your Javascript or CSS content. Using GZIP | |
+ compression for your _textual_ content is fine though. Parsing speed of | |
+ Javascript and CSS is reduced by simplifying the content, not be minifying i… | |
Javascript use: | |
- Make sure your site is visible without Javascript, if you serve simple static | |
content site there is generally NO reason to use Javascript. As a good test | |
- make sure it is usable in for example lynx(1). | |
+ make sure it is usable in for example lynx(1) or links(1). | |
- Use as little Javascript as possible, preferably none. | |
- If Javascript is absolutely needed notify the user using the <noscript> tag | |
and make sure your web page "fallback gracefully". | |
@@ -90,7 +96,7 @@ Mobile: | |
mobile-friendly site via a separate space for example a subdomain such as | |
m.yourdomain or mobile.yourdomain. | |
- Don't use "hamburger" menus: try to have a functional navigation directly | |
- visible on your web page.. | |
+ visible on your web page. | |
CSS: | |
@@ -101,16 +107,17 @@ CSS: | |
Video / audio: | |
- Never use DRM. | |
- Preferably use open (container) formats such as webm, oggv. | |
+- Show the link to the file for viewing it in an external viewer. | |
- Do not autoplay video and audio, this includes background video/audio: | |
extremely invasive to the user. | |
Flash or other proprietary plugins: | |
-- DON'T USE THEM! | |
+- NEVER USE THEM! | |
Websockets: | |
-- DON'T USE THEM! | |
+- NEVER USE THEM! | |
Cookies / localStorage: | |
@@ -135,6 +142,11 @@ TLS (HTTPS): | |
Letsencrypt: https://letsencrypt.org/ | |
+Privacy: | |
+- If you are publishing for Europeans, always consider that you have to make a… | |
+ stored data about a user available. | |
+ GDPR: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation | |
+ | |
Advertisements: | |
- Preferably don't use advertisements, at the very least don't serve it from an | |
external ad-network. Serve the ads from an url that the user can block easily | |
@@ -154,6 +166,7 @@ Tracking: | |
Maps: | |
- Instead of Google Maps you can use OpenStreetMap or simply a static image. | |
Google uses tracking in many of their applications. | |
+- Consider making a donation or contribution to the openstreetmap.org project. | |
Use of content-delivery networks (CDNs): | |
@@ -161,6 +174,6 @@ Use of content-delivery networks (CDNs): | |
Javascript from them. Cloudflare is also known to block Tor traffic. Tor is | |
obviously very useful for many things. | |
When you use a third-party CDN you effectively give away the control of | |
- your site and make it untrusted for all clients. Some sites use socalled | |
- Subresource Integrity headers, but these are just another ugly standard/hack | |
- in the ugly web. | |
+ your site and make it untrusted for all clients. Some sites use so-called | |
+ "Subresource Integrity headers", but these are just another ugly standard/ha… | |
+ for the ugly web. |