0 Size JavaScript POC

[juancarlospaco]

Poor Of Concept

• Encode JavaScript on CSS, without increasing CSS size.
• https://forum.nim-lang.org/t/7282

IQ 2000 secret hi tecc

Server-side:

• I have a Nim JS project, Karax or something.
• CSS is hosted by CDN, optional.
• Minify JS.
• Convert JS string to binary.
• Encode binary as uppercase == 1 / lowercase == 0, on the chars of the CSS
• Do not serve any JS.

Client-Side:

• Tiny JavaScript "loader", manually coded, minified inlined on HTML.
• "loader" gets whole CSS as string https://stackoverflow.com/a/15011387
• "loader" decodes as as uppercase == 1 / lowercase == 0, as binary string.
• "loader" converts binary to ASCII.
• "loader" evals the JavaScript containing the Karax.

Example

import strutils

proc js2css*(js: openArray[char], css: var openArray[char]) =
  ## Encode JavaScript on CSS, without increasing CSS size.
  var i: int  # I can confirm this proc works ok.
  var temp = newStringOfCap(8)
  for c in css.mitems:
    if c in {'a'..'z', 'A'..'Z'}:
      temp = $ord(js[i]).toBin(8) # Can it be 6?
      for bc in temp:
        c = if bc == '1': toUpperAscii(c) else: toLowerAscii(c)
        if js.high == i: return
        else: inc i

proc css2js*(css: openArray[char]): string =
  ## TODO: The reverse of js2css
  var temp = newStringOfCap(8)
  for c in css:
    if c in {'a'..'z', 'A'..'Z'}:
      var x = ' '
      if c in {'A'..'Z'}: 
        x = '1' 
      elif c in {'a'..'z'}: 
        x = '0' 
      temp.add(x)
      if temp.len == 8:
        # TODO: How to binary to ASCII?
        # result.add decodedChar
        temp = "" # temp back to empty string?

var stile = readFile("example.css")   # Use a Bootstrap.css
js2css(readFile("example.js"), stile) # console.log("hello world")
writeFile("output.css", stile)        # "BaCKgroUNnd-cOLOr:DARkblUE  ... "

I can embed the JS on the CSS, I can not get it back, needs css2js.

More storage

• CSS is tabs/spaces-insensitive and can be used, space == 1 / tab == 0 this needs some kind of base4 encoding.
• HTML is also case-insensitive and can be used for extra storage, if you are not client-side rendering.
• Bootstrap CSS is 145 kilobytes, is like ~25 Kb of JS, for free, for the "core" of a simple Nim app should do, lazy load the rest.

Can you help me with css2js @xflywind ?.

[ringabout]

Make a simple working one

import strutils, parseutils

proc js2css*(js: openArray[char], css: var openArray[char]) =
  ## Encode JavaScript on CSS, without increasing CSS size.
  var i: int  # I can confirm this proc works ok.
  var j: int
  var temp = newStringOfCap(8)

  while true:
    temp = $ord(js[i]).toBin(8) # Can it be 6?
    for bc in temp:
      while true:
        let c = css[j]
        if c in {'a'..'z', 'A'..'Z'}:
          css[j] = if bc == '1': toUpperAscii(c) else: toLowerAscii(c)
          inc j
          break
        inc j

    if js.high == i: return
    else: inc i

var ix = 0
proc css2js*(css: openArray[char]): string =
  var temp = newStringOfCap(8)
  for c in css:
    if c in {'a'..'z', 'A'..'Z'}:
      var x = ' '
      if c in {'A'..'Z'}: 
        x = '1' 
      elif c in {'a'..'z'}: 
        x = '0'

      temp.add(x)
      if temp.len == 8:
        var num: int
        discard parseBin(temp, num)
        result.add chr(num)
        temp = "" # temp back to empty string?
        inc ix
        if ix == 20:
          break

var stile = readFile("test.css")   # Use a Bootstrap.css
js2css(readFile("test.js"), stile) # console.log("hello world")
echo css2js(stile)

[juancarlospaco]

TODO:

Client-Side:

• Tiny JavaScript "loader", manually coded or Nim targetting JS. "loader" dont even need options, does always the same.
• "loader" gets whole CSS as string https://nim-lang.github.io/Nim/dom.html ? https://stackoverflow.com/a/15011387 ?
• "loader" calls let javascript: cstring = css2js( wholeCSS ) to get JS string.
• "loader" calls eval(javascript) the JavaScript string.
• JS from CSS without any JS file sent :)
• Where this should live?, where to PR?, should be 2 tiny proc only.
• Documentation and test.

Basically move css2js to the client-side.

[timotheecour]

Interesting idea but not specific to nim, so I'd suspect this would be used (eg alongside minifiers) if this worked in practice.

Bootstrap CSS is 145 kilobytes, is like ~25 Kb of JS, for free, for the "core" of a simple Nim app should do, lazy load the rest.

but if some site causes bootstrap (with same version before encoding) to be cached, a site using this trick would cause that cache to be invalidated and the modified bootstrap would have to be re-downloaded.