This is a beginner-friendly challenge where I attempt to code a basic version of the game Tic-Tac-Toe using JavaScript and the p5.js library. Code: https://thecodingtrain.com/challenges/149-tic-tac-toe

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5JngATm3c

🎥 Previous video: https://youtu.be/YNyULRrydVI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/vEetoBuHj8g?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Videos:
🔴 Livestream Archive: https://youtu.be/Y6cMTh2BODY

Related Coding Challenges:
🚂 #77 Recursion: https://youtu.be/jPsZwrV9ld0
🚂 #154 Tic Tac Toe AI with Minimax Algorithm: https://youtu.be/trKjYdBASyQ
🚂 #163 Bézier Curves: https://youtu.be/enNfb6p3j_g

Timestamps:
0:00 Welcome!
0:54 Start coding
3:50 Drawing X and O
5:00 Let's diagram this!
8:46 Randomly choose the first player at the start of round
10:18 Drawing the grid
10:58 Each player places their symbol on a random spot
15:00 Check for a winner
18:44 Checking for equality of three elements
19:50 More bugs
21:01 Final Working Version! Show the winner
22:34 Thanks for watching!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#beginners #tictactoe #games #p5js

Coding Challenge #149: Tic Tac Toe

Day 001 of coding on Handmade Hero.  See http://handmadehero.org for details.

1. Review of C on Windows
2. Command subst. subst w: c:/hmh
3. WinMain entry point
4. Navigating windows shell
5. Setting up minimal build system.
6. Windows MessageBox

Handmade Hero Day 001 - Setting Up the Windows Build

Trying to learn video processing by writing a program that edits my videos (lol).

Patreon: https://patreon.com/devoncrawford
My Editing Software (Adobe Premiere): https://goo.gl/rKx66D
Source Code for this project: https://github.com/DevonCrawford/Video-Editing-Automation

The goal is to build algorithmic building blocks that a human video editor can use in place of their manual labor. This means a partially-autonomous editing workflow, where the human can strategically use the toolkit of algorithms to achieve their desired results. This project uses the FFmpeg library to handle much of the heavy lifting of video processing and intends to build a library on top of FFmpeg without changing the FFmpeg source code. I have many ideas for future algorithms that can be implemented, so let me know if you're interested in this kind of development!

Also note, this was only three weeks of work. The code is not fully tested or documented (the source code is commented though). The random editing function is just a demo to showcase the clip and sequence functionality (cutting clips and stitching them together in a sequence). I was genuinely surprised to see how well the random function performed. I thought it was going to be awful but it wasn't that awful. I would love to use AI in this project, but I've never done AI so I figured I would get a solid base in video/image processing first.

Next Video:
Previous Video: https://youtu.be/l5VtPY7FBw4

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://devoncrawford.io
Twitter: https://twitter.com/DevonCrawford13
Snapchat: https://www.snapchat.com/add/devoncrawfordyt
Instagram: https://www.instagram.com/devoncrawford_/
Github: https://github.com/devoncrawford
Discord: https://discord.gg/sU2fur9
Patreon: https://www.patreon.com/devoncrawford

Gear
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- Video Editing Software (Premiere Pro CC): https://goo.gl/rKx66D
- All Adobe Apps (I use this plan): https://goo.gl/hrTYFS
- Keyboard (Velocifire TKL01): https://amzn.to/2AQTjJQ
- Monitors (Dell U2518D) : https://amzn.to/2AQQmco
- Webcam (Logitech C920): https://amzn.to/2Cw588c
- Desk Microphone (Blue Yeti): https://amzn.to/2FPFmzi
- DSLR (Canon T7i): https://amzn.to/2T54mpZ
- Wide Lens (Tokina 11-16mm F2.8): https://amzn.to/2MlpvcO
- The full list of gear: https://devoncrawford.io/gear

Music
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
A M A I - MINNA @ 2:59
Link: https://soundcloud.com/amaixamai/minna

EMUNE - 100% emune @ 5:45
Link: https://soundcloud.com/emune/e100

eugene cam - freeze
Link: https://soundcloud.com/eugenecam/freeze

t1e.6k - CROSS LIKE JORDAN
Link: https://soundcloud.com/yungtie/cross-like-jordan

Bearfoot - broke (n)
Link: https://soundcloud.com/bearfoott/broke-n

Writing a Program that Edits my Videos

Projects are the best way to learn JavaScript, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript while still being simple enough for people of any skill level.

In this video I will walk you through the steps it takes to build a completely modern calculator using JavaScript best practices. If you want to learn JavaScript or improve your JavaScript skill this is a must do project.

📚 Materials:

Code: https://github.com/WebDevSimplified/Vanilla-JavaScript-Calculator

🧠 Concepts Covered:
 
- How to use ES6 classes to organize code
- How to sync JavaScript code with a UI
- CSS Grid
- Flexbox
- The best way to cleanly handle user input
- How to debug complicated edge cases

🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#JavaScript #WebDevelopment #Programming

Build A Calculator With JavaScript Tutorial

Learning Backend Web Development in C# by writing my first Microservice. Github repository data is pulled into my database every 10 minutes so that we can display a near realtime software portfolio on my website. In the future we will also add more data to my database so that project pages can be automatically generated (with articles and images etc)

The goal was to build a scalable background microservices architecture, where I can easily write new services independently and then seamlessly plug them into my server on a Cron schedule. I spent most of this video reading documentation and learning ASP .NET Core, Hangfire, Microsoft Entity Framework, object mappers and how to best organize my services to easily extend them in the future. I have found a solution that works well for me, only requiring two lines of code to add a service to my scheduler. This is me learning through doing. Roughly 20 hours of coding went into this video. See below for technologies used in more detail.

Next Video: https://youtu.be/eDjGBOxuuZs
Previous Video: https://youtu.be/1-YPj5Vt0oQ

Technologies Used
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Backend: C# with ASP .NET Core
Database: MySQL
Scheduler: Hangfire open source background processing library
API: Github
Object Mapper: Microsoft Entity Framework Core (Maps MySQL into objects)
JSON Mapper: Newtonsoft (Maps Github API response into objects)
Editor: VSCode with Material Oceanic Theme

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://devoncrawford.io
Twitter: https://twitter.com/DevonCrawford13
Snapchat: https://www.snapchat.com/add/devoncrawfordyt
Instagram: https://www.instagram.com/devoncrawford_/
Github: https://github.com/devoncrawford
Discord: https://discord.gg/sU2fur9
Patreon: https://www.patreon.com/devoncrawford

Gear
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- Video Editing Software (Premiere Pro CC): https://goo.gl/rKx66D
- All Adobe Apps (I use this plan): https://goo.gl/hrTYFS
- Keyboard (Velocifire TKL01) : https://amzn.to/2AQTjJQ
- Monitors (Dell U2518D) : https://amzn.to/2AQQmco
- Webcam (Logitech C920): https://amzn.to/2Cw588c
- Desk Microphone (Blue Yeti): https://amzn.to/2FPFmzi
- DSLR (Canon T7i): https://amzn.to/2T54mpZ
- Wide Lens (Tokina 11-16mm F2.8): https://amzn.to/2MlpvcO
- Full list of gear: https://devoncrawford.io/gear

Music
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Bubbymane - Forever w/ Tony
Link: https://soundcloud.com/yungbubby/forever-w-tony

Puar - In The Rough
Link: https://soundcloud.com/puarbeats/in-the-rough

DaRu - MXTIXN X Backwood Boy - Pour Dat Phonk
Link: https://soundcloud.com/daru-4/mxtixn-x-backwood-boy-pour-dat-phonk

shao - runnin' up w/ SOUDIERE
Link: https://soundcloud.com/prodbyshao/runnin-up-ww-soudiere

Learning a new Programming Language | Developer Vlog (Backend Microservices)

Highlight: https://app.highlight.run/?promo=WEBDEVSIMPLIFIED
Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)

Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/react-note-taking-app
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
React Multiselect Video: https://youtu.be/bAJlYgeovlg


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal


#React #WDS #TypeScript

The Perfect Advanced React/TypeScript Project - Markdown Supported Note Taking With Categories

In this coding challenge, I'm implement fractal trees with recursion in p5.js. This is the first part of a series on algorithmic botany. Code: https://thecodingtrain.com/challenges/14-fractal-trees-recursive

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/xTjmYXU3q

🎥 Previous video: https://youtu.be/BV9ny785UNc?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/fcdNSZ9IzJM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🌿 Algorithmic Botany: http://algorithmicbotany.org/
📕 My NOC class on Kadenze: https://www.kadenze.com/courses/the-nature-of-code/info

Videos:
🎥 Algorithmic Botany Track: https://thecodingtrain.com/tracks/algorithmic-botany
🔴 Coding Train Live 40: https://youtu.be/MwLyeEWnMCY?t=1838s

Related Coding Challenges:
🚂 #15 Object-Oriented Fractal Trees: https://youtu.be/fcdNSZ9IzJM
🚂 #174 AppleSoft Basic Fractal Tree: https://youtu.be/UNkHditYGls

Timestamps:
0:00 Introducing today's topic
0:39 Recursion
2:51 Exit condition
3:53 Let's Code!
5:03 Branch function
10:06 Add slider
13:25 Push and pop functions
14:42 Conclusion and next steps

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#fractals #generativeart #p5js #javascript

Coding Challenge #14: Fractal Trees - Recursive

In this viewer submitted coding challenge, I attempt to code a Purple Rain Simulator in Processing. Code: https://thecodingtrain.com/challenges/4-purple-rain

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5C07OcK6A

🎥 Previous video: https://youtu.be/AaGK-fj-BAM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/biN3v3ef-Y0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

🔴 Coding Train Live 34: https://youtu.be/r8QMcI5qxQM?t=3919s

Related Coding Challenges:
🚂 #1 Starfield in Processing: https://youtu.be/17WoOqgXsRM
🚂 #27 Fireworks: https://youtu.be/CKeyIbT3vXI
🚂 #169 Pi in the Sky Game: https://youtu.be/_H9JIwWP7HQ

Timestamps:
00:00 Introduction to the challenge
00:37 Setup the sketch
01:08 Create a Drop class
02:45 Set initial values and create a Drop object
03:23 Create an array of drops
04:27 Randomize initial values
05:30 Reset raindrop location when offscreen
06:11 Few more improvements
06:56 Add gravity
08:26 Add z value for 3d illusion
11:29 Final Version!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#purplerain #processing