Itty.bitty - a cousin to the tiddler?

[Mat]

@dubiousscript just shared something over at gh:

Itty.bitty

...or try it here

...and find it on gh here

Come ON! Is this a cousin to the tiddler?! I'm in love at first glance but I'm not sure what to do with it!

Could we convert tiddlers to itty.bittys? If one wants to share a tiddler, instead of export+email a file, you just share a link. One itty.bitty can contain surprisingly much.

If I understand it right (under "Display" here), one is dependent to have the itty.bitty site do the conversion from the fragment to the text but the itty.bitty site does it on ones device (...!?)

Could TW "integrate" this? What would that even mean? Is this a way to distribute tiddlers without a server? Does it even make sense?

<:-)

[TonyM]

Mat,

This is a quite interesting idea. I am yet to fully understand the implications and functionality especially as it relates to tiddlywiki but its worth investigating.

It also made me think when it comes to desirable features in tiddlywiki we do need to look further afield as tiddlywiki can make use of the standard internet technologies well. It makes sense not to reinvent the wheel. 

The work that needs to be done, with such solutions is providing a mapping with tiddlywiki object such being able to package a tiddler as a link. 

• I wonder if we provided an edit tiddler option on a read only wiki that someone could provide documentation updates then they share the change as a link, then the link used to update the master wiki. 
• There are many ways to share links using many different solutions especially on mobile devices, so to enable tiddlers to be share this way could be very helpful
• Perhaps static tiddlers generated by node server could be packages as itty.bitty links.
• Perhaps ittybitty links could be parsed into tiddlers 

Thanks for sharing

Regards

Tony

[TonyM]

Mat,

In a similar vein when this kind of sharing matures we can leverage these instead https://css-tricks.com/how-to-use-the-web-share-api/ and along with the fall back options perhaps someone can make a tiddlywiki widget for this?

Similar to copy to clipboard of the permalink as a sharing mechanism, perhaps we could copy to clipboard an ittybity link (With content). 

Actually we could make our own link structure which contains a tiddlers content in it, as long as once pasted back into tiddlywiki the import mechanisium can recognise and deconstruct the tiddler. So that in any wiki on any tiddler click a button, then on any wiki ctrl-v and import and it rebuilds the source tiddler.

Regards

Tony

[HansWobbe]

@Mat:

Well, I can certainly say that it worked, as promised, "right out of the box".

And, having spent less than 10 minutes with it so far, I think I have a few uses for it.

It's quite intriguing.

Thanks for sharing!

Regards,

Hans

On Sunday, September 22, 2019 at 1:46:06 PM UTC-4, Mat wrote:

@dubiousscript just shared something over at gh:

Itty.bitty

...or try it here

...and find it on gh here

^

[@TiddlyTweeter]

Can't WE do this too?

TT

[Ste Wilson]

Hans,
Did you come up with anything interesting for this?

Tt,
Good question.
I guess we can't.. Even though we can isolate one tiddler it still comes as a file...tid/ Json etc. so then i guess the question becomes one of ease of sharing. link or e-mail attachment. Would an export to itty bitty option be useful?

TiddlyWiki the bitty edition?

[TonyM]

Ste,

I imagine the algorithm for Ittybitty could be represented in TiddlyWiki, both encode and decode but I am curious how this can be put to use?

[[Test|https://itty.bitty.site/#/?XQAAAAI4AAAAAAAAAAAmGUqHVd09ZfxC16xLzC16aGEjdkZ7N++qsaejZeOh+pjIxMWiWgrUhIMz6VWHybyHUyNYIGvB///p02AA]]

works on tiddlywiki.com

If we could control the generation of itty.bitty links within tiddlywiki we could generate links to display tiddlers and other objects but I am not sure how this would be better than other methods;

Of interest is using an iframe to display the result;

<iframe src='https://itty.bitty.site/#Select_Widget/data:text/html;charset=utf-8;bxze64,XQAAAAK9BwAAAAAAAAAeGQknlxgotNrv5AVychDX/elo/0yzgubO5riI5EUbhE8XPW8OmR0zol+pD56bhgxIZYYIq89/S/gtytSZbupFbM19Dy4dnXAWyPYvqpybm6OyqsrogNg+hd8hODZOjJvNoBZMzejwV8UsavGNlJmMRowg93UXAAZTZ3VuRFs78x6PLJcLIGX3++cDyoGM+aMNG78Fg7RCY5yaIWh3PZAzbd3r3zgm+okl6PcEiDWgZlcKQnbLTwjKIjFEsopk+tVY7QolXsVHMoeaabQUxIaJqlS7Vg0WqesTDxJlBFagF2IRt6/To+dsLO0qYWkSr5NvIv5m5B0GwijjQN0j6OFtNbVIr+ypfaWe7//jKyTMWyAGdPBoU8JiLly0uazir+xofO7h7MxBkbEEn0MKh1CiLi8xqt89vYQLqTchan3tMCJugqLsBiiGZbMSDV7hEqFenR2c12lOMC5RBGzFee54Zej0rR3ZYufosm/pddnOur5yahdqi4HhR5Q2OjzJ/ObGhd6+28KnsDsknoMHwIRIILdzSs13/ep6Ly2LW6wcp62ywrLLapgZAzlEP5ys6si0vIBw5/CdiP9JYjqIWjv9FVd2Kkz7Lqt2ktbakgYBs3lsQoV/NpEjFOLPJLtfuVtVqirKlWzLuO69K5szyQBo+4wz+iDD7wBtV9Kvw6f/PXn3sDV25sRijB+URkt7kwJ9gepAgfMRdFMSw3frNYcqpHPqQxL1445+nw54M5BxbCXXXbZ5pjtNjIEmP/CzLc4I66kbmxxg93MGQ8bxepOCXZj/RsNtdcI6LYJRSsNXfESRY223LgDBttu04wj18sB5BGoyW5okSpJ8+8dgYjxvBaIHPa1xdFrcgvuxWoDHFfytJI8tus4P92heQXFWlzuI4+8HJD9PpHHwP8q4+ZoiaSV4v6svHvOtQfRqmjUrQ/gu8RGwqdNbeVUfdFpg4uWXiqqo9rQb8xFaceVJxXYX/flEYMotjTqY3MPd5Z0NrVYEqgA2+1Rn2jydk9atNB90hVbZmK8/sN8FIc5NM9bXfGkRjajNnSJTBnHOcOhQieab58eL76a+O7any2wNxrGKnUcURQJSsWzPi4U9T7BPDfFFTa0T2CWsexDwhleU+Wy++YGjgoyfomwPN0k0TKaKym4zKPPuOV0EI0xcVQZcQKZK5JrgIzT2/5IXQgNE7ey32huclh+wriKpDSZDlFLw//kEWs4=' frameborder="0" width="1024"; height="600"></iframe>

Or using it as a QR Code generator

Regards

Tony

[Ste Wilson]

But we already have a we code generator!

[Ste Wilson]

Qr code*

[PMario]

Hi Mat,

I had a closer look at the implementation and it seems to be simple to implement into TW. Both the encoder and the decoder. There are some lzma libraries at github, which could be used. Minified code size may be about 50kByte ... BUT

There are 2 concerns.

1) Security. See the last note here.

    With TW we will need to implement an HTML sanitizer, otherwise it would be a nightmare. Which will increase the library size.

2) I don't see a real usecase, other than smaller QRs with more content.

I personally would encode the tiddler text and not the rendered tiddler.

just some thoughts

mario

[TiddlyTweeter]

Ciao Mat & PMario

PMario wrote...

2) I don't see a real usecase ...

Neither do I.

The thing works via an online service in the default.

It is a nice thing ...

BUT ... "What has TW got to do with it?"

What would be the benefit?

TT 

[TonyM]

Mario

Thanks for considering that. In a similar way I see more value in a tool to use a filter to package tiddlers in a bookmarklet. Jeremy provided the wiki text recently to me. One drags the bookmarklet to the browser bookmarks and with a click it silently imports the tiddlers in the bookmarklet.

This has been a boon to me because I now have a quick config bookmarklet that makes changes to any tiddlywiki according to my preferences. I even have a reversal bookmarklet. Just one click is beautiful.

I remember you and I exploring methods to do bulk tiddler config with a click. I wonder if there is a way to action a bookmarklet directly from tiddlywiki?

As far as I can see bookmarklets, rather than itty.bitty can achieve more.

Tony

[TonyM]

Now I am going to immediately put an argument opposite to my last.

Can itty.bitty built into tiddlywiki be used to take and preserve a snapshot of a rendered tiddler?

it would compress the result and allow review in a new tab or iframe. It could also generate static html pages where we can use the browser save as to save the result to file or even inside a tiddler using view source.

Regards
Tony

[PMario]

On Thursday, December 12, 2019 at 10:24:35 PM UTC+1, TonyM wrote:

...

Can itty.bitty built into tiddlywiki be used to take and preserve a snapshot of a rendered tiddler?

It depends, what you mean with "snapshot". For me a snapshot also contains CSS settings. So if you want to preserve a "pixel perfect" representation of a tiddler you better go with a screenshot.

The second possibility would be a "static tiddler" eg: https://tiddlywiki.com/static/TiddlyWiki.html

If you view it's source: view-source:https://tiddlywiki.com/static/TiddlyWiki.html you'll see, that the CSS is dynamically "linked" in line 13.

Since it contains everything it is about 60kByte in size.

So if I would want to preserve a snapshot of this combination I'd use git, because it is designed to deal with multi-file diffs.

 

it would compress the result and allow review in a new tab or iframe. It could also generate static html pages where we can use the browser save as to save the result to file or even inside a tiddler using view source.

I think a snapshot is only interesting, if you can compare it with a previous version of the same thing. So you can see the differences. I'm only interested in the differences, so there is no need to store the whole thing 2 times. IMO it's much more efficient to only store the differences.

... TW already contains a diff-match-patch tool, that allows us to annotate differences between 2 tiddlers. I'd use this tool, or the underling libs, which is already part of the core.

just some thoughts

mario

[TiddlyTweeter]

TonyM wrote:

Can itty.bitty built into tiddlywiki be used to take and preserve a snapshot of a rendered tiddler?

No. Not in the sense it could locate all styling. 

Since you can already do a "snapshot" by simply copying the render level HTML in TW I'm struggling to know what is the added value.

it would compress the result and allow review in a new tab or iframe. It could also generate static html pages where we can use the browser save as to save the result to file or even inside a tiddler using view source.

It has to be situated somewhere! Right?

What I am having trouble seeing is WHAT is the added value.

Please tell me the advantages and I might rethink!

Best wishes

TT

[TiddlyTweeter]

Mat wrote:

Come ON! Is this a cousin to the tiddler?!

Cousins?

Beware of inbreeding :-) 

 

I'm in love at first glance but I'm not sure what to do with it!

Let us not be forced to analyse that too closely :-)

TT 

[TonyM]

Mario,

I am not sure itty.bitty is a full snapshot answer. but snapshots are needed

I think snapshots with or without multiple versions can be used for the following 

1. Effectively displaying a static tiddler result for complex or long tiddlers so it need not be re rendered on the slightest change. Primarily for performance
1. eg Index to a large data set
2. Optional refresh like option 1 but (snapshot remains the same until intentionally refreshed) could be used for publishing something "as at a time or date".

• I agree CSS can add some complexity however standard css is honoured in many cases, a method for users of more advanced css need to be provided the methods.
• Also whilst versioning is desirable I think it is still valuable without, and if versioning were available some circumstances would demand the number of versions be limited.

Regards

Tony

[TonyM]

TT

See my response to Mario.

I am responding to snapshots, not necessarily with itty.bitty. 

Please  share your method to "copying the render level HTML in TW" and why should it not be simplified?

Regards

Tony

[TiddlyTweeter]

TonyM wrote:

... snapshots are needed

(Rendered HTML) snapshots are remarkably easy in TW. And flexible too.

I think the underlying issue are (a) documentation; (b) some recipes about how to do them for different objectives. 

For instance this GG post was written directly in TW & posted to GG. It renders much the same in GG as it does in the wiki it comes from.

Because of the way that posts & emails work it needed posting via an added tool to make the CSS inline.

The result was easily achieved.

I'm happy to write more about all this if there is interest.

Best wishes

TT

[TiddlyTweeter]

TonyM

Part of the issue is "how much render do you need"?

In TW we can access the HTML render of a tiddler, a group of tiddlers, or the whole tamale quite easily.

The issues relate mostly to what is "inline" and what isn't for specific output types. 

Some outputs (email, GG posts) need inline CSS rather than simple stylesheet inclusion.

Transcluding a few tiddlers and then getting the render is often enough. 

IF you need images then they need to be invoked as inline data.

Best wishes

TT

[Mark S.]

Hi TT,

How did you capture the CSS, and how did you inline it ?

Thanks!

[TiddlyTweeter]

Ciao Mark

How did you capture the CSS, and how did you inline it ?

The CSS is not extracted. Its simply a TW stylesheet tiddler with a few rules to format the Tiddler & this GG post so they look the same.

I use the browser extension "Markdown Here" that, despite its name, will take raw HTML. It, on-the-fly, inlines one's CSS that you paste into its config.

I do have, I guess, some implicit knowledge about what can and can't be inlined in email/posts having used tools like MailChimp before.

But it was super easy to do it the way I did. And a satisfying experience to see an email & post on desktop & mobile that actually looks like what I intended.

Best wishes

TT

[TiddlyTweeter]

PMario wrote:

It depends, what you mean with "snapshot". For me a snapshot also contains CSS settings. So if you want to preserve a "pixel perfect" representation of a tiddler you better go with a screenshot. 

Absolutely right. But "snapshot" IS useful in that you can retain basic stuff like links. 

The problem with screenshots is they are dead, they don't retain any dynamism. 

I really like the FF extension  "Single File". It can take an HTML/CSS snapshot of TW (Just Tiddlers that are open) as a single webpage and retain its links but discard everything else. Comes in at under a Mb per shot.

TBH the ability to do this is universal but likely under-used and under-documented.

Best wishes

TT

[Ste Wilson]

Does/Could/should it not occupy a similar space to the qrcode.. Press the hypothetical button to create a link for.. Much like the qrcode button does right now?
I once tried to share a tiddlywiki as an html file via email as a thing to be read by someone else and they said they didn't know how to open it... A link would perhaps not of encountered that kind of non it person block?

[TiddlyTweeter]

Ciao Steve

You can include IN email TW HTML quite easily. At the moment on the pre-release version, in editor, includes a "Raw HTML" preview. You just copy the code from that.

To make is sweetly neat you need a browser add in like "https://markdown-here.com/" that will convert a css styleset to be inline. Email can only use "inline" CSS.

A comment

Best wishes, TT

[TiddlyTweeter]

It is an interesting issue. 

What one wants is the "easiest route". Give me A BUTTON, always.

The itty.bitty thing goes through a server. It is a recomposition to HTML of a decomposition and concatenation of bits. 

Basically it is a compacted page of all elements present in render.

I am SURE we can do that.

Best wishes

TT

On Sunday, 15 December 2019 20:36:41 UTC+1, Ste Wilson wrote: