DEV Community

CJ R.
CJ R.

Posted on

Coding Garden: Frequently Asked Questions

#livestreaming #javascript #ama #livecoding

{💚}{🌱}{💚}

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?

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.

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:

  1. Be kind.
  2. Be mindful of your language.
  3. Be respectful.
  4. Be considerate.
  5. 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:

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/

Top comments (2)

Collapse
 
gazijaw profile image
GazijaW •

Best coding streamer on the whole internet, no caps !

CJ is born to be teacher and his approach and attitude make his streams enjoyable and fun to watch. Also I would mention super cool community built around Coding Garden :)

Keep up the good work bro.

Collapse
 
thomasbnt profile image
Thomas Bnt •

Why do you use DuckDuckGo?
They respect my privacy.

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

Totally agreeed ✌

Read next

velan profile image

EchoAPI vs Bruno: A Comprehensive Comparison from Design to Testing 💡

Velan<> -

vladyusha profile image

What’s New in React 19? A Quick Guide with Code Examples

Vladyusha -

bobbyhalljr profile image

Random Image Generation and Caching in JavaScript

Bobby Hall Jr -

nixcko profile image

Cómo empezar con TypeScript usando Vite: Configuración y compilación simplificadas 🎯

Israel Morales -