DEV Community: CJ R.

Coding Garden Recap for May / June 2023

CJ R. — Mon, 19 Jun 2023 22:37:18 +0000

Well hello there,

It's been a while since my last update. A lot has happened in the Coding Garden since then, so I'll do my best to summarize everything here. Hopefully you find something interesting you missed.

If you're new to Coding Garden, Hello! I'm CJ. I stream myself coding, teaching, talking and walking on Twitch and YouTube.

This was originally sent as a newsletter. If you'd like to receive this in your inbox, sign up here.

Discord Updates
Content Coding Stream and YouTube Videos
Auto-complete UI Series
Listd Streams
Colorado IRL Walking Streams
Amsterdam Streams
Fun Tweets
Community Time Stamp Contributions
What's next for Coding Garden?

Discord Updates

I am no longer using @everyone on discord to alert you when I go live. There is now a "Channels & Roles" section in the side bar of the server where you can choose which channels you'd like to see and self select roles which are used for go live notifications. Be sure to self select your roles if you'd like to continue getting go live notifications on Discord.

Content Coding Stream and YouTube Videos

I started off last month with the plan to stream every Monday and then break that stream down into YouTube videos. There was only 1 live stream where that successfully happened... BUT the videos that came from it were well received, and I hope to replicate this at least once this coming month.

2023-05-08 - Exploring ES2023 Array Methods, 16 Ways to Copy an Array, Deploy Express API to Vercel

The following videos were recorded during this stream:

6 NEW ES2023 Array Methods with React + TypeScript Examples

Deploy an Express API to Vercel

Solving Coding Problems as Fast as Possible

Auto-complete UI Series

This is a series where I built the same Auto-complete UI (inspired by Mewtru's interview video), with multiple front-end frameworks. My plan is to take the code I've written and the things I've learned and turn it into a YouTube video and conference talk. You can view all of the code here.

2023-05-15 - Part 1 - Building an Auto-complete UI with React, Svelte, Vue and Solid

2023-05-23 - Part 2 - Building an Auto-complete UI with SolidJS createResource, Angular and RxJS

This was a long one, but we also did some other stuff during the stream like a last dab hot sauce code kata challenge 🔥

2023-06-14 - Part 3 - Building an Auto-complete UI with Preact + Signals and Vanilla TS

I started this stream off trying to use Qwik... only to realize it seemed to require a server side process. All of the other examples we coded up were completely client side, so we skipped Qwik for now.

Listd Streams

If you haven't heard of it yet, listd is a full stack app built with SvelteKit that allows users to create, share and watch lists of YouTube channels. We've been working on it for 21 days total now. View the full playlist of listd streams and devlogs here.

The most recent run of listd streams were all about setting up e2e tests that could be run repeatedly and consistently with no side effects outside of the test containers.

2023-05-12 - listd - SvelteKit | Setting up E2E tests with Playwright and Docker | Day 17

2023-05-19 - listd - SvelteKit | Setting up E2E Test Code Coverage Reports with Instanbul | Day 18

2023-05-26 - listd - SvelteKit | Setting up Docker Container for Playwright Tests | Day 19

2023-06-09 - listd - SvelteKit | Seeding DB with Test Users and Writing E2E Tests | Day 20

Colorado IRL Walking Streams

Last month I setup a cloud based OBS server for my IRL (in real life) streams in anticipation for IRL streaming while in Amsterdam. The first few streams here in Denver where to test out the cloud server and get some walking in.

These streams are typically very chill and have much lower viewership. Sometimes there are just 1 or 2 active people in the chat, but that's okay! I've had some good conversations with a few of you while walking around. If this kind of thing interests you, be sure to tune into the next one.

2023-05-24 - IRL Walking Barnum Park in Denver Colorado

During this walk I also took a couple of breaks to answer some questions and chat about coding.

2023-05-25 - IRL Exploring Bear Creek Lake Park and Colorado Mills Mall in Lakewood Colorado

At one point while exploring the mall, we found ourselves in a book store looking at old programming books

2023-06-08 - IRL Exploring Parks along the South Platte River in Denver, Colorado

After I got back from Amsterdam, I felt like doing some walking, so I walked over 15 miles (24 km) in this one stream! I explored parks along the South Platte River Trail here in Denver.

2023-06-11 - IRL Exploring the Denver Chalk Art Festival and Downtown Denver

In this one, I explored a Chalk Art Festival. It was super cool to see such talented artists show case their skills with chalk on the street!

2023-06-18 - Exploring the Cherry Blossom Festival in Sakura Square, Denver Colorado

In this one, I explored Sakura Square in Downtown Denver, saw a Taiko drum performance, walked through the vendors and also took a train ride.

Amsterdam Streams

I was in Amsterdam for 1 week to MC the JSNation conference and Live Tweet the React Summit conference. I did a lot of walking and exploring while I was there as well.

2023-05-31 - IRL in Amsterdam and Coding Garden Meetup

This was my first attempt to IRL stream while in Amsterdam. I had just purchased a new phone to use for it but the quality and stabilization was not as good as the phone I usually use. Also, I met up with 2 twitch viewers and we played some games in the park.

2023-06-02 - Exploring the Expo Floor at React Summit in Amsterdam Netherlands | React Coding Improv

During React Summit, I took some time to IRL stream the expo floor! I was using my normal phone during this, so the quality and stabilization is much better. I also did some coding improv on the balcony.

2023-06-02 - Exploring Amsterdam Central Station, Damrak and Amsterdam Central

After React Summit was the after party... but I showed up too late to IRL stream it, so we walked around instead. We took the underground Metro (with no loss of signal!), explored Amsterdam Central Station, explored around Dam Square and caught the last ferry to Amsterdam Noord.

2023-06-03 - IRL exploring Amsterdam, Netherlands

This was my last full day in Amsterdam and I walked around a bit more.

2023-06-06 - Amsterdam Trip Recap | International Snack Tasting (Cool American Doritos)

After I got back I gave a recap of the whole trip and did some blind taste tests of international snacks vs US snacks

Fun Tweets

Community Time Stamp Contributions

If any of you find yourself with some free time while watching some of the past live streams, I'm always looking for time stamp contributions. More info on that here.

What's next for Coding Garden?

I'll keep streaming if you keep watching. I know more people are starting to go back to the office, so it can be hard to catch the streams during the work day, but if you can put my stream on in the background, that helps a ton. View my stream schedule here.

I will continue to do IRL walking streams as well. It helps me stay in shape and I've been exploring lots of new places I have not been before. Like I mentioned earlier, these IRL streams are very chill, so if you're looking to chat or for something to put on in the background while you are working or cleaning the house, I think these streams are a good fit for that.

I'm going to do my best to do more streams that can be turned into YouTube videos. These seem to get the most traction when live and are a good way for new people to find me on YouTube.

I'll also continue to Tweet when the inspiration strikes. My tweets have gained me some new followers and viewers as well.

Thanks for reading this far down. I couldn't do Coding Garden without you. Use code CGUPDATES on https://merch.coding.garden/ until June 30th for 10% off.

See you in the chat.

-CJ

Coding Garden Log - Entry 2

CJ R. — Mon, 09 Jan 2023 17:55:00 +0000

Hey there!

This post is from my weekly newsletter. Sign up here to get this in your email.

Last Week

Last week was a busy week in the Coding Garden!

New Series

I kicked of 2 new series on the YouTube channel: "A View from the Garden - Programming and Tech News" and "Daily Programmer". Both of these series are my attempt to take segments from my live stream and publish them unedited to YouTube. I know other YouTube channels would script and edit these types of videos, but I want to capture what it's like to watch me live on Twitch and I want to showcase myself working through mistakes and vocal flubs (the kinds of things that typically get edited out of YouTube videos).

The YouTube uploads have been received well and I think I'll keep these series going for a while.

Short Form Content

Last week I also published my first attempt at "short form" videos to YouTube shorts, TikTok, Instagram and Twitter! I took one of my solutions to each of the Daily Programmers and recorded myself talking through the completed code.

The shorts have also been received well, so I'll do my best to keep making them.

Channel Trailers

Last week I also recorded a new Twitch Channel Trailer and new YouTube Channel Overview.

If you have been following the channel for a while, this is nothing new, but it had been 2 years since I last updated these. I think these give a solid overview of what I do and what Coding Garden is all about.

Choosing a Full Stack Framework

Last week was the final installment in the Choosing a Full Stack Framework series. I gave SvelteKit and Nuxt a second try and aggregated my findings from all the frameworks.

Friday Project Kickoff

Last Friday, I summarized my findings from the "Choosing a Full Stack Framework" series and revealed my choice for our next "Friday" project... You'll have to watch the VOD to see what my choice was...

We also kicked off the project by picking a name, brainstorming user roles, coming up with epic user stories and setting up the initial code base for the project.

This Week

Tuesday will be a chill stream with a focus on fixing bugs and adding new features to the overlays and apps that run the Coding Garden.

Friday will be Day 2 of the project where we will be wire framing some app screens and designing the database.

Thanks for reading this far down and thanks for being a part of the Coding Garden community. Hope to see you in the chat this week! 💚

-CJ

Coding Garden Log - Entry 1

CJ R. — Mon, 02 Jan 2023 16:51:09 +0000

Happy New Year!

I hope your holidays were tolerable and possibly good.

This post is from my weekly newsletter. Sign up here to get this in your email.

Last Week

The week before last, I tried SvelteKit, Nuxt 3, Remix and React.js across several live streams. View the VODS in the playlist here and view the code on github here.

This Week

I learned a lot the week before last, and this week on Wednesday I will be summarizing my findings and ultimately choosing one of them to use for our next "Friday" project. I'll also be giving SvelteKit and Nuxt a second chance on a few things, since the libraries we were using have been updated/fixed since we tried them.

Friday we will begin working on an app that will allow users to create / share / manage lists of YouTube channels. For example, you could create a list of all your favorite cooking channels. Our idea is to have a YouTube player that will allow users to pick a human curated topic / list and start watching, versus just watching what the algorithm suggests. This will be a great way for people to discover new topics and content creators.

Today I will be discussing any recent tech news and also solving a few coding problems live for a new series called "Daily Programmer".

Thanks

Thanks for reading this. Have a wonderful week. Hope to see you in the twitch chat. 💚

-CJ

Social Links

Join the mailing list
Follow on Twitch
Subscribe on YouTube and the Archive Channel
Follow on Twitter
Join the Discord

Coding Garden Log - Entry 0

CJ R. — Mon, 19 Dec 2022 21:23:49 +0000

Hey there! I'm trying something new and will be posting my weekly email updates as a blog post as well. I may or may not continue this. Regardless, thanks for stopping by.

Last Week

Last week was a slow week for Coding Garden, but I did release an edited video on YouTube and did a live stream on Saturday trying out SvelteKit.

Edited YouTube Video

The edited video on YouTube is my first attempt at a more fast paced edit but still with a focus on the code and some chat interaction.

The video I edited was from Episode 21 in the Coding Improv Series where I build an app inspired by chat suggestions. This is a fun series that usually results in a lot of fun moments while live, but typically those moments are lost in a multi-hour VOD that most people don't have the time to watch or catch up on.

Please give it a watch if you have not yet and please share it with others if you find it interesting. The video is getting less views than usual, but it is getting more new subscribers than other videos within the same time frame, so this is my first experiment in growing my audience with more fast paced edited content rather than long form live stream content.

Saturday Stream

On Saturday, I streamed myself beginning the process of choosing a full stack framework for our next "Friday" project. Our last "Friday" project was Fresh Spots, an app that allows users to create and share lists of places to visit.

If you tuned in to the streams for the last "Friday" project, you'll know we spent a large amount of time writing our own packages from scratch, "re-inventing the wheel" and trying to figure out how to do things in a very new framework / ecosystem (we built the app with Deno and Fresh). This time, instead of just jumping in to the latest / buzz-wordiest thing, I'm trying to be a bit more methodical in the selection process.

Nuxt, SvelteKit, Remix and Next.js are all in the running.

I initially set out to try them all in one stream... but as usual I didn't get as far as I'd hoped and only got to try one - SvelteKit.

This week's streams will each be me trying a different full stack framework. Check the schedule to see when I'll be trying what, and add it to your calendar.

Choosing a Full Stack Framework

To choose a full stack framework, I am focusing on the framework "ecosystem" rather than the framework itself.

At this point, I care less if I'm using React, Svelte or Vue, and I care less about how a back-end framework does routing, data loading or hybrid rendering. I care more about an ecosystem that has a well supported UI component library, full featured auth package, full stack type safety and solid db (prisma) integration. These are things I'll be evaluating and focusing on this week.

Thanks

Thanks for reading this. I appreciate you. Have a good week. Hope to see you in the twitch chat.

-CJ

Social Links

Join the mailing list
Follow on Twitch
Subscribe on YouTube and the Archive Channel
Follow on Twitter
Join the Discord

Setting up a Mac for Development

CJ R. — Mon, 01 Aug 2022 17:54:00 +0000

I recently (July 2022) wiped and reloaded my MacBook Pro with macOS Monterey. I documented my process and the tools / apps / settings I use on a daily basis.

You can watch me talk about this setup on YouTube.

If you have other apps / tools you use, please let me know in the comments.

What Macbook do I have?
Homebrew / Terminal / Shell
- Homebrew
- Terminal
- Shell
- Install Bash and set it as the default
- Customizing Bash with .bash_profile
- Commands used by my .bash_profile
- Install the latest version of git
- Other command line tools I use
OS Productivity
- Window Management
- App Switching
- Quick Launching
Other Apps I Use Daily
OS Settings
- Finder
- Dock
Menu Bar Customization
- System Stats Widgets
- Menu Bar Calendar
Note Taking
Web Browser
- Firefox
Node.js
- Global Modules
VS Code
Break Timer

What Macbook do I have?

I am still using the 2015 Macbook Pro (yes still in 2022). This 7 year old laptop still runs great for all of my needs (development, music production, video editing and image editing).

These are the specs at a glance:

Intel "Core i7" Quad Core 2.5 GHz
16GB RAM
500GB SSD
AMD Radeon R9 M370X 2GB GPU

You can read more about it here

The apps and settings I use should work on the latest M1 and M2 MacBooks as well.

Homebrew / Terminal / Shell

Homebrew

Homebrew allows us to install tools and apps from the command line.

To install it, open up the built in Terminal app and run this command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

This will also install the xcode build tools which is needed by many other developer tools.

After Homebrew is done installing, we will use it to install everything else we need.

Terminal

The first app I install is to replace the built in Terminal.

I prefer iTerm2 because:

Nice window chrome
Lots of customization options
Clickable links
Native OS notifications

Quick aside - "window chrome" is another term for the basic structural elements used in a graphical user interface, such as window frames and scroll bars, as opposed to the content. After having a few people review this, I realize not everyone knows / uses that term 😅

There are a lot of options for a terminal replacement, but I've been using iTerm2 for years and it works great for my needs.

Checkout their documentation for more info on what iTerm2 can do: https://iterm2.com/documentation.html

We install this using a Homebrew "cask". Casks are full applications, similar to what you would install from the App store.

brew install iterm2

Once installed, launch it and customize the settings / preferences to your liking. These are my preferred settings:

Appearance
- Theme
- Minimal
Profiles
- Default
  - General -> Working Directory -> Reuse previous session's directory
  - Colors -> Basic Colors -> Foreground -> Lime Green
  - Text -> Font -> Anonymous Pro
    - You can download this font here.
    - I use this font in VS Code as well
  - Text -> Font Size -> 36
    - I use my Macbook to present / teach, so a big font size is important so everyone can see the commands I'm typing
  - Keys -> Key Mappings -> Presets -> Natural Text Editing
    - This allows me to use the keyboard shortcuts I know and love inside of iTerm2

Shell

Mac now comes with zsh as the default shell. bash is my preferred shell.

I prefer bash because every remote linux machine I log into uses bash. Also, most shell scripts you come across (.sh files) are meant to be run on sh (Bourne shell) or bash (Bourne again shell). These files might run on zsh, but there might be some compatibility issues.

If you are a beginner, you probably don't need to replace your shell with bash. If you're going to stick with zsh, checkout Oh My Zsh which gives you a bunch of customizations out of the box.

Install Bash and set it as the default

To see what shell is currently your default, run:

echo $SHELL

To install the latest version of bash:

brew install bash

Then, determine where bash got installed:

which bash

This will likely print /usr/local/bin/bash.

We now need to add this to our /etc/shells file so we can set it as our default shell.

Open up the /etc/shells file in nano (a command line text editor) with super user privileges (you will need to type your password after running this command):

sudo nano /etc/shells

Command explained:

sudo is a way of running a command with super user privileges.
nano is an easy to use command line editor. As opposed to vi or vim.
/etc/shells is the file we need to edit / update.

This will launch a command line editor. Add /usr/local/bin/bash to the file above the other list of shells.

Press CTRL+X to close the file and then Y to confirm / save the changes.

Now that /usr/local/bin/bash is in our /etc/shells file, we can set it as our default shell (you will need to enter your password for this command as well):

chsh -s /usr/local/bin/bash

Now that you've changed your shell, if you open up a new iTerm2 tab or close / re-open iTerm2, you should be presented with a bash shell!

You can run the following to confirm you shell has changed:

echo $SHELL

Customizing Bash with `.bash_profile`

I have a custom .bash_profile with all of my custom settings including a customized prompt, aliases, PATH variables, colors and more.

If you do not want to go through the process of customizing your .bash_profile, you can install Oh My Bash to get a ton of customizations out of the box.

I store my .bash_profile on github here so I can copy it over to any machine I'm setting up.

Copy this file (or create your own) in your home directory:

cd ~
curl -O https://raw.githubusercontent.com/w3cj/dotfiles/master/.bash_profile

Commands used by my .bash_profile

vcprompt - list the current branch if in a folder that is a git repo
fortune - print a random quote / story / joke / poem.
cowsay - use a cowfile to say a random fortune

brew install vcprompt
brew install fortune
brew install cowsay

Install the latest version of git

My Mac came with git version 2.32.1, we can use brew to install the latest version of git:

git --version
brew install git

Open a new tab / window to start using the latest version:

git --version

Configure git with your name / email and preferred editor:

git config --global user.name w3cj

git config --global user.email cj@null.computer

git config --global core.editor nano

Other command line tools I use

ffmpeg - edit videos from the command line
imagemagick - edit images from the command line

brew install ffmpeg
brew install imagemagick

OS Productivity

Window Management

I know this feature is built in to a lot of other operating systems, but it is not built in to a Mac, so we need an app for it.

I use rectangle to move and resize windows using keyboard shortcuts. I used to use spectacle, but rectangle is more regularly maintained and allows me to use all of the same keyboard shortcuts as spectacle.

I highly recommend installing this and memorizing the keyboard shortcuts. Fluid and seamless window management is key to being productive while coding.

brew install rectangle

App Switching

The built in App switcher only shows application icons, and only shows 1 icon per app regardless of how many windows you have open in that app.

I use an app switcher called AltTab. It shows full window previews, and has an option to show a preview for every open window in all applications (even minimized ones).

I replace the built-in CMD+TAB shortcut with AltTab.

brew install alt-tab

Quick Launching

The built in spotlight search is a bit slow for me and usually has web search results as the default instead of apps or folders on my machine.

I use Alfred to launch apps / folders. There are features locked behind the paid powerpack, but I purchased a lifetime license a few years ago, and Alfred keeps working great for me. There are a lot of other cool things you can do with Alfred (workflows, scripting, clipboard manager etc.), but I mainly use it for launching apps and folders.

brew install alfred

Other Apps I Use Daily

firefox-developer-edition - Preferred web browser
appcleaner - When removing an app, will search your file system for related files / settings that should be removed as well
android-file-transfer - Transfer files to / from my android phone
android-platform-tools - Installs adb without the need for the full android studio.
keepingyouawake - Prevents my Mac from going to sleep when I'm presenting / live streaming
discord - Messaging / Community
vlc - I use VLC to watch videos instead of the built in QuickTime.
keka - Can extract 7z / rar and other types of archives
kap - Screen recorder / gif maker
time-out - Break timer
gimp - Image editor
inkscape - Vector editor
visual-studio-code - Code Editor
sublime-text - Note taking (I know there are better apps...)
insomnia - HTTP / REST / GraphQL tester / requester

You can install them in one go by placing them all into a text file and then running brew install:

firefox-developer-edition
appcleaner
android-file-transfer
android-platform-tools
keepingyouawake
discord
slack
vlc
keka
kap
time-out
gimp
inkscape
visual-studio-code
sublime-text
insomnia

xargs brew install < apps.txt

OS Settings

These are my preferred settings for Finder and the Dock.

Finder

Finder -> Preferences
- General -> Show these on the desktop -> Select None
  - I try to keep my desktop completely clean.
- General -> New Finder windows show -> Home Folder
  - I prefer to see my home folder in each new finder window instead of recent documents
- Advanced -> Show all filename extensions -> Yes
- Advanced -> Show warning before changing an extension -> No
- Advanced -> When performing a search -> Search the current folder
View
- Show Status Bar
- Show Path Bar
- Show Tab Bar

Dock

I don't use the Dock at all. It takes up screen space, and I can use Alfred to launch apps and AltTab to switch between apps. I make the dock as small as possible and auto hide it.

System Preferences
- Dock & Menu Bar
  - Size -> Small as possible
  - Position on screen -> Right
  - Automatically hide and show the Dock -> Yes

Menu Bar Customization

System Stats Widgets

I like to see my network traffic, CPU temp / usage and RAM usage at a glance.

I used to use iStat Menus, but a few people in my twitch chat pointed me to stats, a FOSS menu bar stats app. I tried it out, and I like it so far.

In each widget, a key setting to look for is under "widget settings", choose "merge widgets into one".

brew install stats

Menu Bar Calendar

I like to have a calendar in the menu bar that I can quickly look at. stats does not include one, so I found itsycal. It seems fine for my needs.

brew install itsycal

itsycal shows the date, so I hide the date in the system menu bar widget:

System Preferences
- Dock & Menu Bar
  - Clock
    - Show Date -> Never
    - Show Day of Week -> No

Note Taking

There are likely a million other better options, but I have used Sublime Text as a note taking app for years now. I essentially use it as a staging area before moving my notes into a more permanent place (Google Docs, Google Keep, Trello, actual code project READMES etc.) or I delete the note (close the tab) after it has served its purpose.

I use sublime because it allows me to open new tabs / files without the need to save a given file. I can have several tabs / staging areas open and then completely close sublime. When I open it back up, all of my tabs are still there.

Web Browser

Firefox

I use Firefox because it is open source and comes from the Mozilla Foundation, a non profit company that respects my privacy.

I use the following extensions to protect my privacy while browsing the web:

Adblocker - uBlock Origin
Tracker Blocker - Privacy Badger
- Firefox now includes tracker blocking, but I leave Privacy Badger enabled.
Cookie Autodelete
- Removes cookies from websites that are not in my whitelist whenever a tab is closed. An additional precaution to tracker blocking.
Decentraleyes
- Caches CDN links locally and intercepts requests to serve from the cache. Prevents CDNs from tracking you across websites.

Node.js

I use nvm to manage the installed versions of Node.js on my machine. This allows me to easily switch between Node.js versions depending on the project I'm working in.

See installation instructions here.

OR run this command (make sure v0.39.1 is still the latest)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

After installation you'll want to add the following to your .bash_profile / .zshrc etc.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" ## This loads nvm

Now that nvm is installed, you can install a specific version of node.js and use it:

nvm install 18
nvm use 18
node --version

Global Modules

There are a few global node modules I use a lot:

lite-server
- Auto refreshing static file server. Great for working on static apps with no build tools.
license
- Auto generate open source license files
gitignore
- Auto generate .gitignore files base on the current project type

npm install -g lite-server license gitignore

VS Code

VS Code is my preferred code editor.

You can view all of my VS Code settings / extensions here.

2 of the most notable settings are:

{
  "editor.linkedEditing": true,
  "editor.snippetSuggestions": "top",
}

editor.linkedEditing
- Automatically edit a closing tag when editing an opening tag
editor.snippetSuggestions
- Puts the most relevant auto complete options at the top

Break Timer

I use an app called Time Out.

I have it setup to show:

10 second micro break every 15 minutes
5 minute long break every 60 minutes

There is also a cross platform break timer call Stretchly. I have not used it but a lot of people have recommended it.

Conclusion

Thanks for reading this far down. Please let me know in the comments if there are other tools or apps you prefer to use. If I made a typo or missed a link, please feel free to open a pull request here.

-CJ

Coding Garden: Frequently Asked Questions

CJ R. — Tue, 04 Aug 2020 22:56:57 +0000

{💚}{🌱}{💚}

Hello friend! 👋 I'm CJ. I run a YouTube channel / twitch stream called Coding Garden with CJ. I have been live streaming myself teaching coding and building apps for about 2.5 years now, and I have been asked a lot of the same questions... frequently. This post is meant to answer most of them.

If you have not heard of my channel you can check it out here:

If you have a question that is not listed here, feel free to ask it on discord, in the twitch chat or at https://vox.coding.garden/

If you have a question that you believe should be listed here, please open an issue.

{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}

Most Asked
- What theme do you use in VSCode?
- What font do you use in VSCode?
- How do you select emojis in VSCode?
- What is that break reminder that keeps popping up?
- What keyboard do you use?
- What extension do you use to search with !npm and !mdn
- Are you looking for work? Will you build X App for me?
History of Coding Garden
- How long have you been doing this?
- How did you start live streaming?
- Where did the name Coding Garden come from?
Twitch / Stream
- Why don't you stream on YouTube anymore?
- What is your schedule?
- Do you do this fulltime?
- What are the rules of the chat?
- Why is everyone typing !drop?
- Why is the chat in slow mode?
- How is your chair (and hair) green?
- What are those LEDS on screen?
- What are cjClap POGGERS PogU OMEGALUL etc. I see in the chat?
- What are channel points / seedlings?
- How did you make those overlays / chat window?
- Will this stream be available later?
- Can I be a mod?
Personal
- Are you self taught? Do you have a computer science degree?
- How long have you been coding?
- What do you do for a living?
- What does CJ R. stand for?
- How old are you?
- Who is that dog on the getting started screen? Do you really have a Saint Bernard?
Tech Preferences
- Why don't you use VIM?
- Why do you prefer Vue.js?
- What is your preferred deployment method?
Setup / Computer
- What do you use to live stream?
- Why do you use a Mac?
- Where are those gss and gaa git shortcuts defined?
- What do you use to show all those stats in the menu bar?
- What browser do you use? What extensions do you use?
- Why do you use DuckDuckGo?
- How is your YouTube green themed?
Miscellaneous
- Do you have a video / tutorial on X?
- What chair do you use?
- Why is your CPU 170 degrees celsius?
- I'm banned in twitch chat! I did nothing wrong! What do I do?

{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}

Most Asked

What theme do you use in VSCode?

Right now, Just Black (with a few modifications).

You can get a link to my current theme (including the settings to modify it), as well as theme's I've used in the past in my settings repo:

https://github.com/CodingGarden/vscode-settings

What font do you use in VSCode?

Anonymous Pro:

https://www.marksimonson.com/fonts/view/anonymous-pro

How do you select emojis in VSCode?

This is not a VSCode plugin. This is just built in to a Mac and works anywhere:

Mac: CMD + CTRL + Space

This also works on Windows 10:

Windows: Windows Key + Period or Windows Key + Colon

What is that break reminder that keeps popping up?

It's called Time Out by Dejal. It is Mac only software.

I have it setup to show:

10 second micro break every 15 minutes
5 minute long break every 60 minutes

There is also a cross platform break timer call Stretchly. I have not used it but a lot of people have recommended it.

What keyboard do you use?

It is an inexpensive 60% mechanical keyboard from a company called E-Element. I got the black version with brown switches. I don't know much about mechanical keyboards, and I got this one just to try it out. It works well enough for me.

Affiliate link (support me) - https://amzn.to/2nFa2wo
Direct link (protect your privacy) - https://www.amazon.com/gp/product/B01M3UQX1Y/

Also checkout https://coding.garden/gear for more info on my setup.

What extension do you use to search with !npm and !mdn

This is not an extension. I have DuckDuckGo set as my default search engine, and these are called bang commands.

Some of the ones I use most often:

!npm - npm
!mdn - Mozilla Developer Network
!gh - Github
!w - Wikipedia
!g - google

Are you looking for work? Will you build X App for me?

No. I have a full time job.

History of Coding Garden

How long have you been doing this?

I have been live streaming for 2.5+ years.

My first live stream was broadcasted to YouTube on February 19th, 2018. My YouTube channel had about 300 subscribers at the time, and there were a max of 3 people in the chat.

Between February 2018 and October 2019, I did 158 live streams on YouTube only.

On October 2nd, 2019, I did my first live stream on Twitch + YouTube. I was using some open source software called docker-multistreamer to do this. At the time I was not a twitch affiliate, so I was able to cross-stream without violating any terms.

This began my slow transition from YouTube to Twitch.

Between October 2019 and April 2020, I did 100 live streams on YouTube + Twitch.

On April 27th 2020, I signed the Twitch affiliate agreement and started streaming only on Twitch.

Between April 2020 and July 2020, I did 52 live streams on Twitch only.

On July 20th 2020, I got accepted into the Twitch Partner program.

In total between February 2018 and July 2020, I have done 311 live streams.

How did you start live streaming?

I'm an educator at heart. My live streams started as a way for me to continue teaching outside of the classroom.

I taught Full Stack Web Development at a code school for 3+ years. I taught 150+ students and 6+ cohorts. That's over 700+ in person lessons, breakouts, presentations and 1 on 1s with students. During this time, I honed my teaching, mentoring and presentation skills. My live streams are very similar to how I ran and structured my in person lessons.

My students were often at many different stages of learning, so my teaching style reflected that. Instead of pre-planning all of my lessons, my lessons were planned the day of, based on where my students were and based on what they needed to learn next. This was the beginnings of my improvisational style. My lessons were often live code-alongs, and I often would need to quickly code an example from scratch to demonstrate a concept.

My early YouTube videos were actually meant for my students. I was teaching a class of 30 students with 1 assistant, and we needed a way to efficiently provide help to all of the students in a timely manner. My YouTube videos were a way for me to "clone" myself. If a student was having trouble with a topic, I could point them to a video.

I took a 3 month break from that job in early 2018, and my live streams were a way for me to continue teaching outside of the classroom. I returned to that job in mid 2018, but I continued to live stream in my spare time, and continued to grow my channel.

In terms of getting started with live streaming hardware / tech / logistics: I used to play and record music, so I already had microphones / audio recording equipment on hand. Also, before I began live streaming myself, I had started to live stream my students' project presentations, so I already had an HDMI capture card on hand. I'm also just generally knowledgeable / handy when it comes to computers / tech, so setting up live stream equipment was second nature for me.

Where did the name Coding Garden come from?

The same way I name most of my projects 😀. I searched for a domain!

The coding.garden domain was available, so I went with that. The garden theme is nice because it plays right into the idea of growing as a software developer.

Twitch / Stream

Why don't you stream on YouTube anymore?

I switched to twitch fully at the end of April 2020. I will do an exclusive live stream on YouTube occasionally, and a supporters only stream on YouTube occasionally, but my contract with twitch restricts me from cross streaming to Twitch + YouTube simultaneously.

There are several reasons I switched to twitch:

Better APIs / Integrations
Lower Latency
Stream Clips (created by anyone)
Community support
- The majority of live coders in this space are on Twitch, not YouTube
Community features like teams, raids, hosts and watch parties.
More emotes!!

What is your schedule?

View my schedule here: https://www.twitch.tv/codinggarden/schedule

Also, join the discord for updates, unplanned streams and go live notifications: https://coding.garden/discord

Do you do this fulltime?

No. Just part time. See the personal questions section for more info.

What are the rules of the chat?

All chat messages should abide by the Coding Garden code of conduct: https://cdg.sh/conduct

In summary:

Be kind.
Be mindful of your language.
Be respectful.
Be considerate.
Be open minded.

Why is everyone typing !drop?

This is the drop game! The garden of seedlings at the bottom center of my screen are all of the drops that have landed there.

You can:

Drop a seed: !drop
Drop your twitch avatar: !drop me
Drop any twitch / BTTV / FFZ emote: !drop codinggHeart
Drop an emoji: !drop 💚

This game was coded live on stream and was inspired by the PenguinDrop game created by Instafluff. More on that in the stream overlays section.

Why is the chat in slow mode?

I used to be able to respond to every single message in the chat, but this is just not possible anymore. Slow mode gives me a fighting chance 😅.

The mods (and I) adjust slow mode based on how many people are watching and how busy the chat is.

Whatever the slow mode is set to, use that time to construct a beautiful and thoughtful message instead of just spamming.

How is your chair (and hair) green?

I use a blue screen. In the early days, I used a green screen, but with the garden theme, things are often green, so I switched to a blue screen.

What are those LEDS on screen?

They are controlled by twitch chat. I built it live on stream: https://www.youtube.com/watch?v=onkzhfXJlp0

You can make the LEDs on the screen change state using "!led (8-digit binary number)". 1 is on, 0 is off.

What are cjClap POGGERS PogU OMEGALUL etc. I see in the chat?

These are Better Twitch TV or Frankerfacez emotes! You can install a browser extension that renders these types of emotes all across twitch. (I use the Frankerfacez extension which has a BTTV addon).

You can see a list of the Frankerfacez emotes enabled for my channel here.

You can see the list of BTTV emotes enabled for my channel here.

What are channel points / seedlings?

You can earn channel points (seedlings) by watching the stream. Learn more about how much you will earn here.

Seedlings can be used to redeem rewards like stretch, hydrate, focus mode, code reviews and more.

Click the icon below the twitch chat to redeem them.

How did you make those overlays / chat window?

All of my overlays were created live on stream and all of the code is open source under the MIT license! Read more about that here.

Will this stream be available later?

Yes. You can find the most recent live streams on my twitch video page.

Live streams are archived / clipped and uploaded to YouTube about 48 hours after they have happened.

Can I be a mod?

The first rule of being a mod, is you do not ask to be a mod.

All of my mods are long time viewers of the stream, have gained my trust over time and positively contribute to the streams / chat.

Personal

Are you self taught? Do you have a computer science degree?

I have a Bachelor of Science in Computer Science and a Minor in Mathematics. My university did not offer any CS specializations at the time, but I did take a few courses in Cybersecurity / Computer Forensics.

I have a highly technical education / background, but I've been self learning all my life. I started teaching myself basic programming and building websites when I was in middle school.

How long have you been coding?

Over 15 years! I started coding HTML / CSS websites as a kid. Learned Java, C, C++ in college. Wrote C# / .NET desktop applications for a while. Started learning modern web technologies in my spare time, taught JavaScript full stack web development for 3+ years, and now I work as a Chief Full Stack Engineer.

What do you do for a living?

I work full time as the Chief Full Stack Engineer at a Software Consultancy in Denver, Colorado.

What does CJ R. stand for?

Whatever you want it to stand for.

Everyone has always called me CJ. Just call me CJ.

Please don't ask about my first / last name, or share my first / last name in the chat if you do know it.

How old are you?

You don't want to know. You will either be disappointed, surprised, or it will have no effect. Either way, you really don't want to know.

I usually say I'm 75+ on stream as a joke. I'm a bit younger than that. Please don't ask about my age, or share my age in the chat if you do know it.

Who is that dog on the getting started screen? Do you really have a Saint Bernard?

I do have a dog! His name is Panzer. He is a ~4 year old Saint Bernard. He weighs about 120+ lbs. He is a very good boy, but he is afraid of the stairs, so he will not come down stairs to where I stream.

I was streaming at an undisclosed location once, and he did make an appearance.

One day I'll setup my stream upstairs and have a dog cam 🐶.

Tech Preferences

Why don't you use VIM?

Several reasons:

The days of needing to ssh into a remote computer to edit code in a terminal are long gone.
Terminal based editors make it very hard for viewers to follow what is happening, especially beginners.
I prefer to not memorize specific / custom keyboard shortcuts and instead rely on global / universal keyboard shortcuts.
I also prefer to use the intellisense / autocomplete / snippets provided by VSCode. I realize these can be setup in VIM, but this requires a lot of setup / configuration / tweaking that I do not want to do.

Why do you prefer Vue.js?

I have talked about this in depth on many different live streams.

Here are a few timestamped links that will answer your question:

What is your preferred deployment method?

It really depends. Some services I use:

Vercel formerly now.sh
- Good for static websites (hosted on a CDN)
- Serverless functions
Heroku
- Good for long running processes (think websocket connections) with easy deployment
AWS Lightsail
- Cheap VPS, requires linux system administration / setup
Surge
- Good for static websites (hosted on a CDN)

Setup / Computer

I have done a live stream where I setup my Macbook for development from scratch and answer several of the questions you see below here.

What do you use to live stream?

You can see all of the gear I use to stream here, also, checkout the diagram at the bottom of that page.

I have streamed myself setting up / talking about my equipment here. My setup these days is mostly the same, I just use a desktop gaming PC for streaming instead of a gaming laptop, and I stream at home in my basement instead of in an office space.

Why do you use a Mac?

Preface: I am not an apple "fan boy". My macbook is the only apple product I use.

I don't have an icloud account.
I don't use siri.
I have some old iPhones I use for testing occasionally, but I use an Android phone as my daily driver.

Reasons I use a mac:

Everything just works™️ on my Mac.
- I spent 6+ years in Windows IT support. I've used Windows 95, XP, Me, 7, Vista, 8 and 10. The amount of things that have gone wrong on my Windows machines is immeasurable.
- Most of my old windows laptops have become linux machines. I prefer Ubuntu because I'm used to it and it mostly just works, but I've used / installed linux distros since before point and click installers were the norm. I've spent weeks searching for working drivers and tweaking linux systems to get them working. Even today, there are quite a few proprietary video drivers still required to get things working fully.
OS X is based on FreeBSD.
- Most tools / utilities for linux are supported / work out of the box.
- I can use a native Bash shell.
I can run Xcode and build / test iOS / mac apps without the need for any 3rd party tools / services.
I do creative things outside of coding. The Adobe Suite, Abelton live / logic pro all work flawlessly on my Mac.
If I want to use Windows / Linux, I can dual boot or use a virtual machine.

Where are those `gss` and `gaa` git shortcuts defined?

Bash is my preferred shell. I have aliases setup in my .bash_profile.

You can see my .bash_profile including all of my aliases here.

What do you use to show all those stats in the menu bar?

I use a tool called iStat Menus. I have version 5.

What browser do you use? What extensions do you use?

I currently use Mozilla Firefox. The Mozilla Foundation is a great organization with a great cause.

I switched to Google Chrome for a while, but Firefox has caught up in terms of performance / features, so I'm back to Firefox.

I use the following Privacy Related Extensions. Firefox + these extensions is my preferred way of browsing the web instead of using a browser that has these features "bundled" in:

Adblocker - uBlock Origin
Tracker Blocker - Privacy Badger
- Firefox now includes tracker blocking, but I leave Privacy Badger enabled.
Cookie Autodelete
- Removes cookies from websites that are not in my whitelist whenever a tab is closed. An additional precaution to tracker blocking.
Decentraleyes
- Caches CDN links locally and intercepts requests to serve from the cache. Prevents CDNs from tracking you across websites.
HTTPS Everywhere
- This isn't needed as much these days, as most websites use HTTPS, but this prevents certain redirect / plain text attacks from occurring.

Themes / customization:

Custom CSS on websites - Stylus
Custom JavaScript on websites - Tampermonkey

Why do you use DuckDuckGo?

They respect my privacy.

They have a great way to search across other websites with bang commands.

How is your YouTube green themed?

I use an extension called Enhancer for Youtube

Miscellaneous

Do you have a video / tutorial on X?

You can search across all of my past videos / livestreams here.

You can also try searching on YouTube directly.

If you don't find anything, feel free to ask in the chat, on discord or suggest a video idea here: https://vox.coding.garden/

What chair do you use?

I use an Ikea Markus chair. They don't sell the green one anymore, but you can still get a black / grey one here.

Why is your CPU 170 degrees celsius?

It's not. The measurement displayed is in degrees fahrenheit.

I'm banned in twitch chat! I did nothing wrong! What do I do?

This seems to be an issue a lot of people have at random.

Try refreshing the page.
Log out / Log in.
Try a different browser.
Try using a different device.
Try disabling extensions.
Try a different operating system.
Try using the twitch app instead of the browser.
Try using a twitch chat client like Chatty or Chatterino.
Write your own twitch client with tmi.js...
Try all the things.

Sorry this is happening. If none of these things work, contact twitch support: https://help.twitch.tv/s/contactsupport

{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}{🌱}{💚}

That's it that's all. Thank you for reading this far down! If you have a question that is not listed here, feel free to ask it on discord, in the twitch chat or at https://vox.coding.garden/

DEV Community: CJ R.

Coding Garden Recap for May / June 2023

Discord Updates

Content Coding Stream and YouTube Videos

Auto-complete UI Series

Listd Streams

Colorado IRL Walking Streams

Amsterdam Streams

Fun Tweets

Community Time Stamp Contributions

What's next for Coding Garden?

Coding Garden Log - Entry 2

Last Week

New Series

Short Form Content

Channel Trailers

Choosing a Full Stack Framework

Friday Project Kickoff

This Week

Coding Garden Log - Entry 1

Last Week

This Week

Thanks

Social Links

Coding Garden Log - Entry 0

Last Week

Edited YouTube Video

Saturday Stream

Choosing a Full Stack Framework

Thanks

Social Links

Setting up a Mac for Development

What Macbook do I have?

Homebrew / Terminal / Shell

Homebrew

Terminal

Shell

Install Bash and set it as the default

Customizing Bash with .bash_profile

Commands used by my .bash_profile

Install the latest version of git

Other command line tools I use

OS Productivity

Window Management

App Switching

Quick Launching

Other Apps I Use Daily

OS Settings

Finder

Dock

Menu Bar Customization

System Stats Widgets

Menu Bar Calendar

Note Taking

Web Browser

Firefox

Node.js

Global Modules

VS Code

Break Timer

Conclusion

Coding Garden: Frequently Asked Questions

Most Asked

What theme do you use in VSCode?

What font do you use in VSCode?

How do you select emojis in VSCode?

What is that break reminder that keeps popping up?

What keyboard do you use?

What extension do you use to search with !npm and !mdn

Are you looking for work? Will you build X App for me?

History of Coding Garden

How long have you been doing this?

How did you start live streaming?

Where did the name Coding Garden come from?

Twitch / Stream

Why don't you stream on YouTube anymore?

What is your schedule?

Do you do this fulltime?

What are the rules of the chat?

Why is everyone typing !drop?

Customizing Bash with `.bash_profile`

Where are those `gss` and `gaa` git shortcuts defined?