Top Annoyances of SnipCSS

Recently it was in the news the Uber CEO gave a presentation "Why We Suck." 

I can relate - sometimes I think my software sucks too. With that in mind and the goal of addressing the top annoyances  of SnipCSS, I thought I'd list some things I want to improve. 

Unlike Uber I don't have billions in revenue or any employees.  But just because I'm a one-man shop doesn't mean I should make excuses.  I think SnipCSS has the potential to be an  indispensable tool for web developers and addressing the pain points is the best way to stay on the right track.

So let's cut to the chase and get started...

1. Trouble Selecting the Correct Element

In older versions of SnipCSS it was very hard to select the element(s) you wanted.  Sometimes the box around the element would disappear or the parent button would be hidden.  If you don't know the element or how many you're selecting it's not very helpful.

Version 1.8.0 addressed some edge cases around those issues and also added element/item counts.  If frameworks like React change classes/ids while hovering, a popup will give instructions to re-click the item making sure the element selector doesn't disappear under it.  It's not a perfect solution because the extra clicks, but it's better than not being able to select an item at all.

There have also been major improvements for Pro Members.  Pro Members were always able to select children of an element by specifying indices.  Now you can use Subselection and just click the items you want to include or exclude.  Also some bugs with the multiple element checkbox have been fixed.  

2. The SnipCSS Kiwi taking too long to collect all the styles

The SnipCSS kiwi has to work hard to collect all styles.  It's getting all matched styles for every single element in the selection and often forcing pseudo states through the debugger to get other styles.  Optimization hasn't been a focus but I feel like I could do better.  Unfortunately my latest attempts haven't led to good results...   

Right now the best way to speed up the kiwi is to keep an eye on the number of elements needed to be processed.  If there are over 500 elements being snipped, you may want to use Subselection if you are a Pro member, or pick something with less elements if you are a free member.  Once again not ideal, but at least you can make adjustments before being surprised how long it takes.  

3. Design is incorrect, or some styles did not copy correctly

Nothing is worse than waiting for the kiwi to peck at the page, only to find a broken design or a blank page as the result.  

This is happening less and less often as I improve the algorithm to process all of the rules, but sometimes when cutting up portions of rules, calculating their specificity and rearranging things one small rule to hide elements or set the wrong background color can lead to a blank page. 

In cases like this, the vast majority of the time you are just one line away from having the correct design.  It's usually a display : none or wrong background color that's the culprit.  So even though you might have the urge to close the tab and delete the extension, first look to remove a display : none or change the background color in the CSS.  All the HTML and all styles are probably there, it just might need a small adjustment.  I know it's not ideal, so I'm trying to reduce the amount it happens as much as possible.

4. Hard to integrate Snippet into an existing website design

SnipCSS can take snippets from anywhere which is really powerful, but it also means you may not extract something that looks good in your existing design.

It's awesome that you can scope snippets to not have the styles of your snippet affect your website, but I think the next step is to allow theming.  I want to be able to use an existing color/type theme and modify the snippet to that before integrating it into the website.  It would try to change the colors, borders, and fonts to the best of its ability to match the design of your website.  That would be great.

Also I'm considering making a Visual Studio Code extension that may use AI features to import your snippet.  Hopefully I'll make progress on that in the next few months.

5. Doesn't work with Shadow DOM or iframes

SnipCSS has a limitation that it can't read data inside the Shadow DOM.  If you try to select an element with Shadow nodes it will give an error.  At some point I'd like to try to at least extract all styles of a Shadow component.  For now it's just not worth the heavy-lifting to make that work. 

IFRAMES have a similar problem, to run code and pass messages between frames would be quite the undertaking.  Fortunately when testing SnipCSS 98% of websites are not putting their content in shadow nodes or frames.  There are enough improvements I can make for the other 98% of sites that sometimes you just have to take the loss.

Hopefully both free users and Pro members see the value in using SnipCSS.  The amount of time I'm able to save by using existing website sections from the web, as opposed to writing things from scratch is enormous.  

SnipCSS is never going to be perfect, but it keeps getting better and I'm really trying to make it Not Suck.

Is there anything I forgot?  Please let me know via the support email - I'll take a look at your issue and see if I can come up with a solution.   Thanks for reading!