Hacker News Reader

Comment by mrieck | Hacker News Reader

Working on a desktop version of my webdev tool SnipCSS:

https://chrome.google.com/webstore/detail/snipcss/hbdnoadcma...

The current version is a Chrome Extension that extracts every CSS rule needed to rebuild the DOM subtree of a selected element. Unlike other tools it never uses computed styles and uses the actual DevTools protocol to get the CSS. The current extension doesn't handle CSS specificity or inheritance correctly, so I'm waiting until I fix those things before promoting it. Actually this comment is the first time I've told anyone about it.

View on HN

Hey, just so you know... I went to snipcss.com and attempted to sign up for a lifetime membership, only to be informed that the payment processing was in dev mode. I went back and entered the standard test numbers, and it worked.

You might want to lock this down.

Also: take my money, please.

Thanks for letting me know!

The homepage doesn't have a link to the pricing page so I didn't think anyone would find that. I'll let you know when it's ready!

I installed the Chrome plugin, and then it prompted me to create an account... so I did. That took me to your dashboard.

I loved the little animation with the critter coming to inspect the DOM element, but as of right now the plugin doesn't seem to actually do anything. It doesn't appear to emit any css nor is my css being transmitted to the site. It could well be that you're between iterations, but right now if I didn't know you were working on it, I'd be tempted to remove it.

Do you mind me asking which site you tried it on?

I haven't had it crash in a while where it produces nothing while snipping. Maybe you found a new way to crash it. What if you try it on this site? (HackerNews as a test)

Also your Chrome version and OS might help me debug it.

I ran it against a dev site I have up at localhost:3000... it does seem to work great on HN's homepage, so perhaps the page has to be publically addressable?

Running Chrome 74 on Ubuntu

Can this do media queries? eg if I have 5 responsive ranges, do I have to snip 5 times or is it smart enough to grab all of it?

I never tested a url with a port number so that could be it. I'll have to look at that this weekend.

It will be smart enough to grab everything but I'm still working out the issues. The extension version only runs once, but for the desktop version it has a list of Device Resolutions to run through (typical Desktop, iPad, Mobile is default) and for the extra resolutions adds more styles to the list of rules by iterating through all the elements again. That seems to get almost all media queries so hopefully I can release that soon.

The difficulty I imagine with that is for components whose subtree's styling is modified upon interaction via JavaScript. For instance, a drop down that gets extra classes when you click on it causing it to appear. How do you account for that?

It doesn't account for user interaction but I might attempt to do something for that in the future.

The desktop version uses puppeteer so I do force a hover state on each element and get extra psuedo selectors by doing that. I'm also planning to add something so you can interact with the page first to get the page in the state you want, because right now the selection process cancels all other events (you select something by clicking).

One of the first difficult issues that I ran into was that I had to modify CSS selectors to target the subtree. For example let's say there is a selector:

#mysidebar #atable tr

Now I only want to Snip/Extract the #atable element. I have to modify the selector by chopping off #mysidebar because the html I'm giving the user is just #atable and everything below that. The problem is modifying selectors like that ruins CSS specificity. That's just one example of how things became a lot more complicated than I originally thought it would be.

I've wanted this badly enough to have it on my list of potential things to build in a medium-term future.

Please do this. Is there a waitlist? If not, please make it so. :)

This looks like a really useful tool. I would use it. How are you planning to market it?

Thanks! I haven't thought much about marketing yet - when it's ready I'll try submitting it to ShowHN, ProductHunt and dev subreddits.

What made you decide to go with a desktop version of your software?

I'm hoping to make SnipCSS part of my workflow so a desktop version means I could have it more closely tied to an IDE. For example I could import code snippets, manage extracted Fonts/Images, or even analyze the existing project so it doesn't duplicate existing css rules.

Eventually it would be cool to automatically create React/Vue templates but that's getting ahead of myself. For now I'd be happy if it just extracts the correct styles 99% of the time. Currently it's 80% there, but the last 20% is always the hardest.

Reply on news.ycombinator.com