Show HN: I made CSS Scan 3.0, a fast way to check and copy CSS(getcssscan.com)
getcssscan.com
Show HN: I made CSS Scan 3.0, a fast way to check and copy CSS
https://getcssscan.com
101 comments
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!
Thanks a lot for the support, @sbm15!
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?
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.
I’m not interested in a hack-proof system.
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
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
Looks very cool. Thanks! And pricing is reasonable.
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/) 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.
It's expensive for what it is, yes. But as a self-employed consultant, these (non-subscription) business expenses for software are my favorite.
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.
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.
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.
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.
There isn’t really a playback/play forward mechanism in devtools for css.
Yes there is, in the Animations tab. https://developer.chrome.com/docs/devtools/css/animations/
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
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 ("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.
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.
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.
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.
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.
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.
This comment sums up the difficulty faced by independent developers.
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.
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.
Authors could address concerns like yours by explaining what they would do if they decide to end support.
> 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?
How does this differ from doing Cmd-Shift-C, selecting an element, and checking the Computed tab in Dev Tools?
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.
* 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.
> 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. 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.
This is known as the "computed value" 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.
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!
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!
Awesome, thanks for buying it! I'm glad it's useful to you
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?
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.
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.
That sounds like it can/should be solved using reusable parts of a design system though.
The irony is that these companies can have multiple design systems for the same brand because the ownership breaks down by geography. The best is often US versus global, but more often you have brand managers for the top 15 economies.
That would be wonderful but isn't always possible.
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).
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.
> 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.
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/ncgp...
> Updated
> 3 May 2021
Interesting.
> 3 May 2021
Interesting.
Yes, looks very similar: https://cssinspector.com/
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.
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
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
Good luck with your journey but I really can't find any reason to why should I buy this.
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.
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.
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.
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.
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?
It's not hostile, it's helpful.
For everyone who takes the time to explain why they bounced, 1000 people did so without taking the time to explain.
I am sure the majority of people here who saw this hit back the second they saw the ticking countdown timer. Few bothered to come back and advise against it.
For everyone who takes the time to explain why they bounced, 1000 people did so without taking the time to explain.
I am sure the majority of people here who saw this hit back the second they saw the ticking countdown timer. Few bothered to come back and advise against it.
CAPS, "fake", "BS"...
...pretty hostile
...pretty hostile
"BS" very clearly refers to the timer not the site. But I've removed it anyway.
INSTANTLY is appropriate emphasis. It's important to convey that when you see a 'clickfunnels' countdown timer you don't look past it.
INSTANTLY is appropriate emphasis. It's important to convey that when you see a 'clickfunnels' countdown timer you don't look past it.
It's "hostile" in so far as they are being brutally honest. You pull this kind of crap, and you get called out for it. This has all the professionalism of a late night infomercial. DON'T DELAY, CALL TODAY!
End of story.
End of story.
The notion of a sale for software and especially the countdown timer is a deliberate trick designed to separate people from their money. Just because many businesses engage in these kinds of dishonest tactics doesn't mean that people will just accept them. People don't like being tricked - it's a very legitimate criticism.
If this is a trick then you could arguably put pretty much any marketing into the same category. Looks nice? Cheaper than competition? Has newsletter? Great SEO? Really well authored content? Lovely video? Are these all "tricks" too? Because at some level, yes, you're being manipulated by pretty much anything that triggers desire.
Seems entirely legitimate to me that people can choose whatever tools they want to sell the thing they've spent loads of time working on. And in the same way it's also entirely legitimate for you and others to simply choose not to buy.
Seems entirely legitimate to me that people can choose whatever tools they want to sell the thing they've spent loads of time working on. And in the same way it's also entirely legitimate for you and others to simply choose not to buy.
The point isn't that this is "immoral".
The advice is simply that it's self-sabotaging to choose the design language of low-value infomercial type websites.
The advice is simply that it's self-sabotaging to choose the design language of low-value infomercial type websites.
He seems to be doing ok. Quotes from Brad Frost. Revenues of ~$700k. I'm not sure that much sabotage going on, tbh ;-)
Very well said!
Developers are also a very marketing-averse group.
Tbh my guess is the founder of this product never got feedback from devs before doing that landing page.
The tool could be superb. Kind of doesn't matter. Pattern recognition kicks in.
Maybe they built a great product. If that's so they camouflage its value by making it look like some ebook with a scarcity timer.
Developers are also a very marketing-averse group.
Tbh my guess is the founder of this product never got feedback from devs before doing that landing page.
The tool could be superb. Kind of doesn't matter. Pattern recognition kicks in.
Maybe they built a great product. If that's so they camouflage its value by making it look like some ebook with a scarcity timer.
It's not a trick. It's a sale. Have you never seen anything go on sale before?
An analogy to help explain:
You see someone dressed as a hotdog holding a giant promotional "50 OFF, TODAY ONLY!!!" sign outside a restaurant.
Is that restaurant somewhere you'd consider taking a client for fine-dining?
You see someone dressed as a hotdog holding a giant promotional "50 OFF, TODAY ONLY!!!" sign outside a restaurant.
Is that restaurant somewhere you'd consider taking a client for fine-dining?
No, but I might just dip in there for lunch. Why does it have to be taking a client out for fine dining?
I think you've got a lot to learn about sales, marketing, and business in general
Yes.
[Edit] - no, obviously not "for fine dining", but jeez, the guy is asking $49, not $4900! Who said anything about fine dining...?!
[Edit] - no, obviously not "for fine dining", but jeez, the guy is asking $49, not $4900! Who said anything about fine dining...?!
Unfortunately HN audience can smell BS really fast and these kind of tactics fall in the BS category, hence get called out. Maybe in other lay person spaces it won't be.
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
There is no difference from this going on sale and a TV going on sale
Engineered and arbitrary scarcity is patronizing - which will instantly lose any sophisticated technical founder.
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
Has no "sophisticated technical founder" ever bought anything on sale before? Give me a break
I feel like anytime you get marketing using words like "fastest", "easiest", "best", "world's greatest", etc, you are entering the realm of hucksterism
HN =/= Y Combinator. Maybe drop the YComb logo from the site?
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.
Agree with above. It gives a false impression.
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.
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.
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.
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.
Cool little helper, but with that price buyers will think twice before they buy it.
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
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
Hi @ushakov, I have a question about your https://typosaur.com website. It seems to be based on https://languagetool.org. Don't you think you should disclose this?
@guivr Cool project!
@guivr Cool project!
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
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
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.
I use it all the time, it's ace. Highly recommended.
Thanks a lot @dmje, really appreciate all your support!
What does it do for you that web developer tools does not?
Does this preserve and copy CSS custom properties ("variables")?
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
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.
> 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.
Is there a way to do that in Firefox Developer Tools? If so, I would like to know because I would use it.
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
You could start with something like this - https://www.youtube.com/watch?v=S36N8RGdY2U
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.
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.
Perhaps I am not understanding you correctly. Firefox Web Developer Tools shows css breakpoints [0] much the same as getcssscan.com [1] - here the examples are with the h3 logo class. Firefox WDT actually shows the entire css cascade.
[0] https://repository.embode.net/Firefox-breakpoint.png
[1] https://repository.embode.net/getcssscan.png
[0] https://repository.embode.net/Firefox-breakpoint.png
[1] https://repository.embode.net/getcssscan.png
And back to the original question, how do you copy the font size from the breakpoint rules, the margin from the second set of rules, and the font family from the third, with a callout to the breakpoint, in a single click using Firefox dev tools?
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.