Show HN: I made CSS Scan 3.0, a fast way to check and copy CSS
getcssscan.com
getcssscan.com
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.
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
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’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.
There isn’t really a playback/play forward mechanism in devtools for css.
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.
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.
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.
Authors could address concerns like yours by explaining what they would do if they decide to end support.
How does this differ from doing Cmd-Shift-C, selecting an element, and checking the Computed tab in Dev Tools?
* 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.
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.
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!
The website has a really nice feel to it overall.
Congratulations!
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.
> 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.
> 3 May 2021
Interesting.
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
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.
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.
...pretty hostile
INSTANTLY is appropriate emphasis. It's important to convey that when you see a 'clickfunnels' countdown timer you don't look past it.
End of story.
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 advice is simply that it's self-sabotaging to choose the design language of low-value infomercial type websites.
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.
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?
[Edit] - no, obviously not "for fine dining", but jeez, the guy is asking $49, not $4900! Who said anything about fine dining...?!
There is no difference from this going on sale and a TV going on sale
Has no "sophisticated technical founder" ever bought anything on sale before? Give me a break
Agree with above. It gives a false impression.
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 "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 Cool project!
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
Typosaur can do things LanguageTool cannot, this is why it exists
Is there a way to do that in Firefox Developer Tools? If so, I would like to know because I would use it.
You could start with something like this - https://www.youtube.com/watch?v=S36N8RGdY2U
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.