Update: What's New in Version 1.8.1?

Better Element Selection

Being able to quickly and accurately select what elements you want to extract is an important part of SnipCSS.  

The parent button is probably the most important, but previously it was a tiny ^ and sometimes it would be hidden.  Now the button is more prominent and always stays on the page.  There is a new element count, so you can see how many elements  you're selecting to quickly understand how long the snippet will take.  As a general rule I try to keep my selections under 500 elements but SnipCSS will work with larger selections, it will just take a longer time.

Often times you don't need everything, and that's where the new Subselection feature for Pro members really helps.

After you select a section, there is a new "Subselection" button.  This is for getting a more specific selection within the current selection.  Clicking it will give you two options, Include Specific Elements or Exclude Specific Elements.

1. Include Specific Elements - After selecting this option, you need to left click all the elements you want in your snippet.   It is only for including elements inside the main selection, so you'll notice a blue highlight when you hover over elements inside your initial selection, and after clicking they the blue border will remain.  Included elements include all children below and any containers. Siblings not selected will be removed.  

2. Exclude Specific Elements - After selecting this option, you left click any items you want to exclude.  It's the opposite of include option, and to remove anything you must click one.  Those elements get highlighted purple.  

After doing a subselection, just click Run SnipCSS as usual.  The result will then have the correct elements you selected and styles associated with those elements.

Edit Button

After getting a snippet, there is a feature to Edit on the snippet code page. 

This feature is still being improved, but right now it uses contenteditable attribute to allow you to edit any text in the preview frame.  After highlighting some text and editing, you can press enter to save the changes and update the HTML.  

Stable Diffusion Update

Speaking of editing, the option to replace images in the extension is receiving and upgrade.  There are Replace buttons along the right panel for any image in the snippet.  SnipCSS uses Stable Diffusion, and it was just upgraded to XL version 1 from the Beta.  Not only does this new version produce better images, but the aspect ratios will be closer to the original image in the design.

SnipCSS crops images to fit the aspect ratio, but now that there are so many sizes available via the Dreamstudio API the cropping almost always looks decent.  

Template System

The the template system for Mustache templates can now have loops inside loops, and then the JSON for Lorem Ipsum data will be filled to create a subloop.   I'm looking at better ways to make the templating system useful, and soon I want to have theming abilities in the extension which will pull in data from ChatGPT on some topic instead of just filling with Lorem Ipsum.  It doesn't seem like many people are using templates yet, but I hope with improvements this can become very useful feature.