serhii.net

Obyde needs 3.8 and fails otherwise, new OS maybe time for new ways to convert. There are many actually. Some active mantained and expandable.

For later:

• devidw/obsidian-to-hugo: Process Obsidian notes to publish them with Hugo. Supports transformation of Obsidian wiki links into Hugo shortcodes for internal linking. looks especially nice.
• Publishing Obsidian vault with Hugo - Sagar Behere lists all the other ways and is really detailed
• (Also on hugo A Hugo Survival Guide is a neat thing I’ll read sometime)

So

obsidian-to-hugo doesn’t support assets/images :( Leaving only ukautz/obsidian-meets-hugo: Command line tool to export Obsidian Vault into Hugo published website for me.

• preserves Obsidian directory structure — nice
• not recursive by default
• doesn’t create _index.md files, and converts existing ones in Obsidian to -index.md
  • pchr8/obsidian-meets-hugo: Command line tool to export Obsidian Vault into Hugo published website forked and did my first go programming to fix this
• doesn’t support folders, but one can filter by tags — good that I used both since the beginning!
  • for multiple tags a “list” is possible — and apparently that’s -i tag1 -i tag2 -i tag3¹

Current CLI:

go run cmds/omh/main.go --obsidian-root=../public_obs/ -R --hugo-root=../dtb/ --sub-path= -i=uni -i=zc/it -i=zc/rl

Onwards

• 3 refs not found
  • I don’t understand why hugo says “ref … page not found” - support - HUGO:

    Is linksphoto.md unpublished (draft, expired, or future)? Or, to put it another way, what happens when you run hugo server -DEF?

  • fixed for me! hardcoded hugo-format refs in obsidian broke because now different names — converted to real obsidian links and this fixed the remaining ones
• cyrillic names now unsupported?
  • 220407-2246 Чебуреки etc.
  • damn.
  • It’s the same

    var insane = regexp.MustCompile(`[^a-zA-Z0-9\-]`)
    func Sanitize(in string) string {
    	return insane.ReplaceAllString(in, "")
    }
    

  • w/ chatGPT, changed regex to [^a-zA-Z0-9\-\p{Cyrillic}] — now it does upper+lowercase cyrillics — so now it’s 220407-2246-Чебуреки.md in the md filename, but the URI has it lowercased.
  • Relevant: disablePathToLower in config² — not changing because cool URIs don’t change and this was the default for years on this website
• Images are broken
  • ![2024-05-13-182935_1304x442_scrot.png](//assets/2024-05-13-182935-1304-x-442-scrot.png)
  • … //assets alrighty…
  • Docu: Static files | Hugo

    • By default, the static/ directory in the site project is used for all static files (e.g. stylesheets, JavaScript, images). The static files are served on the site root path (eg. if you have the file static/image.png you can access it using http://{server-url}/image.png, to include it in a document you can use ![Example image](/image.png)).

    • you can have multiple such directories
  • Ah — maybe it’ll work when uploaded to my website, where /xxx will refer to the website and not my local install
  • If I manually fix //assets/.. to /assets (one slash) then it shows up nicely locally
  • In omh.go this happens: return fmt.Sprintf("[%s](/%s/%s)", title, c.SubPath, target)
  • AH it’s because of my empty subpath directory argument — if I pass something then everything works. Oh GodDAMN it.
  • OK this fixes it. And I hope creates no more problems.

    if c.SubPath == "" {
        return fmt.Sprintf("[%s](%s/%s)", title, c.SubPath, target)
      } else {
    return fmt.Sprintf("[%s](/%s/%s)", title, c.SubPath, target)
    

  } ```
• Debugging a notes called _index I realize that it takes Hugo frontmatter title from note title, which in turn is the filename, NOT the obsidian file frontmatter title :(
  • problem because my layouts rely on a magic constant in some directories…
  • I hope it’s my last fix.

  // Keep title in Obsidian front-matter as note title if it's there (a la obyde), 
  // otherwise use Obsidian filename for this (standard behaviour). 
  oldTitle := hugo["title"]
  if oldTitle==nil {
    log.Warn("No title in front-matter, using filename in ", note.Title)
    // must have title
    hugo["title"] = note.Title
  } else {
    log.Warn("Using frontmatter title for ", oldTitle)
  }

Wanted to do Manjaro, after googling found out it has a very bad reputation (arindas/manjarno: Reasons for which I don’t use Manjaro anymore) — I’ll go with EndeavourOS. OpenSUSE Tumbleweed will be my next choice if this fails.

Strategy:

• /opt will have executable programs
  • TG, hugo(?), pycharm, kitty?..
  • qtile, qutebrowser
• home encrypted, but separate swap+etc. partitions of size of ram
  • or not, since encrypted home/swap/… and hibernation are hard — so only encryption
• FS: BTRFS
  • …because snappshotting for if one randomly rms /etc¹².
    • SysadminGuide - btrfs Wiki
    • I like this: Btrfs - Manjaro
    • Reasons against exist³.
      • df will incorrectly report space usage
      • no native encryption support
      • complexity
  • F2FS is the fastest for SSDs but can lose data if battery dies
• Dotfiles
  • radically simplify everything, no need to source global ones and /home/me etc. — I’ll just use the same user for everything

OK, EndeavourOS+btfrs it is.

• Post-install steps
  • Average User’s To Do List after doing a fresh install of Endeavour OS with KDE Plasma : r/EndeavourOS
  • https://forum.endeavouros.com/t/coming-from-manjaro-to-endeavouros-installation-advice-for-btrfs-snapper-btrfs-assistant/34003/2 setting up snapshots

https://www.kaggle.com/code/datark1/what-are-dcm-and-nii-files-and-how-to-read-them

• NII files are typical for MRI data

• This library can open them: https://nipy.org/nibabel/gettingstarted.html

  • Read and write access to common neuroimaging file formats, including: ANALYZE (plain, SPM99, SPM2 and later), GIFTI, NIfTI1, NIfTI2, CIFTI-2, MINC1, MINC2, AFNI BRIK/HEAD, ECAT and Philips PAR/REC. In addition, NiBabel also supports FreeSurfer’s MGH, geometry, annotation and morphometry files, and provides some limited support for DICOM.

• Cool viewers exist

  • online
    • https://socr.umich.edu/HTML5/BrainViewer/
      • for annotated files, 3d opacity+threshold help seeing the annotated areas VS raw image
      • drop multiple files (e.g. raw + ground truth) to have them as multiple layers
    • https://brainbrowser.cbrain.mcgill.ca/volume-viewer
      • can do 4d (3d+time) viewing! E.g. beating heart from ACDC dataset
    • https://www.fmrib.ox.ac.uk/ukbiobank/group_means/index.html may or may not be papaya
    • https://niivue.github.io/niivue-ui/ neat w/ probe1.nii.gz
    • https://viewer.imaging.datacommons.cancer.gov/viewer/1.3.6.1.4.1.14519.5.2.1.6279.6001.224985459390356936417021464571?seriesInstanceUID=1.2.276.0.7230010.3.1.3.0.57823.1553343864.578877,1.3.6.1.4.1.14519.5.2.1.6279.6001.273525289046256012743471155680 a cool viewerKKJJjjkk

• list of others: https://docs.facebase.org/docs/nifti-files/

• https://github.com/niivue/niivue even better list of others

• Other

  • Maternal Brain Project - OpenNeuro OpenNeuro has many datasets

• Not supported out of the box:
  • https://inkscape.org/forums/questions/bulletpoints-and-more-advanced-text-controls/
• https://alpha.inkscape.org/vectors/www.inkscapeforum.com/viewtopic0f39.html?t=9647:

  • I usually clone a circle and distribute it evenly next to the text object

  • <C-u-2022> adds a bullet point symbol

Quarto’s roughnotation works either in speaker view or in the presentation, separately from each other.

Very brittle, but:

• jitsi share my presentation window, “show me what I’m sharing” and then right click picture-in-picture
• drag that picture over the presentation in speaker view :)

.. yeah.

So I learned that poster videos are a thing, 10 years ago I’d have used Prezi but not now

And TIL inkscape has neat keybindings for zooming.

So.

• Inkscape keyboard and mouse reference | Inkscape

• View -> Zoom has a list as well

  • I should have looked at it earlier — it has neat things e.g. X-ray etc.:

• 3 zooms in to the selected element

• 1-6 are all zooming things (from the docu):

  • 

• 3-Layout-extraction-1 is a 6min description I have not watched but could be nice.

A particularly complex file after a crash became cursed: two boxes would export to PNG fine, but not to PDF.

After closing and opening these two boxes became just as in the PDF export.

Solution: delete the problematic elements from the PDF and recreate them.

Basics

• Quarto – Revealjs

• Quarto – Advanced Reveal

• Oh it has another page with a clean reference! Quarto – Revealjs Options

• Default presentation size is 1050x700

Presenting

    slide-number: true
    hash-type: number

Hide slide: ## Slide Title {visibility="hidden"}

Slides themselves

Title slide

If you exclude title and author from frontmatter, no title slide will be created and you can create your own

Asides

Asides exist: :::{.aside}

Format

• Many bits from Quarto – Markdown Basics etc. apply for presentations as well!

• Comments are HTML comments.

  • Other options exist but it’s still the best one. How to comment out some contents in .qmd files? · quarto-dev/quarto-cli · Discussion #3330

• [this is a div]{.to-which .i-can add="stuff"}

• For slides w/o titles you can still do this

  # {background-image="https://upload.wikimedia.org/wikipedia/commons/2/2b/Ouroboros-Abake.svg" background-position="center" background-size="contain" .center}
  

Centering stuff

• TODO
• Vertical/Horizontal
• Vertically and horizontally centered content in slides (revealjs) · quarto-dev/quarto-cli · Discussion #2951
• css - Vertical Align of images in Quarto Presentations - Stack Overflow

Complex layouts are possible with layouts:

::: {layout="1],[-1,1,1,1,-1"}
![](./images/logos/logo_chatgpt.png){.nostretch width="500px" fig-align="center"}

![](./images/logos/l2.png){.nostretch width="200px"}

![](./images/logos/l1.png){.nostretch width="200px"}

![](./images/logos/l3.png){.nostretch width="200px"}
:::

Classes

## {.classname}

::: {.classname}
div with class=classname
:::

::: {}
div with no class — we still need the {} for it to be a div
:::

::: {.one-div}
:::: {.inside-another}
But the number of : doesn't matter as long as it's >3 — they aren't even matching by count, it's just divs inside divs inside divs, the number of : is just for readability
::::
:::

Plugins

Attribution

quarto-ext/attribution: Display attribution text sideways along the right edge of Revealjs slides.

format:
	revealjs: ...
revealjs-plugins:
  - attribution
---

## attribution
![testatt](./images/logos/logo_chatgpt.png){.nostretch width="600px" fig-align="center"}

::: {.attribution}
Photo courtesy of [@ingtotheforest](https://unsplash.com/@ingtotheforest)
:::

Roughnotation

EmilHvitfeldt/quarto-roughnotation: An extension that uses the roughnotation javascript library to add animated annotations to revealjs documents.

R to run.

Sample presentation: RoughNotation; its source: quarto-roughnotation/example.qmd at main · EmilHvitfeldt/quarto-roughnotation

---
title: Simple roughnotation setup
filters:
   - roughnotation
---

- [type]{.rn rn-type=circle}
- [animate]{.rn rn-animate=false}
- [animationDuration]{.rn rn-animationDuration=20000}
- [color]{.rn rn-color=blue}
- [strokeWidth]{.rn rn-strokeWidth=3}
- [multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline]{.rn rn-multiline=true}
- [iterations]{.rn rn-iterations=1}
- [rtl]{.rn rn-rtl=false}

also

{.rn rn-type=underline}

Key bits:

And this will be [circled]{.rn rn-type=circle rn-color=orange}
and [underlined]{.rn rn-type=underline rn-color=orange rn-animate=false}
and [boxed]{.rn rn-type=box rn-color=blue rn-animate=false}
and [crossed]{.rn rn-type=crossed-off rn-color=blue rn-animate=false}
and [crossed again]{.rn rn-type=strike-through rn-color=blue rn-animate=false}

rn-index=2 for order so that the animations happpen one after the other

Works for entire divs as well: RoughNotation

Problems with RN

It highlights the wrong places for me if the presentation is too narrow, both on mobile and desktop browsers; zooming out helps but too much breaks it again. EDIT: a known issue mentioned in the last slide of the sample presentation, they also suggest zooming.

EDIT: No one said I have to use half a screen for previewing, this is a nice layout that solves multiple problems:

Themes

Quarto – Reveal Themes

Default theme: quarto-cli/src/resources/formats/revealjs/quarto.scss at main · quarto-dev/quarto-cli

Centering everything

/*-- scss:defaults --*/
$presentation-slide-text-align: center !default;

format: 
  revealjs:
    theme: [default, my_scss_file.scss]

BUT for some things it’s ugly, like lists. Then:

.notcenter {
  text-align: left;
}

## UA-CBT
### Outline 
::: {.notcenter}
- English example
	- Morphology
	- Agreement
:::

Smaller

{.smaller} works on full slides only, this works for divs too:

.newsmaller {
	font-size: calc(#{$presentation-font-size-root} * #{$presentation-font-smaller});
}

Increasing slide number size

.reveal .slide-number {
	font-size: 30px !important;
}

Cool links from elsewhere

• Slidecraft 101: Colors and Fonts
• Meghan Hall

Both linked by the excellent and thorough Beautiful Reports and Presentations with Quarto

References / citations

Quarto – Citations & Footnotes

.biblatex file exported from Zotero and optonally a CSL style (citation-style-language/styles: Official repository for Citation Style Language (CSL) citation styles.)

bibliography: ../../Masterarbeit.bib
csl: ./diabetologia.csl
--- 

# etc. In diabetologia this gives the usual [1] thingies.
[@key]
[see @key]

Then autocomplete in vim-quarto (!)

Dynamism and animations

Incremental lists are {.incremental}, or the entire presentation can be

  revealjs:
    incremental: true  

with {.nonincremental} parts.

Otherwise Fragments¹ exist with more control.

r-stack allows to make images overlapping: Quarto – Advanced Reveal

Simple template for slides with everything

## Title {.smaller}
::: {.notcenter}
Descr.

:::: {.incremental}
- some
- list
::::
:::

<!-- footnotes here if needed
[^leaderboard]: <https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard>
-->

::: {.notes}
sp. notes.
:::

::: footer
Chapter - Section
:::

Bits

CSS inside slides

The excellent page of quarto presentation tricks Meghan Hall has this:

Text with [red words]{style="color:#cc0000"}.

No special CSS classes needed!

Context: 240423-1912 Better Posters notes

Grids

• Two — once in document properties, and there seems to be a tool for this as well.
• units are important — doing math in mm and then creating a grid in px/pc/pt/… may create not-obvious errors
• Snapping to an invisible grid still works — neat for a sub-grid that would create too much garbage but is needed (e.g. margins in a column)

Selecting

• You can select items by color/stroke/type/… in Edit -> Select…
  • E.g. select all texts, all blue rectangles etc.

Resizing boxes

You can disable scaling the stroke size together with the box in the upper-right toolbar! (The same one where locking aspect ratios is)

Text

• You can draw a rectangle and then add text to it — use the text tool to draw this rectangle.
• Text -> Flow into frames can do what it says on the label:
• If it looks weird or different from other text but font and size and the rest match, the text likely has a stroke.

Tracking invisible items

For things into which text “flows” etc. — if you have a white background making them white works for keeping them selectable when needed. (And removing the background makes them visible).

Smile for the screenshot

Damn I love doing random vector stuff.

The book by Better Posters’s author is freaking awesome. Short summary follows, not copypasting too much because copyright, but the book is 12/10.

Chapter 1: short form

TL;DR how to do a poster if you read only one chapter

• Three columns, margins around them and between them at 50mm
• so 8 inches/200mm for the margins toatl

• take the width of your paper, subtract 8 inches (200 mm) for the margins,

and divide by three to find your column width. If your poster is 48 inches (1,220 mm), your columns will be 13⅓ inches (340 mm) wide. Yes, it’s an awkward number, but computers don’t care.

Short note to self

• A0 is 841 x 1189mm¹
  • My arm is around 70cm
• Later the recommendation is 6 columns because flexibility
• So now it’s margins 50mm top/down/l/r w/ columns like this

> cc (1189-100)/6
181.5
> cc (841-100)/6
123.5

After playing around, this is good enough I guess! (Ignore Y grid)

After ignoring even more advice: (EDIT: oh damn it’s 7, not 6!)

Bits

• To look for typos, changing the font and column size helps! p. 49

Narrative

• Narrative
  • AND, BUT, THEREFORE (ABT) p.59
    • We scanned the salmon AND saw brain activity BUT this is impossible THEREFORE we should …
  • Find a narrative and keep it in mind when doing the poster; get other people to do their narrative and see if it’s at least close to yours

Visual thinking (p.64 Chapter 7)

Quoting directly because it’s freaking awesome.

• “Dan Roam argues that there are six basic ways to show something, and you can recognize which you need by the kind of question you hear (Roam 2013)”:
  • If you hear a name – a “who or what” – you need a portrait. This is not necessarily a realistic or detailed portrait like a painting or a posed photo. A stick and ball chemical structure is a “portrait” of a molecule. A smiling emoji can be a portrait.
  • • If you hear a number – a “how many” – you need a chart or graph. A bar graph is a simple example.
  • • If you hear a location or a list – a “where” – you need a map. Again, this need not be a literal cartographic map. Anytime you talk about something “above,” “below,” “closer,” or “overlapping,” you have the potential to create a map. Examples include concept maps, pedigrees and phylogenies, org charts and Venn diagrams.
  • • If you hear a history – a “when” – you need a timeline. “Time” is one of the most common variables shown graphically (Tufte 2001).
  • • If you hear a sequence or process – a “how” – you need a flowchart.
  • • If you hear some complex combinations – a “why” – you need a multi-variable plot, like a scatterplot.

• Design is making things look similar (consistency, grids, fonts) and different (h2 vs the text, etc.)

• Main rules:

  • repetition, alignment, contrast, proximity

• p.85 100-300 dpi is the sweet spot for posters

• 108 when deciding how much to narrow/widen a line graph, aim for a max slope of about 45 degrees

• 153 a font family is designed so that different fonts look OK together — DAMN.

Grids

The most important takeaway.

• 165 “layouts that never work”
  • [--][ ] two wides one tall
  • [-] [-----] swedish flag
• Numerate the order if it’s not obvious
• Vary the place of the break so it’s not squares (right?down?) but obviously rows or columns:

Bad:

[   ][    ]
[   ][    ]

Good:

[     ][  ]
[   ][    ]

Text

• p.191 has a list of cliches to replace, e.g. “make use of” -> “use” and “the use of” -> (Omit)
• all-caps headers are worse because you can’t see the shape of the words — which is important from far away.
• serif or no serif doesn’t really matter from a design perspective.

Before you print

221 checklist and ratings

Practical bits

• Get a document tube! (And write your name on it!)
• How to do conferences shoes to stand in for hours, tacks, PDF to print it if sth happens etc.

Not from Better Posters

Random gray or whatever color stripes can live up a white background

See also

• Layout and structure - Research Posters - LibGuides at Sheffield Hallam University

• Another (CC!) book on this: Scientific Posters: A Learner’s Guide – Simple Book Publishing