100 Days of Code - Week 06: Days 126-130

Cell phone with dark screen and neon words saying eat, sleep, code, repeat

Mar 23, 2023

Summary

This is a daily record of my second iteration of 100 Days of Code. This time I'm doing 5 days a week instead of 7. This is week 06 of 20 weeks. I started early on Sunday with more work on https://yarnhelp.app. Monday I worked though the AxeCon Structuring Accessible Forms webinar and started an article "2023-03-20-accessible-forms-and-the-yarnhelp.app-project". I took Tuesday and Wednesday off coding to write two long form articles, but did take a look through, forked, and opened on my vscode another dev's react and typescript project. Thursday, I'm back finishing Wes Bos' Command Line course. I had to go back a bit because I accidentally erased the content in my .zshrc file shutting down my machine late on Tuesday. The best part of Thursday is finally getting code syntax highlighting with prism.js on this blog!

Day 126 | 2023-03-20 | Monday | Focus: Accessible Forms for the Yarn Help! project |

Main Resource: AxeCon 2023 by Deque Systems, Senior Accessibility Engineer, Rachele DiTullio did a webinar on Structuring Accessible Forms

Completed:

  1. Watched Structuring Accessible Forms and took notes
  2. Started and completed the first 3/4 of new article "Accessible Forms and the "Yarn Help!" Website and PWA Project."

Refection: See article: Accessible Forms and the "Yarn Help!" Website and PWA Project." https://gingerkiwi.blog/blog/2023-03-20-accessible-forms-and-the-yarnhelp.app-project) when it's published.

Day 000 | 2023-03-21| Tuesday | Focus: Writing Day for the Article "What Amazing Leadership Looks Like " |

What Amazing Leadership Looks Like - A Thank You to My First Ever Retail Manager "Namroo"

Day 000 | 2023-03-22 | Wednesday | Focus: Writing Day for the Article "Fifteen Podcasts for Devs to Enjoy " |

The article was a response to Andrew Clarkson's LinkedIn post asking for podcast recommendations. Fifteen Podcasts for Devs to Enjoy

Day 127 | 2023-03-23 | Thursday | Focus: Wes Bos' Command Line Course + Yarn Help! |

Main Resource: https://commandlinepoweruser.com/

Completed:

  1. Lesson 6 out of 11 "Custom ZSH Themes & Prompts".
    1. Got my terminal prompt and terminal theme customized

Day 128 | 2023-03-20 | Thursday | Focus: Wes Bos' Command Line Course + Getting Prism.js working on gingerkiwi.blog + Yarn Help! |

Main Resources:

  1. https://commandlinepoweruser.com/
  2. https://www.11ty.dev/docs/plugins/syntaxhighlight/
  3. https://prismjs.com/

Completed:

  1. Fixed my accidentally erased .zshcr file (see code below)
  2. Got code syntax highlighting working for blocks on gingerkiwi.blog

This Stack Overflow was helpful in fixing my accidentally erased (but not deleted) .zshrc file https://stackoverflow.com/questions/45112197/how-do-i-reset-and-put-the-zshrc-file-back-to-default

cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

Notes for new devs or devs new to command line:

  1. Before running the command I had to navigate to my .oh-my-zsh folder using the command line.
  2. Dot folders ( .my-folder-name ) are not available via MacOS finder. Regular folders ( my-folder-name ) are.
  3. I usually name my folders either with a Capital letter, or in ALLCAPS to help me see Folders, vs MAIN-FOLDERS, vs files.xx .

Add Code Syntax Highlighting to GingerKiwi.blog 11ty site

  1. Run
npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev
  1. Change 11ty config file

Before starting the .eleventy.js file looked like this:

const { DateTime } = require("luxon");

module.exports = function(eleventyConfig) {
	eleventyConfig.addPassthroughCopy('./src/styles.css');
	eleventyConfig.addPassthroughCopy('./src/assets');  
	
	eleventyConfig.addFilter("postDate", (dateObj) => {
		return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED);
	});
		return {
		dir: {
		input: "src",
		output: "public"
		}
	};
}

The .eleventy.js file with changes:

const { DateTime } = require("luxon");
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); // ADDED

module.exports = function(eleventyConfig) {
	eleventyConfig.addPassthroughCopy('./src/styles.css');
	eleventyConfig.addPassthroughCopy('./src/assets');
	eleventyConfig.addPlugin(syntaxHighlight);  //ADDED
	
	// eleventyConfig.addPlugin is from: https://www.11ty.dev/docs/plugins/syntaxhighlight/
	
	eleventyConfig.addFilter("postDate", (dateObj) => {
		return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED);
	});
		return {
		dir: {
		input: "src",
		output: "public"
		}
	};
}
  1. Create themes folder via
mkdir themes
  1. Select options for theme and plugins to download from https://prismjs.com/download.html
    1. This is my link with selected options
    2. Download prism javascript file to main project directory. Make sure to name it prism.js
    3. Download prism css file to /themes directory. Make sure to name it prism.css

=== Not done for the day but pushing this up to GitHub before a late lunch. I want the way better design with code syntax highlighting to be live!