Skip to content

Static.Jam.VG

Jump to bottom Edit New page
Mike Kasprzak edited this page Jun 10, 2016 · 1 revision

The static website is where static files come from. To avoid sending extra cookies, the static files are retrieved by different domains than the main website, often the "ORG" version of our sites.

  • static.jamdb.org <- Active
  • static.ldjam.org (flagged as pr0n by McAffe... seriously)
  • static.ludumdare.org

Code for the static website can be found in /public-static/.

Users DO NOT directly upload files to the static website. Instead, uploads are handled by Pusher, which authenticates them. The static website requires no authentication. For file upload restrictions, see Pusher.

CloudFlare

To keep costs low, the static website is designed to take advantage of CloudFlare's reverse proxy CDN. Generally support extensions include:

  • .js, .json, .css - Mainly for /internal/ and /external/ use
  • .png, .jpeg, .jpg - User uploaded image content (PNG preferred)
  • .gif - User uploaded animated image content
  • .webp - Not a user uploadable type, but available as an optimized output type

Support for caching video files (.mp4, .webm) as an alternative to .gif is currently experimental. Files presented to users are stripped of audio, and transcoded (only if not using a desirable codec). At the time of this writing (April 3rd), it is unconfirmed to work. It's working inside the VM, but due to transcoding's speed, is currently disabled. Experimentation is being done on the static.ldjam.org domain.

Full length video files with audio should be uploaded to YouTube instead. We will NOT be hosting non-gif like videos.

Caching of audio (.mp3, .aac) is roughed out as well, but like video, audio also requires transcoding. Undecided if we should allow it, then transcode it.

The problem with Audio is that services like SoundCloud, though great, impose limitations on number of minutes of audio you can have on your account. They pay their bills by selling premium accounts. Also their API is a little broken at the moment (in Chrome). I can't reliably set up Jammer Radio until they fix it.

URLs

Files on the static website are fetched from several URLs. Though some of these URLs are dynamic (/info/, /content/), the static website is NOT presented as an API (i.e. versioned).

  • /content/... - Processed user uploaded assets
  • /info/... - Information about user uploaded assets (originals only, JSON)
  • /raw/... - Original user uploaded assets (NOTE: May not be accessible publicly, TBD)
  • /status/ - Ask the static server if "we're cool", in case we need to introduce flood protections, etc.
  • /internal/... - Internal libraries, style sheets, other static data
  • /external/... - 3rd party libraries, style sheets, other static data

/content/ URLs

/content/ is a real directory on the server, containing symlinks to original files, or processed versions of those same files if they incur any changes.

Work with content URLs is handled by adding additional file extensions. To perform a conversion, you append a desired target file extension, and the server will handle the rest. For example:

/content/.../ID.png.jpeg - Source file is a .png, but a .jpeg is the desired output.

The initial request for a conversion will incur a slight performance hit, but subsequent requests will return a cached copy, and eventually a CloudFlare cahced copy.

Additional operations include:

  • .wXX - Target width of image
  • .hXX - Target height of image
  • .f - Fit (and crop) image to specified dimensions
  • .o - Optimize image (strip, quantize, etc)

There are some limitations:

  • Images can be no larger than original (unless fitted)
  • Fitted images can be no larger than 1024x1024
  • Fitted images require both dimensions
  • Images will always maintain aspect ratio. You cannot stretch an image

TODO: Determine if this should be locked down. It can potentially be abused to both waste hard drive space, and CPU.

Image Optimizer

The following file extensions will redirect to you optimized files for your browser.

  • /content/.../ID.ext.op - Optimized w/ .png fallback
  • /content/.../ID.ext.oj - Optimized w/ .jpeg fallback
  • /content/.../ID.ext.t - Thumbnail (.jpeg fallback)

Generally speaking, any browser supporting .webp will get those instead (i.e. Chrome). It should be generally understood that choosing .png versus .jpeg fallbacks, you take .png if you need an alpha channel, and .jpeg if you you don't.

For thumbnails (videos), prefer the .t variant. At this time it's assumed that videos will never contain alpha, but that could change.

Optimized .png files actually go though an extra step, pngquant, which quantizes and reduces the number of colors in the image. Alpha is preserved, but the files should be smaller than the originals, even without native .webp support.

Though the server is configured to do this automagically, ideally the client side should know which file type it should support. Optimized files will always be named:

  • ID.ext.o.png - PNG (quantized)
  • ID.ext.o.jpeg - JPEG
  • ID.ext.o.webp - WebP (lossy, variable bitrate)

...

TODO this

Add a custom footer
Clone this wiki locally