all-seeing-eyePortland, OR

  • 39 Commits
  • 26 Pushes
  • 16 Deploys
Launch Site

all-seeing-eye

By All Seeing Eye

Screencast
Quick Intro

Highlight matches to CSS selectors applied to your javascript AST

Description

cssauron is a tool which maps the ideas of querying for DOM elements through CSS selectors (eg how jQuery operates), and mapping that to source code. cssauron itself is AST agnostic and there are plugins for a few options that map the concept of selectors to the relevant AST nodes. The implementation I used was cssauron-falafel which binds with the falafel library for querying javascript source.

One of the problems with this setup is as you're learning it's hard to get visual feedback on what might match your css selectors. If I, for instance, am searching for variable > id, that is "the identifier that is part of a variable declaration" aka the variable name, it's difficult to know which one of those things match. To fix this, I built what amounts to a Regular Expression tester for these selectors.

You may ask, if it's not clear how the selectors work, why would you bother? There are a few neat things that you can do when you can pin-point nodes in an AST. One option here is to report on whether they're well formed or not. This is the idea behind jsl, which is a modular linter that you can customize. Another option is to transform these nodes, which is what is what the rewrite-js project aims for. These are powerful tools, so increasing the ease of adoption seems like a worthy goal.

Judging Instructions
  1. Input some source code in the box on the right or load the example file.
  2. Enter some cssauron-selectors on the left side (choose a color too). I have some examples there, or you can look at https://npmjs.org/package/jik or https://npmjs.org/package/jsl or https://npmjs.org/package/cssauron-falafel for some examples of what you can find.
  3. Click the blue parse button. You should see the correct nodes highlighted.
  4. Click the node list. You can see the JSON representation of the AST node output from falafel.
What they Used

frontend: jquery, lodash, bootstrap, bower

backend: flask-router, cssauron-falafel, falafel, underscore, formidable, circular-json, supervisor, mocha

I also link out to http://json.parser.online.fr/ for showing big json nodes.

Who

Votes

Your Vote

Voting is now closed.

Other Votes

  • (3)
  • judge

    A bit esoteric but highly valuable tool. I really like the practical application of this. Opens the door to feeling safer about transforming source code. The demo is a bit hard to grep if you don't have any awareness of AST, it would have been cool to see the rules applied in a transform in some manner for a total WOW effect.

    Overall, great job!

  • judge

    Yahoo!

    Very interesting app, maybe could have had a predefined list of things to highlight better. Something that it could have showed the demo a little better. Like maybe checking for common Syntax Errors, or maybe common patterns for "bad code smell". Overall tho, I love this and can't wait to see this progress, I also love the reusable modules that you built, definitely starred them for later.

  • contestant

    e-conomic

  • judge

    Khan Academy

    Very cool! Love all the other libraries that you've written, as well. The queries are a bit inscrutable but that's likely no fault of your own - it's a challenging thing to query in the first place! I could definitely see the combination of these libraries being useful to developers.

  • contestant

    Cool concept! Would be nice to have this on dev tools.

  • contestant

    Noticed a small bug with deletion of the rules: http://screencast.com/t/oTngxQHV Hopefully many people won't run into that. Great application!

  • contestant

    Uva Wellassa University of Sri lanka

    It'll be great if integrated into an IDE or an editor like Brackets.

  • judge

    It would be nice if the app had a "Refresh" button which would reparse based on the rules changing. Currently you have to click back to "Source" and click "Parse" which feels unnecessary.

  • judge

    Kun.io App Studio LLC

    I think this would be really useful if it worked correctly.

    Design is clean and informative for the most part, but the placement of the parse button makes it non-obvious that it's the next step. I didn't like to have to switch back to the code input tab when I changed a rule to click parse again.

    It's really a cool idea, and could be especially useful in a Literate Programming context.

    I had some bugs that caused incorrect highlighting, but otherwise the UI seemed complete.

  • contestant

    Activimetrics LLC

    solid 3 star effort. I don't really get the why of this thing, etc., but it looks cool. I can see how this would help with code reviews of course, but as a parent I can see its utility for teaching kids how to code, and highlighting common mistakes or idioms they should try to use, etc. That's why I bumped to 4 stars for the utility score.

    I gave 3 stars for completeness because it took me a while to figure out that I had to hit "parse" again when I added a rule in order to see the rule highlight the code properly.

  • contestant

    SocialTables.com

  • contestant

    Attachments.me

    Cool idea, I like it but it was tough for me to use. The example script failed to load for me, and I couldn't understand which textbox was for what but after watching your video I understood.

    Thank you, this was nice!

IMPORTANT DATES

REGISTRATION
SEP 17
COMPETITION
NOV 9-11 UTC
JUDGING
NOV 11-17
WINNERS
NOV 18

Thank you to our Platinum Sponsors