• Chris Rosenau, almost 2 years ago

    Love the extension! Just bought it.

    2 points
  • Guilherme Rizzo, almost 2 years ago

    Hey Tekeste, thanks for posting!

    Dear Designer News, creator here, happy to answer any questions and talk a little about the design process of CSS Scan :)

    The problem

    While working with web development, I've always found myself crushing my head to understand why the CSS was not working, looking through thousands of CSS rules on the browsers’ Dev Tools, scrolling and scrolling...

    And while surfing the web, sometimes I just wanted to get 1 thing from a framework (specifically Bootstrap’s alert) or am curious about what is the amazing box-shadow, font, border-radius, etc of an element I just saw.

    The solution

    A browser extension that when activated on a page, enables you to instantly visualize the CSS of any element you hover over and let you copy its entire rules with a single click.

    Check out the free demo on the website: https://getcssscan.com

    CSS Scan is particularly useful for:

    • Discovering how your favorite websites are styled;
    • Debugging your own code;
    • Moving your codebase;
    • Copying specific elements from frameworks/themes/templates to use them without

    The process

    I have to say that I was feeling like “just do it”, but anyway I decided to validate the problem and solution.

    The solution I had in mind was just like the extension WhatFont? but for checking CSS.

    So I made an image preview of how the extension would look, and reached out Facebook and Telegram developers groups, and sent them a Typeform with a few basic questions:

    1. From 0 to 10, how much did you like this idea?
    2. Which feature is more useful for you? (2 options: check the CSS / copy the CSS)
    3. Would you pay for this?

    The results were convinceable enough to make me start building it.

    My audience was not too much defined, I just had “designers and front-enders” in mind :)

    To work across any OS, I decided to build it as a browser extension.

    And then coded for precisely 50 hours and 17 minutes from the first line of code to the first version - luckily I recorded all this and made a nice speed video, you can check it here: https://www.youtube.com/watch?v=OtsNNXpXcYs

    The 2.0

    CSS Scan 1.0 was launched 9 months ago, and since then I’ve made a lot of new features, bug fixes, and improvements, the most important ones:

    • Code syntax highlighting for readability
    • UI and Landing Page redesign
    • Show element dimensions and rendered font
    • Show :hover styles separated
    • Option to traverse overlapping elements
    • Works on iframe
    • Added shortcuts (lots of people asked for it)

    This is a work that has taken me almost 1 year so far, so I’m excited to share with you and genuinely interested in hearing what you think about it.

    I am all ears if any of you have any ideas or feedback.

    SPECIAL: I’m also giving you an exclusive DN mates 25% discount limited for the first 10 sales from here. To use it, buy it from this URL: https://gum.co/cssscan/dn-mates :)

    Thank you!

    2 points
  • Salatiel Queiroz, almost 2 years ago

    Very useful extension!

    1 point