add README with goals of this project and general web rant - jscancer - Javascript crap (relatively small)
HTML git clone git://git.codemadness.org/jscancer
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit c775b91d6b52143499e42be4939fd5a5b978c266
DIR parent 5e5b2ccae29afe5cb4e2f7faa2d39562ad8e2fcc
HTML Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Sat, 28 May 2016 20:26:34 +0200
add README with goals of this project and general web rant
Diffstat:
A RANT_WEBTIPS | 136 +++++++++++++++++++++++++++++++
A README | 39 +++++++++++++++++++++++++++++++
2 files changed, 175 insertions(+), 0 deletions(-)
---
DIR diff --git a/RANT_WEBTIPS b/RANT_WEBTIPS
@@ -0,0 +1,136 @@
+Rant / tips to improve the web
+------------------------------
+
+Below are some tips to make your site more pleasant to use, it covers only
+common issues with the "front-end" of sites such as:
+
+- Accessibility
+- Speed / bandwidth use.
+- Privacy
+- Security
+
+
+Webdesign:
+- Contrast:
+ - 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 content.
+ - 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 used.
+
+
+Correctness:
+
+Make sure all your (markup) code is correct, these tools can be used to help
+check this:
+
+HTML:
+- W3 HTML validator: https://validator.w3.org/
+CSS:
+- W3 CSS validator: https://jigsaw.w3.org/css-validator/
+Javascript:
+- jslint: http://www.jslint.com/
+- uglifyjs: http://lisperator.net/uglifyjs/ check "Scope warnings" options.
+
+
+Content filesize:
+- Optimize your content for the web:
+- Optimize your images:
+ - Use a common format such as: JPEG, PNG or GIF.
+ - If you use thumbnails scale them down to a visible thumbnail and link to
+ the original image.
+ - Strip unneccesary metadata.
+ - Balance an appropriate setting between quality and filesize. For example a
+ standard quality setting of 85% for JPEGs is more than good enough and
+ decreases the content size alot!
+ - Choose the appropriate format depending on the kind of image, as a general
+ rule: JPEG for photos, PNG: for sprites. 8-bit PNG/gif for simple pattern
+ images.
+- Try to combine CSS and Javascript in a single file: 1 CSS file, 1 Javascript
+ 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!
+
+
+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).
+- Use as little Javascript as possible, preferably none.
+- If Javascript is absolutely needed notify the user using the <noscript> tag.
+- Don't use animations, at the very least not in Javascript (difficult to block),
+ use CSS animations, gif or webm if you must.
+- Don't use jQuery or frameworks, there is no need to support IE6 (anymore).
+- Make sure links to your content work without Javascript enabled.
+- Don't use "toggle" menu's, make sure all content is visible without having to
+ uncollapse it.
+- Avoid custom popups or dialogs using Javascript, especially modal dialogs.
+
+
+Mobile:
+- Don't scale your site according to resolution, for example using CSS
+ selectors. This can break your site for users with smaller screens or who view
+ your site in a smaller window. A better way is to serve a specific
+ mobile-friendly site via a separate space for example a subdomain such as
+ m.yourdomain or mobile.yourdomain.
+
+
+CSS:
+- Don't overuse animations.
+- Don't use the Bootstrap or standard bloated CSS templates.
+
+
+Video / audio:
+- Preferably use open formats such as webm, oggv.
+- Don't use DRM.
+- 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!
+
+
+Websockets:
+- DON'T USE THEM!
+
+
+Cookies / localStorage:
+- Try to reduce the amount of cookies, for static content there is no need to
+ use them. For logins standard HTTP authentication can be used.
+- Don't use Javascript localStorage.
+
+
+Sensitive data:
+- If you serve sensitive data of users make sure your site support HTTPS and
+ your httpd is properly configured, there are good tools such as the SSLLabs
+ site to check this. A gratis certificate can be requested from letsencrypt.
+
+ SSLLabs: https://www.ssllabs.com/
+ Letsencrypt: https://letsencrypt.org/
+
+
+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 be able to
+ block such as: http://yourdomain/ads/*.
+- If the user blocks your advertisements don't show a nagscreen notification.
+- Don't track user behaviour, at the very least not if he has set the "DNT"
+ HTTP header.
+
+
+Use of content-delivery networks (CDNs):
+- Don't use CDN's such as cloudfront, at the very least don't serve Javascript
+ from them.
DIR diff --git a/README b/README
@@ -0,0 +1,39 @@
+This is a collection of Javascripts.
+
+
+Goals
+-----
+
+- Zero dependencies, no dependencies on external Javascript libraries such as
+ jQuery.
+- Functional for 90% of the tasks.
+- Be compatible with most commonly used browsers (but not ancient browsers).
+- If possible fallback to native browser behaviour.
+- Provide consistent behaviour for things like a datepicker, datalist and so on
+ until the major browsers will support it consistently natively.
+
+
+Issues with native behaviour
+----------------------------
+
+Datepicker, <input type="date" />:
+
+ - No native control visible in Firefox, regular textbox, but validation
+ attributes work.
+ - Native control in Chrome.
+ - Native control in Edge.
+
+
+Datalist, <datalist>:
+
+ Inconsistent autocomplete behaviour, for example:
+
+ Filter:
+ - In Firefox filter part of items in the list.
+ - In Chrome filter from start of a label in the list, searches on <option value /> if set, but not label.
+ - In IE/Edge filter does not work.
+
+ Display:
+ - In Firefox shows label but not the value, completes with value if set.
+ - In Chrome shows label and the value, completes with value if set.
+ - In IE/Edge shows label but not the value, completes with value if set.