September challenge: Share your key takeaways and learning objectives

Q & A - getting started with Tinderbox
1

@TomD summarized a key takeaway from the TBX Lesson: Tinderbox Meetup 28AUG22 - An End-to-End Overview of Contribution. Thanks, @TomD

Key takeaways

Tinderbox meets you where you are and pulls you into the present and beyond.

For many, investing time in learning Tinderbox feels like an expense–they are losing something, and it costs them something (time, money, ego, fear, pain)–rather than seeing it as an investment–the foundation for future, in some cases exponential, gains (time, money, skills, community, making a difference,…). The time I’ve put into Tinderbox is most certainly the latter.

When using Tinderbox, you are also learning the fundamentals of knowledge management and computing. You are learning:

  • Languages of computing and the Internet: HTML, CSS, markdown, command line, regex, JSON, Perl-like frameworks
  • Gaining knowledge of and the opportunity to explore complimentary tools and processes: BBEdit, Zotero, Devonthink, Pandoc, exciting, text expanding, search, image management, writing
  • Mental models: logic, design, structure, appearance, organization, metacognition, atomization, premature formalization, incremental formalization, vulnerability, context, history, problem-solving, inheritance; consistency, precision, storytelling, instruction, asset development, pattern matching; quite possibly the most critical learning,
  • Community: communication, socialization, the kindness of strangers (who quickly become friends, if you’re open to it).

Frankly, the learning opportunities are endless.

Your September Challenge

Please, hit reply and share:

  1. Your critical takeaways from using Tinderbox and participating in this community?
  2. What do you want to learn to do or achieve with Tinderbox (@TomD suggests the tactics for knowledge discovery: “How do you find the nuggets in your file? The Attribute Browser?, Queries?, Using NLTags, Optimizing views, Pulling your discoveries out of attributes.”

Bonus Points: Using a template, create a table from the value in your attributes
3. Create a TBX file with the following and upload it to this thread with an explanation of your approach.
a. three notes:
- September 2022 Challenge
- My Critical Takeaways (should be a child of September Challenge)
- What I Want to Learn (should be a child of September Challenge)
b. populate $MySet for each child note with your list of takeaways and areas of exploration
c. Create the templates necessary to, when applied to September Challenge, a table will appear in preview.
3. Include a note with your name and forum handle, add a bio about yourself (interests, etc.), this way we can keep track of who submitted what.
4. Include your forum handle in the file name, e.g. Satikusala_Spet 2022 Challenge.tbx`

image
image993×573 114 KB

Note: I will post my example once the community has had a chance to post theirs

1 Like
2

September Challenge.tbx (145.7 KB)

I’ve used CSS to style the output of the September Challenge note - I’m not sure whether once downloaded you have to export the files on your local system to see the full effect - I’ve used a stamp to populate the $MySet attributes of the children from the content of $Text using $MySet=$Text.paragraphList; - interestingly the order within the set is different to the order of the paragraphs as you will see from looking at the original $Text and its associated output - Many thanks for the meetup videos - hope to be there one day!

1 Like
3

This is awesome, thanks. I’ve noted your learning goals and will work these into future sessions. BTW, I could not get your table to render, I got this.

image
image1189×817 249 KB

However, when I explored, as you suggest it is beautiful!

image
image1151×659 96.4 KB

Thanks for playing along. I love seeing your approach!

Set Order

BTW, Tinderbox re-order automatically reorders items in a set alphabetically. If you don’t want this to happen you use lists, but lists don’t de-dup.

Question

Your CSS is cool. Can you provide some explanation?

4

22-blog-09-092250-image
22-blog-09-092250-image1920×1229 143 KB

That’s what the CSS/HTML should render …

I appreciate that it is best to consider the preview pane as NOT a browser ( and indeed support for all elements of CSS varies across browsers ) - However even with that caveat after going through the publishing cycle ( ie export your notes as html ) the preview pane often replicates the browser view responsive as well - I’ll post separately later about the css file ( css/simple.css) as its a snippet of one I use where colours and other variables are set using custom variables after a general reset process

2 Likes
5

The CSS code passes CSS validation having fixed one Tinderbox-generated error. This arises from pasting into a note that allows ‘smart quotes’. In the downloaded TBX, the closing quote of the URL on line #1 of the CSS is a smart-quote and thus not valid (as it occurs at the end of the link likely this is a benign error.

Tip: for code-containing notes like CSS, add the Code prototype and apply it. Then use paste-and=match-style if pasting content rather than typing it. One prototype customisation to change either in the Code prototype itself or in notes using it is to ensure the note are set to export (use the Export Inspector or ensure $HTMLDontExport is set to false).

Amen, but I can confirm that once exported to disk the table renders beautifully. :slight_smile:

1 Like
6

As a promised follow-up to the CSS recently posted within the September challenge tbx, I thought I would point those interested to a few web resources that have helped me with my particular workflow ( which supports me in providing some amateur pro-bono work for a local charity running their website)

W3 Schools is a great place to start if you are very new to HTML/CSS

There are some excellent editors out there and BBEdit has been featured recently in the meetups but VSCode is the place where I write all my HTML and CSS and Javascript - the extensions available within the product really assist in writing fast clean well-structured code that is easily commented

That said Tinderbox’s export to HTML is fantastic and I will often export from TBX and then open the output in VSCode for final tweaking and CSS Checking

I publish my final HTML/CSS site to my github account - If you haven’t discovered GitHub

https://github.com/ Set up Git - GitHub Docs

then I’d highly recommend doing so - a little learning curve but the rewards are enormous in terms of keeping track of versioned documents, sharing, collaborating and learning from others

Saving from VSCode to your Github account will automatically trigger publication in a linked Netlify account where you can host your output for free (and even choose a domain name for free or publish to one you already own)

A few years ago I discovered Eleventy - a static site generator which despite stiff competition remains the best imo. Its handling of markdown files and automation of site building ( which can all be done within VSCode and published as above) makes for a powerful companion to TBX for anyone wishing to use TBX for blogging. Here is a (slightly out of date) guide from Andy Bell to learning how to use eleventy.

Kevin Powell’s Courses/YouTube/Twitch/Discord channels have taught me a lot about CSS. Some off his css resources here

Many of the early examples proffered when learning CSS focus on simple aspects like changing colours of fonts, or sizes of text etc… - unfortunately this is really the wrong way round and it is easy to get into a messy soup of code and wonder why this heading doesn’t fit under this image and why that text is flowing outside of this box etc…

I can’t therefore highly recommend enough the work of Andy Bell et al on EveryLayout which takes a more holistic view of what you are trying to achieve with the layout before diving into micro-changes of elements

He also has some very interesting things to say about how how to organise your thinking when it comes to employing css to display your content which I think will resonate with the ethos of ‘meetup-tinderboxers’ especially in the area of semantics and what conventions to choose for naming files/variables and so on which have recently been discussed

Finally, if you want to see how your HTML output/site looks on multiple devices then check out this site

And for reducing the size of your images this site is amazing as is this site for conversions of your CSV/JSON and other data types

Best Wishes

MOC

1 Like
7

As we’re a mixed-tech-skills community here, I’d note that Eleventy requires command line install of node.js which in turn requires further command line tool homebrew. Not complex but a fair amount of magic under-the-hood work before you get to the start line. :slight_smile: