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.
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!
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 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.
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.
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.
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
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 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.
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.
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.
> 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 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.
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.
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.
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.
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
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?
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.
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!
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.
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.
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.
I mean is it really that BS... you're literally getting it for half price now, which you (but not necessarily YOU) may regret later on when you do want to get the product.
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
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
I feel like anytime you get marketing using words like "fastest", "easiest", "best", "world's greatest", etc, you are entering the realm of hucksterism
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.
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.
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.
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.
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.
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.
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.
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.