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

https://getcssscan.com

by guivr • 4 years ago

146 98 4 years ago

getcssscan.com

lelandfe• 4 years 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?

guivr9• 4 years 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_love4• 4 years 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. 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.

seumars2• 4 years 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• 4 years 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.

guivr9• 4 years 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).

zerkten2• 4 years 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.

seumars2• 4 years ago

That sounds like it can/should be solved using reusable parts of a design system though.

rsaraceni• 4 years ago

Niceee, congrats on your project mate!

guivr9• 4 years ago

Thankss :)

ushakov5• 4 years 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

guivr9• 4 years 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.

ushakov5• 4 years ago

sorry about the wording, i've edited that out

abses2000• 4 years ago

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!

ushakov5• 4 years 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

sbm15• 4 years 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!

guivr9• 4 years ago

Thanks a lot for the support, @sbm15!

TedDoesntTalk3• 4 years 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?

Waterluvian• 4 years 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• 4 years 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• 4 years 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• 4 years 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.

vcryan• 4 years ago

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

guivr9• 4 years ago

Yess, it's on the roadmap! :D

kypro• 4 years 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• 4 years ago

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

spread_love4• 4 years 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.

dmje8• 4 years 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• 4 years 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!

guivr9• 4 years ago

Thanks @rrishi!!

progx• 4 years ago

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

spread_love4• 4 years ago

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

sirtimbly• 4 years 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/) 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.

bluelightning2k7• 4 years 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-issue4• 4 years 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

bluelightning2k7• 4 years ago

Engineered and arbitrary scarcity is patronizing - which will instantly lose any sophisticated technical founder.

dmje8• 4 years 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?

bluelightning2k7• 4 years ago

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.

mitchdoogle3• 4 years ago

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.

sillycube• 4 years 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.

ilrwbwrkhv2• 4 years ago

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.

mitchdoogle3• 4 years ago

I feel like anytime you get marketing using words like "fastest", "easiest", "best", "world's greatest", etc, you are entering the realm of hucksterism

dmje8• 4 years ago

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

stevenjgarner4• 4 years ago

What does it do for you that web developer tools does not?

guivr9• 4 years ago

Thanks a lot @dmje, really appreciate all your support!

mitchdoogle3• 4 years 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

stevenjgarner4• 4 years 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• 4 years 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.

radiojasper• 4 years 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• 4 years 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• 4 years ago

This comment sums up the difficulty faced by independent developers.

layer8• 4 years 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• 4 years 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• 4 years ago

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

whoibrar• 4 years 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• 4 years 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• 4 years 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 ("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.

skilled2• 4 years 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• 4 years 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• 4 years 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/ncgp...

entropie2• 4 years ago

Updated
3 May 2021

Interesting.

matthijs• 4 years ago

Yes, looks very similar: https://cssinspector.com/

adlpz• 4 years 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!

guivr9• 4 years ago

Awesome, thanks for buying it! I'm glad it's useful to you

Existenceblinks• 4 years 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• 4 years 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.

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

Related Stories