Digital Garden

A digital Garden is a living record of a person's thought process. Much like a real garden it's intended to be messy, alive. Similar to the idea of

"working with the garage door up"

Digital Garden ideas

sort pages by link density

the more interconnected the page is the higher it shows

maybe the top linked pages are showcased in the intro

What about changing it to a Digital Roof Garden?

Kind of illustrates that there is lots going on underneath

Roof garden of The Company?

Embed hypothes.is sidebar

How to embed hypothes.is

Guidelines

embed config options

config

<script type="application/json" class="js-hypothesis-config">
{
"showHighlights": true,
"branding": {
      appBackgroundColor: 'white',
      ctaBackgroundColor: 'rgba(3, 11, 16, 1)',
      ctaTextColor: '#eee',
      selectionFontFamily: 'helvetica, arial, sans serif'
    }
}
</script>
<script async src="https://hypothes.is/embed.js"></script>

should change scheme depending on dark mode

Bookshelf

My Digital Garden should include a section for my highlights!

Practically the bookshelf is created by referencing namspaced books Book/. During basic page creation all book pages are collected and analyzed. Relevant attributes are scooped out and applied to a pre-made book template page (which ends up replacing). The book and cover are then added to a separate Bookshelf page with a pre-made template. My old annotations site can be referenced.

Linked in the NavBar, the bookshelf is one of the primary pages for the garden

Clicking on the book cover brings up a modal of the selected page

Book/ Query

Maybe use bookish.tech somehow?

Random highlight button?

Sort by tag or favorite

{{embed: ((

ideas For my Digital Garden, add an button that lets someone suggest me a book

))}}

Exemplars

Sawyer's Reading Highlights

Person/Maggie Appleton's website

Favorite words

Include a page to showcase my list of words

Include custom JS or css as an attribute on the page

Style::

Favorite Recipes and thoughts about them

Recipe at the Top

Media Recommendations and what makes it special

My Digital Garden could have programming cheatsheet section similar to devhints.io

{{embed: ((

My Digital Garden should be uniquely me. What preoccupies my brain? What ideas inspire me? What minutiae of human experience do I investigate? Am drawn towards?

))}}

Could include a /now page about what's happening now

{{embed: ((

What is a NOW page?

))}}

Article/ pages should be handled carefully. Instead of displaying the Content attribute should I somehow embed the actual page? I don't want to be re-hosting someone else's work without permission..

Issue № 1

Pages should have a last edited timestamp

A garden could include a personal timeline

https://timeline.cdoyle.me/

Exemplars

Person/Andy Matuschak's notes website

Person/Azlen Elza's website

love the sliding layering of notes

love the popup summaries

Person/Maggie Appleton's website

Toby Shorin's website

love the subtle z-level raising of external quotes

Aengus McMillin's website

love the changelog for the site on the front page

joel hooks's website

toggle light/dark mode

pain points:

both themes are too extreme. Light and dark should be softened

he uses short declarative sentences, not great to read or look at

Tom Critchlow's garden

Has a collapsable 'blockchain' of ideas ie notes that build on each other in sequence

digital garden note blockchain

josh wcomeau blog

excelent link highlighting

great popup previews

Amanda Pinsker | Reading

sexy typography and layout combo

includes a photo of where she read the book, very cool idea!

makes use of footnote symbols (* † ‡ § ¶ ↗︎)

pain points:

site is a single page with poor discoverability

only laid out for few highlights and a short blubs

highlights.melanie-richards.com

nice use of screen real estate

each highlight can be lined directly to

nice subtle animations on page load

Sawyer's Reading Highlights

great hover animation

Cons: everything is a page and there's a lot of lag

anthony morris

A Working Library

nice mix of commentary and quotes

good use of marginalia

nice all book filtering options

pain points:

on desktop wastes screen space

lesswrong

nice compact layout at top

previews are 'attached' to link

page previews have nice layout

internal page links have a degree symbol at the end °

many pages have

'meditations'

for the reader

'meditations'

"A "meditation" is a puzzle that the reader should attempt to solve, or a prompt that the reader should try to state their own reaction to, before continuing. Research shows that you're much more likely to remember useful info if you try to solve the problem yourself before reading the solution. Succeed or fail, the important thing is to have tried first."

pain points:

No color, everything is shades of gray

everything is muted and tight, no intentionally mismatched typography or designed layout

Person/Jordan Moore's public garden

very cool side scrolling layout

really nice typographic layout and hierarchy

smaller font size than I expected

font - SF Pro Display

images are handled cleanly with css shapes

doesn't feel like a bulleted list

pain points:

normal and boring on mobile