Zach’s ugly mug (his face)

Zach Leatherman

spider-pig Searches for Nodes that match a CSS Selector

January 17, 2018

spider-pig is a command line utility that takes a URL and retrieves all the local URL links on the page. It can also search for a CSS selector on each local URL to measure the impact of a CSS change.

Homer Simpson holding up a pig upside-down pretending that it’s walking on the ceiling

Get a list of local URL links from a root URL. Works with JavaScript generated content.

<a href="test.html">Test</a><!-- match -->
<a href="test2.html">Test</a><!-- match -->
<a href="test2.html">Duplicate Test</a><!-- do not match -->
<a href="root.html">URL to self</a><!-- match -->
<a href="mailto:test@example.com">Email link</a><!-- do not match -->
<a href="http://www.google.com/">External</a><!-- do not match -->

Can also act as a live-DOM CSS search across multiple files (find all the templates that are using the CSS selector I want to change). If I’m worried about changing code in a CSS selector, I’ll use this tool to search for instances of the selector across my project.

spider-pig on the command line
Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Making a Simple Web Site with the Simplest Static Site Generator, Level 1
Next
Airing Out 2017’s Dirty Laundry

5 Likes

Howdy, I'm Jackwesruv 💻🐕Ethan MarcotteDavid PolitiHugo Tunius 🦀
4 Replies
  1. Zach Leatherman

    @zachleat

    only spiderpig knows what spiderpig does 🏆

  2. Zach Leatherman

    @zachleat

    bells and whistles: pick one!

  3. spider pig!!

  4. Todd Morey

    @toddmorey

    Kind of missed the point of the post because I was too busy flippin' css on and off on your site.

    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)