2023-12-30 Building Slides From Obsidian Notes

I’ve spent much of the day learning how to create slides in Obsidian, using an amazing plug-in called Advanced Slides that I linked to [[2023-12-26 Links#^b75353 | a few days ago]]. I’ve been reading documentation, and trying things out.

I took a YouTube video from Duarte about presentation mindsets and turned them into a basic set of slides. I then took a blog post from Leo Babauta about mindset changes, and turned that into a more interesting/advanced set of slides, including speaker notes, background images that are hyperlinks from Unsplash (what happens when I don’t have an internet connection? 🤔).

Creating Layouts using <grid> or <split> features is the bee’s knees. There’s a lot more to go before I can be comfortable in creating templates and the like but for now, I’m pretty pleased with how far I’ve come, and excited about how much farther I can go. Who knew markdown could get this interesting?!

NvdH had a short video that showed all this. The fun is being able to do it myself 😅

PS: I’ve not figured out how to embed or share the presentations. Learning in public is important to me, even if I’m the only one reading and looking through this stuff. Something to figure out.

QOTD:

The love of one’s country is a splendid thing. But why should love stop at the border? – Pablo Casals, cellist, conductor, and composer

Music:

Leonard Cohen in Warsaw Poland in 1985. His opening remarks about the politics caught my attention.

Learning HTML

After multiple unsuccessful attempts at grokking HTML, I finally took Dave Gray’s Learn HTML tutorial for beginners It’s about 4 hours long, and gives a very good overview and a project to complete to understand the basics of HTML.

I’ve spent about 10 hours in total on this whole thing: making notes, doing the project at the end, and then looking through the areas that caused me trouble a few times. Well worth the effort, methinks – not least because I at least understand why I could not get those ioslide templates to work for me 😺

Hyper Text Markup Language

The Standard markup language for documents designed to be displayed in a web browser. Assisted by Cascading Style Sheets and scripting languages like JavaScript

Installation of tools

  • VS Code as code editor
  • Plugins: Live Server, Prettier, vscode-icons, github (dark) theme
  • Some Chrome extensions (I didn’t use this)
  • My own GIthub & Git configuration
  • HTML validation service from W3C.

Text Basics

  • index.html is always the first page to build.
  • ⚠ Every <element> that shows up needs a corresponding </element> close-tag element
  • Anatomy of a <html> document
    • <head>
      • <title> Title shows up on the browser tab
      • <meta>
        • name="author"
        • name="description" a longer description
      • <link rel="icon" href="html5.png" > relate to an icon, with a hypertext reference to a file or resource.
      • <link rel="stylesheet" href="css/stylesheet.css" > relate to an icon, with a hypertext reference to a file or resource.
    • <body>
      • <header>
      • <main>
      • <footer>
  • Keyboard shortcuts will save so much time in navigating around text in the code editor
  • Elements
    • Block Level elements
      • Each html page should have only one <h1> element
      • There can be more than one <h2> on a page, and each <h2> can have more than one <h3> element. Headers have semantic importance
      • <hr> is a horizontal rule with some semantic meaning attached to it
      • <br> is a line break
      • <p> paragraph
      • <nav> navigation area
        • attribute <aria-label=""> I don’t know what this does tbh
      • <section>
      • <article>
      • <img>
      • <figure> a better way of doing images
        • <img> as above
        • <figcaption> includes a caption under the image
        • gives a bit of padding / indentation to this section
      • <aside> renders as a toggle button, and requires some more details. A semantic element
        • <details> A headline question, for example
        • <summary> A bit more detail (this messes with my head)
      • <time datetime="08:00">8 am</time>
      • <time datetime="PT3H">3 hours</time>
      • <mark> highlights the text
    • inline elements
      • <em> italics
      • <strong> bold
      • <a href="">hyperlink to somewhere</a> anchor tag, hyperlinking to other html documents
      • <abbr title="Tooltip> allows some expansion of an abbreviation using the tooltip, but isn’t an accessible to all assisted technologies.
      • <address> allows semantic meaning to the text
    • HTML entities
      • &nbsp; whitespace
      • &copy; copyright symbol
      • &lt; less than
      • &gt; greater than

<!-- Comment --> won’t show up on the page but can show up in the “Inspect” view on a browser.

Lists

<li> creates a list item inside one of the following tags:

  • <ul> Unordered lists, shows up as bullet lists
  • <ol> Ordered lists, show up as numbered
  • <dl> Description lists, like a table but not as pretty. NOTE: Doesn’t need a <li> item
    • <dt> Description term
    • <dd> Description detail

Adding Links

  • not the same as the <link> tag seen in the <head> part of the <html> document.
  • <a href=""></a> is an anchor tag.
  • Links can be of three types:
    • Absolute reference: <a href="https://google.com">Open a Google Search</a> links to Google with the words “Open a Google Search” showing up with an underline.
    • Relative reference: <a href="main.css"></a> links to the file named main.css in the same folder as the document.
    • Internal reference: directly to the <section> in the document, identified with a id="specific_name attribute. Then refer to the document as <a href="#specific_name>
  • This tag can link to any other html document, whether in the same folder, or on the Internet. You can also link to a specific place in the same html document, and uses some special characters to identify the location.
  • <a href="#">Back to top</a> takes you to the top of the existing page
  • <a href="/">Home</a> takes you to the index.html document
  • Special attributes in anchor tags:
    • <a href="favicon.png" download>HTML favicon</a> to download the file
    • <a href="mailto:random@randommail.com">my email ID</a> to start an email
    • <a href="tel:+19845022345">Call Us</a> works best on a mobile
    • the attribute target="_blank" opens the link in a new tab

Some linking rules:

  1. Avoid the whole link itself
  2. Avoid “Links to” phrase
  3. Keep link text short
  4. No links that say “click here” 😨


lorem*3 can give you three paragraphs of lorem ipsum placeholder

Adding Images

  • Save images in a separate folder, usually titled img
  • Block level element to include image:
<img src="img/file_name.jpg" 
	alt="a descriptive file, allows accesible tools"
	title="shows up on hover"
	width="400, width of the image"
	height="200, height of the image"
	loading="lazy, improves page load performance">

Providing width & height to deal with [cumulative layout shift](https://web.dev/articles/cls)

`figure` allows non-image content too:
```html
<figure>
<p>
<code>&lt;h1&gt;Hello World!&lt;/h1;&gt;</code>
</p>
</figure>

will render as

	<h1>Hello World</h1>

Resources for images

Semantic Tags

  • These elements give additional meaning rather than just a separator
  • Very useful for assistive technology
  • Allows quick scan of the content on the page
  • <hr> as a separator of topics
  • See Anatomy of a html – Header, Main, Footer within the <main> section of the page as a ‘collection’
  • <section> can be called <article> with a specific unique id attribute to identify it. The difference between these two is not entirely clear: a thumb rule might be to consider an article as a self-containing blob of text, while <section> is merely carving off a small part of the document.
  • <aside>, <time> are examples of semantic tags. See

[!Caution]+
Avoid <div> and <span>; instead use semantic elements

Handy Tool: Chrome extension called HTML5 Outliner to see how the document shows up for assistive technologies. Remember that not everyone uses a mouse to browse the internet.

Tables

This caused me some trouble. I don’t understand this whole syntax just yet.

    • Structured tabular data, don’t ever use this for the whole html document!
    • They need a little css to make them reasonably legible 😺
    • Use semantics extensively here to make sense!
    • Elements to work with:
      • Table
        • <table>: defines the table
        • <caption>: creates a centred caption for the table
        • <tr>: create a row to hold the data
          • Use attribute colspan="n"to define how the text flows between columns
          • Use attribute rowspan="n" to define how the text flows between rows
      • Data headings
        • <thead>: creates a header section for the table.`
        • <tr>: create a row to insert the data, whether heading or content
        • <th>: creates the headers, with a scope="row" or scope="col"
          • In the <thead> element, scope will be col
          • In the <tbody> element, scope will be row
          • if row headers are needed, then first <th> is the html entity &nbsp;to create an empty column
      • Body
        • <tbody>: creates the body of the table
        • <tr>: create a row to insert the data
        • <th scope="row">: with value of the first column data
        • <td>: create the data in the column. Include the semantic element (for example <time>inside this element)
      • Footer
        • <tfoot>
    • Avoid using id attribute with tables. Very quickly becomes a PITA.

Forms and inputs

This was the most annoying, and least interesting. I might go back to this someday… or more likely, never!

2023-04-16 Links & stuff

A musical weekend, discovering the prolific Steve Goodman.  I was listening to John Prine’s rendition of “You Never Even Call Me By Name” and then found Steve’s own rendition.

Steve’s “City of New Orleans” and his 1978 performance at Austin City Limits.

Steve died of leukaemia at the age of 36. His wife Nancy’s liner notes: “He extracted meaning from the mundane.”

Dean Martin’s Sway & the French/English version of c’est ci bon. Tuba Skinny’s full jazz set at Jazz Heritage Centre in 2022.  Cesaria Evora is the barefoot performer par excellence. Jesse Cook started playing pots & pans during Covid and it’s incredible

Taylor Bloom and Ben Cooley were on Josh Turner’s cover of Simon & Garfunkel’s Baby Driver . That video was the beginning of the discovery of so many wonderful talented young musicians. Taylor & Ben’s rendition of The Boxer and Homeward Bound. Josh & Carson mesmerize with their cover of Amazing Rhythm Aces Third Rate Romance. Reina del Cid & Toni Lindgren with Josh & Carson cover Route 66.

I heard David Graeber and Chris Voss talks at Google yesterday, and Dr. Oliver Sacks talk about musicophilia.  I learnt a bunch of powerpoint techniques from the outstanding OneSkill Powerpoint channel, and put them to use on a work project. I learnt how to draw Multiple Causal Diagrams, used Excalidraw to draw them, and put them into that same project slideware.

It was a good weekend indeed.

Reflections: Sprint 1

Sprint 1: “Create presentations from Markdown

The process:

  1. Started with ioslides from YiHui’s book
  2. Figured out why the simplest slide I wanted to do was impossible to do in ioslides (Yihui says that not me!)
  3. His suggested alternative Xaringan, which was originally a stretch goal, became the focus almost immediately thereafter
  4. Did a small number of exercises every morning before I started work, following the the book, and then went down the rabbit hole to the remark Github repo that Yihui linked to, to understand a bit more about the way formatting works.
  5. Practiced pushing the code from within RStudio or iTerm to a Github repo. Messed up a couple of times and learnt how to reset HEAD
  6. Created my first (basic ludicrously plain) presentation (Rmd document) entirely from Markdown of some key points I made from Richard Hamming’s amazingly wonderful speech at Bell Labs called “You and Your Research“.
  7. Created a second Rmd presentation – this time turning gnab’s remark pages into a preso for myself.

The problem? I can only serve those presentations from RStudio, locally. If I wanted to share the slides themselves, I have more work to do. That will become a learning goal for Sprint 2:  How to embed this presentation, not merely a link to the Rmd.  I found an excellent article here and another one to go through here.

Also:

Despite the crash course in CSS & HTML, knowing the names of a tiny fraction of the functions and features in them is utterly frustrating. I need to get one of the lads to show me how this whole stack actually works.

 

Ideas: Richard Hamming

Talk: “You and Your Research” at Bell Labs, 1986

💡 Bell Communications Research Colloquia Series

https://jamesclear.com/great-speeches/you-and-your-research-by-richard-hamming

  • Do great work. Not just ‘good work’, but great work, worthy of a Nobel Prize
  • Luck has little to do with. Preparation is critical (Einstein thought about speed of light when he was 13/14/15
  • Brains are measured differently, so also overrated. Success begets more success because you build confidence, build more courage, become more articulate
  • Have courage
  • Age has an effect. Perhaps because once success arrives, there’s less time for great work and more time for speeches and ceremony. When you become famous, hard work (ego, etc) to work on small problems.
  • Working conditions don’t matter as much (hmmm) you can do great work by turning around the problem a little bit, rephrasing it.
  • Great drive (John Tukey story) “You would be surprised Hamming, how much you would know if you worked as hard as he did that many years.” Knowledge & productivity are like compound interest
  • Tolerate ambiguity very well. They believe the theory enough to go ahead; they doubt it enough to notice the errors and faults so they can step forward and create the new replacement theory. If you believe too much you’ll never notice the flaws; if you doubt too much you won’t get started.
  • Feed the subconscious the problems and starve it from others for answers, sometimes
  • Ask “what are the important problems in my field?” Work on the important problems. You won’t do great work otherwise.

Important problems: It’s not consequences that make it an important problem, it’s that you have a reasonable attack.

  • 💡 “Great thoughts time”: Friday afternoons would discuss only great thoughts.
  • Pursue opportunity for great work when it shows up. Drop all other things. They go after it because they’ve already thought this thing through
  • Do you job in such a fashion that other people can build on it. Don’t stand on each other’s feet.
  • Selling your work. Distasteful, ignored, and yet the most important. Three things to do in selling:
    • Write clearly so that people will read it
    • Learn to give formal talks
    • Learn to give informal talks
  • Technical people love to give a deep, restricted, TMI technical talk. The audience wants a broad, general relatable talk.
  • Educating your bosses so you get control over what you work on. Will take time, is hard work.
  • Use leverage (story about using computing time to ask for named credit for the people doing programming, then using credit in published article to ask for resources)
  • Is the effort to be great (scientist) worth it?

I think it is very definitely worth the struggle to try and do first-class work because the truth is, the value is in the struggle more than it is in the result. The struggle to make something of yourself seems to be worthwhile in itself. The success and fame are sort of dividends, in my opinion.

  • Why do so many people who have brains and talent fail?
    • Lack of drive, commitment
    • Personality defects (control freak, not using the system to advantage)
    • Ego assertion (dressing as a form of self-expression). Appearance of conformity is enough, you don’t have to conform 💡
    • You can fight to reform the system or you can do great work, not both.
    • Anger
    • Unable to look for positive side (I bragged about something so I’d have to perform. I found out many times, like a cornered rat in a real trap, I was surprisingly capable.)
    • Self-delusion (Well, I had the idea but I didn’t do it and so on and so on.)
    In summary, I claim that some of the reasons why so many people who have greatness within their grasp don't succeed are: they don't work on important problems, they don't become emotionally involved, they don't try and change what is difficult to some other situation which is easily done but is still important, and they keep giving themselves alibis why they don't. They keep saying that it is a matter of luck. I've told you how easy it is; furthermore I've told you how to reform. Therefore, go forth and become great scientists!

Learning Detour: CSS

Confident enough in my exercises yesterday with Rmarkdown, I decided on a very simple project for today:

Project 1: Take one slide with one word on it, and apply formats to it using CSS on ioslides

The broad steps I expected to take:

      1. Create an Rmd with one word on it. Easy enough
      2. Create a simple stylesheet which makes font huge
      3. Create some variations on it.

After about an hour or so of fumbling around Step 2, I realised I had so little conceptual understanding of CSS that I was simply stabbing in the dark. Stackoverflow’s simplest answer was a link to the CSS tutorial from W3Schools. It took a couple of hours, along with doing the exercises.

BUT:

Yihui says in a blog post that `ioslides` aren’t really customisable so he created `xaringan` as an alternative. That’s where I’m headed now.

Who said learning was a straight line?

Learn: Create Presentations From Markdown

Sprint 1 starts today for two weeks. Of course it had to begin with a restful sleep!

Writing and creating a presentation from the same document has been  on my mind ever since I saw Hadley Wickham’s presentations (example here).

There are a lot of writing I wish I had a presentation to talk along with, and I want to give that a go in the next two weeks. This requires me to learn several new tools and skills, and build on some I already know:

* Use RStudio‘s Markdown capability (I’ve used this a bit).
* Continue practising on iTerm as Terminal
* HTML & CSS – a 12 minute video for CSS was enough to get me on my way. I have less than a rudimentary knowlege of both. Use VSCode as the text editor
* Refer Yihui Xie’s wonderful Bookdown book for ioslides
* Write about the process of learning this, as a presentation. Embed the presentation here before Saturday 15 January). Publish the slides and code to Github.
* Stretch: Learn Xaringan because they look pretty awesome!