I've joined the #100DaysOfCode Challenge

Ok, so today is Sunday, September 12, 2021 @ 11:20:37 AM and I finally forked the original repo 👍

What is this challenge?

The 100 Days of Code is a coding challenge created by Alexander Kallaway to encourage people to learn new coding skills. The challenge follows one simple rule: Code for at least an hour each day for 100 consecutive days.

---

My Personal Goals:

• Make coding a habit every single day.
• Research and learn best coding practices.
• Apply what I learn every day and build and maintain and update my projects.
• Learn Vue3.

Desired Outcome:

• I have been hand-coding websites in plain HTML/CSS for over 10 years, with very little undertanding of JavaScript.
• I will have a greater working knowledge of JavaScript and its best practices.
• Use what I have learned and create more stunning interactive websites and webapps for my clients.

---

Current Status:

I am currently following several online bootcamps.

• The first one is called The Developer Bootcamp 2021 by Colt Steele. I am about 32% through the course. I expect to complete this course by the end of October. Links will be provided to working examples below in the Log.

• The second one is on https://netninja.dev/. As a refresher, I decided to take his course 'HTML & CSS Crash Course' and also 'Modern JavaScript - From Novice to Ninja'. I have received my Certificates of Completion. I understand these certificates are not truly applicable in the Real World, but I am delighted none the less.

---

LOG

---

Day:	Links:	Tech/Language Used:	Status:
1	Day 1:	JS, Vue3, TailwindCSS	ongoing
2	Day 2:	bash, git	done
3	Day 3:	CSS, JS,CodePen	done
4	Day 4:	Alacritty, tmux, vim, starship	done
5	Day 5:	Gridsome, NuxtJS	ongoing
6	Day 6:	JS, CSS	done
7	Day 7:	JS, NuxtJS	done
8	Day 8:	bash, jq, wget, curl, API	ongoing
9	Day 9:	bash, scrot, imagemagick
10	Day 10:
11	Day 11:
12	Day 12:
13	Day 13:
14	Day 14:
15	Day 15:
16	Day 16:
17	Day 17:
18	Day 18:
19	Day 19:
20	Day 20:
21	Day 21:
22	Day 22:
23	Day 23:
24	Day 24:
25	Day 25:
26	Day 26:
27	Day 27:
28	Day 28:
29	Day 29:
30	Day 30:
31	Day 31:
32	Day 32:
33	Day 33:
34	Day 34:
35	Day 35:
36	Day 36:
37	Day 37:
38	Day 38:
39	Day 39:
40	Day 40:
41	Day 41:
42	Day 42:
43	Day 43:
44	Day 44:
45	Day 45:
46	Day 46:
47	Day 47:
48	Day 48:
49	Day 49:
50	Day 50:
51	Day 51:
52	Day 52:
53	Day 53:
54	Day 54:
55	Day 55:
56	Day 56:
57	Day 57:
58	Day 58:
59	Day 59:
60	Day 60:
61	Day 61:
62	Day 62:
63	Day 63:
64	Day 64:
65	Day 65:
66	Day 66:
67	Day 67:
68	Day 68:
69	Day 69:
70	Day 70:
71	Day 71:
72	Day 72:
73	Day 73:
74	Day 74:
75	Day 75:
76	Day 76:
77	Day 77:
78	Day 78:
79	Day 79:
80	Day 80:
81	Day 81:
82	Day 82:
83	Day 83:
84	Day 84:
85	Day 85:
86	Day 86:
87	Day 87:
88	Day 88:
89	Day 89:
90	Day 90:
91	Day 91:
92	Day 92:
93	Day 93:
94	Day 94:
95	Day 95:
96	Day 96:
97	Day 97:
98	Day 98:
99	Day 99:
100	Day 100:

---

Day 1:

Saturday, September 11, 2021

Todays Progress:

• Learned about TailwindCSS and got it working in my Vue3 boilerplate.
• Started creating my own layout using TailwindCSS.
• Created my own components.

Link to Work:

• My First Tailwind + Vue3 Project, hosted on surge.sh.

What I Learned:

• I stumbled across surge.sh years ago but never had a reason to use it. Installed it and quickly & effortlessly uploaded this project. I will most likely use it in the future.
• At first I though that the utility-based methods used in TailwindCSS were cumbersome and would result in bloated HTML, but I definitely see the advantages and potential of this framework. I much prefer this to the popular Bootstrap.

⬆️ back to the top

---

Day 2:

Monday, September 13, 2021 @ 10:17:59 PM

I've been a Github user for years, but never really had any reason or desire to push any of my projects up. That changed today 😉

Todays Progress:

• Every Linux user tinkers and customizes their desktop environment. I've been using Pop!_OS 21.04 for several years now and decided it was about time I had a safe place for my dotfiles as well. Link below.
• Also decided that I should back up all the settings and extensions in VS Code. So I have a repo for that also. Link below.
• Being a Reddit user, one generally needs to share a screenshot when words can't explain well enough. I searched for the simplest way possible to take a screenshot and share in a post. I found this amazingly well written bash script that gets the job done.

Link to Work:

• My dotfiles
• My VS-Code-settings.json
• jomo/imgur-screenshot

What I Learned:

• If I should ever have to reinstall because of some fatal error, or if my laptop were stolen, or damaged beyond repair - I can rest assured that my hard work can easily be restored.

  I have not tested the reinstallation process, and hopefully I never will. But I do plan on someday doing so for peace of mind.

⬆️ back to the top

---

Day 3:

Thursday, September 16, 2021 @ 11:39:59 AM

Todays Progress:

• I wanted to make a simple Theme Switcher for a project. I did't really know enough JavaScript to make it happen, but I was able to successfully get it done. I even implemented localStorage to store the visitors choice.
• I finally registered for an account on CodePen and JsFiddle.

Link to Work:

While they are both identical, I do plan on testing other methods using :root[theme='dark'].

• CodePen My Theme Switcher
• JsFiddle My Theme Switcher

What I Learned:

• This is my first time playing with CSS Variables, localStorage, and HSL for colors.
• The MDN: Web Storge API page shows plenty of examples to get started.
• StackOverFlow is an invaluable resource!!!

⬆️ back to the top

---

Day 4:

Monday, September 27, 2021 @ 05:00:41 PM

Todays Progress:

• I have continued to code, just failed to document my progress 😢
• While browsing /r/linux I learned of a terminal emulator called Alacritty. I watched some YouTube videos talking about its features and I was impressed! Previously I had been using Tilux, and before that was Terminator for years. So I installed Alacritty and have been quite happy after tinkering around with its settings.
• While researching Alcritty, I came across the mention of tmux, which is widely used by many Linux users. So I ended up installing that. I don't know why I never used it before! It's very useful since I frequently have multiple terminal windows open. Now I can have them side by side with minimal space used.
• And thennn, I came across starship, a beautiful shell prompt, and it works nicely with my already configured zsh setup.

What I Learned:

• I spend probably around 80% of my time in the terminal. While I do use VS Code exclusively for my web development projects, I use the terminal for managing files and folders, I run git in every project, install/update/upgrade my system. I have been making more of an effort to use VIM for quick file edits and am really liking it so far. Although it would never replace my workflow in VS Code.

⬆️ back to the top

---

Day 5:

Thursday, September 30, 2021 @ 07:31:22 PM

Todays Progress:

• I'm always learning more about Vue and it's amazing features. Today I came across this article on LogRocket => Gridsome vs. Nuxt.js: Comparison and tutorial with examples.

Link to Work:

• NONE: everything was done on localhost.
• If I should publish either Blog platform, I will update the Link to Work section.

What I Learned:

• So I followed through and made two simple blogs on localhost and learned the differences between the two popular frameworks.
• By the end I was/am SOLD on NuxtJS framework, as this example already includes TailwindCSS. Plus Nuxt gave me tons more options at the beginning while setting up.
• Gridsome requires some knowledge of GraphQL, which I'm not opposed to. I will come to that later. I just really liked the out-of-the-box experience with Nuxt instead.

⬆️ back to the top

---

Day 6:

Monday, October 4, 2021 @ 06:51:57 PM

Todays Progress:

• I revisited my previous project, "My Theme Switcher" and gave it some added functionality.
• I've never seen a theme switcher that also changed the favicon. I was able to successfully implement that today.

Link to Work:

• source code
• live site
• I also shared my code and repo on dev.to, a community for developers. I'm hesitant to share it on Reddit, though.

What I Learned:

• I continue to enjoy learning about localStorage and reading/writing values to/from it.
• I learned how to combine two different functions in one onClick function.

⬆️ back to the top

---

Day 7:

Thursday, October 14, 2021 @ 01:36:35 AM

Todays Progress:

• Tons of progress this past week.
• Really taking advantage of the free tutorials on NuxtJS.
• On localhost I have created a new BLOG with Nuxt.

Link to Work:

• My New Nuxt App

What I Learned:

• Nuxt continues to prove to be the most solid framework I have looked in to.
• For now all the content is served by *.md files, but soon I will incorporate either Contentful or Strapi. I am still doing my research.

⬆️ back to the top

---

Day 8:

Sunday, October 17, 2021 @ 08:23:16 PM

Todays Progress:

• On a currently project I realized it was cumbersone and time-consuming to go to Unsplash, find a decent photo, download, copy to /images direcctory, resize, and type in the path in my HTML.

• I wanted a simpler solution.

• So I came up with a bash script that does just that.

• Link to Work:

• NOT AVAILABLE YET

What I Learned:

• Learned about jq - a command line tool for parsing json files.
• Learned how to generate a random hash using $(cat /proc/sys/kernel/random/uuid | sed 's/[-]//g' | head -c 10;echo). I'm sure there are other (better) methods but this works for me.
• My next version of this will use the API provided by https://picsum.photos/v2/list

⬆️ back to the top

---

Day 9:

Saturday, October 23, 2021 @ 06:07:36 PM

Todays Progress:

• I recently came across a default configuration in Pop OS 21.01 that I wanted to change. I asked for help on Reddit but came up empty handed.
• I decided to write my own script to complete me task and it came out working well 😃

Link to Work:

• myscrot.sh

What I Learned:

• I have used scrot and imagemagick before but never took advantage of their options.
• I run scrot to generate a screenshot of a size I needed and then create a border using imagemagick so when I share to reddit, facebook, or twitter - the screenshot stands out against their background.

⬆️ back to the top

---

This is the Log code format:

KEEP THIS HERE FOR FUTURE REFERENCE

### Day X:

Day, Month xx, 2021

**Todays Progress:**
- qwerty
- qwerty
- qwerty

**Link to Work:**
- [qwerty](URL)

**What I Learned:**
- qwerty

[⬆️ back to the top ](#log)