Meme Laboratory: Weaponised Memes | TBC
[[ This is a poast about building a web out of clickable pictures that link to each other ]]
Reprint of a Salo howto thread archived here: http://whigdev.com/white/index.php?threads/meme-laboratory-weaponised-memes.36/
via http://whigdev.com/forum/viewtopic.php?f=11&t=2641
and
https://salo-forum.com/index.php?thread … cript.7178 [[ broken now ]]
viewtopic.php?f=11&t=1978 | Graphics Request Thread [[ will try to restore content below ]]
viewtopic.php?f=29&t=2089 | Fun with SVG [[ will try to restore content below ]]
I’ve been playing around with using standalone SVG files as a ‘replacement’ for HTML. It’s a bit primitive, but I thought I’d share some working samples to get anyone interested started.
– I want to go back to an easier web — the web exists to fetch static files. Pulling in lots of files — 100s? 1000s? to view a single page is a non-goal.
– I’m interested in graphics, data visualisation, and memes — that is how people learn now. We still need text though. And no, I don’t want to pull in a giant library like d3 just to draw simple plot.
– You should write your own damn code anyway. Libraries are for the birds. All scientists know this. Sure, there are exceptions. No one wants to write their own OS or re-write BLAS just to multiply matrices. But those few exceptions aside, you should know and love every line of code you use.
– SVG uses XLINK for hyperlinks. I know. XML is so aughties. SVG 1.1 is the current well suported standard. SVG 2 is ‘out there’ and getting moar like HTML5 and less like XHTML. festina lente.
– We still need to embed HTML though
– SVG has a DOM but it is not *your* DOM. Getting styles to play nicely between the HTML and SVG/XML world, or between DOMs, requires a lot of namespace majick. That’s what this thread is about….
So. Working samples:
[[ code at the link ]]
Largely taken from a book on SVG, but adding in how to do hyperlinks — ‘interactivity’ and programming are not features to toss as an afterthought in Chapter 18! They are the essence of the matter.
Recovering above threads tough but here’s fresher content: http://whigdev.com/white/index.php?threads/where-are-all-the-animated-svgs.109/
Library of Babylon wins again
—–
I’ve been playing around with using standalone SVG files as a ‘replacement’ for HTML. It’s a bit primitive, but I thought I’d share some working samples to get anyone interested started.
– I want to go back to an easier web — the web exists to fetch static files. Pulling in lots of files — 100s? 1000s? to view a single page is a non-goal.
– I’m interested in graphics, data visualisation, and memes — that is how people learn now. We still need text though. And no, I don’t want to pull in a giant library like d3 just to draw simple plot.
– You should write your own damn code anyway. Libraries are for the birds. All scientists know this. Sure, there are exceptions. No one wants to write their own OS or re-write BLAS just to multiply matrices. But those few exceptions aside, you should know and love every line of code you use.
– SVG uses XLINK for hyperlinks. I know. XML is so aughties. SVG 1.1 is the current well suported standard. SVG 2 is ‘out there’ and getting moar like HTML5 and less like XHTML. festina lente.
– We still need to embed HTML though
– SVG has a DOM but it is not *your* DOM. Getting styles to play nicely between the HTML and SVG/XML world, or between DOMs, requires a lot of namespace majick. That’s what this thread is about….
So. Working samples:
Code:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="10cm" width="10cm">
<title>scripted svg</title>
<style type="text/css">
line {
stroke: purple;
}
svg {
margin: 1cm;
}
</style>
<script><![CDATA[
(function() {
var size=10;
var doc = document;
var svg = document.documentElement;
var svgNS = svg.namespaceURI;
if (!(svg.classList && svg.classList.contains("initialized")))draw();
function draw(){
var l1,l2;
for (var i=0; i<=size; i++){
l1 = doc.createElementNS(svgNS,"line");
l1.setAttribute("x1",i+"cm");
l1.setAttribute("x2",size+"cm");
l1.setAttribute("y2",i+"cm");
svg.appendChild(l1);
l2 = doc.createElementNS(svgNS,"line");
l2.setAttribute("y1",i+"cm");
l2.setAttribute("x2",i+"cm");
l2.setAttribute("y2",size+"cm");
svg.appendChild(l2);
}
if (svg.classList) svg.classList.add("initialized")
a1 = doc.createElementNS(svgNS,"a");
a1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","http://whigdev.com");
a1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:title","Assisted Thinking");
//a1.textContent="clickme";
t1 = doc.createElementNS(svgNS,"text");
t1.setAttribute("x",10);
t1.setAttribute("y",10);
t1.textContent="clickme";
a1.appendChild(t1);
svg.appendChild(a1);
}
}
)();
]]></script>
</svg>Largely taken from a book on SVG, but adding in how to do hyperlinks — ‘interactivity’ and programming are not features to toss as an afterthought in Chapter 18! They are the essence of the matter.
Let’s add some styled HTML:
Code:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="10cm" width="10cm">
<title>scripted svg</title>
<style type="text/css">
line {
stroke: purple;
}
svg {
margin: 1cm;
}
</style>
<script><![CDATA[
(function() {
var size=10;
var doc = document;
var svg = document.documentElement;
var svgNS = svg.namespaceURI;
if (!(svg.classList && svg.classList.contains("initialized")))draw();
function draw(){
var l1,l2;
for (var i=0; i<=size; i++){
l1 = doc.createElementNS(svgNS,"line");
l1.setAttribute("x1",i+"cm");
l1.setAttribute("x2",size+"cm");
l1.setAttribute("y2",i+"cm");
svg.appendChild(l1);
l2 = doc.createElementNS(svgNS,"line");
l2.setAttribute("y1",i+"cm");
l2.setAttribute("x2",i+"cm");
l2.setAttribute("y2",size+"cm");
svg.appendChild(l2);
}
if (svg.classList) svg.classList.add("initialized")
a1 = doc.createElementNS(svgNS,"a");
a1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","http://whigdev.com");
a1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:title","Assisted Thinking");
//a1.textContent="clickme";
t1 = doc.createElementNS(svgNS,"foreignObject");
t1.setAttribute("x",10);
t1.setAttribute("y",10);
i1 = doc.createElementNS("http://www.w3.org/1999/xhtml","xhtml:div");
i1.innerHTML="click <xhtml:span style=\"font-family:arial;font-weight:bold\">ME</xhtml:span>";
t1.setAttribute("width",100);
t1.setAttribute("height",100);
t1.appendChild(i1);
a1.appendChild(t1);
svg.appendChild(a1);
}
}
)();
]]></script>
</svg>The catch is you need to use a foreignObject and XML (XHTML) namespaces.
Online sample at CTRLALTRIGHT: https://s3-us-west-2.amazonaws.com/ctrlaltright/add-html.svg [[ the link in the sample does traverse but goes to a non-functioning landing page — I’ll have to fix the sample. It proves you can make a diagram (meme) with a clickable link ]]
Notice: standalone SVG with hyperlinking is *all you need to build a web* — sure, it’s static assets, but JavaScript adds all the dynamism you need.
The sample is a standalone SVG file, with HTML, JavaScript, styling, and hyperlinks, that your browser can already render. Test it on a sail phone too.
It’s just a static file you could mail to someone as an attachment — no fetches from the web unless you want, and no silliness about .mhtml files or .zip files to distribute all the pieces you need to see and interact with the page.
You can hoast SVG on an HTML page, but you will need an < OBJECT> tag if it has interactive bits like JavaScript. Obviously, an IMG tag that had JavaScript would be a huge hole in the security model.
Part of Compartment on webdesign, kb:/STOOD. – graphics, dataviz, web typography, mathjax, LaTeX, unicode representation and encodings, SGML/HTML/XML processing [[ irrelevant comment about indexing and archiving this material ]]
Code:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="10cm" width="10cm">
<title>scripted svg</title>
<style type="text/css">
line {
stroke: purple;
}
svg {
margin: 1cm;
}
</style>
<script><![CDATA[
(function() {
var size=10;
var doc = document;
var svg = document.documentElement;
var svgNS = svg.namespaceURI;
if (!(svg.classList && svg.classList.contains("initialized")))draw();
function draw(){
var l1,l2;
for (var i=0; i<=size; i++){
l1 = doc.createElementNS(svgNS,"line");
l1.setAttribute("x1",i+"cm");
l1.setAttribute("x2",size+"cm");
l1.setAttribute("y2",i+"cm");
svg.appendChild(l1);
l2 = doc.createElementNS(svgNS,"line");
l2.setAttribute("y1",i+"cm");
l2.setAttribute("x2",i+"cm");
l2.setAttribute("y2",size+"cm");
svg.appendChild(l2);
}
if (svg.classList) svg.classList.add("initialized")
a1 = doc.createElementNS(svgNS,"a");
a1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","http://whigdev.com");
a1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:title","Assisted Thinking");
//a1.textContent="clickme";
t1 = doc.createElementNS(svgNS,"text");
t1.setAttribute("x",10);
t1.setAttribute("y",10);
t1.textContent="clickme";
a1.appendChild(t1);
svg.appendChild(a1);
}
}
)();
]]></script>
</svg>Wireframe tools: https://uxmovement.com/wireframes/3-best-vector-wireframing-tools-for-designers/
https://gomockingbird.com/home
https://wireframe.cc/ <- this one uses SVG and exposes it, so you don’t need to sign up. 😉
The ‘compleat designer’ tools at the link are all MacOS centric. I respect the design that went into the Mac and its eco-system, but dayum they’re expensive. Maybe one day I’ll own one to play with.
—–
glTF 2.0 models
https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html
Utility for converting models: http://52.4.31.236/convertmodel.html [[ broken link ]]
—–
SVG and compound documents: http://www.comfsm.fm/~dleeling/cis/compound_dtd.xhtml
I’m just going to leave these here:
Think… WEAPONIZED RARE PEPES as NFTs
Think, Fediverse Image Boards.
Solidity TutorialâââHow to Store NFT Metadata and SVGâs on the Blockchain
Recently I took a deep dive into the Crypto World. Especially on DeFi and Smart Contracts. So I did what probably every other developer…
andyhartnett.medium.com
jsld.org
How JSON-LD & Semantically Unambiguous Big Data power Industry Interoperability
jsld.org
Meme Laboratory: Weaponised Memes
[[ This is a poast about building a web out of clickable pictures that link to each other ]] Reprint of a Salo howto thread archived here: http://whigdev.com/white/index.php?threads/meme-laboratory-weaponised-memes.36/ via http://whigdev.com/forum/viewtopic.php?f=11&t=2641 and…
tunisbayclub.com
Icons attributed to St. Luke
Sacred Tradition holds that the icons known as Eleusa “Virgin of Tenderness” and Hodigitra “She who Shows the Way” are patterned after icons…
Also, take a gander at ‘Linked Open Data’ as pointed to by the Wikipedia article https://en.wikipedia.org/wiki/Linked_data
https://lod-cloud.net/
Xenforo won’t let me attach an SVG (too dangerous I guess and probably a wise precaution given the contents of this thread — but I’ll bet Ethereum lets me link it 😉 ) so you will need the link…
https://upload.wikimedia.org/wikipe…the_Linked_Open_Data_cloud_2020-08-20.svg.png
The thing to particularly note, is that the Biological sciences have taken over ‘Linked Data’ with a bit of help from Linguists and Military Logicians using ‘Sentient World Semantics’ for their models.
You think AIs are scary? Be VERY AFRAID of Monkeys too.
Ambrosius Macrobius on Gab: ‘So… you want to make 20 Million USD selling jpeg…’
Leave a Reply