100 Days of Code - Days 101-200

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

Feb 12, 2023

This is a daily record of my second iteration of 100 Days of Code. I'll also be posting on LinkedIn, and doing occasional articles.

This time I'm doing 5 days a week instead of 7. I love the structure of 100 Days of Code, but having a break to do other things keeps coding fresh. It's also makes my math brain happy, because with 5 days per week that means that this second round will be 20 weeks/5 months long. (It feels like a knitting pattern!)

This iteration I'm going deeper into each web development area, starting with UI Design and Engineering - including the nitty gritty of Figma, the fundamentals of design, and more advanced CSS including animations. Then on to reviewing and up-skilling more advanced vanilla Javascript including using APIs, with perhaps diving into some backend (maybe). The last third of the 100days will be focused on react and other javascript libraries like typescript.

As always I'm thinking about how what I'm learning impacts and interacts with accessibility. I started this record with a chart, but I think it's more readable as individual paragraphs. So I'm rewriting and publishing at the end of my second week.

Note: As this is an ongoing record, the last entry in the list may be incomplete. It's going to be updated and pushed to GitHub almost daily. (Feb 24, 2023 - Yes, I have to add active links to the urls on this page. I have limited time today. That's on my to do list for next week.)

Week 01 of 20 - February 12, 2023 - Scrimba UI Design Course

Day 101 | 2023-02-12 | Sunday | Focus: UI Design |

Main Resource: Scrimba UI Design Course https://scrimba.com/learn/designbootcamp

Completed: Full Project Refactoring up to "Initial Media Queries"

Refection: I will want to repeat this project in VSCode to really get a handle on the nav, flexbox, and grid. Maybe the best way to get flexbox and grid solid is to write articles w/ code blocks?

Day 102 | 2023-02-13 | Monday | Focus: UI Design |

Main Resource: Scrimba UI Design Course https://scrimba.com/learn/designbootcamp

Completed: Finish Full Project Refactoring: https://scrimba.com/playlist/pYLZZS6

Refection: I will want to repeat this project in VSCode to really get a handle on the nav, flexbox, and grid. Maybe the best way to get flexbox and grid solid is to write articles w/ code blocks?

Day 103 | 2023-02-14 | Tuesday | Focus: UI Design Including Figma |

Main Resource: Scrimba UI Design Course https://scrimba.com/learn/designbootcamp

Completed: Start TeaPlace Design Project. Create initial Figma mockup (mobile), start CSS code. Create initial Figma mockup (mobile), start CSS code. Was part of Scrimba Townhall at lunchtime on Discord.

Refection: There's a lot of decisions to make with design! The "brand colours" provided don't have the best contrast. Got around this by using opacity (#fff with 20% opacity) for the main background

Day 104 | 2023-02-15 | Wednesday | Focus: UI Design |

Main Resource: Scrimba UI Design Course https://scrimba.com/learn/designbootcamp

Completed: Implement mobile design in CSS. Review solution video for getting mobile nav working for TeaPlace project https://scrimba.com/playlist/pWrJxtZ

Refection: Next step is to go back over, code along, and make sure I understand why this solution works vs solution in previous section works for mobile nav

Writing Day | 2023-02-16 | Thursday | Focus: Writing (not 100daysofcode)

Coding notes from today: Tired, tea was still brewing, and typed "git commit -a" instead of "git add ." when doing a commit for the article I'm working on. I ended up needing to research how to stop a git process. Used "rm -f .git/index.lock" from https://www.javaprogramto.com/2021/11/another-git-process-seems-to-be-running-in-this-repository.html

Day 105 | 2023-02-17 | Focus: UI Design - Drop Shadows |

Main Resource: Scrimba UI Design Course https://scrimba.com/learn/designbootcamp

Completed: UI Design Drop Shadows Module https://scrimba.com/playlist/pG63yU5

Refection: I'm tired today, so took a break from the larger TeaPlace project to learn something smaller.   Best/easiest to use rbga instead of hex for drop shadows because of the last value(a). Used https://rgbacolorpicker.com/ to pick colours. Also https://shadows.brumm.af/ for layered shadows.

Week 02 of 20 - February 20, 2023

Day 106 | 2023-02-20 | Monday | Focus: UI Design |

Main Resource: Scrimba UI Design Course: https://scrimba.com/learn/designbootcamp

Completed: Gradients module up to button gradient

Refection: Even though I'm good with colours and have a design background for some reason I'm finding gradients a design challenge.

Day 107 | 2023-02-21 | Tuesday | Focus: UI Design |

Main Resource: 1) Scrimba UI Design Course: https://scrimba.com/learn/designbootcamp

Completed: Completed gradients module of UI Design course. https://scrimba.com/playlist/pDyKJfg Was part of Scrimba Townhall at lunchtime on Discord.
Also: Watched JS Documentary by Honeypot https://www.youtube.com/watch?v=8pDqJVdNa44&t=2s

Refection: Still having some issues with coming up with nice gradients, especially for light themed designs. Hmmm... something to keep thinking about. Maybe this is why I'm not into ombre colour changes in knitting?

Day 108a | 2023-02-12 | Wednesday | Focus: CSS Grid & Flexbox |

Main Resource: Kevin Powell "Learn CSS Grid the easy way" https://youtu.be/rg7Fvvl3taU and "Learn CSS Flexbox the easy way" https://youtu.be/u044iM9xsWU

Completed: This was a research and reflection day. I'm counting it as a 1/2 day so will be doing 30 minutes on Saturday.

Refection: For grid, XXXXXXX

Day 109 | 2023-02-12 | Thursday | Focus: Blog Design Tweaks & Article Debugging |

Main Resource: n/a

Completed: Debugging and fine tuning my blog's CSS for my long form article "Good vs Great Design: UX and Mobility Aids" https://gingerkiwi.blog/blog/2023-02-23-good-vs-great-design-ux-and-mobility-aids/

Refection: I'm so glad that article is done! It was chocking up the writing and dev pipeline for weeks. For LinkedIn posts that connect to my blog post articles, it's best if all the images use html tags instead of markdown format. It leads to the main image being the main one in the LinkedIn post instead of just the first image in the body of the article.

Day 110 | 2023-02-12 | Friday | Focus: CSS Grid |

Main Resource: Kevin Powell Learn CSS Grid the easy way https://www.youtube.com/watch?v=rg7Fvvl3taU&t=202s Second Resource: Kevin Powell Get started with grid WITHOUT being overwhelmed https://www.youtube.com/watch?v=8QSqwbSztnA

Completed: Watched up to 25min (media queries), took notes, rewatched sections to make sure I got things. Also, Finally introduced myself on the Dear Junior Dev discord.

Refection:

  • both display grid and display flex result in elements without collapsing margins
  • use gap instead of margins for space between elements
  • for display grid, declare
parent-element {
	display: grid;
	grid-template-columns: repeat(3 fr );
	/* this gives three columns of equal width*/
}
/* and the child elements will be put in columns*/

Also display grid means that items are not block, inline, or inline-block, they are grid elements.

  • to get a div that spans across two columns create a class like
.grid-span-2 {
	grid-column: span 2;
}

Don't use line numbers until you need to use line numbers. Keep things as simple as possible. This class " .grid-span-2" can be reused.

To be specific about where an element should start and end, the short form is:

element-name {
	grid-column: 1 / 3; /* starts on the very left, ends at the left of column 3*/
	grid-row: 2 / 5: /* starts at the top of the second row and ends at the top of the 5th row*/
}

This other way of writing the code has the same result:

element-name {
	grid-column: 1 / span 2; /* starts on the very left, spans two columns*/
	grid-row: 2 / span 3: /* starts at the top of the second row spans three rows*/
}

Week 03 of 20 - February 27, 2023

Day 111 | 2023-02-27 | Monday | Focus: UI Design - TeaPlace Project |

Main Resource: Scrimba UI Design Course: https://scrimba.com/learn/designbootcamp

Note: Apparently I didn't actually save my notes for the TeaPlace design project on Scrimba, or there was a rare glitch. So I'm starting from scratch again.

Completed: Set up TeaPlace UI design project in VS Code. Started (again) on the mobile layout. Experimented with the responsive design mode in Firefox Dev.

Refection: This is where commenting my code would have come in handy (if the notes had saved). After taking a break from this project it's a bit challenging to see where what I was doing. There's different results with font-size between shrinking the browser window and using FF Dev responsive design mode.

Day 112 | 2023-02-28 | Tuesday | Focus: UI Design and A11y |

Main Resource: Scrimba UI Design Course: https://scrimba.com/learn/designbootcamp

Completed:

  1. Retyped Andrew Clarkson's code screenshot from his LinkedIn post in a CodePenand an Obsidian .md file to make it accessible.
  2. Created a repo "Exploring CSS Layouts" to do just that - explore different options for layouts in css using some simple placeholder html. Wrote the html and started some typography in the css.

Refection:

  • It would have been easy to just tell Andrew he should fix his code screenshot. But he's doing so much for the dev community in general, and helped my career and learning specifically, that it even more easy to do something as an example for him. Teamwork! It takes a village to grow a dev!
  • I've seen so many tutorial videos and articles that use some simple dummy lorem ipsum html to illustrate concepts. It's about time that I had my own css layouts repo where I can experiment with css grid and flexbox without the temptation of designing a whole working project.

Day 113a | 2023-03-01 | Wednesday | Focus: UI Design and A11y |

Main Resource: Scrimba UI Design Course: https://scrimba.com/learn/designbootcamp

Completed:

  1. Retyped Andrew Clarkson's code screenshot from his LinkedIn post in a CodePenand an Obsidian .md file to make it accessible.
  2. Started a repo to

Refection: YYYYYY

Day 113b | 2023-03-02 | Thursday | Focus: UI Design and A11y |

Main Resource: Scrimba UI Design Course: https://scrimba.com/learn/designbootcamp

Completed:

  1. Retyped Andrew Clarkson's code screenshot from his LinkedIn post in a CodePenand an Obsidian .md file to make it accessible.
  2. Started a repo to

Refection: YYYYYY

Day 114 | 2023-03-03 | Friday | Focus: UI Design - Forms |

Main Resource: Scrimba UI Design Course: https://scrimba.com/learn/designbootcamp

Completed:

  1. Debugging the French YML front matter for today's French Fridays for Developers. As most typical with errors it was just a single punctuation error!
  2. Forms Design Challenge 1 and 2 . Styled 1st page of form for mobile, laptop, desktop/tv.

Refection: I keep forgetting to use the following for styling to put a horizontal line above a heading. How many times has this come up in this course and elsewhere on Scrimba?!

h2:before {
	content: '';
	position: absolute;
	height: 5px;
	width: 30px;
	background: #8040FF; /*a purple colour*/
	left: 0;
	top: -7px;
	border-radius: 1em;
}

To style an error field so that the error message has a solid background that slightly overlaps the bottom of the field it's attached to:

.left-col .error-field {
	border: 3px solid #FFB3B3;
}

  

.error {
	background: #FFB3B3;
	display: inline-block;
	padding: .3em .5em;
	font-size: .85em;
	font-weight: bold;
	margin-top: -.1em;
}

Other random musings for gingerkiwi.dev:

  • **I have to get around to styling the code blocks and/or embedding codepens!
  • I also have to get around to auditing and refactoring the headings and adding 'skip to main content'

Day 115 | 2023-03-04 | Saturday | CSS Theory & History |

Main Resources:

  1. On the origin of cascades - on the history of CSS by Hidde de Vries
  2. Hidde de Vries Blog Page for On the Origin of Cascades
  3. Logical Operators with CSS Variables by Ana Tudor

Completed:

  1. Watched On the Origin of Cascades by Natural Selectors (32min video)
  2. Started some notes
  3. Started reading Logical Operators with CSS Variables
  4. Wrote LinkedIn message to Hidde de Vries

Refection:

  • No wonder I really like and relate to css terminology such as parent, child, decedent, inheritance, trees, classes, selectors - they are the same as in one of my favourite university courses ever - Geology and the Concept of Darwinian Evolution at the University of Calgary!
  • "The affinities of all the beings of the same class have sometimes been represented by a great tree. I believe this simile largely speaks the truth." ~ Charles Darwin
  • Accessibility was built into the goals of css right at the beginning

Lay out must be specifiable for at least the following output media: computer screens (or windows) of vatious [sic] sizes and qualities, paper, braille paper, single-line braille reader, and speech generator.

  • https://www.w3.org/People/Bos/Stylesheets/charter.html
  • Logical Operators with CSS variables deserves at least a full day of dedicated experimenting! There's so much detail, it's interesting, and I want to work on it when I'm really rested - not doing the last bit of my 100DaysOfCode for the week.

Week 04 of 20 - March 06, 2023

Day 116 | 2023-03-06 | Monday | Focus: CSS - Layouts and Reading |

Main Resources: Kevin Powell's Learn CSS Grid the Easy Way: https://www.youtube.com/watch?v=rg7Fvvl3taU&t=202s GitHub Repo: https://github.com/kevin-powell/learn-grid-the-easy-way My Fork: https://github.com/GingerKiwi/learn-grid-the-easy-way

Additional Resource: for Gradients - found via Hackernews https://www.joshwcomeau.com/css/make-beautiful-gradients/

Completed: See repo: https://github.com/kevin-powell/learn-grid-the-easy-way
Refection: Need to go back through Josh W. Comeau's article on gradients when designing/redesigning yarnhelp.app and gingerkiwi.dev

Morning Coffee Reading:

  • For the next update for gingerkiwi.blog add this 11ty plugin to highlight code blocks syntax in markdown files published as blog pages: https://www.11ty.dev/docs/plugins/syntaxhighlight/
    • Need to read Prism.js docs and choose a syntax highlighting theme too: https://prismjs.com/#basic-usage-cdn
    • NPM pkgs for additional themes (inc Atom Dark, and Dracula): https://www.npmjs.com/package/prism-themes
    • Note: the current npm site has a great colour theme from pink to crimson to light orange: https://www.npmjs.com/ and the docs have a nice hr gradient https://docs.npmjs.com/

To add to GK blog on update:

  • It's not so relevant now because there aren't any animations, transitions, or smooth scrolling.
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	scroll-behavior: auto;
	}
		*,
		*::before,
		*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

Day 117 | 2023-03-07 | Tuesday | Exploring CSS Layouts |

Main Resources:

  1. My GitHub repo: https://github.com/GingerKiwi/Exploring-CSS-Layouts/tree/master

Completed:

  1. Going from no markup to a template I can use to see how different grid options affect layout. It's a useful tool.
  2. **Pushed to GitHub on Friday, March 10th, 2023

Refection:

Day 000 - no coding | 2023-03-08 | Wednesday | Microsoft Ability Summit |

Main Resource: https://abilitysummit.event.microsoft.com/

Completed: No code today. Attended the first couple of hours of Microsoft Ability Summit.

Refection: It's a great networking and non-technical conference. However, what I'm looking to learn now is very technical.

Day 118 | 2023-03-09 | Thursday | UI Design - Forms |

Main Resources:

  1. Scrimba UI Design Course
  2. Stephanie Eckles: Pure CSS Custom Styled Radio Buttons
  3. https://codepen.io/jdsteinbach/pen/nybXXy?editors=1100 (note tab index for #a11y)

Completed:

  1. UI Design - Forms module

Refection:

  1. I'm bookmarking today especially Stephanie Eckles' article and the css below from this scrim for #YarnHelpApp project. Forms can look great or they can be really awkward and ugly.
    1. Note: The scrim may not be viewable by the general public as it is a paid resource. It's included for my own notes and reference.
  2. Remember tab index!
  3. Also love Stephanie Eckles' design for moderncss.dev The charcoal grey background is easy on the eyes, and love the multi-colour gradient and "on click" activation of cards.
select {

	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	background:url('http://www.free-icons-download.net/images/small-down-arrow-icon-15593.png');
	background-repeat: no-repeat;
	background-size:16px 17px;
	background-position: right;
	background-origin: content-box;
}

input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-block;
	position: relative;
	border: 2px solid #C6C6C6;
	color: #666;
	top: 10px;
	height: 30px;
	width: 30px;
	border-radius: 50px;
	cursor: pointer;
	margin-right: 7px;
	outline: none;
} 

input[type="radio"]:checked::before {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	background: #8040FF;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.left-label {
	display: unset;
	font-weight: normal;
	margin-right: 2em;
}

Note: Also found this! Style Stage - a la CSSZenGarden

Day 119 | 2023-03-10 | Friday | UI Design - CSS Animations |

Main Resource: UI Animations Module for Scrimba UI Design course

Completed:

  1. Responsive Design Challenge 1
  2. Still 30 min to go today. Meeting a dev downtown. Will finish later.

Refection: