8 ms·

Show HN: I made CSS Scan 3.0, a fast way to check and copy CSS

146 points by guivr 4y ago

ushakov 4y ago
looks like a product aimed at junior devs, who don't know how to use DevTools also "Save 59% - Product Hunt Launch Deal - only until July 21st" sounds sketchy AF i don't buy anything from websites with countdowns or fake discounts
- guivr 4y ago
  Hi, it's not a cash-grab, been working on it for almost 4 years now, just trying to make something useful that helps people save time.
  - ushakov 4y ago
    sorry about the wording, i've edited that out
- abses2000 4y ago
  Hi @ushakov, I have a question about your https://typosaur.com https://typosaur.com website. It seems to be based on https://languagetool.org https://languagetool.org. Don't you think you should disclose this? @guivr Cool project!
  - ushakov 4y ago
    Thanks for checking out Typosaur! This is correct, Typosaur uses LanguageTool for spell-checking. We are currently working on a new landing page, which will mention that. This is not something we're trying to hide and in fact we're very proud and grateful for what LanguageTool has offered us You can also leave your e-mail if you want to be notified when Typosaur launches
    - Kiro 4y ago
      You don't see the irony here?
      - ushakov 4y ago
        i don't see the irony here, sorry Typosaur can do things LanguageTool cannot, this is why it exists
        Kiro 4y ago
        You're complaining about shading tactics (in a toxic way, even after your edit) while using shady tactics yourself.
        ushakov 4y ago
        which shady tactics am i using?
lelandfe 4y ago
> No unuseful, duplicated, overridden, or longhand CSS How does this differ from doing Cmd-Shift-C, selecting an element, and checking the Computed tab in Dev Tools?
- guivr 4y ago
  Hi, @lelandfe, there's an answer for that on our FAQ: * How is this better than "Computed Styles"? > When you copy CSS from “Computed Styles”, aside from the declarations being longhand and bloated, it transforms all measurement units such as %, em, rem in pixels (px). This could break your website on mobile devices. "Computed Styles" also don’t give you pseudo-classes, pseudo-elements, media queries, and keyframes styles, and don't copy multiple elements at once. CSS Scan does, and it gives you the original units and everything you need effortlessly.
  - spread_love 4y ago
    > it transforms all measurement units such as %, em, rem in pixels (px) This is known as the "computed value" https://www.w3.org/TR/css-cascade-4/#computed https://www.w3.org/TR/css-cascade-4/#computed. The Computed tab will still display the specified values in the units they were declared in if you expand the list of matching selectors. > also don’t give you pseudo-classes, pseudo-elements True! A useful feature you've added; but if I select a pseudo-element in my inspector I can still see (and copy) the computed value > media queries, and keyframes styles This is also provided by just clicking the arrow next to a selector and expanding the matching ruleset in the Computed tab. Your product reduces the effort a great deal though! Love the demo.
seumars 4y ago
I can't think of a use case where I'd need to copy someone else's (probably messy) CSS. I assume this is aimed at beginners?
- tethys 4y ago
  They claim to do a bunch of optimizations to remove the mess: > No unuseful, duplicated, overridden, or longhand CSS. CSS Scan runs hundreds of real-time advanced optimizations on the code to make it shorter, crystal clear, and prettier.
- guivr 4y ago
  Hi! You could still use the extension to quickly inspect things, to understand how other websites are designed, or you could also use on your own website when debugging CSS or making fast edits (it's possible to edit the CSS with the extension).
- zerkten 4y ago
  Anyone working on agency-led projects would benefit from this. Think pharma or other brand-focused companies where the same design elements need to be replicated across multiple, separate projects. Agencies throw over templates or prototypes and expect the rest of the company to be following along. Something like this would reduce the pain somewhat when a manager is asking you to replicate parts of the design. Selling an enterprise license to Wipro or other giant integrator would benefit a lot of people, but reaching the buyers might be difficult. The buyers don't really care that much for the experience of their devs in those companies, but perhaps there is an efficiency angle.
  - seumars 4y ago
    That sounds like it can/should be solved using reusable parts of a design system though.
    - DangitBobby 4y ago
      That would be wonderful but isn't always possible.
rsaraceni 4y ago
Niceee, congrats on your project mate!
- guivr 4y ago
  Thankss :)
sbm15 4y ago
First of all, kudos to you for building and shipping a product that you can charge for. The website looks really good and polished. I don’t mind the countdown and introductory pricing. If people find it useful, this should definitely help with conversion. Good luck!
- guivr 4y ago
  Thanks a lot for the support, @sbm15!
  - TedDoesntTalk 4y ago
    Can you share details on how you implemented paid license keys in a browser extension? I have an extension already written that is like to do the same with. And will the chrome and Firefox stores still host it?
    - deadcoder0904 4y ago
      try https://github.com/deadcoder0904/paid-license-chrome-extension https://github.com/deadcoder0904/paid-license-chrome-extensi...
    - ilrwbwrkhv 4y ago
      This extension can be used for free without paying unfortunately by changing the code. I don't think there is any solid way of preventing that.
      - TedDoesntTalk 4y ago
        I’m not interested in a hack-proof system.
    - throwaway888abc 4y ago
      https://keygen.sh/ https://keygen.sh/ not op, just was toying with it and was happy with outcome, not affiliated or anything, was just good experience to work with, maybe will help you
Waterluvian 4y ago
I decided to make a Wordle clone for a joke. About 1/5 of the time it took was figuring out the CSS. I’ll have to try this, but I’m a bit surprised how hard it is in Chrome Dev Tools to figure out what the CSS was for the card flip animation. I dunno if this is my own incompetence, or CSS, or Chrome, but there’s just a rats nest of styles and classes to try to unravel to figure out what styles are actually relevant to a certain effect or element.
- danielvaughn 4y ago
  You may already be aware, but you can click on the "computed styles" tab for an element (in the devtools elements panel), and it will show you the exact values that were rendered. Much much much easier than trying to understand how the written CSS cascades down to that specific element.
  - brundolf 4y ago
    The thing is though, as soon as you take it out of context (change the DOM structure, drop the nearby styles that don't directly target that element, etc) things are often going to stop behaving the way you want. At that point you honestly just have to know how to work with CSS for real if you want to get the desired outcome, which makes me skeptical of a tool that claims to let you clip out a piece of the page with all the CSS behavior intact
  - bobthepanda 4y ago
    I find it isn’t great at targeting styles that aren’t static, like animations. There isn’t really a playback/play forward mechanism in devtools for css.
    - spread_love 4y ago
      Yes there is, in the Animations tab. https://developer.chrome.com/docs/devtools/css/animations/ https://developer.chrome.com/docs/devtools/css/animations/
vcryan 4y ago
I would but this if it converted the styles to tailwind. That would be incredible!
- guivr 4y ago
  Yess, it's on the roadmap! :D
kypro 4y ago
Not sure it's something I would use, but this is one of the first times I've visited a landing page and understood what I was being sold within a few seconds. Normally the copy is so generic I have no idea what the product is. Something like, "build sites more efficiently by enabling UI teams collaborate and share CSS". Love the instant try me feature too. Good job. It's nice to see people can still make money building a simply but well designed productivity tool like this in 2022. It's something I seem to see much less of these days.
peyloride 4y ago
Good luck with your journey but I really can't find any reason to why should I buy this.
- spread_love 4y ago
  I see developers copy/paste CSS out of Figma (for better or mostly worse). That's not how I write code, but I can see a market.
- dmje 4y ago
  I did. It's great. If you're doing any kind of front-end work with any kind of design angle to it then it's hugely useful.
rrishi 4y ago
I love the website especially the "Try it yourself on this page button". The product is uber cool. The website has a really nice feel to it overall. Congratulations!
- guivr 4y ago
  Thanks @rrishi!!
progx 4y ago
Cool little helper, but with that price buyers will think twice before they buy it.
spread_love 4y ago
Does this preserve and copy CSS custom properties ("variables")?
x_to_tha_z 4y ago
sirtimbly 4y ago
This tool addresses one aspect of my job really well, looking at how a dev implemented my figma design, and showing them exactly which little tweaks need to be made to fix it up. Of course inspector works too, but it's just like buying [Cleanshot](https://cleanshot.com/ https://cleanshot.com/) instead of using the built in macOS screenshot tools. Providing a more refined experience for something I need as part of my regular job. It's expensive for what it is, yes. But as a self-employed consultant, these (non-subscription) business expenses for software are my favorite.
bluelightning2k 4y ago
You INSTANTLY lost me with the fake-scarcity countdown timer. Bounced so fast & immediately looked to see if HN has a downvote button. If you're targeting engineers and sophisticated people you need to rethink that.
- weird-eye-issue 4y ago
  It's not fake if the price does increase when it says. Scarcity and pricing doesn't need to be based on actual physical scarcity otherwise all software would be close to $0 There is no difference from this going on sale and a TV going on sale
  - bluelightning2k 4y ago
    Engineered and arbitrary scarcity is patronizing - which will instantly lose any sophisticated technical founder.
    - weird-eye-issue 4y ago
      Practically all software pricing is arbitrary, which is the point I was trying to make. It costs roughly $0 to distribute an extra unit of software (generally speaking) Has no "sophisticated technical founder" ever bought anything on sale before? Give me a break
- dmje 4y ago
  Sometimes the hostile responses on here really floor me. Maybe think before you type something like this. This is a really solid, incredibly professional and really not very expensive product. I use it all the time. The guy shipped something, and he shipped something great. You may not like countdown timers but jeez, ease off a bit maybe?
  - sillycube 4y ago
    Honestly, I have no idea why HNers are so hostile about such a cheap product. If you like it, just buy it whether you want to treat it as a tool, a toy or whatever. If you don't like, just leave it alone.
dmje 4y ago
I use it all the time, it's ace. Highly recommended.
- stevenjgarner 4y ago
  What does it do for you that web developer tools does not?
- guivr 4y ago
  Thanks a lot @dmje, really appreciate all your support!
mitchdoogle 4y ago
Anyone who spends a lot of time writing / editing HTML and CSS should spend some time to learn how to use browser development tools. All the features shown here are easily accomplished using built-in tools. And a lot more
- stevenjgarner 4y ago
  Agreed. Are there advantages to this over say Firefox Web Developer Tools, where not only can you see the css as you hover but actually edit the css to see the changes? What am I missing? If there are benefits, I'm not sure the site is doing a very good job of selling them.
  - lancesells 4y ago
    > Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click. Is there a way to do that in Firefox Developer Tools? If so, I would like to know because I would use it.
    - stevenjgarner 4y ago
      Absolutely. (FOR FREE!) - do a search for something like "Firefox web developer tools css tutorial". Some of the older (Web 2.0) videos will mention Firebug (~kind of the same thing). Basically you can hover over any css element, and even SELECTIVELY copy just the applicable css class or id (usually more useful than copying the whole stylesheet). Better still, it allows you to edit/insert/delete rules right in there in the Document Object Model (DOM) to see the effect it has. You could start with something like this - https://www.youtube.com/watch?v=S36N8RGdY2U https://www.youtube.com/watch?v=S36N8RGdY2U
      - mikewhy 4y ago
        Not sure those are the same at all? The submission copies all applied styles, complete with breakpoints. A class / id is only a portion of applicable styles, multiple selectors can match the same element. This is more like copying the non-auto rules in the "Computed" tab, with breakpoints. Chrome has "Copy Styles", but that doesn't get breakpoints. I don't know if Firefox does, but I haven't looked very much. It doesn't look like Safari does either.
radiojasper 4y ago
I open my inspector with Ctrl-shift-I (Firefox on Windows), it's fast, free, more feature-rich and built-in to the browser. This seems redundant.
spicybright 4y ago
I can tell you put a lot of work in, but it's still very expensive for what it is. It's something I would expect to find for free in my browser's extension store if I'm being honest. Is there any guarantee the extension will be supported for a long time after purchase? Or is it's possible a year down the line CSS Scan gets abandoned and the extension falls out of date? If it was a one time $5-$10 or $1/mo purchase, I would definitely buy it if I found it helped development for me.
- mikefracture 4y ago
  This comment sums up the difficulty faced by independent developers.
- layer8 4y ago
  There are no guarantees in life, and anything is possible. The asking price is either worth it you, or it isn’t. I’m sure it’s worth it for some people. The OP will likely adjust the price if it turns out there are too few customers.
- VPenkov 4y ago
  This is indeed a problem with all indie developers, but look at it from another angle - what are you really losing if support stops? If you'd still be getting what you've paid for when support ends, then it's a lot easier to purchase this. Plus, presumably, while support lasts, you'd start getting more features on top of what you've paid for. Authors could address concerns like yours by explaining what they would do if they decide to end support.
activitypea 4y ago
HN =/= Y Combinator. Maybe drop the YComb logo from the site?
- whoibrar 4y ago
  Yeah. It was my first time seeing a rather simple extension by solo dev getting YC funded. Not saying that it's not possible but highly unlikely. Agree with above. It gives a false impression.
somehnacct3757 4y ago
I've used tools like this, but built into products that want selectors as implementation detail for non-technical ppl. (Think AppCues flows or Intercom product tours.) They've all generally picked horrible selectors which then leads to getting a dev involved to provide a better one. So the angle you have on selector intelligence is the most compelling aspect to me. How readily can new rules be added? And do you have lots of rules specific to different frameworks? For example if I'm using FrameworkA and it loves to splash ids like Component-12345 where 12345 counts up from zero, the id will be very alluring to basic selector generator tools. One stop identifier. However the example I give is an unstable id because every execution loads components differently and the ids will be assigned differently next time
tregoning 4y ago
If somebody with this app feels charitable, could they please try it on the page below and perhaps share the output via a gist or something? https://www.warp.dev https://www.warp.dev ("Download Now" or "Watch Demo" button) There is no trial period, so it is hard to evaluate this tool. This is a really complex button, multiple SVGs, etc, so it might produce some insight into how capable the tool is.
- skilled 4y ago
  Yep, I am interested in more concrete samples also... If I'm not mistaken this result of copy/pasting CSS can be achieved in a multitude of ways (for free), so not seeing more intricate samples on the landing page is disappointing. I am also interested how well this tool can handle nested sections which use selectors like :after/:before but also layering through z-index. This is typically where such tools fall short. Would buy a license (if it can do that) in an instant though.
liberia 4y ago
I often reverse engineer sites that I think look nice and want to use their CSS as a template for a project (and there’s nothing wrong with stealing code like this). This tool is invaluable.
popcalc 4y ago
Just want to let you know it looks like someone has removed the license checking, changed the name of the app, and put it up on the web store: https://chrome.google.com/webstore/detail/css-inspector/ncgpjidaohcjajcpafgagmejnooepbml https://chrome.google.com/webstore/detail/css-inspector/ncgp...
- entropie 4y ago
  > Updated > 3 May 2021 Interesting.
  - matthijs 4y ago
    Yes, looks very similar: https://cssinspector.com/ https://cssinspector.com/
    - entropie 4y ago
      The comment section on the chrome store page pretty much reveals that you can purchase licence codes that work only once and the developer isnt responding at all.
adlpz 4y ago
This tool saved me when I had to clone a few deeply nested bits of a site between two projects with completely different stacks. Paid full price and was very much worth it: saved me hours of untangling the horrific CMS-generated source CSS. I just plonked it in the destination and went on with my life. Now I use it from time to time and it's a nice addition to the built in dev tools. Congrats on the 3.0 release!
- guivr 4y ago
  Awesome, thanks for buying it! I'm glad it's useful to you
Existenceblinks 4y ago
Not against the product but probably related: I have a friend who put lots of maintenance burden into project by often copying random css properties from somewhere else. It often looks like some hacky styles. I personally found that "trimming out" properties (trial-and-error) approach sucks for understanding what I'm going to do.
printvoid 4y ago
This is a cool tool but I am curious who the intended buyer is you targeting. Is it for developers? Also interesting question to ask is how does it pull up css that has been generated with like css modules or styled components? Does it only pick up the bare bones css or it can work with dynamic component based css as well a feature of probably more than 90% of the sites that leverage the latest and greatest of Javascript frameworks like react or Vue or svelte.

146 points by guivr 4y ago

looks like a product aimed at junior devs, who don't know how to use DevTools also "Save 59% - Product Hunt Launch Deal - only until July 21st" sounds sketchy AF i don't buy anything from websites with countdowns or fake discounts

guivr 4y ago
Hi, it's not a cash-grab, been working on it for almost 4 years now, just trying to make something useful that helps people save time.
- ushakov 4y ago
  sorry about the wording, i've edited that out
abses2000 4y ago
Hi @ushakov, I have a question about your https://typosaur.com https://typosaur.com website. It seems to be based on https://languagetool.org https://languagetool.org. Don't you think you should disclose this? @guivr Cool project!
- ushakov 4y ago
  Thanks for checking out Typosaur! This is correct, Typosaur uses LanguageTool for spell-checking. We are currently working on a new landing page, which will mention that. This is not something we're trying to hide and in fact we're very proud and grateful for what LanguageTool has offered us You can also leave your e-mail if you want to be notified when Typosaur launches
  - Kiro 4y ago
    You don't see the irony here?
    - ushakov 4y ago
      i don't see the irony here, sorry Typosaur can do things LanguageTool cannot, this is why it exists
      - Kiro 4y ago
        You're complaining about shading tactics (in a toxic way, even after your edit) while using shady tactics yourself.
        ushakov 4y ago
        which shady tactics am i using?

lelandfe 4y ago

> No unuseful, duplicated, overridden, or longhand CSS How does this differ from doing Cmd-Shift-C, selecting an element, and checking the Computed tab in Dev Tools?

guivr 4y ago
Hi, @lelandfe, there's an answer for that on our FAQ: * How is this better than "Computed Styles"? > When you copy CSS from “Computed Styles”, aside from the declarations being longhand and bloated, it transforms all measurement units such as %, em, rem in pixels (px). This could break your website on mobile devices. "Computed Styles" also don’t give you pseudo-classes, pseudo-elements, media queries, and keyframes styles, and don't copy multiple elements at once. CSS Scan does, and it gives you the original units and everything you need effortlessly.
- spread_love 4y ago
  > it transforms all measurement units such as %, em, rem in pixels (px) This is known as the "computed value" https://www.w3.org/TR/css-cascade-4/#computed https://www.w3.org/TR/css-cascade-4/#computed. The Computed tab will still display the specified values in the units they were declared in if you expand the list of matching selectors. > also don’t give you pseudo-classes, pseudo-elements True! A useful feature you've added; but if I select a pseudo-element in my inspector I can still see (and copy) the computed value > media queries, and keyframes styles This is also provided by just clicking the arrow next to a selector and expanding the matching ruleset in the Computed tab. Your product reduces the effort a great deal though! Love the demo.

seumars 4y ago

I can't think of a use case where I'd need to copy someone else's (probably messy) CSS. I assume this is aimed at beginners?

tethys 4y ago
They claim to do a bunch of optimizations to remove the mess: > No unuseful, duplicated, overridden, or longhand CSS. CSS Scan runs hundreds of real-time advanced optimizations on the code to make it shorter, crystal clear, and prettier.
guivr 4y ago
Hi! You could still use the extension to quickly inspect things, to understand how other websites are designed, or you could also use on your own website when debugging CSS or making fast edits (it's possible to edit the CSS with the extension).
zerkten 4y ago
Anyone working on agency-led projects would benefit from this. Think pharma or other brand-focused companies where the same design elements need to be replicated across multiple, separate projects. Agencies throw over templates or prototypes and expect the rest of the company to be following along. Something like this would reduce the pain somewhat when a manager is asking you to replicate parts of the design. Selling an enterprise license to Wipro or other giant integrator would benefit a lot of people, but reaching the buyers might be difficult. The buyers don't really care that much for the experience of their devs in those companies, but perhaps there is an efficiency angle.
- seumars 4y ago
  That sounds like it can/should be solved using reusable parts of a design system though.
  - DangitBobby 4y ago
    That would be wonderful but isn't always possible.

rsaraceni 4y ago

Niceee, congrats on your project mate!

guivr 4y ago
Thankss :)

sbm15 4y ago

First of all, kudos to you for building and shipping a product that you can charge for. The website looks really good and polished. I don’t mind the countdown and introductory pricing. If people find it useful, this should definitely help with conversion. Good luck!

guivr 4y ago
Thanks a lot for the support, @sbm15!
- TedDoesntTalk 4y ago
  Can you share details on how you implemented paid license keys in a browser extension? I have an extension already written that is like to do the same with. And will the chrome and Firefox stores still host it?
  - deadcoder0904 4y ago
    try https://github.com/deadcoder0904/paid-license-chrome-extension https://github.com/deadcoder0904/paid-license-chrome-extensi...
  - ilrwbwrkhv 4y ago
    This extension can be used for free without paying unfortunately by changing the code. I don't think there is any solid way of preventing that.
    - TedDoesntTalk 4y ago
      I’m not interested in a hack-proof system.
  - throwaway888abc 4y ago
    https://keygen.sh/ https://keygen.sh/ not op, just was toying with it and was happy with outcome, not affiliated or anything, was just good experience to work with, maybe will help you

Waterluvian 4y ago

I decided to make a Wordle clone for a joke. About 1/5 of the time it took was figuring out the CSS. I’ll have to try this, but I’m a bit surprised how hard it is in Chrome Dev Tools to figure out what the CSS was for the card flip animation. I dunno if this is my own incompetence, or CSS, or Chrome, but there’s just a rats nest of styles and classes to try to unravel to figure out what styles are actually relevant to a certain effect or element.

danielvaughn 4y ago
You may already be aware, but you can click on the "computed styles" tab for an element (in the devtools elements panel), and it will show you the exact values that were rendered. Much much much easier than trying to understand how the written CSS cascades down to that specific element.
- brundolf 4y ago
  The thing is though, as soon as you take it out of context (change the DOM structure, drop the nearby styles that don't directly target that element, etc) things are often going to stop behaving the way you want. At that point you honestly just have to know how to work with CSS for real if you want to get the desired outcome, which makes me skeptical of a tool that claims to let you clip out a piece of the page with all the CSS behavior intact
- bobthepanda 4y ago
  I find it isn’t great at targeting styles that aren’t static, like animations. There isn’t really a playback/play forward mechanism in devtools for css.
  - spread_love 4y ago
    Yes there is, in the Animations tab. https://developer.chrome.com/docs/devtools/css/animations/ https://developer.chrome.com/docs/devtools/css/animations/

vcryan 4y ago

I would but this if it converted the styles to tailwind. That would be incredible!

guivr 4y ago
Yess, it's on the roadmap! :D

kypro 4y ago

Not sure it's something I would use, but this is one of the first times I've visited a landing page and understood what I was being sold within a few seconds. Normally the copy is so generic I have no idea what the product is. Something like, "build sites more efficiently by enabling UI teams collaborate and share CSS". Love the instant try me feature too. Good job. It's nice to see people can still make money building a simply but well designed productivity tool like this in 2022. It's something I seem to see much less of these days.

peyloride 4y ago

Good luck with your journey but I really can't find any reason to why should I buy this.

spread_love 4y ago
I see developers copy/paste CSS out of Figma (for better or mostly worse). That's not how I write code, but I can see a market.
dmje 4y ago
I did. It's great. If you're doing any kind of front-end work with any kind of design angle to it then it's hugely useful.

rrishi 4y ago

I love the website especially the "Try it yourself on this page button". The product is uber cool. The website has a really nice feel to it overall. Congratulations!

guivr 4y ago
Thanks @rrishi!!

progx 4y ago

Cool little helper, but with that price buyers will think twice before they buy it.

spread_love 4y ago

Does this preserve and copy CSS custom properties ("variables")?

x_to_tha_z 4y ago

sirtimbly 4y ago

This tool addresses one aspect of my job really well, looking at how a dev implemented my figma design, and showing them exactly which little tweaks need to be made to fix it up. Of course inspector works too, but it's just like buying [Cleanshot](https://cleanshot.com/ https://cleanshot.com/) instead of using the built in macOS screenshot tools. Providing a more refined experience for something I need as part of my regular job. It's expensive for what it is, yes. But as a self-employed consultant, these (non-subscription) business expenses for software are my favorite.

bluelightning2k 4y ago

You INSTANTLY lost me with the fake-scarcity countdown timer. Bounced so fast & immediately looked to see if HN has a downvote button. If you're targeting engineers and sophisticated people you need to rethink that.

weird-eye-issue 4y ago
It's not fake if the price does increase when it says. Scarcity and pricing doesn't need to be based on actual physical scarcity otherwise all software would be close to $0 There is no difference from this going on sale and a TV going on sale
- bluelightning2k 4y ago
  Engineered and arbitrary scarcity is patronizing - which will instantly lose any sophisticated technical founder.
  - weird-eye-issue 4y ago
    Practically all software pricing is arbitrary, which is the point I was trying to make. It costs roughly $0 to distribute an extra unit of software (generally speaking) Has no "sophisticated technical founder" ever bought anything on sale before? Give me a break
dmje 4y ago
Sometimes the hostile responses on here really floor me. Maybe think before you type something like this. This is a really solid, incredibly professional and really not very expensive product. I use it all the time. The guy shipped something, and he shipped something great. You may not like countdown timers but jeez, ease off a bit maybe?
- sillycube 4y ago
  Honestly, I have no idea why HNers are so hostile about such a cheap product. If you like it, just buy it whether you want to treat it as a tool, a toy or whatever. If you don't like, just leave it alone.

dmje 4y ago

I use it all the time, it's ace. Highly recommended.

stevenjgarner 4y ago
What does it do for you that web developer tools does not?
guivr 4y ago
Thanks a lot @dmje, really appreciate all your support!

mitchdoogle 4y ago

Anyone who spends a lot of time writing / editing HTML and CSS should spend some time to learn how to use browser development tools. All the features shown here are easily accomplished using built-in tools. And a lot more

stevenjgarner 4y ago
Agreed. Are there advantages to this over say Firefox Web Developer Tools, where not only can you see the css as you hover but actually edit the css to see the changes? What am I missing? If there are benefits, I'm not sure the site is doing a very good job of selling them.
- lancesells 4y ago
  > Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click. Is there a way to do that in Firefox Developer Tools? If so, I would like to know because I would use it.
  - stevenjgarner 4y ago
    Absolutely. (FOR FREE!) - do a search for something like "Firefox web developer tools css tutorial". Some of the older (Web 2.0) videos will mention Firebug (~kind of the same thing). Basically you can hover over any css element, and even SELECTIVELY copy just the applicable css class or id (usually more useful than copying the whole stylesheet). Better still, it allows you to edit/insert/delete rules right in there in the Document Object Model (DOM) to see the effect it has. You could start with something like this - https://www.youtube.com/watch?v=S36N8RGdY2U https://www.youtube.com/watch?v=S36N8RGdY2U
    - mikewhy 4y ago
      Not sure those are the same at all? The submission copies all applied styles, complete with breakpoints. A class / id is only a portion of applicable styles, multiple selectors can match the same element. This is more like copying the non-auto rules in the "Computed" tab, with breakpoints. Chrome has "Copy Styles", but that doesn't get breakpoints. I don't know if Firefox does, but I haven't looked very much. It doesn't look like Safari does either.

radiojasper 4y ago

I open my inspector with Ctrl-shift-I (Firefox on Windows), it's fast, free, more feature-rich and built-in to the browser. This seems redundant.

spicybright 4y ago

I can tell you put a lot of work in, but it's still very expensive for what it is. It's something I would expect to find for free in my browser's extension store if I'm being honest. Is there any guarantee the extension will be supported for a long time after purchase? Or is it's possible a year down the line CSS Scan gets abandoned and the extension falls out of date? If it was a one time $5-$10 or $1/mo purchase, I would definitely buy it if I found it helped development for me.

mikefracture 4y ago
This comment sums up the difficulty faced by independent developers.
layer8 4y ago
There are no guarantees in life, and anything is possible. The asking price is either worth it you, or it isn’t. I’m sure it’s worth it for some people. The OP will likely adjust the price if it turns out there are too few customers.
VPenkov 4y ago
This is indeed a problem with all indie developers, but look at it from another angle - what are you really losing if support stops? If you'd still be getting what you've paid for when support ends, then it's a lot easier to purchase this. Plus, presumably, while support lasts, you'd start getting more features on top of what you've paid for. Authors could address concerns like yours by explaining what they would do if they decide to end support.

activitypea 4y ago

HN =/= Y Combinator. Maybe drop the YComb logo from the site?

whoibrar 4y ago
Yeah. It was my first time seeing a rather simple extension by solo dev getting YC funded. Not saying that it's not possible but highly unlikely. Agree with above. It gives a false impression.

somehnacct3757 4y ago

I've used tools like this, but built into products that want selectors as implementation detail for non-technical ppl. (Think AppCues flows or Intercom product tours.) They've all generally picked horrible selectors which then leads to getting a dev involved to provide a better one. So the angle you have on selector intelligence is the most compelling aspect to me. How readily can new rules be added? And do you have lots of rules specific to different frameworks? For example if I'm using FrameworkA and it loves to splash ids like Component-12345 where 12345 counts up from zero, the id will be very alluring to basic selector generator tools. One stop identifier. However the example I give is an unstable id because every execution loads components differently and the ids will be assigned differently next time

tregoning 4y ago

If somebody with this app feels charitable, could they please try it on the page below and perhaps share the output via a gist or something? https://www.warp.dev https://www.warp.dev ("Download Now" or "Watch Demo" button) There is no trial period, so it is hard to evaluate this tool. This is a really complex button, multiple SVGs, etc, so it might produce some insight into how capable the tool is.

skilled 4y ago
Yep, I am interested in more concrete samples also... If I'm not mistaken this result of copy/pasting CSS can be achieved in a multitude of ways (for free), so not seeing more intricate samples on the landing page is disappointing. I am also interested how well this tool can handle nested sections which use selectors like :after/:before but also layering through z-index. This is typically where such tools fall short. Would buy a license (if it can do that) in an instant though.

liberia 4y ago

I often reverse engineer sites that I think look nice and want to use their CSS as a template for a project (and there’s nothing wrong with stealing code like this). This tool is invaluable.

popcalc 4y ago

Just want to let you know it looks like someone has removed the license checking, changed the name of the app, and put it up on the web store: https://chrome.google.com/webstore/detail/css-inspector/ncgpjidaohcjajcpafgagmejnooepbml https://chrome.google.com/webstore/detail/css-inspector/ncgp...

entropie 4y ago
> Updated > 3 May 2021 Interesting.
- matthijs 4y ago
  Yes, looks very similar: https://cssinspector.com/ https://cssinspector.com/
  - entropie 4y ago
    The comment section on the chrome store page pretty much reveals that you can purchase licence codes that work only once and the developer isnt responding at all.

adlpz 4y ago

This tool saved me when I had to clone a few deeply nested bits of a site between two projects with completely different stacks. Paid full price and was very much worth it: saved me hours of untangling the horrific CMS-generated source CSS. I just plonked it in the destination and went on with my life. Now I use it from time to time and it's a nice addition to the built in dev tools. Congrats on the 3.0 release!

guivr 4y ago
Awesome, thanks for buying it! I'm glad it's useful to you

Existenceblinks 4y ago

Not against the product but probably related: I have a friend who put lots of maintenance burden into project by often copying random css properties from somewhere else. It often looks like some hacky styles. I personally found that "trimming out" properties (trial-and-error) approach sucks for understanding what I'm going to do.

printvoid 4y ago

This is a cool tool but I am curious who the intended buyer is you targeting. Is it for developers? Also interesting question to ask is how does it pull up css that has been generated with like css modules or styled components? Does it only pick up the bare bones css or it can work with dynamic component based css as well a feature of probably more than 90% of the sites that leverage the latest and greatest of Javascript frameworks like react or Vue or svelte.