A collection of my overviews on various topics relevant to CS 394.
Team Tools
Most of the links on this page about about software development, but the primary focus of the course is team development. So the first link is about some simple tools for detecting possible team development issues. We use these to start discussion in coaching.
Git and Github
JavaScript
A prerequisite to good React coding is a solid understanding of modern functionally-oriented JavaScript programming.
- Hello, JavaScript! -- an introduction to programming, in JavaScript, covering what you will need to get started with React, and no more
- Intermediate JavaScript -- short introductions to important more complex concepts in JavaScript programming, including modules, asynchronous code, and Node programming
- My tips on modern JavaScript
- Modern JavaScript -- an extended tutorial and reference
- Eloquent JavaScript (4th ed) -- one of the best free online books for learning JavaScript
- MDN JavaScript -- more detailed reference
- Kent Dodd's JavaScript to know for React
TypeScript
TypeScript has become the professional version of JavaScript. The modest amount of extra time needed to define interfaces for functions and components is quickly made up in the number of dumb mistakes that are caught at edit-time rather than at run-time. Thanks to improvments in type inferencing, most TypeScript code looks just like untyped JavaScript code.
Tailwind CSS
Styling is essential for React apps to look and feel like native apps. In React, styles are typically included in component code. An increasingly popular library for doing this is Tailwind CSS. The example code on this site use Tailwind version 4, released in January 2025.
React
React is one of the baseline technologies for this course. It is very popular, very helpful for quickly building robust interactive single-page apps, and good to have on your resume.
I use the following React tutorial for my courses.
- Quick, React! -- This is a sequence of coding challenges that introduces the most critical tools you'll need, including using Firebase to handle hosting, authentication, and a cloud database.
Here are some useful React resources:
- My guide on key React concepts and common pitfalls
- A library of React and Firebase code examples
- Write clean(er) Components & JSX -- good advice on how to write more readable React
Firebase
Quite often, apps will need a central place to keep data. While you can create your own server to do this, that means you have to maintain a stable host that's easily deployed to. A regular web server, e.g., PHP, is not really appropriate since you don't want HTML pages, you want data.
The current best free option is Firebase, which provides free accounts with decent quotas, with services for hosting React pages, authentication, and data storage. For data, we mostly use the Realtime Database. It's easy to get started and works well with structured data, like users, messages, scores, and such.
Debugging React Apps
- Chrome’s DevTools -- breakpoints, DOM inspectors, etc. You'll also find similar tools in Firefox, Safari, and Edge.
- Debug Like a Lion With Chrome’s DevTools -- some really really handy tips for the Chrome console. Did you know you can trace functions in Chrome? Check out monitor. Note: doesn't work with arrow functions.
- The 2023 guide to React debugging -- a list of tools for debugging React, starting with Chrome Dev Tools
- React Developer Tools -- because your React source code has been transpiled into efficient but pretty unreadable JavaScript, you need to install this plugin to help Chrome DevTools work with React apps
- Reactime -- an optional but impressive time-traveling debugger for React; it requires a small change to your app and a Chrome plugin
Testing
As your app becomes more complex, the odds become higher that new code will break somethinng that used to work. Such breakage is called regression. Manually testing that all the functionality of your app becomes harder and harder. The answer is to automate this testing with a testing framework.
Unit testing
- My slides on unit testing
- Jest is a testing framwork that comes with React to make it easy to write and run tests
- The React Testing Library is an additional set of functions designed to help unit test React components and hooks.
- Mocking Services with Vitest -- My guide on mocking Firebase and other libraries for faster, simpler, safer unit testing
End to end testing
Cypress is an end-to-end testing framework. Where React library unit tests call React code to test what is generated, Cypress tests use a browser engine to interact with your web app running a server, just as a user does.
- My guide on setting up Cypress
- My guide on setting up Firebase emulators -- automated tests should not interact with production databases; Firebase provides emulators for their various services that can be run locally
- Cypress -- the Cypress home page
- Cypress JavaScript Tutorial: A Step-by-Step Handbook For Beginners -- a lengthy tutorial
- Given When Then -- Given-when-then is a general approach for designing tests based on intended behaviors
- Happy path testing and its counterpart
Continuous Integration
Once you have automated test suites it's worth setting up continuous integration and deployment (CI/CD) to automate the process of building, testing, and deploying an application every time the main repository is updated.