*1. Why use Json in TiddlyWiki by standard?*
1. "JSON (JavaScript Object Notation) is a lightweight data-interchange
format. It is easy for humans to read and write. It is easy for machines to
parse and generate. It is based on a subset of the JavaScript Programming
Language Standard ECMA-262 3rd Edition - December 1999. JSON is a text
format that is completely language independent but uses conventions that
are familiar to programmers of the C-family of languages, including C, C++,
C#, Java, JavaScript, Perl, Python, and many others. These properties make
JSON an ideal data-interchange language."
2. "JSON is a widely used format that allows for semi-structured data,
because it does not require a schema. This offers you added flexibility to
store and query data that doesn't always adhere to fixed schemas and data
types.
3. "Json, XML, other markup languages (markdown, wikitext, commonmark,
html etc), email and EDI are all forms of semi-structured data." *But...
"for embedded Markup" is good if it has Json for standard in *
*TiddlyWiki*
4. "Json is non-linear, tiddlyWiki" too.
*2. Concept*
```json
{
"app": {
"config": "./settings.json",
"cwd": "./",
"src": "example/content/",
"filePattern": "**/*.md",
"dist": "example/output.json",
"name": "markdown-json",
"version": "0.0.1"
},
"data": [
{
"section": "Elements",
"title": "buttons",
"device": [
"desktop",
"mobile"
],
"styles": [
"https://lalao.com/styles/structure.min.css";,
"https://lalao.com/styles/app.min.css";
],
"contents": "<p>Follow some application examples of buttons</p>\n<h1
id=\"types\">Types</h1>\n<h3 id=\"base\">Base</h3>\n<p>Base button layout
sample:</p>\n<button type=\"button\" class=\"buy-button btn
btn-success\">\n <span class=\"icon\"></span>\n <span
class=\"text\">Button</span>\n</button>\n\n<pre><code
class=\"lang-scss\">.btn-primary {\n @include states(#1A75CE,
#086B9C);\n}\n</code></pre>\n<pre><code class=\"lang-html\"><button
type="button" class="buy-button btn btn-success">\n
<span class="icon"></span>\n <span
class="text">Button</span>\n</button>\n</code></pre>\n",
"excerpt": "<p>Follow some application examples of buttons</p>",
"id": "buttons",
"meta": {
"relativePath": "content/buttons.html",
"createdAt": "2020-10-08T16:05:30.415Z",
"lastModified": "2020-10-08T16:05:14.452Z",
"size": 2095,
"formattedSize": "2.0 KB"
}
},
{
"section": "Elements",
"title": "icons",
"tags": [
"icons",
"base"
],
"contents": "<h1 id=\"icons\">Icons</h1>\n<p>Our icons list still is
empty :(</p>\n",
"excerpt": "<p>Our icons list still is empty :(</p>",
"id": "icons",
"meta": {
"relativePath": "content/globals/js-utils.html",
"createdAt": "2019-08-27T18:01:33.747Z",
"lastModified": "2019-08-27T18:01:33.747Z",
"size": 331,
"formattedSize": "331 Bytes"
}
}
]
}
```
*3. References*
1. https://www.w3schools.com/whatis/whatis_json.asp
2. https://en.wikipedia.org/wiki/JSON
3. https://www.json.org/json-en.html
4. https://en.wikipedia.org/wiki/Semi-structured_data
5. https://en.wikipedia.org/wiki/Unstructured_data
6. https://www.integrate.io/glossary/what-is-unstructured-data/
7. https://www.xml.com/pub/a/w3j/s3.nelson.html
8. https://www.xml.com/pub/a/2004/10/06/deviant.html
9. http://essaysfromexodus.scripting.com/tedNelsonWebHypertext
10.
https://cloud.google.com/blog/products/data-analytics/bigquery-now-natively-supports-semi-structured-data
11. https://wikilabs.github.io/
12. https://www.vertopal.com/en/convert/markdown-to-json
13. https://www.npmjs.com/package/markdown-json
14. https://www.integrate.io/glossary/what-is-unstructured-data/
On Thursday, August 4, 2022 at 5:12:36 AM UTC-3 Eduardo Caio João wrote:
> Hi all!
>
> *1. Question*
> 1. Would it be possible to have a better abstraction in the custom markup?
> So that we could separate the logical layer from the application, the
> interface/interaction layer from the data layer?
>
> - An example of the application logic layer: includes keywords like
> 'if', 'else', 'for', 'while', 'true', 'false', 'ListView etc'
> - An example of the interface/interaction layer: include keywords like
> '!!! to h3' or 'h3' or '#### h3' etc
> - An example each data layer: includes only plain text
>
>
> *2. An example for each usage here*
>
> *1. application logic layer: *
> ```json
> {
> "time" : 1659600652950,
> "blocks" : [
> {
> "id" : "QG7d-eoSuo",
> "type" : "header",
> "data" : {
> "text" : "Editor.js",
> "level" : 2
> }
> },
> {
> "id" : "kVwdXj215H",
> "type" : "paragraph",
> "data" : {
> "text" : "Hey. Meet the new Editor. On this page you can
> see it in action — try to edit this text."
> }
> },
> {
> "id" : "H-e1YiUKlN",
> "type" : "header",
> "data" : {
> "text" : "Key features",
> "level" : 3
> }
> },
> {
> "id" : "T3ln9Hapf5",
> "type" : "list",
> "data" : {
> "style" : "unordered",
> "items" : [
> "It is a block-styled editor",
> "It returns clean data output in JSON",
> "Designed to be extendable and pluggable with a simple
> API"
> ]
> }
> },
> {
> "id" : "KREAmAR5pB",
> "type" : "header",
> "data" : {
> "text" : "What does it mean «block-styled editor»",
> "level" : 3
> }
> },
> {
> "id" : "YOC9ONSAyk",
> "type" : "paragraph",
> "data" : {
> "text" : "Workspace in classic editors is made of a single
> contenteditable element, used to create different HTML markups. Editor.js
> <mark class=\"cdx-marker\">workspace consists of separate Blocks:
> paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an
> independent contenteditable element (or more complex structure) provided by
> Plugin and united by Editor's Core."
> }
> },
> {
> "id" : "1vu_B7xnOz",
> "type" : "paragraph",
> "data" : {
> "text" : "There are dozens of <a href=\"
> https://github.com/editor-js\";>ready-to-use Blocks</a> and the <a href=\"
> https://editorjs.io/creating-a-block-tool\";>simple API</a> for creation
> any Block you need. For example, you can implement Blocks for Tweets,
> Instagram posts, surveys and polls, CTA-buttons and even games."
> }
> },
> {
> "id" : "QnnsDw4lDQ",
> "type" : "header",
> "data" : {
> "text" : "What does it mean clean data output",
> "level" : 3
> }
> },
> {
> "id" : "Bz-zR4AT9U",
> "type" : "paragraph",
> "data" : {
> "text" : "Classic WYSIWYG-editors produce raw HTML-markup
> with both content data and content appearance. On the contrary, Editor.js
> outputs JSON object with data of each Block. You can see an example below"
> }
> },
> {
> "id" : "rnI2GILJ4v",
> "type" : "paragraph",
> "data" : {
> "text" : "Given data can be used as you want: render with
> HTML for <code class=\"inline-code\">Web clients</code>, render natively
> for <code class=\"inline-code\">mobile apps</code>, create markup for <code
> class=\"inline-code\">Facebook Instant Articles</code> or <code
> class=\"inline-code\">Google AMP</code>, generate an <code
> class=\"inline-code\">audio version</code> and so on."
> }
> },
> {
> "id" : "VXEb5d5CLm",
> "type" : "paragraph",
> "data" : {
> "text" : "Clean data is useful to sanitize, validate and
> process on the backend."
> }
> },
> {
> "id" : "u6VJxBO9HW",
> "type" : "delimiter",
> "data" : {}
> },
> {
> "id" : "MpYqDoF6XM",
> "type" : "paragraph",
> "data" : {
> "text" : "We have been working on this project more than
> three years. Several large media projects help us to test and debug the
> Editor, to make it's core more stable. At the same time we significantly
> improved the API. Now, it can be used to create any plugin for any task.
> Hope you enjoy. 😏"
> }
> },
> {
> "id" : "ygqt5IYr9S",
> "type" : "image",
> "data" : {
> "file" : {
> "url" : "
> https://codex.so/public/app/img/external/codex2x.png";
> },
> "caption" : "",
> "withBorder" : false,
> "stretched" : false,
> "withBackground" : false
> }
> }
> ],
> "version" : "2.24.3"
> }
> ```
>
> or
>
> *2. interface/interaction layer: *
> ```json
> { // UISchema
> "firstName": {
> "ui:autofocus": true,
> "ui:emptyValue": "",
> "ui:autocomplete": "family-name"
> },
> "lastName": {
> "ui:emptyValue": "",
> "ui:autocomplete": "given-name"
> },
> "age": {
> "ui:widget": "updown",
> "ui:title": "Age of person",
> "ui:description": "(earthian year)"
> },
> "bio": {
> "ui:widget": "textarea"
> },
> "password": {
> "ui:widget": "password",
> "ui:help": "Hint: Make it strong!"
> },
> "date": {
> "ui:widget": "alt-datetime"
> },
> "telephone": {
> "ui:options": {
> "inputType": "tel"
> }
> }
> }
> ```
>
> or
>
> *3. data layer:*
> ```json
> { // JSONSchema, data layer
> "title": "A registration form",
> "description": "A simple form example.",
> "type": "object",
> "required": [
> "firstName",
> "lastName"
> ],
> "properties": {
> "firstName": {
> "type": "string",
> "title": "First name",
> "default": "Chuck"
> },
> "lastName": {
> "type": "string",
> "title": "Last name"
> },
> "telephone": {
> "type": "string",
> "title": "Telephone",
> "minLength": 10
> }
> }
> }
> ```
>
> *3. References*
>
> 1. https://github.com/rjsf-team/react-jsonschema-form
> 2. https://github.com/Jermolene/TiddlyWiki5/discussions
> 3. https://wikilabs.github.io/
> 4. https://editorjs.io/getting-started
>
> On Wednesday, September 16, 2020 at 7:52:12 AM UTC-3 PMario wrote:
>
>> On Wednesday, September 16, 2020 at 12:35:29 PM UTC+2, TonyM wrote:
>>>
>>> Marion,
>>>
>>
>> I'm from Mars ♂️ ;)
>>
>> Clean up notes;
>>>
>>>>
>>>> - I love the - All button, cool. Refresh or reverse using these
>>>> tools1
>>>>
>>>> I don't understand the above sentence.
>>>>
>>>
>>> The All button allows remove all ID's including attached classes etc..
>>> this is;
>>>
>>> - Cool
>>> - Useful
>>> - Great
>>>
>>>
>> Ah .. .OK. Yea I didn't want to have so many "minus" buttons. So I
>> decided to go with one.
>>
>> But I need to make the "toggle" button image adjustable. May be I can add
>> a tooltip with the current setting to get better feedback.
>>
>> We should continue discussion at: Custom markup (continued 2)
>> <https://groups.google.com/forum/#!topic/tiddlywikidev/sCMOjYxMk2Q>
>> -m
>>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywikidev+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/261ec76c-d736-4402-baf1-4f89307d42d8n%40googlegroups.com.
![https://codex.so/public/app/img/external/codex2x.png"](https://codex.so/public/app/img/external/codex2x.png"){kind=link}