CSS NegaterCharlotte, NC

  • 60 Commits
  • 57 Pushes
  • 44 Deploys
Launch Site

CSS Negater

By Ally

Screencast
Quick Intro

Waking up in cold sweats in the middle of the night because of theming forms that only have a space for CSS? The CSS Negater has your back. Completely overwrite all included-by-default CSS with an automatically-generated negation stylesheet to give you a clean slate to build from.

Description

Generates a negation stylesheet which is used to overwrite the included-by-default CSS to give you a clean slate to build from.

Judging Instructions

Enter a URL in the "Page to negate" input box, select the options you want, and press "Negate CSS!" This will generate a negation stylesheet which you can preview and then copy, download, or snag the embed link.

To view it in action add the bookmarklet to your Bookmarks bar, visit any publicly accessible page (nothing that requires being logged in!) and press the "Negate CSS!" bookmarklet.

What they Used

Connect, H5BP, jQuery, Handlebars, RSVP, CodeMirror, Request, Zombie

Who

Votes

Your Vote

Voting is now closed.

Other Votes

  • (2)
  • judge

    Pluralsight

    Sounds useful for the authors, but the form itself was bland and uninteresting.

  • contestant

    Tumblr

  • contestant

    Hmm I tried the example but it didn't work :( It gave me a blank file with a comment, the other try I got Error parsing CSS:. Interesting approach to solve a problem you have though!

  • judge

    Best way for me to visualize the impact of this utility was the Bookmarklet. Very impressive. Having had to deal with building third party embeds, I can definitely appreciate the effort involved. Solid.

    • nathanhammond
      contestant

      Amusingly, the absolute last thing that we did was the actual "real" processing of the CSS. The bookmarklet, the interface, and the results pages were complete well before it "worked."

      The next step for this is actually to turn the entire codebase into something that runs client-side in the browser, in the bookmarklet. :)

  • judge

    Pushd, Inc.

    Great concept. Seems to work pretty well. The bookmarklet could use some visual indicators of what's going on, and it doesn't work at all on HTTPS pages (with no indication of the limitation). Good work!

    • nathanhammond
      contestant

      I actually didn't check it out on HTTPS pages in our (incredibly abbreviated) testing period. Alex found a show-stopper bug about an hour before the competition ended and my focus was on getting that fixed.

      The biggest gap is actually that it doesn't all run in the context of the current user's session, locally. Doing that would get us closer to where we want to be without trying to pass user session data to the server to allow them to reach "authenticated" sites.

      And you're right about visual indication. I had that every time, but only because I was watching for requests in the browser console. I started that process because I didn't get any visual feedback and didn't think to address the problem in other ways.

  • contestant
  • contestant

    Will be good to see preview :)

    • alexdiliberto
      contestant

      Thanks for the suggestion!

    • nathanhammond
      contestant

      We are doing a full "render" server-side but on a headless browser. From what I can tell trying to get a screenshot would be quite annoying, which is why we created the bookmarklet.

      The idea of this continuing as a web-facing thing isn't exactly realistic. I expect that any continuation of this project would be in the creation of something more like a build tool or command-line tool. The web interface would just be for advertising that it works. :)

  • contestant

    Uva Wellassa University of Sri lanka

    Tried it and it seems to work. I just have no idea where it can be used.

    • nathanhammond
      contestant

      The biggest use case for us is that we have to embed our own styles into somebody else's application. We don't get to make any changes at all to their application (markup, JS, or CSS), we just get one block where we're allowed to insert CSS.

      They call it "theming," we call it "too restrictive." As I'm sure you know, it's a pain to try and integrate your CSS on top of their CSS so we wanted a simple tool to reset all of their styles so that we could build from scratch. It also helps protect us from them changing their CSS as we will be able to quickly reset any changes that they make.

    • mnmtanish
      contestant

      Found a bug for you, I have a ghost blog with default theme. it gave an error when I ran it with your tool. Try http://www.thanish.me/ Results:

      / URL: http://www.thanish.me / / Error parsing CSS: http://www.thanish.me/assets/css/screen.css / @font-face{font-family:inherit;font-style:inherit;font-weight:inherit;src:inherit;}@font-face{font-family:inherit;font-style:inherit;font-weight:inherit;src:inherit;}@font-face{font-family:inherit;font-style:inherit;font-weight:inherit;src:inherit;}@font-face{font-family:inherit;font-style:inherit;font-weight:inherit;src:inherit;}@font-face{font-family:inherit;font-style:inherit;font-weight:inherit;src:inherit;}

    • nathanhammond
      contestant

      We use https://github.com/visionmedia/css to parse the CSS. We didn't do anything custom and that section of the code blindly uses TJ's parser. What that means is one of two things:

      1. There is a lexical error in your CSS that is preventing it from parsing.
      2. There is a bug in TJ's CSS parser: https://github.com/visionmedia/css-parse

      Thanks for continuing to look into it!

  • contestant

    Cool idea. But seems it's doing a little bit too much, I mean it made links black, not blue as default, and it killed list formatting too. Or maybe it's just the site I tested it on (livejournal.com).

    • nathanhammond
      contestant

      You're right in that it is doing too much. I noticed after time was up that I needed to stop with the assignments for any selectors that were just the bare element. For example:

      a { color: red; } gets set to a { color: inherit; }

      Which screws it up as I'm effectively overwriting the defaults at that point. It's a simple fix, I just can't do it while in the judging period.

  • judge
    • alexdiliberto
      contestant

      We'd love some constructive feedback. Please let us know what you think is missing. Thanks

  • contestant

    Industrial Web Apps

    Embed button didn't seem to do anything. Other than that works as expected. Cool project guys!

    • nathanhammond
      contestant

      Embed button copies the <link rel="stylesheet" href="..." /> to your clipboard... but only if you have Flash.

  • contestant

    Editora Abril

    • nathanhammond
      contestant

      This is what happens when I am, as a developer, pressed into doing the "design" work. Just imagine the finger quotes.

      (And this is the good version! Older versions were simply unusable.)

IMPORTANT DATES

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

Thank you to our Platinum Sponsors