Learn HTML and CSS

Tiddlywiki is made from HTML, CSS, and JavaScript.

You can shape it in many ways and if you know little CSS, HTML then you can have many customizations and develop new tools based on that.

Below are two short series on basics of HTML and CSS from web.dev. I think any intermediate TW user needs to know some CSS, and HTML.

The best Web-reference I know is MDN – Web technology for developers | MDN

2 Likes

These two helped me a lot

  1. HTML & CSS Courses & Tutorials | Codecademy
  2. https://cssgrid.io/

Another great post from you! It is true that to customise / develop a wiki an author does need understand quite a lot of things that TW docs themselves can’t teach you.

I’d add to your list SVG. Though often considered part of HTML it really is an image format that, to get the best from, you’ll need understand. SVG is probably the most pervasive visually important component of the TW UI.

So: HTML, CSS, SVG, JavaScript :slight_smile:

I agree with you. Looking at the MDN docs they are very well written. And there is an understanding in them of how people learn. FWIW I sometimes take their “HTML Challenge Tests”

This such a vital, simple, post I do want to comment more widely. I hope this won’t spoil your thread! :frowning:

Couple of things …

1 - Teach HTML, CSS & SVG in a TW — TW is such a brilliant “dynamic” environment I do often wonder IF someone might actually write one that teaches HTML, CSS & SVG interactively. In other words TW itself as a tool to teach Web Basics?

2 - Documentation Lookup Wiki — It should be easy to create a wiki that can pass “URL searches” to multiple online sources. For instance MDN supports URL search easily … Say I was interested in “regular expressions”, it is as simple as “https://developer.mozilla.org/en-US/search?q=regular+expressions”

You get the idea?

We create a wiki that can search for technical stuff needed?

TT

I left this till last. Mainly because I am an idiot.

I do wonder where you’d get JavaScript advice relevant to TW?

TT

I agree this is needed and we could build a short list into a menu like the sites menu at tiddlywiki.com for these references in a plugin you can install in your learning wiki.

However;
It is critical we have documentation on the nexus between each of these technologies and there use in TiddlyWiki and deal with the gaps. For example how wikitext is rendered into html and html is just displayed, however CSS applies not to separate pages but to the one and same tiddlywiki page, and to do this we need to document the classes and where they are implemented in the page structure.

Regular expressions need this as well, defining it in a variable, how to build regexp for common tiddlywiki elements, in filters and searching content etc…

1 Like

My advice, Don’t use it unless you have a compelling case and if you must try and design it so it can become part of tiddlywiki in the long run.

Why, because too many people resort to the JavaScript hammer when tiddlywiki can already achieve it, with notable exceptions.

1 Like

I do think the idea of a Learning Wiki is a very good one for those folk who want / need to develop / customise TW.

TT

I did a lot on this some years ago, clone TiddlyWIki.com and add a range of annotations tools and more. Then built my own DB.

1 Like

Obviously CSS Reference is the go to thing.

I think your idea of a “Learning Wiki” is a good one.

How would one do it? What should it do?

TT

Here are a few websites/articles/tools that I like (I might update it in the future):

CSS

Learning

Snippets

Tools

Doc

SVG

Learning

HTML

Tools

Javascript

Learning

6 Likes

Lets just get going and fill out the details as we go. See Prototype: Learn TiddlyWiki student notes edition

All the above resources could be documented in a json or plugin to include in the learn-tiddlywiki site.

  • Are there any objections to me harvesting the resources shared here?
2 Likes

I’ve noticed it hasn’t been suggested yet, but I find W3Schools to be a very good resource for various things in regards to HTML, CSS, and JS

It’s where I learned the basics while tinkering with TW

3 Likes

The reason I shared this sites is: They are simple self tutorial discuss basics.

Thank you @telumire
Some of your references are very useful from pedagogical point of view. It is funny but I visit https://cssgridgarden.com/ time by time and still never passed all the steps! :sweat_smile:

1 Like

This is it —> https://learn-tiddlywiki.tiddlyhost.com/

@TW_Tones

Right.

I do think Regular Expressions are a meat & potatoes requirement if you need interrogate one’s own wiki. It is a very interesting case in that TW natively fully supports Regular Expressions in filters.

BUT there is a double whammy to being able to fully use them in TW as:

— (First) you need understand regex (JavaScript flavour); AND

— (Second) how to cope with the “syntax conflict” that arises as TW filters require [square brackets] and often regex patterns do too.

Explaining how to pass regex patterns containing square brackets into TW filters I do think could do with a tutorial or two.

FYI, @Mohammad has done a huge amount of work on making regex more easily understood and used in TW. Both in Tiddler Commander and in Advanced Search In Fields.

Part of the issue on all this is having links to such stuff that already exist?

TT

2 Likes

CSS grid isn’t easy to master ! CSS tricks has a good guide for that: A Complete Guide to Grid | CSS-Tricks - CSS-Tricks

They even made it into a poster :

image
2 Likes