Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS Inspector Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
    <section class="intro">
      <div class="intro__content">
        <h1>CSS Inspector Demo</h1>
        <p>Enable "Highlight Elements" in the menu at the bottom left corner,
        then try mousing over elements on the page.</p>
      </div>
    </section>
    <section class="explanation">
      <h2>What's this?</h2>
      <p>This page demonstrates a prototype of a CSS inspector tool I am building. It is currently a fork of the Khan Academy <a href="http://khan.github.io/tota11y/" title="tota11y library">tota11y</a> library, although I eventually plan to move it into a separate web application.</p>
      <p>This tool is designed for novice web developers who are reverse-engineering features on websites they find. Existing inspection tools are typically designed for experienced users, and display <strong>too much information</strong> to be useful to a novice.</p>
      <p>My inspector aims to help by <strong>categorizing CSS properties according to their function</strong> ("box model," "typography," etc.), and <strong>highlighting properties</strong> deemed especially relevant to the feature in question. Relevance is heuristically determined by computing the frequency with which CSS properties are mentioned across tutorials for a given search query (in this case, <code>"fullscreen background image"</code>). For more implementation details, see the <a href="https://github.com/nudelta/ply-utils">GitHub repo</a>.</p>
      <p>This particular demo is configured to help learners understand how a <strong>fullscreen responsive background image</strong> is implemented. If you enable highlighting and mouse over the background image above the fold, the popup window will highlight in green any properties commonly associated with responsive background image implementation.</p>
  </section>
  <section class="explanation">
      <h2>Limitations and next steps</h2>
      <p>This is a fairly old and basic prototype, used as a proof of concept for user testing during early stages of development. Since it runs in the browser, we are limited to accessing <strong>computed styles</strong>, rather than accessing the full cascading hierarchy of applied style rules.</p>
    <p>The implementation I'm currently working on uses the <a href="chromedevtools.github.io/debugger-protocol-viewer/1-1/CSS/">Chrome Remote Debugger Protocol</a> to drive a Chrome instance and gain browser-level access to stylesheets and the DOM. I haven't finished the UI for this version, but I plan to provide an inspection experience that more closely parallels the native Chrome DevTools, albeit with affordances to help learners understand which lines of code matter, and why.</p>
    </section>
  
  <footer>
    Built by <a href="http://sarahlim.com" title="Sarah Lim's personal website">Sarah Lim</a>.
  </footer>
​
  <script type="text/javascript" src="https://rawgit.com/sarahlim/tota11y/study/build/tota11y.min.js?"></script>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sarahlimpro
0viewers