"I've always wanted to be able to guide others through my code and tell thestory of how it came to be."
Mark Mahoney
I am the creator ofStoryteller, a free and open source tool that helps software developers walk others through their work in guided code 'playbacks'. Playbacks replay programming sessions with a narrative that comes from the author. All that is needed to view a playback is a web browser. Viewers can get inside the author's head when they were writing code. Authors can include text, hand-drawn pictures, screenshots, and videos and link them directly to highlighted sections of code.
Viewers move through a playback by clicking on the comments on the screen. This will take them to a point in a programming session where an author has something interesting to say about the code. The playback can be viewed in 'code' mode or 'blog' mode (mobile). The code can be downloaded at any point in the playback.
Are you curious about how to view a code playback in a web browser? See all of the features in this video:
Do you want to see how to create your own playbacks? All you need isVS Code and the'storyteller' extension. Watch this video to learn how: Check out theStoryteller: Docs.NEW! I have created a site to share code playbacks with others called thePlayback Press. The Playback Press is a place where authors can share their playbacks with others. You can find all of minehere.
All code playbacks on thePlayback Press site have an AI assistant built in to them. The AI assistant can answer questions about the code in the playback. It can also generate self-grading multiple choice questions from the code. This makes the code playbacks like a smart tutor that can fill in any gaps in your knowledge and test your understanding. You can see a video of the AI features here:
I am also a computer science professor and I create collections of code playbacks instead of assigning textbooks for the courses that I teach. Here isa post with my thoughts on media used to learn about programming. You can read or share one of my free 'books' below.
An Animated Introduction to Elixir
An introduction to the functional, concurrent programming language Elixir.
- Part 1 Elixir
- 1.1 Hello Elixir!!!
- 1.2 Numbers and the Match Operator
- 1.3 Functions and More Matching
- 1.4 Modules and More Matching with SimpleMath
- 1.5 Closures
- 1.6 Ranges and the Enum Module
- 1.7 Tuples
- 1.8 Maps
- 1.9 SimpleDateFormatter Module with Maps
- 1.10 Lists, Matching, and Recursion
- 1.11 Poker Probabilities
- 1.12 Recursion in Elixir
- Part 2 Concurrency
- 2.1 Adding Tests to the Mix
- 2.2 Process Basics
- 2.3 Prime Sieve
- 2.4 Calendar with Processes
- 2.5 Poker with Processes
A Brief Introduction to Ruby
A brief introduction to the masterfully designed language Ruby.
- Chapter 1 Ruby Basics
- 1.1 Hello Ruby!!!
- 1.2 Variables and Types
- 1.3 Selection and Looping
- 1.4 Arrays
- 1.5 Hashes
- 1.6 Methods
- 1.7 Closures
- 1.8 Iterators
- 1.9 Classes in Ruby
- 1.10 Interacting Classes
- 1.11 Unit Testing in Ruby
An Animated Introduction to Clojure
Clojure is a fun and easy to use functional programming language.
- Chapter 1
- 1.1 Hello World!!!
- 1.2 Readers/evaluators and simple arithmetic
- 1.3 Dog age converter
- 1.4 Java interoperability
- 1.5 Clojure data structures
- 1.6 Efficient immutability (more with data structures)
- Chapter 2
- 2.1 Functions in Clojure
- 2.2 Fizz Buzz
- 2.3 Maps as objects
- 2.4 Reading from a file (with CS poetry)
- 2.5 Writing to a file
- Chapter 3
- 3.1 Closures
- 3.2 Interest in an account
- Chapter 4
- 4.1 Tail Recursion
- 4.2 Recursion and Fizz-Buzz
- 4.3 Recursion and Square Roots
- 4.4 Converting a String to an Integer in the Bases 2-16
- 4.5 Mortgage Scheduler
- Chapter 5
- 5.1 Lazy sequences
- 5.2 Lazy Prime Generator (Fizz Buzz part 3)
- 5.3 Poker Probabilities
- Chapter 6
- 6.1 Macros
- 6.2 Set macros
- Chapter 7
- 7.1 Threads
- 7.2 Threaded poker
- 7.3 refs and threads
- 7.4 Atoms
- 7.5 Poker with atoms
- 7.6 Thread logging with agents
- 7.7 Simpler concurrency
Database Design and SQL for Beginners
Learn what a relational database is and the basics of how to design one. Then you will learn to write queries in SQL.
- Chapter 1 Database Design and SQL
- 1.1 Database Design and Simple SQL
- 1.2 One-to-Many Relationships and More SQL
- 1.3 Many-to-Many Relationships and Even More SQL
- Chapter 2 A Beginner's Reference to SQL
- 2.1 CREATE TABLE and ALTER TABLE
- 2.2 INSERT
- 2.3 SELECT
- 2.4 FROM
- 2.5 WHERE
- 2.6 UPDATE and DELETE
- 2.7 ORDER BY
- 2.8 Aggregate Operators, GROUP BY, and HAVING
- 2.9 Nested Queries with IN and Common Table Expressions
- 2.10 UNION, INTERSECT, EXCEPT
Worked SQL Examples
Watch me write 30 more SQL queries. I show how to build them step-by-step.
- Part 1
- Q1: List every course name, section number, and professor name in chronological order for every section that has ever been offered.
- Q2: List every course name and section number for every course offered by the computer science department.
- Q3: Find the name of every professor who has ever taught CSCI111.
- Q4: List all of the professor names and their departments.
- Q5: List the names of the professors who have taught both CSCI111 and CSCI112.
- Part 2
- Q6: List the names of all of the students of professor Mark Mahoney who are greater than or equal to 21 years old.
- Q7: List the names of all of the students who are taught by a department chair.
- Q8: List all of the course names and section numbers of every course ever taught by a department chair.
- Q9: List all of the courses with the oldest student.
- Q10: List all of the courses and section numbers with the youngest average student age.
- Part 3
- Q11: List all of the course names and section numbers of courses with less than four credits.
- Q12: List all of the course names and section numbers with the smallest enrollment.
- Q13: List all of the student names who have taken more than one course with Mark Mahoney.
- Q14: List all of the student names who have taken a course with both Mark Mahoney and Eric Whendon.
- Q15: List all the course names and section numbers that had two or more students earn A's.
- Part 4
- Q16: Find the names of all the students who have taken CSCI111.
- Q17: Find the names of all professors in the computer science department who are not chairs of a department.
- Q18: Find the names of all professors who are the chair of a department.
- Q19: Find the ssn, first and last name, course name, and grade earned for all courses taken in spring 2007.
- Q20: Find the course name and section number of all the courses that have ever been offered in the fall.
- Part 5
- Q21: Find the names of all of the professors teaching in spring 2007.
- Q22: Find the names of all of the students who have received an A and a B in any course.
- Q23: Find out how many students have ever taken CSCI111.
- Q24: Find the average age of all students who ever had a course with Mark Mahoney.
- Q25: Find the names of all of the professors who have never taught a course.
- Part 6
- Q26: Find the names of all of the professors of who have taught May Jones.
- Q27: Find the names of the students who have had a course in Fall 2006 or Spring 2007.
- Q28: Find the names of the students who have taken a course from a professor who has more than one appointment to a department.
- Q29: Find the average age of students who took courses in Spring 2007.
- Q30: Find the sum of all of the credit hours offered by the computer science department in 2007
Mobile App Development with Dart and Flutter
Flutter is a mobile front-end framework for making mobile, web, and dekstop apps.
- Chapter 1 Dart
- 1.1 Hello World!!! and Flutter/Dart Install Instructions
- 1.2 Simple Types in Dart
- 1.3 Lists (Array Based Containers)
- 1.4 Maps and Sets
- 1.5 Altering the Flow of Control
- 1.6 Closures
- 1.7 Asynchronous Code in Dart
- 1.8 Classes in Dart
- Chapter 2 Flutter
- 2.1 Flutter Hello World
- 2.2 flutter create demo_app
- 2.3 ListViews
- 2.4 Laying Out Widgets
- 2.5 Navigation in Flutter
- 2.6 Forms
- 2.7 Using Packages in Flutter
- Chapter 3 Storing an App's Data
- 3.1 Storing App Data in a File
- 3.2 Storing App Data in a SQLite Database
- 3.3 Storing App Data in a Server
- 3.4 Storing App Data in the Firebase Cloud Firestore
- 3.5 Firebase Authentication
An Animated Introduction to Programming in C++
Learn to program in one of the most popular languages, C++. This is appropriate if you are brand new to programming.
- Chapter 1 Flow and Data
- 1.1 Name printer program
- 1.2 Distance formula
- 1.3 Basic types in C++
- 1.4 Number types
- 1.5 Characters and strings
- 1.6 Weekly pay calculator
- 1.7 Distance formula revisited
- 1.8 Gas Mileage
- Chapter 2 Flutter
- 2.1 Booleans
- 2.2 Even/odd calculator
- 2.3 Overtime pay with an if/else
- 2.4 Water temperature
- 2.5 Switch
- Chapter 3 Storing an App's Data
- 3.1 A simple loop
- 3.2 More loops
- 3.3 Summation
- 3.4 Nested loop
- 3.5 for loop
- 3.6 Capitalization
- 3.7 break and continue
- Chapter 4 Arrays
- 4.1 Arrays
- 4.2 Average and standard deviation of an array of values
- 4.3 Problems with arrays
- 4.4 Flipping coins
- 4.5 Multi-dimensional arrays
- Chapter 5 Functions
- 5.1 Functions
- 5.2 Value returning functions
- 5.3 Functions with parameters
- 5.4 Passing parameters by reference
- 5.5 The scope of variables
- 5.6 Prime number function
- 5.7 Passing arrays to functions
- Chapter 6 Vectors
- 6.1 vector
- 6.2 Passing a vector to a function
- 6.3 Advanced features of vectors
- 6.4 Reading from a file and storing in a vector
- 6.5 Linear search and binary search
- 6.6 Bubble sort
- 6.7 Writing to a file
- 6.8 Two dimensional vectors
- Chapter 7 Structured Data
- 7.1 Simple struct
- 7.2 Hierarchical structs
- 7.3 Vectors as members of structs
- 7.4 structs with a vector of objects
- 7.5 Calculus with structs
- Chapter 8 Pointers and Dynamic Memory
- 8.1 Simple pointers
- 8.2 Pointer to an object
- 8.3 Vectors of pointers
- 8.4 Arrays are pointers
- 8.5 Passing data to functions with pointers
- 8.6 Comparing pointers
- 8.7 Three types of variables- global, local, and dynamic
- 8.8 Dynamic variables example
- 8.9 Dangling pointers and null pointers
- 8.10 Dynamic array of students
- 8.11 Function Pointers
- Chapter 9 Classes
- 9.1 Simple class
- 9.2 A class with data members
- 9.3 A class with objects for data members
- 9.4 Common word analysis
- 9.5 Student and course registration system
- 9.6 Inheritance and polymorphism
- 9.7 Shape inheritance hierarchy
- 9.8 Inheritance and polymorphism in C++
- Chapter 10 Data Structures
- 10.1 Simple linked list
- 10.2 Simple hash table
- 10.3 More complex hash table
- 10.4 STL unordered_map
- 10.5 Binary search stree
- 10.6 Graph adjacency matrix
- Chapter 11 Functions
- 11.1 The C++ SQLite API
- 11.2 An Object Oriented Auction Program with SQLite
- 11.3 SQLite Transactions
- Chapter 12 Odds and ends
- 12.1 Odds and ends
An Animated Introduction to Programming with Python
Learn to program in one of the most popular languages, Python. This is appropriate if you are brand new to programming.
- Chapter 1 Flow of Control and Simple Data
- 1.1 Printing and 'flow'
- 1.2 Arithmetic and comparing numbers
- 1.3 Programming with Data
- 1.4 Distance Between Two Points
- 1.5 More with Strings
- 1.6 *JES* Prompting the User for Some Information
- 1.7 *JES* Showing a Picture
- 1.8 *JES* Accessing Pixels
- 1.9 *JES* Adding a Caption to a Picture
- Chapter 2 Iterating Over Data
- 2.1 Iterating Through a String
- 2.2 Lists and Iteration
- 2.3 Splitting Strings
- 2.4 Ranges
- 2.5 Reading from a File
- 2.6 Writing to a File
- 2.7 *JES* Iterating Through Pixels
- 2.8 *JES* Graying an Image
- 2.9 *JES* Copying an Image
- 2.10 *JES* Enlarging a Picture
- Chapter 3 Conditions with if and while
- 3.1 Comparisons by the Computer
- 3.2 if, if/else, and if/else if/else Statements
- 3.3 Logical Operators
- 3.4 Loops
- 3.5 *JES* Adding a Border to a Picture
- 3.6 *JES* Finding the Predominant Color in a Row
- Chapter 4 Data Containers
- 4.1 Python Lists
- 4.2 Python Dictionaries
- 4.3 Python Sets
- 4.4 *JES* Storing User Supplied Data in a Dictionary
- Chapter 5 Functions
- 5.1 A First Function
- 5.2 Function Return Values
- 5.3 Parameters
- 5.4 Scope of Variables
- 5.5 Pass by Reference or Pass by Value
- 5.6 Sorting with Functions
- 5.7 *JES* Adding Text (Again) and Saving a File Using Functions
- 5.8 *JES* Shrinking a Picture
- 5.9 *JES* Making a Movie with Moving Text
- Chapter 6 Classes
- 6.1 Classes
- 6.2 Class with Data and Methods
- 6.3 Classes that Interact with Each Other
- 6.4 Inheritance
- 6.5 *JES* Photo Resizing/Rotating Class
An Introduction to Web Development from Back to Front
Learn how to make web applications using HTML, CSS, and Javascript.
- Chapter 1 Javascript
- 1.1 Ancient Javascript
- 1.2 Modern Javascript
- 1.3 Javascript and Types
- 1.4 Closures
- 1.5 Classes in Javascript
- 1.6 Promises and async/await
- 1.7 More with async and await
- Chapter 2 The Back End- Node, Express, Sqlite, and Mongo
- 2.1 Node Modules and npm
- 2.2 Creating Your Own Modules
- 2.3 The Http Module
- 2.4 Express Basics
- 2.5 Returning JSON Data
- 2.6 Reading and writing data to a JSON file
- 2.7 Express and Sqlite
- 2.8 Express and Mongo
- Chapter 3 The Front End- HTML, CSS, Bootstrap, Javascript, Express Views, Javascript in the Browser
- 3.1 Basic HTML and CSS
- 3.2 HTML5 and More CSS
- 3.3 Bootstrap
- 3.4 Using Views in Express
- 3.5 Dynamic Javascript
- 3.6 A Very Brief Introduction to Firebase's Cloud Firestore
- Chapter 4 React
- 4.1 Basic React
- 4.2 Creating a React App with create-react-app
- 4.3 A React and Express
- 4.4 Scoreboard React App
- Chapter 5 GraphQL
- 5.1 A Traditional API
- 5.2 GraphQL Query Syntax
- 5.3 A GraphQL Server Without a Database
- 5.4 A GraphQL Server that Uses a Database
- 5.5 Accessing a GraphQL Server Using fetch() and graphql-request
- 5.6 Using React to Access a GraphQL Server
How I Built It: Word Zearch
Watch me create a word search game using Javascript, HTML, and CSS.
- Chapter 1 Building Word Zearch
- 1.1 Building a Trie Data Structure
- 1.2 Modeling Letter Frequencies
- 1.3 A Simple Web App
- 1.4 Building the Game Board
- 1.5 The Front End
OO Design Patterns with Java
Design patterns are solutions to common problems that show up over and over in software development. Learn about some of the most common object oriented design patterns.
- Chapter 1 Design Pattern Playbacks
- 1.1 **Strategy Pattern** Adjusting Grades in a Course
- 1.2 **Singleton Pattern** A Testable Random Number Class
- 1.3 **Composite Pattern** Displaying a Hierarchical File System
- 1.4 **Decorator Pattern** Logging with Decorators
- 1.5 **State Pattern** String Splitting for Search Bars
- 1.6 **Observer Pattern** Observing the Time Change
- 1.7 **Proxy Pattern** Dealing Cards from a Remote Deck
- 1.8 **Factory Pattern** Getting Help in Mac and Windows
- 1.9 **Visitor Pattern** Adding Functionality to a Hierarchy of Classes (File and Directory)
Programming with SQLite
Learn how to use the relational DBMS SQLite in Python, C/C++, and Java.
- Chapter 1 Database Design and SQL
- 1.1 Database Design and Simple SQL
- 1.2 One-to-Many Relationships and More SQL
- 1.3 Many-to-Many Relationships and Even More SQL
- Chapter 2 C/C++ API
- 2.1 The C++ SQLite API
- 2.2 An Object Oriented Auction Program
- 2.3 SQLite Transactions
- Chapter 3 Python and Flask
- 3.1 Querying a SQLite Database
- 3.2 Creating SQLite Databases
- 3.3 Flask Basics (Windows)
- 3.4 Creating an API with Flask and SQLite
- Chapter 4 Java
- 4.1 Using a SQLite Database in a Java Program
Do you want to make your own playbacks?
Storyteller is free and open source software. You can make your own playbacks and share them with others. Here is abrief demonstration of how to make playbacks.
Students consistently say that playbacks are more valuable than textbooksand videos. They use the playbacks as references when writing their own code. 88% of my students said that they would like their other CS courses to use playbacks.
"Having the blend of high-level 'what is this and what is it for' and low-level 'how do I use this' in the same resource made the playbacks an invaluable resource."
"To say they were helpful would be an understatement. They were so helpful in seeing the structure of the patterns discussed."
"The playbacks struck a very good balance between talking about a topic and showing how to do something. The blend of content involved is quite nice and very beneficial to understanding the topic at hand."
You can read my SIGCSE paper about how I use code playbacks in my teaching here:Storyteller: Guiding Students Through Code Examples. Or, you can watch a summary video of the paper here:
Playbacks aren't only for educational purposes. Employers typically want some evidence that one can write effectively about their work. Anyone can create a portfolio of code playbacks that shows how one thinks about problem solving and coding. More importantly, playbacks demonstrate how one communicates about their craft. A portfolio might be more valuable than a GitHub or LinkedIn profile.
Playbacks can also be used by professional developers to prepare others for a code review. Playbacks allow code reviewers to get inside the head of the author to see and hear what they were thinking about when writing code.
I am still trying to make code playbacks better. I would love some feedback on the medium. Can you spare a couple of minutes totake this survey? If you'd like some help using the tool or would like some more info you can reach out to me directlyhere.