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

I’ve built a site to provide 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?’
  • Short, consistent, guessable URLs with sensible shortcuts, for example simpl.info/v redirects to simpl.info/video.
  • Easy to maintain.
  • Works well on mobile devices.

Caveats:

  • Oriented to modern browsers.
  • 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.

3 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

  2. Sunil kumar says:

    hi sam ,

    this is sunil , i have watched your webrtc video in yotube , first of all congratulations , that is a nice presentation , i have tested the code which dowloaded from GIThub , working fine ,

    rtcpeerconnection/index.html opens a web page which shows two videos and three buttons start,call,hangup
    the both videos showing y local webcam’s result ,
    how can i contact other when i click CALL button , what i need to implement to get network video of other’s system web cam / tabs cam

    please guide me to set ,any help usefull for me my mail id :sunil.panthanghi@gmail.com

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