Learn HTML and CSS

#3

These two helped me a lot

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

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:

#5

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”

#6

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

#7

Screenshot 2022-09-28 104627
Screenshot 2022-09-28 104627767×150 17.7 KB

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

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

TT

#8

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
#9

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
#10

Screenshot 2022-09-28 110215
Screenshot 2022-09-28 110215700×134 17.6 KB

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

#11

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
#12

Obviously CSS Reference is the go to thing.

#13

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

How would one do it? What should it do?

TT

#14

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
#15

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
#16

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
#17

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

#18

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
#19

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
#20

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
#21

Josh Comeau just created an awesome interactive guide to flexbox :

3 Likes
#22

Wow, this is a really amazing tutorial for explaining the size relationships that can be setup for child elements inside Flex containers. The live examples really help to make the points.

Also, I was reminded that TiddlyWiki allows us to make this kind of live example relatively easily: it already has all the parts (live adjustments, sliders, buttons; they all can be connected to style sheets) available without having to custom-code anything beyond the Core. The pieces just need to be assembled for the purpose.

1 Like