npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

simple-net-art-diagram

v1.1.1

Published

The Simple Net Art Diagram: the simplest possible net art diagram.

Downloads

14

Readme

The Simple Net Art Diagram

Simple Net Art Diagram

Created by artist duo MTAA, Simple Net Art Diagram (SNAD) is a schematic illustration of two computer terminals connected by a line and a red lightning bolt labeled “The art happens here.” Through an extreme economy of form, the now-iconic image conveys complex concepts about net art: first, that it “happens,” and therefore can be thought of as an action or a performance; and second, that it is defined by in-betweenness.

Since its publication in the late 1990s, Simple Net Art Diagram has functioned as a kind of net art meme, remade by other artists to reflect differing conceptions of net art. Embracing this evolution, MTAA have released it under a Creative Commons license that permits alteration and reuse.

Rhizome's Net Art Anthology

NFT

MTAA has deployed a smart contract to the Ethereum blockchain which embeds a base64-encoded representation of The Simple Net Art Diagram within its source code. This contract follows the ERC-721 standard.

Addresses

NFT Edition

The artists have minted three non-fungible tokens of The Simple Net Art Diagram. These tokens are entirely on the Ethereum blockchain with no external dependencies such as IPFS or Arweave. See the contracts section of this repo for the source code.

Usage

smart contract

The smart contract exposes two functions that may be used to render The Simple Net Art Diagram directly from the blockchian.

  • SIMPLE_NET_ART_DIAGRAM — returns a base64-encoded data URI (the signature is 0xea99b750)
  • tokenURI returns base64-encoded ERC-721 compliant metadata JSON, with the data uri in the image field

npm package

Install

yarn add simple-net-art-diagram

Require in Node.js:

const Simple_Net_Art_Diagram = require("simple-net-art-diagram");

or, in the browser, which adds a Simple_Net_Art_Diagram global variable.

<script src="./node_modules/simple-net-art-diagram/dist/index.js"></script>

Note: We're not providing a CDN URL for the package.

The smart contract ABI, addresses, SIMPLE_NET_ART_DIAGRAM function signature, and the data URI are available via properties on the exported object:

Simple_Net_Art_Diagram.abi; // [{"inputs": [],"stateMutability": "nonpayable",}...etc.
Simple_Net_Art_Diagram.addresses; // { "31337": { "address": "0x5FbDB2313...etc"
Simple_Net_Art_Diagram.functionSignature; // 0xea99b750
Simple_Net_Art_Diagram.dataUri; // "data:image/gif;base64,R0lGODlh1wHuAMQAAP///...etc

addresses.json is an object with chain IDs as keys:

{
    "<chain id>": {
        "address": "<contract address>",
        "transactionHash": "<deploy transaction hash>"
    }
}

There is also a helper function exported which helps to retrieve the data URI directly from the blockchain.

Simple_Net_Art_Diagram.fetchData(rpcEndpoint: string, chainId: string): Promise<string>

// example
(async function () {
    const img = new Image();
    img.src = await Simple_Net_Art_Diagram.fetchData("http://127.0.0.1:8545", "31337");
    body.appendChild(img);
})();

See the examples directory for more.

Tests

To run the tests, first start a hardhat node:

yarn hardhat node

And then in another terminal run:

yarn test

This runs both the smart contract tests and the helper lib tests.

Other formats

Find other formats of The Simple Net Art Diagram on IPFS