simpl.info: simplest possible examples of HTML, CSS and JavaScript

I’ve built a site that aims to provide the simplest possible examples of HTML, CSS and JavaScript:

simpl.info

github.com/samdutton/simpl

Motivations:

  • ‘show me the code!’
  • ‘does technology X work on platform Y?’
  • ‘where the heck is that Foo example I saw?’
  • a minimum of ‘huh?’
  • easier to find simple stuff than gist.github.com, etc.
  • simpler and more comprehensive than html5demos.com, w3schools, etc.
  • short, consistent, guessable URLs with sensible redirects (e.g. /ajax => /xhr, /pc => /peerconnection)
  • easy to maintain

Caveats:

  • somewhat oriented to Chrome, and only cross-platform where I can be bothered and/or I think it make sense
  • lots missing: media queries, IndexedDB, WebGL, etc. – will add these when I get around to it
  • no templating

I hope it’s useful – comments and suggestions much appreciated!

About these ads

About Sam Dutton

I am a Developer Advocate for Google Chrome. I grew up in rural South Australia, went to university in Sydney, and have lived since 1986 in London, England. Twitter: @SW12
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

2 Responses to simpl.info: simplest possible examples of HTML, CSS and JavaScript

  1. john says:

    no offence – but its 100% chrome oriented. Would be nice to have simple_xbrowsers.info

    • Sam Dutton says:

      >> no offence – but its 100% chrome oriented. Would be nice to have simple_xbrowsers.info

      Yeah — simpl_xbrowsers.info would be good. Fork!

      To be fair, simpl.info isn’t all Chrome. I did a very quick survey of what’s supported by current versions of browsers (see below — ‘All’ means IE9 or 10 plus Chrome, Firefox and Safari). This list is probably somewhat inaccurate, but it does show that most of the examples will work on most browsers (on desktop at least!)

      Also, simpl.info is meant simply to give examples of the newest HTML, CSS and JavaScript — and a few other bits I think are worth highlighting — and not to provide information about API support.

      …………………….

      All: Ajax (aka XMLHttpRequest)
      All: AppCache
      All: Array methods: some, every, filter, forEach, map
      All:
      Firefox: Audio Data
      Firefox, Chrome: Battery API
      All: canPlayType()
      All:
      Chrome, Safari: CSS filters
      CSS flexbox: all
      All: CSS transition
      Chrome, Firefox: Data channels
      All:
      Chrome, Safari:

      and
      Chrome, Safari: Device Orientation
      All: Fieldset (localStorage example)
      Chrome: FileSystem
      All: Geolocation
      Firefox, Chrome, Opera: getUserMedia()
      All: History pushState() and popState()
      IE, Chrome, Safari: Hyphenation (soft hyphen)

      All: Image: a big one (20MB)
      All (partial): Input types: email, tel, url, date, time, colour
      All: localStorage
      Chrome, Safari, Firefox: Media Capture (using )
      Firefox, Chrome: MutationObserver
      Object.observe()
      IE, Firefox, Chrome: Navigation Timing (window.performance)
      All: navigator.userAgent
      IE, Firefox, Chrome, Opera: Page Visibility API
      All: postMessage()
      All: querySelector() and querySelectorAll()
      Chrome, Firefox: RTCDataChannel (WebRTC)
      Firefox, Chrome, Opera: RTCPeerConnection (WebRTC)
      All: sessionStorage
      All: SVG
      Chrome, IE: with
      All: (with autoplay)
      Web Audio: Chrome, Safari
      Web Fonts: All
      WebP: Chrome, Opera
      WebRTC (getUserMedia, RTCPeerConnection, RTCDataChannel)
      WebSQL: Chrome, Safari, Opera
      Web Workers: All
      XMLHttpRequest (aka Ajax): All

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s