
[Why digital garden concept?](/sketchbook/why-digital-garden-concept)
## IndieWeb Principles
- have fun scratching my own itch
- make what I need with human design-first in mind
- document to share with my future self and with others
- own my data


-> More [IndieWeb Principles](https://indieweb.org/principles)

## Visual Design Inspirations 

I love looking at scrapbooks and bullet journals. I have these two hobbies along with [sketchnoting](https://en.wikipedia.org/wiki/Sketchnoting) on my want to learn list for the longest time. Why not scratch that itch by exploring these concepts as design constraints for my website's first iteration? I believe design constraints encourage creativity.

- [Olivia Ng's Codepen](https://codepen.io/oliviale): especially [Bullet Journal/Sketch Style Elements pen](https://codepen.io/oliviale/pen/dyydRqJ)
- [Sketchy Theme UI Preset](https://github.com/beerose/theme-ui-sketchy) by [Aleksandra Sikora](https://www.aleksandra.codes/) 
- [PaperCSS](https://www.getpapercss.com/)

### Tools

- [NextJS with MDX](https://github.com/vercel/next.js/tree/canary/examples/with-mdx)
- [Hero Patterns](http://www.heropatterns.com/)
- Space Icons by [Agata Kuczminska](https://goodstuffnononsense.com/)
- Custom Fonts from [Kimberly Geswein](https://kimberlygeswein.com)
  

### Progress
- [x] added RSS feed for Sketchbook only


### Want to do
- [ ] add webmentions
- [ ] play with more bullet journal type visual designs
  - [ ] style checkboxes
- [ ] consider using [sanity.io](https://www.sanity.io/) to create a eyecandy (photos) section








How I Built This


A non-profit, [The Collab Lab](https://the-collab-lab.codes/), invited me to mentor early-career developers. Ever since my bootcamp days at Hackbright Academy, I've always wanted to mentor but yet I've been afraid to. How to coach others is a much needed skill in tech but yet it's not taught in bootcamps or on the job. Impostor syndrome feels heavy and has been my roadblock.

Ways I'm overcoming my imposter syndrome:
- Revisiting the Myth of Mentorship chapter in [Lead from the Outside](https://us.macmillan.com/books/9781250214805) by Stacey Abrams
- Commits to volunteering with The Collab Lab for Spring cohort.
- Building the sample application, [Smart Shopping List App](https://github.com/yenly/smart-shopping-list), as an exercise in walking in mentees' shoes to understand and empathize. I'm hoping by diving in the code myself, I would be better equip to answer questions.
- Observing current cohorts' weekly syncs and pull request conversations.
- Showing up, engage in the community, and doing my prep work.

Learning to Mentor


## Inspiration
Who says costumes can only be worn during Halloween? I want to make outfits for my toddler to encourage imagination.

### Materials
- bright yellow sweatpants
- bright yellow long sleeve top
- black fabric trim ribbon
- fabric glue

![Gluing trim to the long sleeve shirt](/images/crafty/bruce_lee_1.jpg)
![Bruce Lee outfit - top](/images/crafty/bruce_lee_2.jpg)
![Bruce Lee outfit - close up trim around the collar](/images/crafty/bruce_lee_3.jpg)

## Takeaways
- The fabric glue didn't up hold in the laundry. The trims near the collar separated a little bit from the shirt. For durability, I should hand stitch the trims all around.


Bruce Lee Jumpsuit


I learned the scientific name means “delicious monster.” When it grows into ginormous size, it bears edible fruit. Would I be able to nurture this young seedlign to bear fruit someday?

## How it started
![Monstera Deliciousa - Nov 2020](/images/plants/monstera_d_01.jpg)
November 2020


Monstera Deliciosa


## How it started
![Pilea](/images/plants/pilea_01.jpg)
February 2020

Pilea


I couldn't resist this Gump tree at my local Trader Joe's during the holidays.
## How it started

<Image src='/images/plants/lemon_cypress_01.jpg' alt='Lemon Cypress wrapped up as Gump Tree' width='460'  height='600' />
December 2020


Lemon Cypress


## Learning Plan Idea

Learn each [Modern CSS Solutions
for Old CSS Problem](http://moderncss.dev/) lesson.
Then use the technique (if relevant) on creating a [Style Stage](https://stylestage.dev/) theme for submission.

### Objectives
- applying what I learn by layers into something tangible
- contribute to OSS when I complete the series


### Resources

- [Style Stage: Guidelines](https://stylestage.dev/guidelines/)
- [A Hacktoberfest Project For All Web Developers: Style Stage](https://dev.to/5t3ph/a-hacktoberfest-project-for-all-web-developers-style-stage-5h2m)
- [stylestage-sass Repo](https://github.com/5t3ph/stylestage-sass)

## Progress

### Prep Work
- [x] Create repo using sass template
- [x] Set up repo to deploy to gh-pages
  - [x] Look into github actions
- [x] Deep dive starter SASS code
  - [x] Remove all existing styles to begin from scratch

### Considerations
- design by tinkering approach
  - what I envisioned may be fuzzy; only when I experiment with the code then the design comes clear
  - learning to be ok with leaving helper CSS -> part of learning/making in public process
- begin with mobile-first
  - a blank page often means too many possibilities; it wreaks havoc on my focus and feeds indecisiveness
- use constraints to play with potentials and to layer on designs
  - let tablet and desktop ideas chill in the background until they become clear

#### Tools & Resources Used
- [Hero Patterns](http://www.heropatterns.com/)
- [CSS Tricks: A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

Learn Modern CSS, Create Style Stage Theme



<Image src='/images/crafty/tiger_costume.jpg' alt='DIY Tiger Costume' width='460'  height='600' />

## Inspiration

[Be Brave Little Tiger](https://www.simonandschuster.com/books/Be-Brave-Little-Tiger!/Margaret-Wise-Brown/Margaret-Wise-Brown-Classics/9781684127443) book by Margret Brown

### Materials
 
- primary.com tangerine PJ top and bottom
- cotton yarn - 2 skeins of tangerine, 1 skein of black, leftover white for detailing ears
- fabric pen - black color
- size 7 knitting needles

## Knit Hat with Ears

I found this [Mr. Furly's Bear Hats: Pattern](https://hollyklein.blogspot.com/2010/01/mr-furlys-bear-hats-pattern-and.html) to use as reference because the shape is in line with what I was looking for.
- did the math and planned out the tiger stripes
  - row 1: knit 15 tangerine, 11 black, 17 tangerine, 11 black, 15 tangerine, 11 black, 2 tangerine 
  - row 2: 14 tangerine, 13 black, 15 tangerine, 13 black, 13 tangerine, 13 black, 1 tangerine
  - row 3: knit 15 tangerine, 11 black, 17 tangerine, 11 black, 15 tangerine, 11 black, 2 tangerine

I decided not to write up my lengthy modifications because I won't be using it again. Instead, I will try this [tiger hat pattern](https://www.ravelry.com/patterns/library/tiger-hat-9) next time.

## Knit Tail

I made my own pattern based on:
 - black stripe thickness
 - an estimate of how long I want it to be relative to the length of the PJ pants.
 - likelihood of my toddler stepping on it and tripping

Pattern instructions:
1. cast on 28 stiches with tangerine yarn
2. knit in the round for 12 rows
3. change to black yarn and knit 3 rows
4. change to tangerine yarn and knit 5 rows
5. repeat step 3 & 4 to desire length anticipating 2 inches for finishing the tail -- should end on step 3 with black yarn for better transition
6. change to tangerine yarn and knit 4 rows
7. change to black yarn and knit for 2 rows
8. change to tangerine yarn and knit 4 rows
9. decrease pattern to create a round tip for the tail
   1.  knit 2 together, knit 6, repeat to end of row
   2.  knit 2 together, knit 5, repeat to end of row
   3.  knit 2 together, knit 4, repeat to end of row
   4.  knit 2 together, knit 3, repeat to end of row
   5.  knit 2 together, knit 2, repeat to end of row
   6.  knit 2 together, knit 1, repeat to end of row
10. thread yarn to sewing needle, then use it to transfer remaining knits to bind together and tie a tight knot 

I stuff the tail with old t-shirt strips and sew it on to the PJ bottom.

## PJ Decorations

Free hand draw black stripes on PJs. Let it set overnight and then launder.

### Take Aways
- It was a challenge to modify as I knit on a pattern I haven't try before.
- I found certain parts of the pattern to be confusing and end up holes near the ears
- I don't like how the hat sits on my toddler's head when having the ears knitted as part of the shape
- The tail doesn't hold its shape well overtime and it will take a long time to dry after wash. 

### Upgrade
I changed the stuffing in the tail. I used a large rolled-up piece of old t-shirt fabric. I also added snaps to the tail and PJ bottom for easy detach. This means I can reuse this tail when I customize my toddler's orange hoodie to a tiger theme. 

<Image src='/images/crafty/tiger_costume_upgrade_01.jpg' alt='DIY Tiger Costume Tail Mods' width='600'  height='460' />

<Image src='/images/crafty/tiger_costume_upgrade_02.jpg' alt='DIY Tiger Costume Backview' width='460'  height='600' />



Tiger Costume


<Image src='/images/food/ube_sticky_rice_1.jpg' alt='Ube Rice Pudding' width='600'  height='460' />

### Inspiration & Resources
- [Danag Cuisine: Taro Pudding](https://danangcuisine.com/recipes/recipe-taro-pudding-che-khoai-mon/)
- [Run Away Rice: Taro Pudding](https://runawayrice.com/desserts/taro-pudding/)


## Take Aways
- Too liquidy using 8 cups of water for 1 cup of short grain sweet rice.
- Next time, use 6 cups of water for 1 cup of short grain.
- Run Away Rice's coconut sauce turn out tasty and right consistency. Will do again.

### Next Experiment
- try incorporating [Thai mango sticky rice recipe](https://www.youtube.com/watch?v=a2FGg4B_32w)
- try incorporating [Che Dau](https://en.wikipedia.org/wiki/Ch%C3%A8) recipes from my sisters

Ube Rice Pudding


## How it started
![Baby spider plants in my plants](/images/plants/spider_plants_01.jpg)
March 2020

## How it's going
![Baby spider plants in my plants](/images/plants/spider_plants_02.jpg)
January 2021

Spider Plants


### Objective

Build visual vocabularies with 3 minute videos.

### Resource

[Catch the #SketchnoteFever](https://sylviaduckworth.com/sketchnotefever/) with Sylvia Duckworth

## Progress

Learning to Sketchnote


- [Foamy NextJS Starter](/sketchbook/foamy-nextjs-starter)
- [Hacktober Fest 2020](/sketchbook/hacktoberfest-2020)
- [Coding Fonts Microsite](https://github.com/chriscoyier/coding-fonts) by [CSS-Tricks](https://css-tricks.com/)
  - Added Latin Mono font to the collection
- [Style Stage SASS starter](https://github.com/5t3ph/stylestage-sass)
  - Add feature to deploy `public` directory to Github pages

Open Source Contributions


## Inspiration
- guilt of having a dead tree in my home
- the joy in watching a living thing grow and change

## How it started

Xmas 2019
<Image src='/images/plants/living_xmas_tree_2019.jpg' alt='Xmas Tree 2019' width='600'  height='460' />

## How it's going

Xmas 2020

This tree sat by our front door for the past year. I repotted this tree early December and discovered the roots are teaming with ants. So I decorated it with solar powered LED star lights and reused wrapping ribbons. Then I set it outside in a more visible location to share with my neighbors.

![Xmas Tree 2020](/images/plants/living_xmas_tree_2020.jpg?460x600)



A Living Xmas Tree


## Inspiration

My love for unique handcraft things and the joy of making.

## How it started

I bought a small plain wreath from Trader Joe's for $3.99 because I wanted the smell of fresh pine in my home.
<Image src='/images/crafty/wreath_2020_1.jpg' alt='Trader Joes wreath' width='600'  height='460' />


## How it's going

I decorated it with what I have on hand. I love making origami cranes because it adds a touch of elegance.

![Customized Wreath](/images/crafty/wreath_2020_2.jpg?600x460)

Dressing Up a Wreath


I built a basic starter template for creating a digital garden to share my [Today I Learned notes](https://til.yenly.wtf).

It combines Jani Eväkallio's [Foam](https://foambubble.github.io/) with an example [NextJS with MDX repo](https://github.com/vercel/next.js/tree/canary/examples/with-mdx) for low friction set up, easy to add custom styling and deploy to [Vercel](https://vercel.com/).

### Inspirations
- note-taking using VS Code with bi-directional linking and a nifty graph view displaying connected notes
- content focus: Josh Branchaud's [TIL GitHub repo](https://github.com/jbranchaud/til)
- learning in public
- an excuse to build something with NextJS

Github Repo: [Foamy NextJS Starter](https://github.com/yenly/foamy-nextjs)

### Challenges
1. markdown notes in pages directory mixes with other types of files 
   - difficult to parse for backlinking
   - lack of frontmatter support makes it difficult to auto-generate backlinks
2. use of `next/image `component requires creating custom tag instead of overriding mdx `<img>` because each `<img>` is wrapped in `<p>` and `next/image` renders a `<div>`
   - workaround is to create a custom mdx tag pointing to custom Image component that uses `next/image` component
   - try using [remark-unwrap-images](https://github.com/remarkjs/remark-unwrap-images) to filter out wrapping `<p>`


### Progress

- Added support for responsive images using `next/image` component in markdown content
```jsx {5-6}
import Image from '../components/Image'
const mdComponents = {
    a: props => <AnchorTag {...props} />,
    code: CodeBlock,
    img: (props) => <div className="nextImageWrapper"><Image  {...props} /></div>,
    Image: (props) => <div className="nextImageWrapper"><Image  {...props} /></div>
}
```
  - Using [remark-unwrap-images](https://github.com/remarkjs/remark-unwrap-images) allows `img` to map to my custom `<Image />` component without triggering dom nesting warning.
  - Allows use of markdown image syntax to render default `next/image` component options using query strings to provide width and height.
```markdown
![Excalidrawn PNG](/images/excalidrawn.png?600x460)
```
  - Allows using custom `<Image />` in markdown to enable more `next/mage` component options
```markdown
<Image src="/images/excalidrawn.png" alt="Excalidrawn PNG" height="460" width="600" layout="responsive" />
```

**Pondering:** Why not auto pass all props from `<Image />` to `next/image` component enabling full options support?

Foamy NextJS Starter


I code professional web user interfaces for my day job for the past 10+ years. So when it comes to my website, I have the freedom to play with code to spark creativity. I've spun up blogs throughout my career and abandoned them. I found their concept and information design restrictive. Blogs and portfolio sites do not represent all the dimensions of who I am and my interests.

- always a work in progress which mirrors my journey in life
- inspirations and notes are like seeds.
- seeds may grow into seedlings and some may stay dormant
- inspirations and notes may grow into ideas,
- ideas may turn into experiments and potential projects
- some seedlings may blossom and some may not
- a garden is never complete and requires tending to
- a garden can have many sections interconnecting
  - a mini garden within a garden i.e. TIL notes and this sketchbook are two different gardens


Compliments well with:
- learning/making/working in public paradigm
- Indie Web principles
- sketchnoting and bullet journaling
- [maker's mindset](https://www.luminary-labs.com/insight/bringing-a-maker-mindset-to-the-future-of-work/)

Why Digital Garden Concept?


This dish is one of the staple dishes I grew up eating. I always thought it would require more effort than I was willing to do. When my sister shared pictures of her cooking, I finally ask her for the recipe. She sent me an ingredients list without measurements and instructions in five steps. The critical first step is tucked in parenthesis at the very end: "Set aside and steam sticky rice for 30 min (after washed and soak with water with a little bit of salt overnight)"

I have no experience cooking with sweet rice, and this felt like she gave me a challenge.

## Ingredients
- sweet (or glutinous) rice 
- Chinese sausages (diced)
- dried shrimp 
- shiitake mushrooms (diced)
- yellow onion (diced)
- green onion
- cilantro (optional)
- celery (diced)
- garlic (minced)
- salt
- black pepper
- oyster sauce
- avocado oil

## Untensils
- bamboo steamer
- cheese cloth
- large mixing bowl


## Cooking Instructions
1. Wash sweet rice and soak in water with a pinch of salt overnight
2. Soak dried shrimp in 1 cup of water for 30 min
3. Stir-fry garlic, yellow onion, shrimp, and shittake mushroom in avocado oil to brown
4. Add water used to soak dried shrimp in and let it simmer until you smell dried shrimp aroma
5. Add Chinese sausage, celery, and oyster sauce until cooked
6. Add salt and black pepper to taste
7. Turn off heat and set aside stir-fry
8. Line bamboo steam with cheese cloth. Spread washed sweet rice evenly and fold to cover. Steam for 30 min
9. Transfer steamed sticky rice to mixing bowl, then add stir-fry, fresh chopped green onions and cilantro. Mix well.


## My First Attempt
<Image src='/images/food/sticky-rice.jpg' alt='Chinese Sticky Rice' width='600'  height='460' />

### Ingredients Used
- 3 cups of rice
- 4 links of Chinese sausage
- 1/2 cup of dried shrimp
- 2 celery stalks
- 1.5 tbsp oyster sauce

### Take Aways
- I didn't use as much of the shrimp water. Next time, I should use 1 cup and 2 tbsp of oyster sauce to make the stir-fry a bit saucy. I thought my sticky rice came out a little bit on the dry side.
- I googled recipes after and found variations used soy sauce too. Next time try adding soy sauce to stir-fry.
- When transferring sticky rice from the bamboo steamer to the mixing bowl, I should leave the bamboo steamer on top of the boiling pan and use the cheesecloth and steam to roll the sticky rice into a large ball for transfer.

Chinese Sticky Rice Recipe

## How it started

A little history for context. I received a long strang of pothos trimming to propagate in a bottle of water. Roots developed. I wrapped the strang in a circle and planted as a whole piece. It grew slowly for about six months and it started to wither. I learned I wasn't giving it enough water or light. 

This was my attempt to salvage this plant. I trimmed the remaining sad looking nodes and tried again.

I learned it works better for Pothos by cutting the strang into individual nodes. Transplant rooted nodes need moist soil all the time. I placed it next to window with morning sun and it flourished.

<Image src='/images/plants/pothos01_1.jpg' alt='Pothos trimmings in water Feb 2020' width='460'  height='600' />
<Image src='/images/plants/pothos01_2.jpg' alt='Pothos trimmings in water Feb 2020' width='600'  height='460' />


## How it's going
<Image src='/images/plants/pothosNov2020_1.jpg' alt='Pothos #1 in my planter Nov 2020' width='600'  height='460' />
<Image src='/images/plants/pothosNov2020_2.jpg' alt='Pothos #2 in my planter Nov 2020' width='600'  height='460' />


Pothos


I completed my first [Hacktober Fest](https://hacktoberfest.digitalocean.com/) during October 2020. My pull requests for MDX-Embed qualified for Hackoctober Fest. The PR for Foam did not but I didn't need it to be. My objective was to make meaningful contributions for my learning.

## MDX-Embed
- [Github Repo](https://github.com/PaulieScanlon/mdx-embed) - [Testing Umbrella Issue](https://github.com/PaulieScanlon/mdx-embed/issues/71)
 - Unit testing using react-testing-library
 - Integration testing using cypress.io

## Foam
- [Github Repo](https://github.com/foambubble/foam)
- update docs for publishing recipes

### Other Interesting Projects to Revisit
- [Style Stage](https://stylestage.dev/)
- [MDX-Next](https://github.com/domitriusclark/mdnext)
- [Coding Fonts Microsite](https://github.com/chriscoyier/coding-fonts) by CSS-Tricks
- [Open Sauced](https://github.com/open-sauced/open-sauced)



Hacktober Fest 2020


To Watch
- [ ] [A Single Spooky Div](https://www.learnwithjason.dev/a-single-spooky-div)
- [ ] [Lynn Fisher turns a div into a masterwork](https://www.youtube.com/watch?v=-jPSLm4-2cc)

To Build
- [ ] one up mushroom



SketchBook