7 ms·
Show HN: CSS Scan – Instantly check or copy computed CSS from any element
- guivr 8y agoHello Hacker News! Creator here, happy to answer any questions! :) I decided to build CSS Scan to get computed styles with no hassle and in real-time. It's faster than using browsers' Developer Tools and give all of the styles in the shorthand way, this means no messy CSS or styles being overwritten. You can also copy to clipboard by just clicking on it. P.S.: Of course this is only for use cases you want to have an overall vision of the styles; it's far from being a full alternative to Inspect Element. It took me 50 hours and 17 minutes to develop. Inspired by @levelsio I recorded all the development and made a speed video. If you want to check it: https://www.youtube.com/watch?v=OtsNNXpXcYs https://www.youtube.com/watch?v=OtsNNXpXcYs
- geuis 8y agoYou should check out that link on a mobile device. I’m not sure exactly what I’m looking at. There’s no links and just a “buy” button.
- guivr 8y agoThanks, geuis. I'll look into that
- deadcoder0904 8y agoAny chances you can get it integrated with React? Like show the component name when trying to copy styles.
- guivr 8y agoYou mean webcomponents? I'll study this. Thanks for the suggestion!
- NathanCH 8y agoNo, not webcomponents.
- RobertRoberts 8y agoI'd vote for web components over React, as some of us use Vue or Angular...
- sbjs 8y agoI still don’t understand why Angular hasn’t died out. It’s very hard to understand and the tutorials can’t simplify that because it’s just inherently very complex. It feels highly over engineered like classical Java. Instead of allowing you to opt into more complex features as needed like a good framework should do, it forces you to learn its steel curve up front!
- ivthreadp110 8y agoI really enjoyed Angular 1.x, was not happy with the 2.0 version (other then they fixed some critical performance issues with scaling websites). It was perfect for making simple single page applications for internal use at an an eCommerce company. POS, Order Processing, RMA processing, Research, competition and price controls, inventory & warehouse management, etc. I use ReactJS for large applications these days.
- b_b 8y agoI think it's due to its enterprise users and customer bases, and never underestimate the power of legacy code base inertia that often keep these types of things going.
- Kamshak 8y agoIt has improved quite a lot, it's a joy to code in in the newest versions. You do need to invest a bit of time to learn it but it's well worth it
- geuis 8y agoJust had a chance to check it out on Chrome. Looks cool! Another feature that might be useful is to have links back to the related stylesheets via css source maps.
- Theodores 8y agoI want to know more about the bicycle tour this is paying for! Glad you got off the sofa a few times during the code-a-thon, you could have spent all that time in front of a games console, so well done for completing the task.
- makeee 8y agoThis looks super useful! Is it also able to grab media queries and other styles that may not be applied at the current time (like style based on a parent class that gets added later to trigger an animation)?
- guivr 8y agoThanks! It grabs the current media query only :)
- a_r_8 8y agoLooks super useful but I don't want to buy before I try. The landing page says "for the price you want", but the product page has a 1.99+ and I can't enter less than that.
- guivr 8y agoHey, thanks! You can actually try if you're on a desktop. There's a Demo button to test it :)
- posamari 8y agoI don't see a demo button, where is it? Edit: I see it now, the browser window has to be wide enough and not zoomed in, otherwise the page goes into mobile view and the button disappears.
- tomjohnneill 8y agoThis is really cool. Is there any way you can add the option to turn the CSS into React inline styles?
- Globz 8y agoThis is really GREAT! The timing is perfect, I have to rewrite a whole bunch of CSS for a project and now I can easily pick and choose what I want to port over to the new layout. Thank you!
- guivr 8y agoThat's nice to hear, Globz! I hope you enjoy it =)
- staffordrj 8y agoThis looks great! Though it seems funny to charge for a tool that makes it easier to copy other people's code.
- guivr 8y agoThanks! :) Yeah, but you can use it for yourself too, just to check your styles or to study the web.
- conceptpad 8y agoGreat tool! I'd like to see you keep going with this. Quick feedback: it would be useful to copy the entire ruleset, including the selector and brackets (as an option). Further if you can reach into source via document.stylesheets, grab the selectors from source (as another option).
- guivr 8y agoThanks for the suggestion! Nice idea, will write it down to feature requests :)
- dexterous 8y agoIt'd actually be great to see something like this absorbed into browser dev-tools.
- guivr 8y agoHey! I have good news! Just updated the app. Now you can copy the selector name! If you use Chrome, the extension will update itself. On Firefox, I'll implement auto-update functionality tomorrow. More updates to come!
- codegeek 8y agoThis is a great tool. I hate inspecting element to check computed css properties to troubleshoot issues for our clients. Definitely worth a shot.
- guivr 8y agoThank you for the support!
- nullbyte 8y agoThis is basically an advertisement.
- lunaru 8y agoHN has a pretty strong history of people posting their/other's projects, commercial or otherwise and getting feedback. So in a way, every Show HN is an advertisement. I don't believe this should be discouraged. I personally find the Show HN posts far more interesting and closer to HN roots than the typical tech/political news that dominates the front page these days.
- overcast 8y agoI mean a synonym for "advertise" is literally "show". What I really have a problem with is when someone else hijacks someone's thread with their own agenda.
- arxpoetica 8y agoAnyone from Chrome/FF/Safari teams willing to implement this functionality into the default dev tools? It's super handy.
- nolite 8y agoIf we buy, do we get future updates?
- Kagerjay 8y agoIs it possible you can show a partial grid? e.g. there's so many boxes inside of boxes. It would be nice if say within the `body` tag, you show items that are at most 1,2,3,4 levels deep at most.
- ceagrass 8y agoI've used a similar tool[1] before to convert all styles of an element to inline styles in order to copy it into a more isolated setting for testing, and it worked pretty well for me. There were a lot of manual steps for me to do this though, so CSS Scan seems like a pretty nice "one click" alternative. [1]: https://www.npmjs.com/package/computed-style-to-inline-style https://www.npmjs.com/package/computed-style-to-inline-style
- seanwilson 8y agoCan you share anything about how many sales you've made? I'm curious how willing developers are to pay for tools like this. I'm working on selling a Chrome extension as well so I'd be super interested in learning more.
- guivr 8y agoHey seanwilson, I actually made a lot more sales than I expected. $500 Revenue so far. 167 sales :) I'm also planning to write an article, I'll update stats on twitter (@gvrizzo)
- seanwilson 8y agoBy the way, how does the Gumroad integration and license checking work? You get the extension files to download on purchase? I'm integrating Paddle for payments into my extension. It requires you to implement user accounts or license keys yourself though.
- ezekg 8y agoWhat are you currently doing to handle licensing outside of Paddle? I'm guessing you're building an Electron app?
- King-Aaron 8y agoThis is great. I've been looking for a good way to be able to identify between active styles and legacy css that seems to build up over time, and this is a pretty neat way to do it.
- guivr 8y agoGlad you liked it! Thanks :)
- andrenotgiant 8y agoI bought it! I looked into trying to do this myself and got stuck. Also interested to hear how the sales go, I think charging a little money for it is a great idea.
- guivr 8y agoThanks andre! :) The sales went pretty well! I'll share some stats on my twitter @gvrizzo tomorrow. Also already shared some numbers on a reply here.
- ninjaranter 8y agoIsn't this literally getComputedStyle[1]? Chrome devtools already has a 'computed' section which shows the same thing. What additional functionality does this provide that I'm missing? [1] https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle https://developer.mozilla.org/en-US/docs/Web/API/Window/getC...
- guivr 8y agoNot identical, just similar. getComputedStyle gets the default styling of the browser too, and also some properties that are used just for rendering. Besides that, you'd have to use the console for each element you want. With CSS Scan you just have to hover it.
- johnmurch 8y agoI bought it - it’s cheaper than a coffee and Saves me time!