Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Merge branch 'javascript-modern-presence'

  • Loading branch information...
commit b5cf61c14b36d1f7c10fdca73b171397abcdc80b 2 parents 003215a + 5dacde2
Stephen L. Blum stephenlb authored

Showing 2 changed files with 225 additions and 0 deletions. Show diff stats Hide diff stats

  1. +166 0 HTML5.md
  2. +59 0 javascript-modern/README.md
166 HTML5.md
Source Rendered
... ... @@ -0,0 +1,166 @@
  1 +# PubNub HTML5 Guide
  2 +
  3 +CSS and DOM rendering is the slowest part of a website 900-5000ms depending on speed of system.
  4 +And then consider a High DB Access pages,
  5 +which take 1-5 seconds to complete on the server side.
  6 +That's around 10+ seconds in the worst case. Eeeek.
  7 +You must reduce DOM/CSS parse time to < 1 second.
  8 +
  9 +## New CSS/HTML5 Requirement Additions:
  10 +
  11 + 1. All Selectors must use `.class-name` or `#id-name`.
  12 + 2. Keep number of `.class-name` references to a minimum.
  13 + 3. No other selectors allowed unless there is no choice.
  14 + 4. This means to exclude div, em, span, etc. except
  15 + for reseting default fonts and global controls.
  16 + 5. *No cascading* selectors are allowed unless a large amount
  17 + of computed inheritance will reduce repeated text significantly.
  18 + 6. Keep DOM Node count to a minimum.
  19 + 7. A single DOM node is considered `<div></div>` and also `<a></a>`.
  20 + 8. No more than 1000 nodes per page is the goal.
  21 + 9. Unique style nodes such as `blockquote`, `strong`, `em`, `textarea`,
  22 + `h1`, `h2`, etc. are okay to use as selectors without classes.
  23 + 10. Other nodes which do no appear frequently
  24 + are also okay to use as selectors.
  25 +
  26 +Follow these examples. Use only the GOOD CSS Selectors:
  27 +
  28 +### GOOD (Fastest to slowest):
  29 +
  30 + - `#status-area {}`
  31 + - `#user-actions {}`
  32 + - `textarea {}`
  33 + - `blockquote {}`
  34 + - `h1 {}`
  35 + - `h2 {}`
  36 + - `.star-pubnub {}`
  37 + - `.pubnub-link {}`
  38 + - `.pubnub-link:hover {}`
  39 +
  40 +### BAD:
  41 +
  42 + - `a.footer-links {}`
  43 + - `#left-column div em {}`
  44 + - `input.competitor {}`
  45 + - `blockquote.fluffed-muffed {}`
  46 + - `.star-ratings .star-enabled {}`
  47 + - `div.client-sent-events {}`
  48 + - `li div em a tr td {}`
  49 + - `html body div em {}`
  50 + - `h1.lame {}`
  51 +
  52 +### More Requirements for PubNub HTML5 Guide:
  53 +
  54 + - 100% A-Grade Browser Compliant
  55 + - 100% Mobile Compliant.
  56 + - Do not use CSS `<!-- Flow Control -->` Comments.
  57 + - NO Tags such as `<!--[if IE 5]><![endif]-->` must not be used.
  58 + - NO Conditional CSS.
  59 + - All A-Grade Browsers must be supported.
  60 + - Fully Liquid HTML5
  61 + - Use Blocks (display: block;) for layout and
  62 + - Lists are for single dimensional data.
  63 + - Tables only for two dimensional data such as message inbox.
  64 + - All buttons and links must be resizable to support multiple languages.
  65 + - Ensure HMTL5 is used.
  66 + - Here is an example of the appropriate document header:
  67 + - `<!doctype html>`
  68 + - UTF-8 Charset with Unix Linebreaks
  69 + - Image Maps (CSS Sprites)
  70 + - All page design assets must fit inside exactly 1-2 PNG Image files.
  71 + - Use PNG-24.
  72 + - Use Choose Either Interlaced or
  73 + - Progressive based on smallest file size.
  74 + - If there is little difference in size, prefer Interlaced.
  75 + - No Images with embedded binary (like pre-rendered text).
  76 + - No design assets may contain text, ever (not images with text).
  77 +
  78 +## Fluid Buttons
  79 +
  80 +Keeping in the spirits of a fully fluid page design,
  81 +all buttons and expandable assets must be able
  82 +to fit variable amounts of browser rendered text.
  83 +Use `display:inline-block` CSS for Buttons.
  84 +
  85 + - Example: `<div class="expandable-button">Real-time Button</div>`
  86 + - Example: `<ul class="main-navigation"> <li>Real-time Economy</li> </ul>`
  87 + - Example: `<a href="http://pubnub.com/">PubNub</a>`
  88 +
  89 +## Use PEP-8 Coding Conventions
  90 +
  91 +The important conventions are listed here:
  92 +
  93 + - Code is read more frequently than it is written,
  94 + and therefore needs to be well built.
  95 + - **Use 4 spaces for indentation.**
  96 + - **NO TABS**
  97 + - Use Hyphens in CSS Class Names and Element Tags
  98 + - Example: `<div id="my-div" class="top-nav"></div>`
  99 + - Use Underscores in Form Element Names.
  100 + - Example: `<input type="text" id="first-last" name="first_last">`
  101 + - Do no use Tabs Anywhere.
  102 + - Avoid trailing forward slashes for self closing html elements.
  103 + - Do not exceed 79 Characters per Row of Text.
  104 + - 79 char columns max.
  105 +
  106 +# PubNub HTML5 Modern JavaScript Library
  107 +
  108 +For a faster PubNub load, use the PubNub HTML5 Modern JavaScript
  109 +Library which is `CommonJS` and HTML5 `WebWorker` Ready.
  110 +
  111 +DOWNLOAD: [PubNub Modern JavaScript Lib
  112 +](https://github.com/pubnub/pubnub-api/tree/master/javascript-modern)
  113 +
  114 +#### Supported Browsers:
  115 +
  116 + - firefox/3.6'
  117 + - firefox/9.0'
  118 + - firefox/10.0'
  119 + - chrome/16.0'
  120 + - chrome/17.0'
  121 + - iexplore/9.0'
  122 + - safari/5.1'
  123 +
  124 +```html
  125 +<script src=pubnub-3.1.js></script>
  126 +<script>(function(){
  127 + // ----------------------------------
  128 + // INIT PUBNUB
  129 + // ----------------------------------
  130 + var pubnub = PUBNUB.init({
  131 + publish_key : 'PUBLISH_KEY_HERE',
  132 + subscribe_key : 'SUBSCRIBE_KEY_HERE',
  133 + ssl : false,
  134 + origin : 'pubsub.pubnub.com'
  135 + });
  136 +
  137 + // ----------------------------------
  138 + // LISTEN FOR MESSAGES
  139 + // ----------------------------------
  140 + pubnub.subscribe({
  141 + restore : true,
  142 + connect : send_hello,
  143 + channel : 'my_channel',
  144 + callback : function(message) {
  145 + console.log(JSON.stringify(message));
  146 + },
  147 + disconnect : function() {
  148 + console.log("Connection Lost");
  149 + }
  150 + });
  151 +
  152 + // ----------------------------------
  153 + // SEND MESSAGE
  154 + // ----------------------------------
  155 + function send_hello() {
  156 + pubnub.publish({
  157 + channel : 'my_channel',
  158 + message : { example : "Hello World!" },
  159 + callback : function(info) {
  160 + console.log(JSON.stringify(info));
  161 + }
  162 + });
  163 + }
  164 +})();</script>
  165 +
  166 +```
59 javascript-modern/README.md
Source Rendered
... ... @@ -0,0 +1,59 @@
  1 +# PubNub HTML5 Modern JavaScript Library
  2 +
  3 +For a faster PubNub load, use the PubNub HTML5 Modern JavaScript
  4 +Library which is `CommonJS` and HTML5 `WebWorker` Ready.
  5 +
  6 +#### Supported Browsers:
  7 +
  8 + - firefox/3.6'
  9 + - firefox/9.0'
  10 + - firefox/10.0'
  11 + - chrome/16.0'
  12 + - chrome/17.0'
  13 + - iexplore/9.0'
  14 + - safari/5.1'
  15 +
  16 +```html
  17 +<script src=pubnub-3.1.js></script>
  18 +<script>(function(){
  19 + // ----------------------------------
  20 + // INIT PUBNUB
  21 + // ----------------------------------
  22 + var pubnub = PUBNUB.init({
  23 + publish_key : 'PUBLISH_KEY_HERE',
  24 + subscribe_key : 'SUBSCRIBE_KEY_HERE',
  25 + ssl : false,
  26 + origin : 'pubsub.pubnub.com'
  27 + });
  28 +
  29 + // ----------------------------------
  30 + // LISTEN FOR MESSAGES
  31 + // ----------------------------------
  32 + pubnub.subscribe({
  33 + restore : true,
  34 + connect : send_hello,
  35 + channel : 'my_channel',
  36 + callback : function(message) {
  37 + console.log(JSON.stringify(message));
  38 + },
  39 + disconnect : function() {
  40 + console.log("Connection Lost");
  41 + }
  42 + });
  43 +
  44 + // ----------------------------------
  45 + // SEND MESSAGE
  46 + // ----------------------------------
  47 + function send_hello() {
  48 + pubnub.publish({
  49 + channel : 'my_channel',
  50 + message : { example : "Hello World!" },
  51 + callback : function(info) {
  52 + console.log(JSON.stringify(info));
  53 + }
  54 + });
  55 + }
  56 +})();</script>
  57 +
  58 +```
  59 +

0 comments on commit b5cf61c

Please sign in to comment.
Something went wrong with that request. Please try again.