Guilherme Rizzo

Indie developer Joined over 2 years ago

  • 2 stories
  • 10 comments
  • 4 upvotes
  • Posted to CSS Scan 2.0 — Instantly check or copy computed CSS of any element on the internet, in reply to Salatiel Queiroz , May 01, 2019

    Thanks, Salatiel!

    0 points
  • Posted to CSS Scan 2.0 — Instantly check or copy computed CSS of any element on the internet, in reply to Chris Rosenau , May 01, 2019

    Glad to hear that, Chris! Hope you have a great experience.

    Let me know if you need help or have any feedback :)

    0 points
  • Posted to CSS Scan 2.0 — Instantly check or copy computed CSS of any element on the internet, Apr 30, 2019

    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
  • Posted to CSS Scan – Instantly check or copy computed CSS from any element on the internet, in reply to Nathan Cooper , Aug 01, 2018

    Nathan, I have good news! Just updated the app. Now you can copy the selector name! If you use Chrome, the extension will update itself. On Firefox, I'll implement auto-update functionality tomorrow. More updates to come!

    1 point
  • Posted to CSS Scan – Instantly check or copy computed CSS from any element on the internet, in reply to Johnny Bad , Aug 01, 2018

    That's nice to hear, Johnny! Wish you and your team the best.

    0 points
  • Posted to CSS Scan – Instantly check or copy computed CSS from any element on the internet, in reply to Nathan Cooper , Aug 01, 2018

    Hey Nathan, I'm looking forward to implementing your first suggestion today! You'll be able to copy the entire selector. :)

    1 point
  • Posted to CSS Scan – Instantly check or copy computed CSS from any element on the internet, in reply to helena domo , Aug 01, 2018

    Thank you, Helena! I'm glad you like it :)

    0 points
  • Posted to CSS Scan – Instantly check or copy computed CSS from any element on the internet, in reply to Alejandro Dorantes , Jul 31, 2018

    Thanks, Alejandro!

    0 points
  • Posted to CSS Scan – Instantly check or copy computed CSS from any element on the internet, in reply to Nathan Cooper , Jul 31, 2018

    That's nice to hear, Nathan! :) Any suggestions for updates?

    0 points
  • Posted to CSS Scan – Instantly check or copy computed CSS from any element on the internet, Jul 30, 2018

    Hey Designer News! Creator here, happy to answer any questions! :)

    The problem

    While working with web development, you've probably found yourself scrolling through inspect element a lot or looking for the computed styles tab on your browsers developer tools (and probably found some CSS properties that you've never heard before haha).

    Sometimes you just want to get 1 thing from a framework or are curious about what is the border-radius, box-shadow, etc of an element you just saw on the internet.

    The solution

    This tool is faster than inspect element and gives all of the styles with their shorthands. This means you don't get messy ... or overwritten styles. Want to copy them? Cool, you just have to click! Check out the demo on the website:

    https://guivr.github.io/cssscan

    3 Products in 3 Months

    This is my last product of the challenge I made up for myself to ship 3 products in 3 months.

    CSS Scan took me 50 hours and 17 minutes to develop. Inspired by @levelsio, I recorded all the development and made a timelapse video of it. Check it out! https://www.youtube.com/watch?v=OtsNNXpXcYs

    Features:

    • Instantly check computed styles
    • Click to copy
    • Check the real size of elements
    • Outline all elements
    • Ignore box-sizing or hover styles

    Price

    I decided to price it as Pay what you want.

    I would love to hear from you all how you can have a better experience using CSS Scan! Thank you!

    6 points
Load more comments