8 ms·

Working on a desktop version of my webdev tool SnipCSS: https://chrome.google.com/webstore/detail/snipcss/hbdnoadcmapfbngbodpppofgagiclicf?hl=en https://chrome

by mrieck 7y ago

Working on a desktop version of my webdev tool SnipCSS: https://chrome.google.com/webstore/detail/snipcss/hbdnoadcmapfbngbodpppofgagiclicf?hl=en 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.

peteforde 7y ago
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. :)
acutesoftware 7y ago
What made you decide to go with a desktop version of your software?
- mrieck 7y ago
  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.
vinitagr 7y ago
This looks like a really useful tool. I would use it. How are you planning to market it?
- mrieck 7y ago
  Thanks! I haven't thought much about marketing yet - when it's ready I'll try submitting it to ShowHN, ProductHunt and dev subreddits.
peteforde 7y ago
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.
- mrieck 7y ago
  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!
  - peteforde 7y ago
    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.
    - mrieck 7y ago
      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.
      - peteforde 7y ago
        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?
aerovistae 7y ago
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?
- mrieck 7y ago
  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.

by mrieck 7y ago

peteforde 7y ago

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. :)

acutesoftware 7y ago

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

mrieck 7y ago
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.

vinitagr 7y ago

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

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

peteforde 7y ago

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.

mrieck 7y ago
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!
- peteforde 7y ago
  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.
  - mrieck 7y ago
    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.
    - peteforde 7y ago
      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?

aerovistae 7y ago

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?

mrieck 7y ago
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.